/* DTC web starter — Accessible, responsive, Verdana-based */
:root{
  --brand-bg:#0b1f3a;
  --brand-accent:#e0a800;
  --brand-text:#0b1f3a;
  --ink:#1a1a1a;
  --muted:#555;
  --surface:#ffffff;
  --surface-2:#f5f7fa;
  --link:#0b5ed7;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
}
.container{width:min(1100px, 92%); margin-inline:auto}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{position:static; width:auto; height:auto; padding:.5rem 1rem; background:#ffd; display:inline-block}

.site-header{
  background:var(--surface);
  border-bottom:1px solid #e7eaf0;
  position:sticky; top:0; z-index:5;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.logo svg .logo-bg{fill:var(--brand-bg)}
.logo svg .logo-text{fill:#fff; font-size:16px; font-weight:bold}

.primary-nav ul{display:flex; gap:1rem; list-style:none; padding:0; margin:0}
.primary-nav a{display:block; padding:.5rem .75rem; text-decoration:none; color:var(--brand-text)}
.primary-nav a:hover, .primary-nav a:focus{background:var(--surface-2); border-radius:.5rem}

.nav-toggle{display:none; background:var(--brand-bg); color:#fff; border:0; padding:.5rem .75rem; border-radius:.5rem}

.hero{
  background: linear-gradient(120deg, var(--surface-2), #eef3fa);
  padding:3rem 0;
  border-bottom:1px solid #e7eaf0;
}
.hero h1{font-size:2rem; margin:.5rem 0}
.badge{display:inline-block; background:var(--brand-bg); color:#fff; padding:.25rem .55rem; border-radius:.4rem; font-size:.85rem}
.cta{display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap}
.btn{display:inline-block; border:2px solid var(--brand-bg); color:var(--brand-bg); padding:.6rem 1rem; text-decoration:none; border-radius:.6rem; font-weight:bold}
.btn.primary{background:var(--brand-bg); color:#fff; border-color:var(--brand-bg)}
.btn.accent{background:var(--brand-accent); border-color:var(--brand-accent); color:#0b1f3a}

.grid{display:grid; gap:1rem}
.grid.cards{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin:2rem 0}
.card{background:#fff; border:1px solid #e7eaf0; border-radius:.8rem; padding:1rem}
.card h3{margin-top:0}

.kpis{display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:1rem; margin:2rem 0}
.kpi{background:#fff; border:1px solid #e7eaf0; border-radius:.8rem; padding:1rem; text-align:center}

.section{padding:2rem 0}

.notice{background:#fff3cd; border:1px solid #ffe69c; padding:1rem; border-radius:.6rem}

.form{display:grid; gap:.75rem; max-width:720px}
input[type="text"], input[type="email"], textarea{width:100%; padding:.6rem .7rem; border:1px solid #cbd3df; border-radius:.6rem; font-family:inherit}
label{font-weight:bold}
.required::after{content:" *"; color:#b00020}

.site-footer{background:var(--surface-2); border-top:1px solid #e7eaf0; margin-top:2rem; padding:1rem 0}
.footer-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-links{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.small{font-size:.85rem; color:var(--muted)}

.cookie-banner{position:fixed; inset:auto 0 0 0; background:#fff; border-top:1px solid #e7eaf0; padding:.75rem 0; box-shadow:0 -6px 18px rgba(0,0,0,.06)}
.cookie-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cookie-actions button{margin-right:.5rem; padding:.5rem .75rem; border-radius:.5rem; border:1px solid #cbd3df; background:var(--surface-2)}

a{color:var(--link)}

@media (max-width: 880px){
  .nav-toggle{display:inline-block}
  .primary-nav{display:none}
  .primary-nav.open{display:block; position:absolute; right:1rem; top:3.2rem; background:#fff; border:1px solid #e7eaf0; border-radius:.6rem; padding:.5rem}
  .primary-nav ul{flex-direction:column}
}


/* Ensure img logo aligns nicely in header */
.logo img{display:block; height:42px}