/* Gedeelde opmaak bij /beweging.js, voor alle merken. Elk merk zet zijn kleuren en kopletter in ontwerp.css
   via --goud (lijnen en accenten), --kopletter en --punt. Alleen structuur en beweging; geen merkkleuren hier. */
:root{--goud:#c8a46a;--kopletter:Inter,sans-serif;--punt:var(--inkt);--rondje:8px}
/* ---------- voortgangsbalk ---------- */
#voortgang{position:fixed;top:0;left:0;right:0;height:2px;background:var(--goud);transform-origin:0 50%;
 transform:scaleX(0);z-index:60;pointer-events:none}

/* ---------- binnenschuiven ---------- */
.beweeg .op{opacity:0;translate:0 26px;filter:blur(3px);
 transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--vertraging,0ms),translate .8s cubic-bezier(.2,.7,.2,1) var(--vertraging,0ms),filter .8s ease var(--vertraging,0ms)}
.beweeg .op.in{opacity:1;translate:0 0;filter:none}

/* koppen woord voor woord */
.woorden .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.woorden .w>span{display:inline-block;translate:0 105%;transition:translate .9s cubic-bezier(.2,.75,.15,1);
 transition-delay:calc(var(--i) * 55ms + 120ms)}
.woorden.in .w>span{translate:0 0}

/* ---------- 3D-kantelen ---------- */
.kantel{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
 transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s,background .3s}   /* geen will-change: maakt tekst wazig */
.kantel:hover{transition:transform .12s linear,box-shadow .3s,border-color .3s,background .3s}
.keuzekaart.kantel,.kaart.kantel{position:relative;overflow:hidden}
.keuzekaart.kantel::after,.kaart.kantel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
 background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.75),transparent 45%);
 mix-blend-mode:soft-light;transition:opacity .3s}
.keuzekaart.kantel:hover::after,.kaart.kantel:hover::after{opacity:1}

/* band met werkterreinen */
.loopband{margin-top:clamp(56px,7vw,92px);border-top:1px solid var(--lijn-sterk);border-bottom:1px solid var(--lijn-sterk);
 overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.loopband-rol{display:flex;width:max-content}
.beweeg .loopband-rol{animation:rol 46s linear infinite}
.loopband:hover .loopband-rol{animation-play-state:paused}
@keyframes rol{to{transform:translateX(-50%)}}
.loopband span{display:inline-flex;align-items:center;gap:28px;padding:18px 0 18px 28px;font:500 15px/1 var(--kopletter);
 color:var(--inkt-zacht);white-space:nowrap}
.loopband span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--goud)}

/* cijfers: vier gelijke kolommen, getallen op één lijn */
.cijferband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--lijn-sterk)}
.cijferband>div{padding:38px 28px 36px;border-left:1px solid var(--lijn)}
.cijferband>div:first-child{border-left:none;padding-left:0}
.cijferband strong{display:block;font:500 clamp(40px,4.4vw,56px)/1 var(--kopletter);letter-spacing:-.03em;
 color:var(--inkt);font-variant-numeric:tabular-nums;margin-bottom:12px}
.cijferband span{display:block;font-size:14.5px;line-height:1.45;color:var(--inkt-zacht);max-width:22ch}

/* ---------- rasters: gelijke hoogte, pijl onderaan ---------- */
.raster,.keuze{align-items:stretch}
.raster>*{display:flex;flex-direction:column}
.raster .pijl,.keuzekaart .pijl{margin-top:auto;padding-top:18px}
.keuzekaart{display:flex;flex-direction:column}
.keuzekaart p{margin-bottom:0}
/* twee vakken naast elkaar even hoog (dienstpagina) */
.split.gelijk{align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.split.gelijk>.kaart{border-radius:var(--rondje)}
/* ---------- tijdlijn: vult zich bij scrollen ---------- */
.tijdlijn{--vul:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative;padding-top:8px}
.tijdlijn::before,.tijdlijn::after{content:"";position:absolute;left:21px;right:calc((100% - 96px) / 4 - 23px);top:29px;height:2px;background:var(--lijn-sterk)}
.tijdlijn::after{background:var(--goud);transform-origin:0 50%;transform:scaleX(var(--vul));transition:transform .2s linear}
.rustig .tijdlijn::after{transform:scaleX(1)}
.tijdlijn li{position:relative;z-index:1}
.tijdlijn .punt{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--punt);color:#fff;
 font:600 15px/1 var(--kopletter);margin-bottom:24px;box-shadow:0 0 0 6px var(--papier)}
section.vlak .tijdlijn .punt{box-shadow:0 0 0 6px var(--papier-2)}
.tijdlijn h3{font:600 20px/1.25 var(--kopletter);margin-bottom:10px}
.tijdlijn p{color:var(--inkt-zacht);font-size:15.5px;line-height:1.66}

.vragen details[open] p{animation:open .45s cubic-bezier(.2,.7,.2,1)}
@keyframes open{from{opacity:0;translate:0 -6px}}

/* ---------- kaarten in een rij: koppen, tekst en pijlen op exact dezelfde hoogte (subgrid) ---------- */
.raster .pijl,.keuzekaart .pijl{align-self:start}
@supports (grid-template-rows:subgrid){
  .raster>.stap{display:grid!important;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .raster>.stap>h3{align-self:start}
  .raster>.stap>.pijl{align-self:end}
  .keuze>.keuzekaart{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .keuze>.keuzekaart>h3{min-height:0;align-self:start}
  .keuze>.keuzekaart>.pijl{align-self:end}
}

/* mobiel */
@media (max-width:980px){
  .cijferband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cijferband>div{padding:28px 18px 26px}
  .cijferband>div:nth-child(odd){border-left:none;padding-left:0}
  .cijferband>div:nth-child(n+3){border-top:1px solid var(--lijn)}
  .tijdlijn{grid-template-columns:1fr;gap:30px;padding-left:66px}
  .tijdlijn::before,.tijdlijn::after{left:21px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .tijdlijn::after{transform-origin:50% 0;transform:scaleY(var(--vul))}
  .tijdlijn .punt{position:absolute;left:-66px;top:0;margin:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- vloeiende paginaovergangen (browsers die het kennen; anderen merken niets) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s cubic-bezier(.2,.7,.2,1) both vt-uit}
::view-transition-new(root){animation:.45s cubic-bezier(.2,.7,.2,1) both vt-in}
@keyframes vt-uit{to{opacity:0;translate:0 -12px}}
@keyframes vt-in{from{opacity:0;translate:0 16px}}

/* ---------- vloeiend kleurveld achter de opening ---------- */
canvas[data-aurora]{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
canvas[data-aurora].aan{opacity:1}

/* ---------- zin die zich vult ---------- */
.statement{font:500 clamp(24px,2.9vw,40px)/1.2 var(--kopletter);letter-spacing:-.02em;max-width:30ch;text-wrap:balance}   /* één maat voor alle merken */
.statement .sw{opacity:.16;transition:opacity .35s ease}
.statement .sw.aan{opacity:1}
.rustig .statement .sw{opacity:1}

/* ---------- kaarten die zijwaarts schuiven (alleen breed scherm) ---------- */
.horizontaal{position:relative;padding:0!important}
/* Zo hoog als de inhoud (geen volle schermhoogte, anders een lege vlakte erboven of eronder); beweging.js zet 'top'
   zo dat het blok verticaal in het scherm staat terwijl het vastzit. */
.horizontaal-plak{position:sticky;top:0;display:flex;flex-direction:column;overflow:hidden;padding:clamp(96px,10vh,120px) 0 clamp(76px,9.5vw,132px)}
.horizontaal-plak>.wrap{width:100%}
.horizontaal-spoor{display:flex;gap:24px;padding:0 max(32px,calc((100% - var(--max)) / 2 + 32px));will-change:transform;width:max-content}
.horizontaal-spoor>*{flex:0 0 min(400px,80vw)}
.horizontaal-teller{display:flex;align-items:center;gap:14px;margin-top:36px;width:100%;max-width:var(--max);margin-left:auto;margin-right:auto;padding:0 32px}
.horizontaal-teller i{display:block;height:2px;flex:0 0 220px;background:var(--lijn-sterk);position:relative;overflow:hidden}
.horizontaal-teller i::after{content:"";position:absolute;inset:0;background:var(--goud);transform-origin:0 50%;transform:scaleX(var(--hv,0))}
@media (max-width:979px){
  .horizontaal-plak{position:static;min-height:0;padding:0}
  .horizontaal-spoor{width:auto;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 8px;transform:none!important}
  .horizontaal-spoor>*{scroll-snap-align:start;flex-basis:82vw}
  .horizontaal-teller{display:none}
}

/* Niets mag de pagina breder maken dan het scherm (3D-scène, loopband). 'clip' en niet 'hidden': met overflow-x:hidden
   wordt body een eigen scrollvak en blijft een sticky blok (de zijwaartse kaarten) niet staan, maar scrolt het weg. */
html,body{overflow-x:clip}

/* grote zin: ruimte erboven, niet eronder (de volgende sectie heeft zelf al ruimte bovenin) */
.statement-sectie{padding:clamp(80px,10vw,140px) 0 0!important}

/* ---------- scrollverhaal [data-verhaal="n"]: basisopmaak voor alle sites (beeld per pagina in ontwerp.css) ----------
   Zonder JS of met minder beweging: gewoon gestapeld. Met beweging: vast in beeld, links de stappen (actieve stap vol),
   rechts het beeld. Telefoon: beeld boven, alleen de actieve stap eronder. */
.verhaal{--p:0;padding:96px 0;position:relative}
.verhaal-plak{display:flex;align-items:center}
.beweeg .verhaal{height:calc(80vh * var(--n,4) + var(--ph,0px) - 60vh);padding:0}
.beweeg .verhaal-plak{position:sticky;top:max(84px,calc((100vh - var(--ph,600px)) / 2 + 30px));padding:24px 0}
.verhaal-raster{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(30px,5vw,72px);align-items:center;width:100%}
.verhaal-stappen{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.verhaal-stappen li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;transition:opacity .45s}
.beweeg .verhaal-stappen li{opacity:.32}
.verhaal-stappen .nr{grid-row:span 2;font:600 14px/1 var(--kopletter,inherit);color:var(--goud);padding-top:5px}
.verhaal-stappen h3{font-size:19px;margin:0 0 6px}
.verhaal-stappen p{margin:0;font-size:15.5px;line-height:1.55;color:var(--inkt-zacht);max-width:44ch}
.beweeg .verhaal[data-stap="0"] li:nth-child(1),.beweeg .verhaal[data-stap="1"] li:nth-child(2),
.beweeg .verhaal[data-stap="2"] li:nth-child(3),.beweeg .verhaal[data-stap="3"] li:nth-child(4){opacity:1}
.verhaal-balk{height:2px;background:var(--lijn);margin:34px 0 0 58px;max-width:320px;border-radius:2px;overflow:hidden}
.verhaal-balk i{display:block;height:100%;background:var(--goud);transform-origin:0 50%;transform:scaleX(var(--p))}
@media (max-width:900px){
  .verhaal-raster{grid-template-columns:1fr;gap:6px}
  .verhaal-raster>[aria-hidden="true"]{order:-1}
  .beweeg .verhaal-stappen{grid-template-areas:"stap"}
  .beweeg .verhaal-stappen li{grid-area:stap;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
  .beweeg .verhaal[data-stap="0"] li:nth-child(1),.beweeg .verhaal[data-stap="1"] li:nth-child(2),
  .beweeg .verhaal[data-stap="2"] li:nth-child(3),.beweeg .verhaal[data-stap="3"] li:nth-child(4){transform:none}
  .verhaal-balk{margin:18px 0 0 58px}
}

/* ---------- artikel: inhoudsopgave in de marge (nav[data-index], beweging.js zet .nu) ---------- */
.artikel-raster{display:grid;grid-template-columns:220px minmax(0,760px);gap:56px;max-width:1036px}
.artikel-index{position:sticky;top:110px;align-self:start;display:grid;gap:2px;font-size:14px;border-left:2px solid var(--lijn);padding-left:16px}
.artikel-index b{font:600 11px var(--kopletter,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:8px}
.artikel-index a{color:var(--inkt-zacht);text-decoration:none;padding:5px 0;line-height:1.35;position:relative;transition:color .2s}
.artikel-index a.nu{color:var(--inkt)}
.artikel-index a.nu::before{content:"";position:absolute;left:-18px;top:4px;bottom:4px;width:2px;background:var(--goud)}
.artikel h2[id]{scroll-margin-top:100px}
@media (max-width:980px){.artikel-raster{grid-template-columns:1fr}.artikel-index{display:none}}
/* ---------- artikelen: de kaarten waaieren uit een stapel ---------- */
.beweeg .waaier>*{animation:waaier .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0) * 70ms)}
@keyframes waaier{from{opacity:0;transform:translateY(60px) rotate(var(--r,0deg)) scale(.9)}}
/* ---------- contact met zijkolom ---------- */
.contact-raster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px;align-items:start;max-width:1080px}
@media (max-width:980px){.contact-raster{grid-template-columns:1fr}}
.contact-raster>form{max-width:none;margin:0}