/* hw-kop.css — één blauwe paginakop voor de hele site. Pakket VERKOOPPLANNER 2026-09-17.
   Geladen vanuit /_inc/nav.php, dus op elke pagina. Maakt de kop van de rekentools en vaste pagina's (fo-hero)
   en de kop van de dienstenpagina's (hero) gelijk aan de kop van de kennisbankartikelen (ka-hero):
   zelfde blauw, zelfde lettertype (Fraunces), zelfde grootte. */
.fo-hero,.hero,.ka-hero,.hwp-hero{
  background:linear-gradient(180deg,#070E24 0%,#0A1330 50%,#070E24 100%);
  color:#FAF6EE;position:relative;overflow:hidden;text-align:center;
}
.fo-hero{padding:110px 26px 64px}
.fo-hero::before,.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 0%,rgba(28,50,120,.4) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 100%,rgba(201,168,76,.1) 0%,transparent 60%);
}
.fo-hero>*,.hero>*{position:relative;z-index:2}
.fo-hero h1,.hero h1,.ka-hero h1,.hwp-hero h1{
  font-family:'Fraunces',Georgia,serif;font-weight:300;letter-spacing:-.02em;
  font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.1;color:#FAF6EE;
  font-variation-settings:"opsz" 144;
}
.fo-hero h1{max-width:24ch;margin:0 auto 20px}
.fo-hero h1 em,.hero h1 em{font-style:italic;color:#C9A84C;font-weight:300}
.fo-hero .fo-eyebrow{
  color:#C9A84C;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.24em;margin-bottom:28px;
}
.fo-hero .fo-lead{color:rgba(250,246,238,.8)}
.fo-hero .fo-lead a{color:#E4CE8F;text-decoration:underline;text-underline-offset:3px}
.fo-hero .fo-bc,.fo-hero .fo-bc a{color:rgba(250,246,238,.62)}
.fo-hero .hw-kort{color:#0D1B3E}
.fo-hero .hw-kort a{color:#0D1B3E;text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.fo-hero{padding:84px 20px 44px}}
/* overige onderdelen die in een kop voorkomen */
.fo-hero .eyebrow{color:#C9A84C}
.fo-hero .fo-updated{color:rgba(250,246,238,.66)}
.fo-hero .fo-toc a{color:#E4CE8F}
.fo-hero .hw-v-uit{color:rgba(250,246,238,.8)}
.fo-hero .fo-az a,.fo-hero .hw-melding,.fo-hero .fo-cta{color:#0D1B3E}