/* Inter Tight, variabel. Google serveert alle gewichten uit één bestand;
   vier losse gewichten downloaden zou vier keer dezelfde 44 KB zijn.
   Lokaal gehost — op de staging werd TWK Lausanne gehotlinkt vanaf
   deonlinepsycholoog.nl en door CORS geweigerd, waarna de site op een
   systeemfont terugviel. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-tight-var.woff2") format("woff2");
}

/* De Online Coach — fundering.
   Dit bestand wordt letterlijk theme/assets/css/base.css.
   Geen dark mode: het merk is licht, en de live site heeft hem niet. */

:root {
  /* Eén blauwe ramp, afgeleid van het logoblauw. Het tweede blauw dat op de
     staging rondliep (#4a90d9) is vervallen. */
  --blue-50:  #f0f6ff;
  --blue-100: #dce9f8;
  --blue:     #3586fc;   /* merkkleur: vlakken, accenten, randen */
  --blue-600: #1f6fe0;   /* knopvulling — haalt 4,76:1 met witte tekst */
  --blue-700: #1857b4;   /* links, hover, focusring — 6,86:1 op wit */

  /* Grijs is #5b6472, niet de #6b7280 van de staging. Die haalde op
     --blue-50 nog 4,45:1 en op --blue-100 zelfs 3,93:1, en zakte daarmee
     onder AA op precies de achtergronden waar de meeste tekst staat. */
  /* De footer is blauw. --blue-800 is dieper dan het logoblauw zodat een
     vlak van deze omvang rustig blijft; wit erop haalt ruim AA. */
  --blue-800: #123f80;

  --ink:     #0a0a0a;
  --muted:   #5b6472;
  --panel:   #f5f7fa;
  --line:    rgba(0, 0, 0, .08);
  --on-blue: #ffffff;
  --page:    #ffffff;

  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter:  clamp(1.25rem, 3.4vw, 3rem);
  --max:     1440px;
  /* De vaste kop is 26px padding + 57px pil + 26px = 109px hoog. Blokken die
     hun inhoud verticaal centreren moeten die ruimte vrijhouden. */
  --kop-hoogte: 109px;
  --read:    68ch;
  --pad-y:   clamp(4.5rem, 9vw, 8rem);
  --radius:  16px;
  --radius-s: 10px;
  --shadow:  1px 5px 33px 4px rgba(0, 0, 0, .05);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 300 1.125rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Een klasse met display: flex verslaat de display: none die de browser aan
   [hidden] geeft. Zonder deze regel staat het mobiele menupaneel open op
   desktop. Dit hoort bovenaan, vóór elke component. */
[hidden] { display: none !important; }

/* Chrome verbergt de inhoud van een gesloten <details> hier niet betrouwbaar:
   het antwoord van een FAQ-item bleef 197px hoog terwijl het item zelf 77px
   was, en legde zich dus over de volgende vraag heen. Hetzelfde gold voor de
   navigatiepanelen. Dit is wat de browser zelf hoort te doen. */
details:not([open]) > *:not(summary) { display: none; }

/* Typografie. De lichte koppen zijn het handelsmerk van dit merk;
   200 en 300 zijn geen toeval en mogen niet zwaarder worden. */
/* Nederlandse samenstellingen worden lang: "verzuimbegeleiding" is op een
   scherm van 320px breder dan de kolom. break-word grijpt alleen in als er
   geen ander breekpunt is, dus in normale gevallen verandert er niets. */
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
/* Regelhoogtes zijn ruimer dan die van het origineel, en dat moet ook. Het
   origineel zet de h1 op 1.0 en de h2 op 1.05, maar dat is afgestemd op TWK
   Lausanne. Inter Tight heeft een hogere regelbox: op 40px is die 49px en op
   57,6px zelfs 70px. Met 1.05 lopen opeenvolgende regels van een kop dus zeven
   tot twaalf pixels in elkaar — letterlijk over elkaar heen. */
h1 { font-size: clamp(2.75rem, 6vw, 3.6rem); font-weight: 200; letter-spacing: -.05em;  line-height: 1.1; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem);   font-weight: 300; letter-spacing: -.025em; line-height: 1.15; }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 300; letter-spacing: -.02em;  line-height: 1.25; }

p { margin: 0 0 1em; max-width: var(--read); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-700); text-underline-offset: .18em; }

/* Een alinea die direct op een kop volgt heeft ruimte nodig. Zonder deze
   regel plakt hij ertegenaan en lopen de staarten van de kop erin — dat gold
   op elke pagina waar een lede onder een h2 stond. */
:where(h1, h2, h3) + p,
:where(h1, h2, h3) + .lede,
:where(h1, h2, h3) + div > p:first-child { margin-top: 1.25rem; }

.lede { font-size: 1.25rem; color: var(--muted); }
.klein { font-size: .9375rem; line-height: 1.5; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Secties staan standaard op wit. Een grond wordt per sectie gekozen en niet
   volgens een mechanische cadans — dat liep te ver van het origineel af. In de
   praktijk: de band, de reviews en het afsluitblok krijgen er een, de rest
   blijft wit. */
.section { padding-block: var(--pad-y); }
.section--panel { background: var(--panel); }
/* Het gekleurde vlak van de dienstenpagina's. Op het origineel is dat
   #dce9f8 — dieper dan blue-50, zodat het echt als apart vlak leest en niet
   als een iets ander wit. */
.section--tint  { background: var(--blue-100); }

/* Knoppen. De vulling is --blue-600 en niet --blue: witte tekst op het
   logoblauw haalt maar 3,5:1, te weinig voor een label op 1rem. */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.6em; border: 0; border-radius: 999px;
  background: var(--blue-600); color: var(--on-blue);
  font: 500 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover  { background: var(--blue-700); }
.btn:active { background: var(--blue-700); transform: translateY(1px); }

.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: var(--panel); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.visually-hidden:focus {
  position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
  clip-path: none; padding: .75em 1.25em; background: var(--ink);
  color: var(--page); border-radius: 8px; z-index: 100;
}

/* ==========================================================================
   Voet — het logoblauw met witte tekst
   Op verzoek van Imad. Meten doet het niet mee: wit op #3586fc haalt 3,52:1
   en dat is onder de AA-eis van 4,5:1 voor tekst op leesgrootte. Het haalt
   wel de 3:1 die geldt voor grote tekst, en daarom staat de footertekst hier
   iets groter en op gewicht 400 in plaats van 300.
   Wil je het wél op AA hebben met wit: zet --footer-bg op #2a72e0 (4,58:1).
   Dat leest als hetzelfde blauw. check.js meldt dit als waarschuwing.
   ========================================================================== */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 400;
}

.footer__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 3rem) 2.5rem;
  grid-template-columns: minmax(16rem, 1.4fr) repeat(3, minmax(0, 1fr));
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
.footer__merk svg { width: 190px; height: auto; margin-bottom: 1.5rem; }
.footer__merk svg path { fill: currentColor !important; }
.footer__merk p { color: var(--on-blue); margin-bottom: 1.75rem; max-width: 30ch; }

.site-footer .btn { background: var(--page); color: var(--blue-700); }
.site-footer .btn:hover { background: var(--blue-100); }

.footer__kolom h2 {
  font-size: .8125rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-blue);
  margin-bottom: 1.1rem;
}
.footer__kolom ul { margin: 0; padding: 0; list-style: none; }
.footer__kolom li + li { margin-top: .65rem; }
.footer__kolom ul a { color: var(--on-blue); text-decoration: none; font-size: 1rem; }
.footer__kolom ul a:hover { text-decoration: underline; }

.footer__kolom address {
  font-style: normal; font-size: 1rem; line-height: 1.7;
  color: var(--on-blue);
}
/* Elke link in de footer, ook die buiten een lijst of adres staat. Zonder deze
   regel valt hij terug op de blauwe linkkleur van a, en dat is op de blauwe
   grond bijna onleesbaar. */
.site-footer p a,
.footer__kolom address a { color: var(--on-blue); text-decoration: underline; }

.footer__onder {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.footer__onder p { margin: 0; color: var(--on-blue); }
.footer__legal ul {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.footer__legal ul a { font-size: .9375rem; color: var(--on-blue); }
.footer__legal ul a:hover { color: var(--blue-100); }

.site-footer :where(a, button):focus-visible { outline-color: var(--page); }

/* De footer blijft twee kolommen, ook op een telefoon. Eén kolom maakt hem
   een lange lijst waar je doorheen moet scrollen. */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__merk { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { gap: 2rem 1.25rem; }
  .footer__kolom h2 { font-size: .75rem; }
  .footer__kolom ul a, .footer__kolom address { font-size: .9375rem; }
  .footer__onder { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* ==========================================================================
   Blokken
   Structuur volgt doc.brandium.dev; waar het origineel vlak of onaf oogt is
   het bijgewerkt. Elke afwijking staat in een comment met de reden.
   ========================================================================== */

/* --- kop: woordmerk links, pil in het midden, knop rechts ---------------- */

/* Vast en buiten de flow, zodat de blauwe banner en de hero eronderdoor
   lopen. Met sticky nam de kop ruimte in en begon de banner er pas onder — de
   kop stond dan op een witte strook die er niet hoort. */
/* Een drieluik met gelijke zijkolommen: zo staat de pil exact in het midden
   van het scherm, ongeacht hoe breed het woordmerk of de knop is. Met
   space-between schoof hij mee met de breedte van de zijkanten. */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr minmax(0, 780px) 1fr; align-items: center;
  gap: 1.5rem;
  padding: 26px clamp(1.25rem, 4vw, 3.6rem);
  pointer-events: none;
}
.site-head > .kop__cta,
.site-head > .kop__knop { justify-self: end; }
.site-head > * { pointer-events: auto; }

/* Bovenaan zweeft de kop vrij boven de pagina. Zodra je scrolt schuift er
   inhoud onderdoor en wordt hij onleesbaar; vanaf dat moment komt er een matte
   laag onder. Bewust een dunne sluier met veel blur en geen dekkend wit: boven
   de blauwe banner leest hij dan als lichtblauw en boven een witte sectie als
   wit. Een witte balk over een blauwe banner is precies wat er niet moet
   gebeuren. Alleen opacity animeert, dus het kost geen layout. */
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, .06);
  opacity: 0; transition: opacity .28s ease;
}
.site-head.is-vast::before { opacity: 1; }

/* De pil blijft altijd wit — dat is de vorm die het merk draagt. Alleen de
   eigen schaduw gaat eraf zodra er een matte laag onder de kop ligt; die zou
   anders als een vlek op de balk liggen. */
.site-head.is-vast .links-wrap { box-shadow: none; }
.site-head.is-vast .kop__knop { box-shadow: none; }

.merk { flex: 0 0 auto; display: block; line-height: 0; color: var(--ink); }
.merk svg { width: 205px; height: 24px; flex-shrink: 0; max-width: none; display: block; }

.nav-bar { flex: 0 0 auto; }

/* Maten van de live .links-wrap, gemeten op 1420px breed: 780x49, padding 5px,
   gap 30px, radius 768px. De verdeling is space-evenly en niet center: daardoor
   spreiden de items zich over de volle pil in plaats van als tros in het midden
   te staan. */
.links-wrap {
  display: flex; align-items: center; justify-content: space-evenly; gap: 30px;
  /* De breedte komt van de middenkolom van de kop, niet van de pil zelf: die
     is minmax(0, 780px). Zo houdt hij de maat van het origineel zolang er
     ruimte is, en krimpt hij als eerste als het krap wordt — in plaats van de
     knop ernaast plat te drukken. */
  width: 100%; min-height: 49px;
  margin: 0; padding: 5px;
  list-style: none;
  background: var(--page);
  border-radius: 768px;
  box-shadow: 1px 5px 33px 4px rgba(0, 0, 0, .03);
}
/* De navitems heten bewust niet .btn: die klasse is in dit systeem de blauwe
   knop, en op de staging droegen de li's toevallig dezelfde naam. */
.nav__item { border-radius: 4px; }

.nav__link {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: 14px; font-weight: 300; color: var(--ink);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav__link::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue);
  transform: scale(0); transition: transform .2s var(--ease);
}
.nav__link:hover::before,
.nav__link[aria-current]::before { transform: scale(1); }

.nav__sub { position: relative; }
.nav__sub > summary { list-style: none; }
.nav__sub > summary::-webkit-details-marker { display: none; }
.nav__sub > summary::after {
  content: ""; width: .4em; height: .4em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-.12em);
  transition: transform .2s var(--ease);
}
.nav__sub[open] > summary::after { transform: rotate(-135deg) translateY(-.12em); }


.nav__sublijst {
  position: absolute; top: calc(100% + 1.1rem); left: -1rem;
  min-width: 15rem; margin: 0; padding: .5rem;
  list-style: none; background: var(--page);
  border-radius: 14px; box-shadow: 1px 5px 33px 4px rgba(0, 0, 0, .08);
}
.nav__sublijst li a {
  display: block; padding: .6rem .85rem; border-radius: 9px;
  font-size: .9375rem; color: var(--ink); text-decoration: none;
}
.nav__sublijst li a:hover { background: var(--panel); }

/* De knop is bewust hoger dan de pil: 57px tegen 49px, gemeten op de live
   site. Die verhouding maakt de kop juist. */
.kop__cta { min-height: 57px; padding: .8em 1.6em; font-size: 15px; white-space: nowrap; }

/* --- mobiele kop en menu ------------------------------------------------- */

/* Een pil met het woord erin, net als op het origineel: "Menu" met twee
   streepjes, en zodra hij openstaat "Sluiten" met een kruis op een blauwe
   grond. Het woord wisselt met display:none en niet met opacity, zodat de
   toegankelijke naam van de knop meewisselt — een schermlezer leest anders
   allebei de woorden voor. */
.kop__knop {
  display: none;
  min-height: 49px; padding: 0 1.1rem 0 1.35rem;
  align-items: center; gap: .9rem;
  border: 0; border-radius: 999px; background: var(--page); cursor: pointer;
  color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1;
  box-shadow: 1px 5px 33px 4px rgba(0, 0, 0, .06);
  transition: background .22s ease, color .22s ease;
}
.kop__knop-woord--sluit { display: none; }
.kop__knop[aria-expanded="true"] {
  background: var(--blue-600); color: var(--on-blue); box-shadow: none;
}
.kop__knop[aria-expanded="true"] .kop__knop-woord { display: none; }
.kop__knop[aria-expanded="true"] .kop__knop-woord--sluit { display: inline; }

/* Twee streepjes die naar een kruis vouwen. Geen derde balk die moet
   verdwijnen: het origineel heeft er ook twee. */
.kop__streep {
  position: relative; display: block; width: 18px; height: 12px; flex: 0 0 auto;
}
.kop__streep::before, .kop__streep::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform .22s var(--ease);
}
.kop__streep::before { top: 2px; }
.kop__streep::after  { bottom: 2px; }
[aria-expanded="true"] .kop__streep::before { transform: translateY(4.25px) rotate(45deg); }
[aria-expanded="true"] .kop__streep::after  { transform: translateY(-4.25px) rotate(-45deg); }

/* Het paneel beslaat het scherm. De hoogte gaat op 100dvh en niet 100vh: op
   iOS is 100vh hoger dan het zichtbare deel, waardoor de onderste knop achter
   de adresbalk verdwijnt. env(safe-area-inset-bottom) houdt hem vrij van de
   home-indicator. */
.mobielmenu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  height: 100dvh;
  padding: 5.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--page);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobielmenu nav { flex: 1; }
.mobielmenu ul { margin: 0; padding: 0; list-style: none; }
.mobielmenu > nav > ul > li + li { border-top: 1px solid var(--line); }

.mobielmenu__link {
  display: flex; align-items: center; gap: 1.25rem;
  width: 100%; padding: 1.15rem .25rem;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-family: inherit;
}
.mobielmenu__naam {
  flex: 1; font-size: 1.75rem; font-weight: 300; letter-spacing: -.02em;
  line-height: 1.15;
}

.mobielmenu__groep > summary { list-style: none; }
.mobielmenu__groep > summary::-webkit-details-marker { display: none; }

/* Een plus in een lichtblauwe cirkel bij elk item dat openklapt, zoals op het
   origineel. Hij draait naar een kruis zodra de groep openstaat. */
.mobielmenu__plus {
  position: relative; flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--blue-50);
}
.mobielmenu__plus::before, .mobielmenu__plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: .875rem; height: 1.5px; margin: -.75px 0 0 -.4375rem;
  background: var(--ink);
  transition: transform .22s var(--ease);
}
.mobielmenu__plus::after { transform: rotate(90deg); }
.mobielmenu__groep[open] .mobielmenu__plus::before { transform: rotate(45deg); }
.mobielmenu__groep[open] .mobielmenu__plus::after  { transform: rotate(-45deg); }

.mobielmenu .mobielmenu__sublijst { padding: 0 0 1rem .25rem; }
.mobielmenu__sublijst li a {
  display: block; padding: .65rem 0;
  font-size: 1.0625rem; color: var(--muted); text-decoration: none;
}
.mobielmenu__sublijst li a:hover { color: var(--blue-700); }

.mobielmenu__voet {
  display: flex; flex-direction: column; gap: 1rem;
  padding-top: 1.75rem; margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.mobielmenu__voet .btn { justify-content: center; padding: 1em 1.6em; }

/* Het drieluik past tot ongeveer 1240px: woordmerk en knop vragen elk zo'n
   205px, de pil minstens 680px, en daar komen twee gaten en de marges bij.
   Daaronder gaat de navigatie naar het paneel — liever een menuknop dan een
   kop die zichzelf platdrukt. */
@media (max-width: 1240px) {
  .nav-bar, .kop__cta { display: none; }
  .kop__knop { display: inline-flex; }
  /* Met het drieluik blijven er twee kinderen over: woordmerk en knop. De knop
     belandde dan in de middenkolom en stond dus midden in het scherm. Twee
     kolommen zetten hem terug tegen de rechterrand. */
  .site-head { grid-template-columns: 1fr auto; }
}
@media (max-width: 520px) {
  .merk svg { width: 168px; height: 20px; }
  .site-head { padding: 1rem 1.25rem; }
}
/* Op de smalste schermen wordt "Sluiten" breder dan "Menu" en past het
   drieluik van woordmerk, gat en pil niet meer binnen de marges. Beide gaan
   een maat kleiner in plaats van dat het woord verdwijnt: dat woord is juist
   wat de knop van het origineel herkenbaar maakt. */
@media (max-width: 420px) {
  .merk svg { width: 140px; height: 17px; }
  .site-head { gap: .75rem; }
  .kop__knop { padding: 0 .9rem 0 1.05rem; gap: .7rem; font-size: 14px; }
}

/* --- hero: 100vh, tekst links, beeld full-bleed rechts ------------------- */

/* De ruimte boven én onder is even groot, dus het midden blijft precies waar
   het stond: op een gewoon scherm verandert er niets aan de plaatsing. Op een
   laag venster — een laptop van 1440x676 — groeit de hero in plaats van de kop
   door de eerste regel van de h1 te laten snijden. Dat gebeurde eerder wel.
   Het beeld staat absoluut en trekt zich van deze ruimte niets aan; het loopt
   dus nog steeds tot achter de kop door. */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  padding-block: var(--kop-hoogte);
  display: grid;
  grid-template-columns: minmax(0, 742fr) minmax(0, 698fr);
  align-items: center;
}
.hero__tekst {
  grid-column: 1;
  padding: 2rem clamp(1.5rem, 4vw, 3.6rem);
  max-width: 46rem;
}
/* Het origineel zet dit als één alinea van vijftien regels. Op een telefoon is
   dat een muur tekst voordat je iets anders ziet; als losse alinea's leest het
   even snel en oogt het rustiger. */
.hero__lede { margin-top: 1.5rem; max-width: 38rem; }
.hero__lede p {
  font-size: 1.0625rem; font-weight: 300; line-height: 1.55;
  color: var(--muted); margin-bottom: .9em;
}
.hero__lede p:last-child { margin-bottom: 0; }
.hero .btn { margin-top: 2.25rem; }

/* Bewust géén grid-column: een absoluut geplaatst grid-kind met een expliciete
   plaatsing krijgt zijn eigen grid-area als referentie, niet de container. Met
   grid-column: 2 werd 51.5% dus 51,5% van de rechterkolom. */
.hero__beeld { position: absolute; inset: 0 0 0 51.5%; overflow: hidden; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; }

/* Op een telefoon staat het beeld bovenaan: van rand tot rand, onder de
   zwevende kop door, met de titel erover. Zo staat het in het ontwerp, en het
   is ook de reden dat de kop vast en doorzichtig is.

   `display: contents` op de tekstkolom maakt de titel, de lede en de knop
   losse rasterkinderen van de hero. Daardoor kan alleen de titel over het
   beeld liggen terwijl de rest eronder blijft — zonder een extra element in de
   HTML, en dus ook zonder een wijziging in het WordPress-thema. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr; grid-auto-rows: auto;
    min-height: 0; padding-block: 0;
  }
  .hero__tekst { display: contents; }

  .hero__beeld {
    grid-row: 1; grid-column: 1;
    position: relative; inset: auto; margin: 0; border-radius: 0;
    height: 70vh; height: 70dvh;
  }
  .hero__beeld img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  /* Wit op een foto is alleen leesbaar met iets eronder. Het verloop loopt van
     de onderrand op en is boven de helft volledig doorzichtig, zodat het beeld
     zelf niet vertroebelt. */
  .hero__beeld::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      rgba(6, 20, 40, .74) 0%, rgba(6, 20, 40, .45) 24%, rgba(6, 20, 40, 0) 56%);
  }

  .hero h1 {
    grid-row: 1; grid-column: 1; align-self: end; z-index: 1;
    padding: 0 1.5rem 2.5rem; color: var(--on-blue);
    font-size: clamp(2rem, 8.5vw, 2.75rem);
  }
  .hero__lede {
    grid-row: 2; grid-column: 1;
    margin-top: 2.5rem; padding-inline: 1.5rem;
  }
  .hero__lede p { font-size: 1rem; }
  .hero .btn { grid-row: 3; grid-column: 1; justify-self: start; margin: 1.75rem 1.5rem 0; }
}

/* --- paginakop: de lichtblauwe band ------------------------------------- */

/* Gemeten op het origineel bij 1420px breed: het blauwe vlak is 475px hoog en
   de titel staat er verticaal gecentreerd in, op 59,64px en gewicht 200. De
   vaste kop van 109px zweeft eroverheen, dus de titel houdt vanzelf afstand.

   De titelkleur is --blue-700 en niet het logoblauw: dat haalt op deze grond
   maar 2,8:1 en zit daarmee onder de 3:1 die zelfs voor grote tekst geldt.
   Blue-700 haalt 5,47:1 en leest als hetzelfde blauw. */
.paginakop {
  min-height: clamp(19rem, 34vw, 475px);
  display: grid; place-items: center;
  padding: 7rem var(--gutter) 3rem;
  background: var(--blue-100);
  text-align: center;
}
.paginakop h1 {
  color: var(--blue-700);
  font-size: clamp(1.75rem, 4.2vw, 3.73rem);
  font-weight: 200; letter-spacing: -.03em; line-height: 1.1;
}
.paginakop h1 .accent { color: var(--ink); }

@media (max-width: 900px) {
  .paginakop { min-height: 17rem; padding-top: 8rem; }
}

/* --- tweekleurige koppen ------------------------------------------------- */
/* Het tweede deel van een kop staat in het merkblauw. Handelsmerk van dit
   merk; komt op elke pagina terug. --blue-700 en niet --blue, want dat laatste
   haalt als tekst op wit maar 3,52:1. */
.accent { color: var(--blue-700); }



/* --- sectie met de kop links en de inhoud rechts ------------------------- */

.naast {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}
.naast__kop h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.naast__kop .lede { font-size: 1rem; }
.naast__kop .btn { margin-top: 1.75rem; }
.naast__inhoud > * { margin-top: 0; }

@media (max-width: 900px) {
  .naast { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- introsectie --------------------------------------------------------- */

.intro {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.intro--zonder-beeld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.intro--zonder-beeld .intro__tekst { grid-column: 1 / -1; max-width: 46rem; }
.intro__tekst p { color: var(--muted); }
.intro__tekst .btn { margin-top: 1.75rem; }
.intro__beeld { overflow: hidden; border-radius: var(--radius); }
.intro__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Puntenlijst in twee kolommen, met het blauwe bolletje van het merk. */
.punten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.punten li {
  position: relative; padding-left: 1.35em;
  font-size: .9375rem; line-height: 1.45; color: var(--muted);
}
.punten li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .punten { grid-template-columns: 1fr; }
}

/* --- lopende band -------------------------------------------------------- */

.km-root { padding-block: clamp(3rem, 6vw, 5rem); overflow: hidden; }



.km-band {
  position: relative; padding: .35rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.km-move { display: flex; width: max-content; will-change: transform; }
.km-track {
  display: flex; align-items: center; flex-shrink: 0;
  animation: km-schuif 42s linear infinite;
}
.km-band:hover .km-track { animation-play-state: paused; }

.km-item {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: 1rem 2rem; white-space: nowrap;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 300; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink);
}
.km-check { width: 1.15rem; height: 1.15rem; flex-shrink: 0; color: var(--blue); }
.km-check svg { width: 100%; height: 100%; display: block; }
.km-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); opacity: .4; flex-shrink: 0; }

@keyframes km-schuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.km-static {
  display: none;
  max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter);
  flex-wrap: wrap; gap: .75rem 2rem;
}
.km-static .km-item { padding: .4rem 0; font-size: 1rem; }

@media (max-width: 768px) {
  .km-item { padding: .8rem 1.25rem; gap: .65rem; }
}

/* --- doelgroepen --------------------------------------------------------- */

.lb-audience { padding-block: var(--pad-y); }
.lb-audience-inner { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

.section-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300; line-height: 1.15; letter-spacing: -.025em;
  max-width: 44rem;
}

/* De twee kaarten delen hun rijen: icoon, kop, punten en de meer-link staan in
   beide kaarten op dezelfde hoogte, ook als de ene kop over twee regels breekt.
   Dat gaat met subgrid en niet met een vaste hoogte, zodat er niets kapot gaat
   als de tekst later verandert. De rijafstand staat op nul: de ruimte binnen
   een kaart komt van de marges van de onderdelen zelf. */
.audience-grid {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem; row-gap: 0;
}
/* Het origineel laat deze kaarten vlak wit met alleen een haarlijn ertussen.
   Dat oogt onaf naast de rest van de pagina; een zachte grond en een radius
   geven ze gewicht zonder van het merk af te wijken. De hoverbalk komt wél
   van het origineel en blijft. */
.audience-card {
  display: grid; grid-template-rows: subgrid; grid-row: span 4;
  position: relative; overflow: hidden;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--panel); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: background .4s ease;
}
.audience-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: .1875rem; background: var(--blue);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}
.audience-card:hover::after,
.audience-card:focus-visible::after { transform: scaleY(1); }
.audience-card:hover,
.audience-card:focus-visible { background: var(--blue-50); }
.audience-card:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -2px; }

.audience-icon { display: block; width: 2.75rem; height: 2.75rem; margin-bottom: 1.5rem; color: var(--blue); }
.audience-icon svg { width: 100%; height: 100%; display: block; }

.audience-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 300;
  letter-spacing: -.02em; max-width: 30rem; margin-bottom: 1.75rem;
}

.audience-points { display: flex; flex-direction: column; gap: .75rem; }
.audience-point {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .9375rem; color: var(--muted); line-height: 1.45;
}
.audience-point-dot {
  width: .375rem; height: .375rem; margin-top: .5em; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}

.audience-meer { display: inline-block; margin-top: 2rem; color: var(--blue-700); font-size: .9375rem; }
.audience-meer::after { content: " →"; display: inline-block; transition: transform .2s var(--ease); }
.audience-card:hover .audience-meer::after { transform: translateX(3px); }

@media (max-width: 780px) {
  /* Onder elkaar valt er niets meer uit te lijnen; dan is het weer een gewone
     kolom, met de meer-link onderaan. */
  .audience-grid { grid-template-columns: 1fr; column-gap: 1rem; row-gap: 1rem; }
  .audience-card { display: flex; flex-direction: column; grid-row: auto; }
  .audience-points { flex: 1; }
}

/* --- duo ----------------------------------------------------------------- */

.duo {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.duo__tekst p { color: var(--muted); }
.duo__tekst .plusknop { margin-top: 2.25rem; }
.duo__tekst .btn { margin-top: 2rem; }
.duo__tekst .keurmerk + .btn { margin-top: 1.75rem; }

/* --- hub: de naaf met de betrokken partijen ------------------------------ */

.hub {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.hub__kolom .lede { max-width: 42ch; }

.hub__lijst {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none;
}
.hub__rij {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.75rem 0;
}
.hub__rij + .hub__rij { border-top: 1px solid var(--line); }
.hub__icoon {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue);
}
.hub__icoon svg { width: 1.375rem; height: 1.375rem; }
.hub__tekst { display: block; }
.hub__naam { display: block; font-size: 1.125rem; margin-bottom: .35rem; }
.hub__toelichting { display: block; font-size: .9375rem; line-height: 1.6; color: var(--muted); }

.hub__figuur { margin: 0; }
.hub__figuur svg { display: block; width: 100%; height: auto; }

.hub__ring { fill: none; stroke: var(--line); stroke-width: 1; }
.hub__spaak { stroke: var(--blue); stroke-width: 1.5; }
.hub__knoop circle { fill: var(--page); stroke: var(--blue-100); stroke-width: 1.5; }
.hub__knoop text {
  fill: var(--ink); font-size: 15px; text-anchor: middle;
  font-family: inherit;
}
.hub__naaf circle { fill: var(--blue); }
/* Het merkteken en niet de naam: op deze maat leest een woord van twee regels
   toch niet, en het teken zegt hetzelfde. Het erft de kleur van de groep, dus
   wit op het blauw. */
.hub__naaf { color: var(--on-blue); }
.hub__merk path { fill: currentColor; }

/* Een stipje dat vanuit de naaf naar elke partij loopt, om de beurt. Het is
   één streepje in een streeppatroon dat precies zo lang is als de lijn zelf
   (pathLength=1), dus er is er altijd maar één te zien. Een ronde uiteinde
   maakt er een bolletje van.

   Dit loopt door, ook als de openingsanimatie al klaar is: dat was de klacht —
   je zag niet dát hij animeerde. */
.hub__puls {
  stroke: var(--blue); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: .001 .999;
  stroke-dashoffset: 1;
  opacity: 0;
}
.beweegt .hub__figuur.is-in .hub__puls {
  animation: hub-puls 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: calc(900ms + var(--i, 0) * 180ms);
}
@keyframes hub-puls {
  0%        { stroke-dashoffset: 1;   opacity: 0; }
  8%        { opacity: 1; }
  55%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* De spaken groeien vanuit het midden naar buiten en de bollen komen er
   achteraan, één voor één. Zo leest de tekening als "wij verbinden deze
   partijen" in plaats van als een plaatje dat er ineens staat.

   pathLength normaliseert elke lijn op 1, ongeacht zijn ware lengte: alle zes
   de spaken tekenen zich dan in dezelfde tijd, ook al zijn ze even lang. */
.beweegt .hub__figuur .hub__spaak {
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.beweegt .hub__figuur .hub__knoop,
.beweegt .hub__figuur .hub__naaf { opacity: 0; }
.beweegt .hub__figuur.is-in .hub__naaf {
  animation: hub-naaf .45s cubic-bezier(.22, 1, .36, 1) both;
}
.beweegt .hub__figuur.is-in .hub__spaak {
  animation: hub-spaak .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(300ms + var(--i, 0) * 90ms);
}
.beweegt .hub__figuur.is-in .hub__knoop {
  animation: hub-knoop .4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(560ms + var(--i, 0) * 90ms);
}
@keyframes hub-naaf  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hub-spaak { to { stroke-dashoffset: 0; } }
@keyframes hub-knoop { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) {
  .hub { grid-template-columns: 1fr; }
  /* De tekening eerst: hij vertelt in één oogopslag wat de lijst daarna
     uitschrijft. */
  .hub__figuur { order: -1; max-width: 26rem; margin-inline: auto; }
  .hub__knoop text { font-size: 17px; }
  .hub__naaf text { font-size: 16px; }
}

/* --- raster: genummerde cellen met haarlijnen ---------------------------- */

/* Rechts naast de tekst op /werkgevers/. De lijnen zijn de achtergrond die
   tussen de cellen doorschijnt: één gap van 1px in plaats van randen per cel,
   want randen tussen buren tellen anders dubbel. */
.duo--raster { align-items: center; }
/* Staat er geen genummerd raster naast, dan is er ook geen tweede kolom: de
   tekst loopt over de volle breedte, met een regellengte die leesbaar blijft. */
.duo--enkel { grid-template-columns: 1fr; }
.duo--enkel .duo__tekst { max-width: 46rem; }
.raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--line); border: 1px solid var(--line);
}
.raster__cel {
  display: block; padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--page);
}
.raster__nummer {
  display: block; margin-bottom: .9rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .12em;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.raster__naam { font-size: 1rem; line-height: 1.4; }

/* --- keurmerk: schildje met een regel ernaast ---------------------------- */
/* Een blok en geen inline-flex: anders gaat de knop erachteraan op dezelfde
   regel staan, en die hoort eronder. */
.keurmerk {
  display: flex; width: fit-content; align-items: center; gap: .75rem;
  margin-top: 2rem; padding: .85rem 1.25rem;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-s);
  font-size: .9375rem; color: var(--ink);
}
.keurmerk svg { flex: 0 0 auto; color: var(--blue); }

@media (max-width: 900px) {
  .duo--raster .duo__tekst { order: 0; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .raster { grid-template-columns: 1fr; }
}

/* --- plusknop: cirkel met plus, label ernaast ---------------------------- */

/* De tweede knopvorm van het origineel. Naast een blok lopende tekst weegt de
   gevulde pil te zwaar; deze leest als een uitnodiging in plaats van als een
   aanmelding. De hele regel is de link, dus het raakvlak is ruim groter dan de
   cirkel alleen. */
.plusknop {
  display: inline-flex; align-items: center; gap: 1.25rem;
  color: var(--ink); text-decoration: none; font-size: 1rem;
}
.plusknop__cirkel {
  position: relative; flex: 0 0 auto;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--blue-100);
  transition: background .2s ease, transform .2s var(--ease);
}
/* Twee streepjes in plaats van een teken: een + uit de tekst staat nooit
   precies in het midden van zijn regel en is niet dun te krijgen. */
.plusknop__cirkel::before, .plusknop__cirkel::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 1.125rem; height: 1.5px; margin: -.75px 0 0 -.5625rem;
  background: var(--ink);
}
.plusknop__cirkel::after { transform: rotate(90deg); }
.plusknop__label { line-height: 1.3; }
.plusknop:hover .plusknop__cirkel { background: var(--blue-50); transform: scale(1.06); }
.plusknop:hover .plusknop__label { text-decoration: underline; text-underline-offset: .25em; }
.plusknop:focus-visible { outline: none; }
.plusknop:focus-visible .plusknop__cirkel { outline: 2px solid var(--blue-700); outline-offset: 3px; }
.plusknop:focus-visible .plusknop__label { text-decoration: underline; text-underline-offset: .25em; }
.duo__beeld { overflow: hidden; border-radius: var(--radius); }
.duo__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.duo--spiegel .duo__tekst { order: 2; }
.duo--spiegel .duo__beeld { order: 1; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 2rem; }
  .duo--spiegel .duo__tekst, .duo--spiegel .duo__beeld { order: 0; }
  .duo__beeld img { aspect-ratio: 3 / 2; }
}

/* --- kaarten ------------------------------------------------------------- */

.kaarten {
  display: grid; gap: 1.25rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: repeat(var(--kolommen, 3), minmax(0, 1fr));
}
.kaart {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--page);
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
/* De zachte blauwe gloed rechtsonder komt van het origineel. */
.kaart::after {
  content: ""; position: absolute; right: -30%; bottom: -60%;
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-50), transparent 70%);
  pointer-events: none;
}
.kaart > * { position: relative; }
.kaart h3 { font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 500; margin-bottom: .6rem; }
.kaart p { color: var(--muted); font-size: .875rem; line-height: 1.55; }
.kaart__label:empty { display: none; }
.kaart__label {
  display: block; margin-bottom: .85rem;
  font-size: .6875rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.kaart__icoon { display: block; width: 2.25rem; height: 2.25rem; margin-bottom: 1.25rem; color: var(--blue); }
.kaart__icoon svg { width: 100%; height: 100%; }

@media (max-width: 980px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kaarten { grid-template-columns: 1fr; } }

/* --- stappen: horizontale tijdlijn -------------------------------------- */
/* Maten uit de .mvr-steps van het origineel: kolommen met 2,5rem gap, een rail
   van 1px die van bol naar bol loopt, en een marker van 2,75rem die blauw
   invult zodra de stap in beeld komt. */

.stappen {
  display: grid; grid-template-columns: repeat(var(--stappen, 5), minmax(0, 1fr));
  gap: 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: stap;
}
.stap { position: relative; padding-top: 4rem; counter-increment: stap; }

/* De stappen verschijnen één voor één zodra de rij in beeld komt, met een
   vaste vertraging per stap. Ze hangen niet aan de scrollpositie: een
   component die verspringt terwijl je verder scrolt leest als een storing.
   
   Bewust een keyframe-animatie en geen transition. Een transition-shorthand
   met var(--ease) erin wordt pas op computed-value-tijd opgelost, en bleef in
   Chrome op de beginwaarde hangen: de stappen stonden permanent op opacity 0.
   Dit is bovendien semantisch juister — een eenmalige entree, geen
   toestandsovergang. `both` houdt de beginstand vast tijdens de vertraging en
   de eindstand daarna. */
/* De stappen worden alleen verborgen in een rij die JavaScript daadwerkelijk
   gaat animeren, en die klasse gaat er weer af zodra hij afvuurt — plus een
   vangnet van twee seconden. Zo kan een stap nooit permanent onzichtbaar
   blijven, ook niet als de animatieklok stilstaat omdat het tabblad op de
   achtergrond geladen werd. */
.beweegt .stappen.wacht .stap { opacity: 0; }
.beweegt .stap.is-in {
  animation: stap-in .5s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
@keyframes stap-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* De rail is een kind van .stap en de bol een ::before. Een ::before wordt
   vóór de kinderen geschilderd, dus zonder deze stapeling loopt de lijn dwars
   over de bollen heen in plaats van eronder door. */
.stap__rail {
  position: absolute; top: 1.375rem; left: 0; right: -2.5rem; z-index: 0;
  height: 1px; background: rgba(53, 134, 252, .2); overflow: hidden;
}
.stap:last-child .stap__rail { right: auto; width: 1.375rem; }
.stap__rail::after {
  content: ""; display: block; height: 100%; background: var(--blue);
  transform: scaleX(0); transform-origin: left;
}
.stap.is-in .stap__rail::after {
  animation: rail-vullen .55s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 130ms + 180ms);
}
@keyframes rail-vullen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rail-vullen-verticaal { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.stap::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--page); border: 1px solid var(--blue-100);
  font-size: .8125rem; color: var(--blue); font-variant-numeric: tabular-nums;
}
.stap.is-in::before {
  animation: bol-vullen .4s ease both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
@keyframes bol-vullen {
  to { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
}

.stap h3 { font-size: 1.375rem; font-weight: 400; letter-spacing: -.02em; margin-bottom: .75rem; }
.stap p { font-size: .9375rem; line-height: 1.65; color: var(--muted); }

@media (min-width: 701px) and (max-width: 1100px) {
  .stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3.5rem; }
  .stap:nth-child(3n) .stap__rail { right: auto; width: 1.375rem; }
}
@media (max-width: 700px) {
  /* Op een telefoon kantelt de tijdlijn: de rail loopt verticaal langs de
     bollen en de tekst staat ernaast. */
  .stappen { grid-template-columns: 1fr; gap: 0; }
  .stap { padding: 0 0 2.5rem 4rem; }
  .stap:last-child { padding-bottom: 0; }
  .stap__rail,
  .stap:nth-child(3n) .stap__rail {
    top: 2.75rem; bottom: 0; left: 1.375rem; right: auto; width: 1px; height: auto;
  }
  .stap:last-child .stap__rail { display: none; }
  .stap__rail::after { transform: scaleY(0); transform-origin: top; }
  .stap.is-in .stap__rail::after { animation-name: rail-vullen-verticaal; }
  .stap h3 { font-size: 1.25rem; }
}


/* --- signalen ------------------------------------------------------------ */

.signalen {
  display: grid; gap: 1px; margin-top: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.signaal { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--page); }
.section--panel .signaal { background: var(--panel); }
/* Het icoon is optioneel: op de loopbaanpagina draagt elke kaart er een, bij
   de signalen van stress en burn-out niet. */
.signaal__icoon {
  display: block; width: 2rem; height: 2rem; margin-bottom: 1.25rem;
  color: var(--blue-700);
}
.signaal__icoon svg { width: 100%; height: 100%; }
.signaal h3 { font-size: 1.125rem; font-weight: 400; margin-bottom: .5rem; }
.signaal p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }

@media (max-width: 900px) { .signalen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .signalen { grid-template-columns: 1fr; } }

/* --- methodieken en opbrengsten ------------------------------------------ */

/* Uit het origineel: één kolom kaarten op een grijs vlak, elk met een ring
   waarin de afkorting van de methodiek staat. Twee kolommen naast elkaar
   maakten er kaartjes van; zo lezen ze als een lijst die je afgaat. */
.methoden {
  display: grid; gap: 1.25rem; margin-top: clamp(2.25rem, 4vw, 3.5rem);
}
.methode {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--panel); border-radius: var(--radius);
}
/* Staat de sectie zelf al op grijs, dan zou de kaart erin verdwijnen. */
.section--panel .methode { background: var(--page); }

/* De ring is open aan de rechterbovenkant. Dat doen we met een rand waarvan
   één zijde doorzichtig is en die een kwartslag gedraaid staat; de afkorting
   draait mee terug zodat hij recht blijft staan. Geen extra svg voor nodig. */
.methode__ring {
  flex: 0 0 auto; width: 4.75rem; height: 4.75rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--blue); border-top-color: transparent;
  border-radius: 50%; transform: rotate(-45deg);
}
.methode__afk {
  transform: rotate(45deg);
  font-size: .8125rem; letter-spacing: .06em; color: var(--blue);
}
.methode__tekst { min-width: 0; }
.methode h3 { font-size: 1.25rem; font-weight: 400; margin-bottom: .4rem; }
.methode p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }

@media (max-width: 560px) {
  .methode { gap: 1rem; padding: 1.5rem 1.25rem; }
  .methode__ring { width: 3.75rem; height: 3.75rem; }
  .methode__afk { font-size: .75rem; }
}

.opbrengsten { display: flex; flex-direction: column; margin-top: clamp(2.25rem, 4vw, 3.5rem); max-width: 56rem; }
.opbrengst {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.125rem 0; border-bottom: 1px solid var(--line);
  font-size: 1.0625rem; color: var(--ink);
}
.opbrengst:first-child { border-top: 1px solid var(--line); }
.opbrengst svg { width: 1.15rem; height: 1.15rem; margin-top: .28em; flex: 0 0 auto; color: var(--blue); }

@media (max-width: 780px) { .methoden { grid-template-columns: 1fr; } }

/* --- veelgestelde vragen ------------------------------------------------- */

.faq { margin-top: clamp(2.25rem, 4vw, 3.5rem); max-width: 52rem; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem .25rem; cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 400;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; width: 1rem; height: 1rem; margin-top: .3em; flex: 0 0 auto; }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.5px;
  background: var(--blue); transition: transform .22s var(--ease);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0); }
.faq__antwoord { padding: 0 .25rem 1.5rem; color: var(--muted); max-width: 62ch; }

/* --- mensen -------------------------------------------------------------- */

.mensen {
  display: grid; gap: 1.25rem; margin-top: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mens { padding: clamp(1.5rem, 3vw, 2rem); background: var(--panel); border-radius: var(--radius); }
.mens h3 { font-size: 1.1875rem; font-weight: 400; margin-bottom: .6rem; }
.mens p { color: var(--muted); font-size: .9375rem; }

@media (max-width: 1000px) { .mensen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mensen { grid-template-columns: 1fr; } }

/* --- tarieven ------------------------------------------------------------ */

.tarieven {
  display: grid; gap: 1.25rem; margin-top: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tarief {
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.tarief h3 { font-size: 1.5rem; font-weight: 300; margin-bottom: .75rem; }
.tarief__prijs {
  display: block; margin-bottom: 1.25rem;
  font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 200; letter-spacing: -.03em;
}
.tarief ul { margin: 0 0 1.75rem; padding: 0; list-style: none; flex: 1; }
.tarief li {
  position: relative; padding-left: 1.5em; margin-bottom: .65em;
  color: var(--muted); font-size: .9375rem; line-height: 1.5;
}
.tarief li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
@media (max-width: 780px) { .tarieven { grid-template-columns: 1fr; } }

/* --- reviews: verticale kolommen ---------------------------------------- */



.reviews__rij {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  height: 40rem; margin-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-inline: var(--gutter);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.review-kolom { overflow: hidden; }
.scroll { display: flex; flex-direction: column; gap: 1rem; animation: scroll-verticaal 60s linear infinite; }
.scroll.reverse { animation-direction: reverse; }
.reviews__rij:hover .scroll { animation-play-state: paused; }

@keyframes scroll-verticaal {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-50% - .5rem)); }
}

.review {
  margin: 0; padding: 1.75rem;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius);
}
.review blockquote { margin: 0; }
/* De aanhalingstekens zijn vorm, geen tekst. Op de staging stonden ze bij
   negentien citaten in de tekst en bij twee niet. */
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after  { content: "\201D"; }
.review blockquote p { font-size: 1rem; line-height: 1.55; }
.review figcaption { margin-top: 1.25rem; font-size: .875rem; color: var(--muted); }

/* Onder 767px wordt het één horizontale rij die je swipet: een verticale
   auto-scroll naast de paginascroll werkt op een telefoon niet. */
@media (max-width: 767px) {
  .reviews__rij {
    display: flex; height: auto; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none;
    scrollbar-width: none;
  }
  .reviews__rij::-webkit-scrollbar { display: none; }
  .review-kolom { flex: 0 0 auto; overflow: visible; }
  .scroll { flex-direction: row; animation: none; }
  .review { flex: 0 0 min(82vw, 20rem); scroll-snap-align: start; }
}

/* --- afsluitende CTA ----------------------------------------------------- */

.cta-slot__inhoud { max-width: 46rem; }

.cta-slot .btn { margin-top: 2rem; }

/* ==========================================================================
   Beweging
   De eindtoestand is de standaard. De animatie neemt hem alleen tijdelijk weg,
   en alleen wanneer de JS hem heeft aangezet via .beweegt op <html>. Breekt de
   JS, dan staat alles er gewoon — dat is precies wat op de staging misging.
   ========================================================================== */

/* Het masker waarbinnen een regel omhoog schuift. Zonder de padding knipt het
   de staarten van de g, j en p af; de negatieve marge houdt de layout gelijk. */
[data-onthul] .regel {
  display: block; overflow: hidden;
  padding-block: .14em; margin-block: -.14em;
}
[data-onthul] .regel__in { display: block; }

.beweegt [data-onthul] .regel__in {
  transform: translateY(105%);
}
.beweegt [data-onthul].is-in .regel__in {
  transform: none;
  transition: transform .78s var(--ease);
  transition-delay: calc(var(--r, 0) * 75ms);
}

/* De voordeelkaarten staan bewust verspringend (even kaarten 3rem lager).
   De staffel zet transform: none en zou die offset wegvagen, dus die kaarten
   komen alleen op opacity binnen. */
.beweegt [data-staffel] > *:not(.voordeel):not(.stap) {
  opacity: 0;
  transform: translateY(16px);
}
.beweegt [data-staffel] > *:not(.voordeel):not(.stap).is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.beweegt [data-staffel] > .voordeel { opacity: 0; }
.beweegt [data-staffel] > .voordeel.is-in {
  opacity: 1;
  transition: opacity .55s ease, transform .5s cubic-bezier(.23, 1, .32, 1), box-shadow .5s;
  transition-delay: calc(var(--i, 0) * 65ms);
}

/* Eén frame zonder overgang, zodat wat al in beeld staat meteen goed staat. */
.zonder-overgang, .zonder-overgang * { transition: none !important; }

[data-parallax] img { transform: translate3d(0, var(--zweef, 0), 0); }

@media (prefers-reduced-motion: reduce) {
  .beweegt [data-onthul] .regel__in,
  [data-onthul] .regel__in { transform: none; }
  [data-onthul] .regel { overflow: visible; }
  .beweegt [data-staffel] > *,
  [data-staffel] > * { opacity: 1; }
  [data-staffel] > *:not(.voordeel) { transform: none; }
  [data-parallax] img { transform: none; }
  .km-band { display: none; }
  .km-static { display: flex; }
  .stap, .stap.is-in { opacity: 1 !important; animation: none !important; }
  .stap.is-in::before {
    animation: none !important;
    background: var(--blue); border-color: var(--blue); color: var(--on-blue);
  }
  .stap.is-in .stap__rail::after { animation: none !important; transform: none; }
  .scroll { animation: none; }
  /* De stipjes langs de spaken lopen door; zonder beweging blijven de lijnen
     gewoon staan en verdwijnt alleen het stipje. */
  .beweegt .hub__figuur.is-in .hub__puls,
  .hub__puls { animation: none; }
  .beweegt .hub__figuur.is-in .hub__naaf,
  .beweegt .hub__figuur.is-in .hub__knoop { animation: none; opacity: 1; }
  .beweegt .hub__figuur .hub__spaak { stroke-dasharray: none; stroke-dashoffset: 0; }
  .audience-card, .audience-card::after { transition: none; }
  .spoor__link::after { transition: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- cijfers ------------------------------------------------------------- */

/* Uit het origineel: de kop links, de inleiding ernaast, en daaronder de
   cijfers als één rij cellen met haarlijnen ertussen. Die lijnen zijn de
   achtergrond die door een gap van 1px schijnt — randen per cel zouden tussen
   twee buren dubbel tellen. */
.stats__kop {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: end;
}
.stats__kop h2 { max-width: 18ch; }
.stats__lede { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; max-width: 42ch; }

.stats {
  display: grid; gap: 1px; margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(var(--kolommen, 3), minmax(0, 1fr));
  background: var(--line);
}
.stat { padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem); background: var(--page); }
.section--panel .stat { background: var(--panel); }
.stat__getal {
  display: block; margin-bottom: 1.25rem;
  font-size: clamp(2.75rem, 5.4vw, 4.8rem); font-weight: 200;
  letter-spacing: -.04em; line-height: 1; color: var(--blue-700);
  font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.stat__bron { margin-top: 1.5rem; font-size: .8125rem; color: var(--muted); }

@media (max-width: 900px) {
  .stats__kop { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* --- resultaten: lijst links, kader rechts ------------------------------- */

.resultaten {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.resultaten__kolom h2 { max-width: 18ch; }
.resultaten__lijst {
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none;
}
.resultaat {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.125rem 0; font-size: 1.0625rem; line-height: 1.5;
  border-bottom: 1px solid rgba(10, 10, 10, .08);
}
.resultaat:first-child { border-top: 1px solid rgba(10, 10, 10, .08); }
.resultaat__stip {
  flex: 0 0 auto; width: .5rem; height: .5rem; margin-top: .55rem;
  border-radius: 50%; background: var(--blue-700);
}

.kader {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--page); border-radius: var(--radius);
}
.kader__label {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-700); margin-bottom: 1.75rem;
}
.kader__feit + .kader__feit { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.kader__sleutel {
  display: block; margin-bottom: .35rem;
  font-size: 1.375rem; font-weight: 300; letter-spacing: -.02em;
}
.kader__waarde { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.kader__tekst { font-size: 1.125rem; font-weight: 300; line-height: 1.6; }

@media (max-width: 900px) { .resultaten { grid-template-columns: 1fr; } }

/* --- vragen: ringen links, de vragen rechts ------------------------------ */

.vragen {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
}
.ringen { position: relative; display: grid; place-items: center; }
.ringen svg { width: 100%; max-width: 24rem; height: auto; }
.ringen circle { fill: none; stroke: var(--blue-100); stroke-width: 1; }
.ringen__midden {
  position: absolute; display: grid; gap: .35rem; text-align: center;
}
.ringen__midden span { font-size: .8125rem; color: var(--muted); }
.ringen__midden strong {
  font-size: 1.25rem; font-weight: 400; letter-spacing: -.02em; color: var(--blue-700);
}

.vragen__lijst { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.vraag {
  display: flex; align-items: flex-start; gap: 1.25rem;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.vraag__teken {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-700); font-size: 1rem;
}
.vraag__kop { display: block; font-size: 1.0625rem; margin-bottom: .3rem; }
.vraag__sub { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.55; }

@media (max-width: 900px) {
  .vragen { grid-template-columns: 1fr; }
  .ringen { order: -1; }
}

/* --- kaarten in een haarlijnraster --------------------------------------- */

/* De variant van de dienstenpagina's: geen losse kaarten met een rand en een
   radius, maar één vlak dat door haarlijnen in cellen valt. */
.kaarten--raster { gap: 1px; background: var(--line); }
.kaarten--raster .kaart {
  border: 0; border-radius: 0;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  background: var(--page);
}
.section--panel .kaarten--raster .kaart { background: var(--panel); }
.kaarten--raster .kaart::after { display: none; }
.kaarten--raster .kaart h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); margin-bottom: .75rem; }
.kaarten--raster .kaart p { font-size: .9375rem; }

/* --- contactflow --------------------------------------------------------- */

.contact { padding-top: clamp(7.5rem, 12vw, 9.5rem); }
.contact__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}

.flow { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 40rem; }

.flow__balk { height: 4px; background: var(--blue-100); border-radius: 999px; overflow: hidden; }
/* Schaalt met transform en niet met width: width animeren kost layout. */
.flow__vulling {
  display: block; height: 100%; width: 100%; background: var(--blue);
  border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.flow__teller { margin: .75rem 0 2rem; font-size: .875rem; color: var(--muted); }

.flow__stap { margin: 0 0 1.5rem; padding: 0; border: 0; }
.flow__stap legend {
  padding: 0; margin-bottom: 1.25rem;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 300; letter-spacing: -.02em;
}
.flow__stap legend:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 4px; }
.flow__hint { margin-bottom: 1.25rem; color: var(--muted); font-size: .9375rem; }

.flow__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.flow__kaart {
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
  padding: 1.15rem 1.25rem; text-align: left;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-s);
  font-family: inherit; font-size: 1rem; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.flow__kaart:hover { border-color: var(--blue); }
.flow__kaart b { font-weight: 400; }
.flow__kaart small { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.flow__kaart[aria-pressed="true"] {
  border-color: var(--blue); background: var(--blue-50);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.flow__veld { display: block; margin-bottom: 1.25rem; }
.flow__veld > span { display: block; margin-bottom: .45rem; font-size: .9375rem; }
.flow__veld input, .flow__veld textarea {
  width: 100%; padding: .85em 1em;
  font: 300 1rem/1.5 var(--font); color: var(--ink);
  background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.flow__veld input:focus, .flow__veld textarea:focus { border-color: var(--blue); outline: none; }
.flow__veld input:focus-visible, .flow__veld textarea:focus-visible {
  outline: 2px solid var(--blue-700); outline-offset: 2px;
}

.flow__fout { display: block; margin-top: .45rem; font-size: .875rem; font-weight: 400; color: #b42318; }

.flow__samenvatting { margin: 0; }
.flow__samenvatting > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.flow__samenvatting dt { color: var(--muted); font-size: .9375rem; }
.flow__samenvatting dd { margin: 0; }

.flow__nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.flow__uitweg { margin-top: 1.75rem; font-size: .9375rem; color: var(--muted); }
.flow__honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* De bedanksectie. Dit is het laatste wat iemand van het formulier ziet, dus
   krijgt hij het gewicht van een echte sectie in plaats van twee regels tekst:
   het vinkje staat in dezelfde open ring als bij de methodieken, en eronder
   staat wat er na het versturen gebeurt. */
.flow__klaar {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--panel); border-radius: var(--radius);
}
.klaar__vink {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem;
  border: 1.5px solid var(--blue); border-top-color: transparent;
  border-radius: 50%; transform: rotate(-45deg); color: var(--blue);
}
.klaar__vink svg { width: 1.5rem; height: 1.5rem; transform: rotate(45deg); }
.flow__klaar h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 400; margin-bottom: .75rem; }
.klaar__lede { color: var(--muted); max-width: 46ch; }
.klaar__stappen {
  display: grid; gap: 1px; list-style: none;
  margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.klaar__stappen li { display: grid; gap: .3rem; padding: 1.125rem 1.25rem; background: var(--page); }
.klaar__nummer { font-size: .8125rem; letter-spacing: .06em; color: var(--blue); }
.klaar__stappen b { font-weight: 400; }
.klaar__stappen small { color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.klaar__uitweg { margin-top: 1.5rem; font-size: .9375rem; color: var(--muted); }
.flow__klaar .btn { margin-top: 1.5rem; }
.flow__klaar:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 6px; }

.contact__zij {
  padding: clamp(1.75rem, 3.5vw, 2.25rem);
  background: var(--panel); border-radius: var(--radius);
}
.contact__zij h2 { font-size: 1.125rem; font-weight: 500; margin-bottom: 1rem; }
.contact__zij address { font-style: normal; line-height: 1.7; margin-bottom: 1.25rem; }
.contact__zij .klein { color: var(--muted); }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__zij { order: 2; }
}
@media (max-width: 560px) {
  .flow__kaarten { grid-template-columns: 1fr; }
  .flow__samenvatting > div { grid-template-columns: 1fr; gap: .2rem; }
  .flow__nav .btn { flex: 1; justify-content: center; }
}

/* --- lopende tekst ------------------------------------------------------- */

.prose p { color: var(--muted); }
.naast__inhoud.prose p { max-width: 62ch; }

/* ==========================================================================
   Print
   Zodat een PDF laat zien wat een bezoeker ziet: alles onthuld, de zwevende
   kop op zijn plek, en kaarten die niet halverwege een paginawissel breken.
   ========================================================================== */

/* Chrome print op papierbreedte, niet op vensterbreedte: zonder deze regel
   valt een PDF terug op de mobiele layout omdat Letter maar ~816px breed is.
   Met een expliciete paginagrootte krijg je de desktopweergave. */
@page { size: 1440px 2000px; margin: 0; }

@media print {
  .beweegt [data-onthul] .regel__in,
  [data-onthul] .regel__in { transform: none !important; }
  [data-onthul] .regel { overflow: visible !important; }
  .beweegt [data-staffel] > *,
  [data-staffel] > * { opacity: 1 !important; transform: none !important; }
  [data-parallax] img { transform: none !important; }

  /* De stappen wachten normaal op de observer. Bij printen scrollt niemand,
     dus zetten we de hele rij onvoorwaardelijk aan. Chrome laat volledig
     transparante inhoud helemaal weg uit de PDF, dus dit moet kloppen. */
  .stappen, .stappen * {
    opacity: 1 !important; visibility: visible !important;
    animation: none !important; transform: none !important;
  }
  .stap::before {
    animation: none !important;
    background: var(--blue); border-color: var(--blue); color: var(--on-blue);
  }
  .stap .stap__rail::after { animation: none !important; transform: none !important; }

  /* De navigatiesubmenus horen dicht op papier; alleen de FAQ gaat open. */
  .nav__sub[open] > .nav__sublijst { display: none !important; }

  .site-head { position: static; }
  .mobielmenu, .kop__knop { display: none !important; }
  /* Op papier is er geen mobiele breedte; toon de gewone navigatie. */
  .nav-bar, .kop__cta { display: block; }
  .nav-bar { flex: 0 0 auto; }

  /* De lopende band staat stil op papier; de statische lijst is leesbaar. */
  .km-band { display: none; }
  .km-static { display: flex; }
  .stap, .stap.is-in { opacity: 1 !important; animation: none !important; }
  .stap.is-in::before {
    animation: none !important;
    background: var(--blue); border-color: var(--blue); color: var(--on-blue);
  }
  .stap.is-in .stap__rail::after { animation: none !important; transform: none; }

  /* De reviewkolommen scrollen niet op papier. */
  .reviews__rij {
    height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .scroll { animation: none; }
  .review-kolom { overflow: visible; }

  /* De accordeon open, anders staan er alleen vragen in de PDF. */
  .faq__item { open: true; }
  .faq__antwoord { display: block !important; }

  .kaart, .signaal, .methode, .tarief, .review, .stap, .audience-card,
  .faq__item, .mens { break-inside: avoid; }
  section { break-inside: auto; }

  a { text-decoration: none; }
  .site-footer { break-before: avoid; }
}

/* ==========================================================================
   Maatwerkcomponenten uit het origineel
   Maten overgenomen van de inline CSS van doc.brandium.dev. Waar het origineel
   --blue-brand #4a90d9 gebruikt, staat hier --blue: we werken met één blauw.
   ========================================================================== */

/* --- zwevende labels over het herobeeld (.lb-float-tag) ------------------ */

.intro__beeld { position: relative; }
.zwevend {
  position: absolute; z-index: 2;
  padding: .5rem 1rem;
  background: var(--page); border: 1px solid rgba(53, 134, 252, .15);
  border-radius: 6.25rem;
  font-size: .75rem; color: var(--ink);
  max-width: min(18rem, 60%); line-height: 1.35;
  box-shadow: 0 .5rem 2rem rgba(53, 134, 252, .12);
}
.zwevend__stip {
  display: inline-block; width: .375rem; height: .375rem; margin-right: .5rem;
  border-radius: 50%; background: var(--blue); vertical-align: middle;
}
/* Vaste offsets in rem en niet in procenten: een percentage van de
   beeldkolom liep bij een breed scherm de gutter uit, waardoor het rechter
   label 2px buiten het venster stak. Een rem past altijd binnen de gutter. */
.zwevend:nth-of-type(1) { top: 12%;    left: -1.5rem; }
.zwevend:nth-of-type(2) { top: 34%;    right: -1.5rem; }
.zwevend:nth-of-type(3) { bottom: 26%; left: -1.5rem; }
.zwevend:nth-of-type(4) { bottom: 8%;  right: -1.5rem; }

/* Op een telefoon vallen ze buiten het beeld; daar horen ze niet. */
@media (max-width: 900px) { .zwevend { display: none; } }

/* --- de ronde voortgangsring (.mvr-ring) -------------------------------- */

.ring {
  position: relative; width: 100%; max-width: 27rem; margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.ring svg { width: 100%; height: 100%; display: block; }
.ring__kern { fill: rgba(53, 134, 252, .03); }
.ring__geleider {
  fill: none; stroke: rgba(53, 134, 252, .14);
  stroke-width: 1; stroke-dasharray: 4 7;
}
.ring__boog {
  fill: none; stroke: rgba(53, 134, 252, .18); stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke .5s var(--ease), stroke-width .5s var(--ease);
}
.ring__boog.is-actief { stroke: var(--blue); stroke-width: 4; }

/* Onzichtbare knop bij elke boog. Groot genoeg om aan te tikken (44px), en
   met een zichtbare focusring voor het toetsenbord. */
.ring__knop {
  position: absolute; width: 44px; height: 44px; padding: 0; margin: -22px 0 0 -22px;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.ring__knop:hover { background: rgba(53, 134, 252, .08); }
.ring__knop:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.ring__boog { cursor: pointer; }

.ring__midden {
  position: absolute; inset: 0; padding: 0 24%;
  display: grid; place-items: center; text-align: center;
  pointer-events: none;
}
.ring__stap { grid-area: 1 / 1; }
/* De ring draait vanzelf door; een stapnaam die er hard in springt leest als
   een sprong in de pagina. Hij komt daarom op: dezelfde beweging als de boog
   eronder, die een halve seconde naar blauw kleurt. */
.beweegt .ring__stap:not([hidden]) { animation: ring-stap .45s var(--ease) both; }
@keyframes ring-stap {
  from { opacity: 0; transform: translateY(.4rem); }
  to   { opacity: 1; transform: none; }
}
.ring__index {
  display: block; margin-bottom: .625rem;
  font-size: .688rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue);
}
.ring__naam {
  display: block;
  font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 300;
  letter-spacing: -.03em; line-height: 1.2; color: var(--ink);
}

@media (max-width: 900px) { .ring { max-width: 20rem; } }

/* --- vacatures ----------------------------------------------------------- */
/* Eén kaart per rol, onder elkaar en niet naast elkaar: een vacature lees je
   uit, je vergelijkt hem niet met de buurman. De kenmerken staan als kleine
   pillen boven de omschrijving, zodat je in één oogopslag ziet of het je past
   voordat je de tekst in gaat. */

.vacatures {
  display: grid; gap: 1rem; margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0; list-style: none; max-width: 52rem;
}
.vacature {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--panel); border-radius: var(--radius);
}
.section--panel .vacature { background: var(--page); }
.vacature h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 400;
  letter-spacing: -.02em; margin-bottom: .875rem;
}
.vacature__kenmerken {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.125rem;
}
.vacature__kenmerk {
  padding: .3rem .75rem;
  background: var(--page); border: 1px solid var(--line); border-radius: 999px;
  font-size: .8125rem; color: var(--muted);
}
.section--panel .vacature__kenmerk { background: var(--panel); }
.vacature__tekst { color: var(--muted); max-width: 62ch; }
.vacature__punten {
  margin: 1.125rem 0 0; padding: 0; list-style: none;
  display: grid; gap: .5rem;
}
.vacature__punten li {
  position: relative; padding-left: 1.35em;
  font-size: .9375rem; line-height: 1.5; color: var(--muted);
}
.vacature__punten li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.vacature .btn { margin-top: 1.5rem; }

/* Geen enkele vacature open is een toestand en geen fout. Hij krijgt daarom
   hetzelfde kader als een kaart, met de open sollicitatie als uitweg. */
.vacatures__leeg {
  margin-top: clamp(2.25rem, 4vw, 3.5rem); max-width: 52rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--panel); border-radius: var(--radius);
}
.section--panel .vacatures__leeg { background: var(--page); }
.vacatures__leeg p { color: var(--muted); max-width: 62ch; }
.vacatures__leeg .btn { margin-top: 1.75rem; }

/* --- het kompas in de hero van loopbaancoaching -------------------------- */
/* Vier richtingen op een wijzerplaat. De naald draait naar de actieve; de
   labels op de ring en de zwevende pillen wisselen mee. Alles wat beweegt
   staat hier, zodat app.js alleen nog hoeft te zeggen wélke richting het is.
   De blokkade onder prefers-reduced-motion is de algemene regel onderaan dit
   bestand: die zet elke overgang en animatie op .01ms. */

.kompas {
  position: relative; width: 100%; max-width: 27rem;
  margin-inline: auto; aspect-ratio: 1 / 1;
}
.kompas svg { width: 100%; height: 100%; display: block; overflow: visible; }

.kompas__buiten { fill: none; stroke: var(--blue-100); stroke-width: 2; }
.kompas__binnen {
  fill: none; stroke: rgba(53, 134, 252, .22);
  stroke-width: 1; stroke-dasharray: 5 9;
}
.kompas__kernring { fill: none; stroke: rgba(53, 134, 252, .16); stroke-width: 1; }
.kompas__kern { fill: rgba(53, 134, 252, .04); }
.kompas__as { stroke: rgba(53, 134, 252, .32); stroke-width: 1; }
.kompas__tik { stroke: rgba(53, 134, 252, .22); stroke-width: 1; }

/* De naald draait om het midden van de doos. transform-box: view-box laat de
   transform-origin slaan op de viewBox en niet op de omhullende van de vorm;
   zonder dat draait hij om zijn eigen zwaartepunt en loopt hij weg. */
.kompas__naald {
  transform-box: view-box; transform-origin: 50% 50%;
  transition: transform 1.05s cubic-bezier(.65, 0, .35, 1);
}
.kompas__punt { fill: var(--blue); }
.kompas__staart { fill: #cfe2f8; }
.kompas__spil { fill: var(--blue); }

/* De knoppen liggen met hun midden op de buitenring; de pil eromheen is wat
   je ziet. Het vlak van de knop is de pil zelf, dus hij is overal aan te
   tikken waar hij te lezen is. */
.kompas__knop {
  position: absolute; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; z-index: 2;
}
.kompas__label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 7rem; padding: .8rem 1rem;
  background: var(--page); border: 1px solid rgba(53, 134, 252, .14);
  border-radius: 999px; box-shadow: 0 .75rem 2rem rgba(53, 134, 252, .08);
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .25s var(--ease);
}
.kompas__knop:hover .kompas__label { transform: translateY(-2px); color: var(--ink); }
.kompas__knop:focus-visible .kompas__label { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.kompas__knop.is-actief .kompas__label {
  background: var(--blue-600); border-color: var(--blue-600); color: var(--on-blue);
  box-shadow: 0 1rem 2rem rgba(53, 134, 252, .22);
}

/* De zwevende pillen zijn dezelfde als naast een beeld, alleen anders
   opgehangen: rond een vierkant kompas in plaats van een liggend beeld. */
.kompas .zwevend:nth-of-type(1) { top: 14%;    left: -1.5rem; }
.kompas .zwevend:nth-of-type(2) { top: 34%;    right: -1.5rem; }
.kompas .zwevend:nth-of-type(3) { bottom: 26%; left: -1.5rem; }
.kompas .zwevend:nth-of-type(4) { bottom: 6%;  right: -1.5rem; }
.kompas__tagtekst {
  display: inline-block;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.kompas__tagtekst.is-weg { opacity: 0; transform: translateY(.25rem); }

/* Twee bewegingen die alleen maar leven geven: de pillen deinen langzaam, en
   het kernvlak ademt. Ze staan onder .beweegt, dus zonder die klasse — en dus
   onder verminderde beweging — staan ze allebei stil. */
.beweegt .kompas .zwevend { animation: kompas-deinen 3.6s ease-in-out infinite; }
.beweegt .kompas .zwevend:nth-of-type(2) { animation-duration: 4.1s; animation-delay: .3s; }
.beweegt .kompas .zwevend:nth-of-type(3) { animation-duration: 3.9s; animation-delay: .6s; }
.beweegt .kompas .zwevend:nth-of-type(4) { animation-duration: 4.4s; animation-delay: .9s; }
@keyframes kompas-deinen {
  50% { transform: translateY(-.5rem); }
}
.beweegt .kompas__kern { animation: kompas-ademen 4.4s ease-in-out infinite; }
@keyframes kompas-ademen {
  50% { r: 45; opacity: .7; }
}

/* De labels blijven ook op een telefoon op de ring staan: dat is het ontwerp,
   en een rij chips eronder is iets anders dan een kompas.
   
   Wat er wel moet gebeuren is rekenen. Het label staat met zijn midden op de
   ring, dus het steekt een halve labelbreedte naar buiten. Bij "Ontwikkeling"
   is dat zo'n 50px, terwijl er links van de ring maar de helft van de
   restbreedte plus de gutter zit. Daarom krimpt hier zowel het label als de
   ring, en is de ring onder de 400px gebonden aan de vensterbreedte in plaats
   van aan een vaste maat. */
@media (max-width: 900px) {
  .kompas { max-width: min(20rem, 82vw); }
  .kompas__label {
    min-width: 0; padding: .5rem .75rem;
    font-size: .625rem; letter-spacing: .06em;
  }
}
/* Op de smalste telefoons wint het langste label het van de ring: bij 320px
   stak "Ontwikkeling" er zes pixel uit. De ring krimpt dan mee. */
@media (max-width: 360px) {
  .kompas { max-width: 75vw; }
}

/* --- de accordeon in de hero (.hero-accordion) -------------------------- */

.acc {
  display: flex; gap: 3px; height: 26rem;
  border-radius: .75rem; overflow: hidden;
}
.acc__kolom {
  position: relative; flex: 1; min-width: 0; height: 100%;
  padding: 0; border: 0; background: none; overflow: hidden;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: flex .65s cubic-bezier(.23, 1, .32, 1);
}
.acc__kolom.is-actief { flex: 4.5; }

.acc__grond { position: absolute; inset: 0; transition: filter .4s; }
.acc__kolom:nth-child(1) .acc__grond { background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.acc__kolom:nth-child(2) .acc__grond { background: var(--blue-100); }
.acc__kolom:nth-child(3) .acc__grond { background: var(--panel); }
.acc__kolom:not(.is-actief):hover .acc__grond { filter: brightness(.97); }

.acc__klein {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; transition: opacity .25s;
}
.acc__kolom.is-actief .acc__klein { opacity: 0; pointer-events: none; }
.acc__nummer { font-size: 1.25rem; font-weight: 300; letter-spacing: -.02em; color: var(--blue); }
.acc__label {
  writing-mode: vertical-lr; text-orientation: mixed; transform: rotate(180deg);
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

.acc__groot {
  position: absolute; inset: 0; padding: 2.25rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transition: opacity .35s .12s;
}
.acc__kolom.is-actief .acc__groot { opacity: 1; }
.acc__groot-nummer {
  position: absolute; top: 1.5rem; left: 2.25rem;
  font-size: 5rem; font-weight: 300; line-height: 1; letter-spacing: -.06em;
  color: var(--blue); opacity: .08;
}
.acc__titel {
  font-size: 1.375rem; font-weight: 400; letter-spacing: -.02em;
  color: var(--ink); margin-bottom: .5rem;
}
.acc__tekst { font-size: .875rem; line-height: 1.65; color: var(--muted); max-width: 18rem; }

@media (max-width: 900px) {
  .acc { height: 22rem; }
  .acc__groot { padding: 1.75rem; }
  .acc__groot-nummer { font-size: 3.5rem; top: 1.25rem; left: 1.75rem; }
}
/* Onder 620px is een accordeon van drie kolommen te smal; dan onder elkaar. */
@media (max-width: 620px) {
  .acc { flex-direction: column; height: auto; gap: 2px; }
  .acc__kolom, .acc__kolom.is-actief { flex: none; min-height: 8.5rem; }
  .acc__klein { display: none; }
  .acc__groot { position: relative; inset: auto; opacity: 1; padding: 1.5rem; }
  .acc__groot-nummer { position: static; font-size: 2rem; opacity: .12; margin-bottom: .5rem; }
}

/* --- voordeelkaarten met reveal-lijn (.voordeel-card) -------------------- */

.voordelen {
  display: grid; gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem) 0;
  grid-template-columns: repeat(var(--kolommen, 4), minmax(0, 1fr));
}
.voordeel {
  position: relative; overflow: hidden;
  padding: 2.75rem 2.5rem; border-radius: .75rem;
  background: var(--page); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), box-shadow .5s;
}
/* De kaarten stonden om en om een stukje lager — dat verspringende ritme komt
   van het origineel, maar met koppen van één en twee regels leest het als
   scheefstand in plaats van als ritme. Ze staan nu op één lijn, boven én
   onder: het raster rekt ze tot dezelfde hoogte. */
.voordeel:hover { transform: translateY(-4px); box-shadow: 0 2rem 5rem rgba(53, 134, 252, .12); }

.voordeel__nummer {
  display: block; margin-bottom: 1.5rem;
  font-size: 3.5rem; font-weight: 400; line-height: 1; letter-spacing: -.04em;
  color: var(--blue);
}
.voordeel h3 { font-size: 1.25rem; font-weight: 400; margin-bottom: .625rem; }
.voordeel p { font-size: .875rem; line-height: 1.65; color: var(--muted); }

.voordeel__lijn {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.voordeel.is-in .voordeel__lijn { transform: scaleX(1); }

@media (max-width: 1100px) { .voordelen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .voordelen { grid-template-columns: 1fr; }
  .voordeel { padding: 2rem 1.75rem; }
}

/* --- smalle band met kapitalen (.ww-marquee) ---------------------------- */

.band {
  padding: 1.25rem 0; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--page);
}
.band__spoor {
  display: flex; width: max-content; white-space: nowrap;
  animation: km-schuif 46s linear infinite;
}
.band:hover .band__spoor { animation-play-state: paused; }
.band__item {
  display: inline-flex; align-items: center; gap: 2.5rem;
  padding: 0 0 0 2.5rem; flex-shrink: 0;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.band__stip { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) { .band__spoor { animation: none; } }

/* --- professionals als kaartenrij --------------------------------------- */

.team { overflow: hidden; }

.team__kop h2 { max-width: 20ch; }
.team__kop .lede { max-width: 46ch; }

/* Het stuur staat onder de kaarten en niet naast de kop. Rechtsboven zweefde
   het los van waar het over gaat; onder het spoor staat het bij de rij die
   het verschuift. */
.team__stuur {
  display: flex; align-items: center; gap: .75rem;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.team__pijl {
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--page); color: var(--ink); cursor: pointer;
  font-size: 1.125rem; line-height: 1;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.team__pijl:hover:not(:disabled) { background: var(--panel); border-color: var(--blue); }
.team__pijl:disabled { opacity: .35; cursor: default; }

.team__balk {
  width: 7.5rem; height: 4px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
/* De breedte wordt door JS gezet en verandert alleen bij een resize; alleen
   de verschuiving animeert. Width animeren kost layout. */
.team__vulling {
  display: block; height: 100%; width: 25%;
  background: var(--ink); border-radius: 999px;
  transition: transform .3s var(--ease);
}

/* Een gewone lijst die horizontaal scrolt. Dat is met muis, touch én
   toetsenbord te bedienen zonder dat er een carrousel-rol bij hoeft. */
/* Het spoor houdt zich aan dezelfde kolom als de kop erboven: het loopt niet
   door tot de vensterrand. De eerste kaart begint dus exact onder de K van de
   kop, en de sectie maakt de pagina nooit breder dan de rest. */
.team__spoor {
  display: flex; gap: 1.5rem;
  max-width: var(--max); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 0 var(--gutter) 1rem;
  list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.team__spoor::-webkit-scrollbar { display: none; }
.team__spoor:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 4px; border-radius: 4px; }

/* Op een breed scherm passen de vier kaarten precies naast elkaar en staat
   het spoor stil. Wordt het smaller, dan schuift hetzelfde spoor. */
.team__kaart {
  flex: 0 0 max(13.75rem, calc((100% - 4.5rem) / 4));
  scroll-snap-align: start;
}
/* De namen lopen over één of twee regels. Zonder deze duw zou het portret
   meeschuiven en stonden de kaarten scheef ten opzichte van elkaar. */
.team__kaart, .team__kaart > article { display: flex; flex-direction: column; }
.team__kaart > article { flex: 1; }
.team__kaart .team__vlak { margin-top: auto; }

.team__naam {
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300;
  letter-spacing: -.02em; line-height: 1.15;
}
.team__naam span { display: block; }

/* Geen eyebrow: dit staat ónder de naam en benoemt de rol van die persoon,
   niet de kop erboven. */
.team__rol {
  margin-top: .75rem;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

/* De ondergrens is er voor het paneel, niet voor de foto: bij vier smalle
   kaarten naast elkaar zakt 3:4 anders tot onder de 300px en moet je door de
   achtergrondinfo scrollen in een doosje van niks. */
.team__vlak {
  position: relative; margin-top: 1.5rem; width: 100%;
  aspect-ratio: 3 / 4; min-height: 20rem;
  border-radius: 1.25rem; overflow: hidden;
  background: var(--panel);
}
/* Twee van de portretten zijn vierkant aangeleverd. In een vlak van 3:4 valt
   er dus een kwart van de hoogte af; vanaf 20% houdt de snede het hoofd heel
   in plaats van de kruin af te snijden. */
.team__foto { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* Zolang er nog geen portretten zijn: het merkteken op een rustig vlak. Dat
   oogt bedoeld, in plaats van een lege doos of een grijze stockfoto. */
.team__leeg {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--blue-50), var(--blue-100));
}
.team__leeg img { width: 4rem; height: auto; opacity: .3; }

.team__knop {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--page); cursor: pointer;
  box-shadow: 0 .25rem 1rem rgba(10, 10, 10, .12);
}
.team__kruis { position: relative; width: .875rem; height: .875rem; }
.team__kruis::before, .team__kruis::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1.5px; background: var(--ink);
  transition: transform .25s var(--ease);
}
.team__kruis::after { transform: rotate(90deg); }
.team__knop[aria-expanded="true"] .team__kruis::before { transform: rotate(45deg); }
.team__knop[aria-expanded="true"] .team__kruis::after  { transform: rotate(-45deg); }

.team__paneel {
  position: absolute; inset: 0; z-index: 1;
  padding: clamp(1rem, 2.2vw, 1.75rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.team__paneel dl { margin: 0; }
/* De sluitknop hangt over het paneel heen. Zonder deze inspringing loopt de
   eerste regel eronderdoor. */
.team__paneel .team__feit:first-child { padding-right: 3.25rem; }
.team__feit + .team__feit { margin-top: 1rem; }
.team__feit dt {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .3rem;
}
.team__feit dd { margin: 0; font-size: .9375rem; line-height: 1.45; }
.team__tekst { margin-top: 1rem; font-size: .875rem; line-height: 1.55; color: var(--muted); }
/* Het paneel is scrollbaar. Chrome en Safari geven zo'n gebied geen focus uit
   zichzelf, dus zonder tabindex kun je er met alleen een toetsenbord niet bij
   (WCAG 2.1.1). De focusring hoort binnen het paneel te blijven vallen. */
.team__paneel:focus-visible { outline: 2px solid var(--blue-700); outline-offset: -4px; }

@media (max-width: 700px) {
  .team__kaart { flex-basis: min(78vw, 20rem); }
}