@font-face{font-family:'TeX Gyre Heros';src:url(fonts/heros-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'TeX Gyre Heros';src:url(fonts/heros-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html,body{overflow-x:clip}
html{zoom:var(--pz,1)}
body{font-family:'TeX Gyre Heros','Helvetica Neue',Helvetica,Arial,sans-serif;background:#F5F2EC;color:#14201A;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid #367350;outline-offset:2px}

/* Breedte zoals in het filmpje: smalle marge, beeld loopt door tot de schermrand */
:root{--gut:clamp(20px,6.8vw,112px);--max:1840px;--rand:calc((100vw - min(100vw,var(--max)))/2 + var(--gut))}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:1024px){.tot-links{margin-left:calc(-1*var(--rand))}.tot-rechts{margin-right:calc(-1*var(--rand))}}

.kop{font-weight:700;color:#1F3A2E;letter-spacing:-.04em;line-height:1}
.h1{font-size:clamp(44px,5.7vw,96px)}
.h2{font-size:clamp(36px,4.3vw,72px)}
.lead{font-size:clamp(18px,1.45vw,23px);line-height:1.5}
.tekst{font-size:clamp(16px,1.25vw,20px);line-height:1.6}
.mark{background:linear-gradient(#B5D9BE,#B5D9BE) 0 88%/100% .4em no-repeat;margin-left:-.05em;padding:0 .05em}

/* video: tekst komt uit lichtgrijs op, om de beurt */
[data-fade]>*{opacity:0;transition:opacity .7s ease}
[data-fade].in>*{opacity:1}
/* video: wit paneel schuift omhoog over de vorige sectie */
.paneel{transform:translateY(70px);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.paneel.in{transform:none}
/* video: cijfers tellen op en kleuren van grijs naar inkt */
.tel{color:#C9CEC8;transition:color 1s ease}
.in .tel{color:#14201A}
.stat{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.in .stat{opacity:1;transform:none}
.krul path,.krul circle{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
.in .krul path,.in .krul circle{stroke-dashoffset:0}
/* video: kaarten vliegen schuin van rechts binnen en vallen recht */
.vlieg{opacity:0;transform:translate(70%,-30px) rotate(9deg);transition:opacity .5s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.in .vlieg,.vlieg.in{opacity:1;transform:none}
/* video: foto fadet in, daarna de tekst */
.foto{opacity:0;transition:opacity .9s ease}
.in .foto,.foto.in{opacity:1}
/* video: kolommen en logoband lopen door */
@keyframes omhoog{to{transform:translateY(-50%)}}
.loop{animation:omhoog 38s linear infinite}
@keyframes opzij{to{transform:translateX(-50%)}}
.band{animation:opzij 40s linear infinite}
.masker{-webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.masker-x{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* hero: tegels komen binnen en zweven, stippellijnen tekenen zich */
@keyframes zweef{50%{transform:translateY(-10px)}}
.zweef{animation:zweef 7s ease-in-out infinite}
.tegel{opacity:0;transform:translateY(24px) scale(.96);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.klaar .tegel{opacity:1;transform:none}
.stippel path{stroke-dasharray:6 8}
.stippel{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.65,0,.35,1) .5s}
.klaar .stippel{clip-path:inset(0 0 0 0)}
.hero-tekst>*{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.klaar .hero-tekst>*{opacity:1;transform:none}
@keyframes twinkel{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.ster{position:absolute;width:12px;height:12px;animation:twinkel 3.2s ease-in-out infinite}
.slide-tekst{transition:opacity .5s ease}
.pijl path{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) .3s}
.in .pijl path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  [data-fade]>*,.paneel,.stat,.vlieg,.foto,.tel,.tegel,.hero-tekst>*{opacity:1!important;transform:none!important;transition:none!important;color:inherit}
  .stippel{clip-path:none!important}
  .krul path,.krul circle,.pijl path{stroke-dashoffset:0!important;transition:none!important}
  .loop,.band,.zweef,.ster{animation:none!important}
}

/* hero als de referentie: ronde gezichten rond de kop, lijnen ertussen */
.stippen{background-image:radial-gradient(rgba(31,58,46,.16) 1.3px,transparent 1.5px);background-size:15px 15px;-webkit-mask:radial-gradient(ellipse 55% 50% at 50% 42%,#000 30%,transparent 75%);mask:radial-gradient(ellipse 55% 50% at 50% 42%,#000 30%,transparent 75%)}
.ava{position:absolute;left:var(--mx);top:var(--my);width:clamp(54px,7.4vw,var(--s));transform:translate(-50%,-50%) translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1))}
.zwerf{transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1))}
.boog{transform:rotate(-14deg)}
@media (min-width:1024px){.ava{left:var(--x);top:var(--y)}}
.ava img{display:block;width:100%;aspect-ratio:1;border-radius:999px;object-fit:cover;border:5px solid #fff;box-shadow:0 0 0 1px rgba(31,58,46,.05),0 18px 40px rgba(110,90,190,.22)}
.klaar .tegel.pop{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.lijnen path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .6s}
.klaar .lijnen path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.lijnen path{stroke-dashoffset:0!important;transition:none!important}}

/* shortlist: vinkjes poppen één voor één als de tabel binnen is */
.vink{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.in .vink{transform:scale(1);transition-delay:var(--v,1s)}
@media (prefers-reduced-motion:reduce){.vink{transform:none!important;transition:none!important}}

/* vaste menubalk bij omhoog scrollen */
.balk{position:fixed;top:10px;left:10px;right:10px;z-index:60;transform:translateY(calc(-100% - 20px));transition:transform .55s cubic-bezier(.16,1,.3,1)}
.balk.toon{transform:none}
.balk-in{position:relative;padding-inline:clamp(16px,3.2vw,48px);border-radius:18px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 8px 32px rgba(20,32,26,.10)}
.balk nav{height:68px}
@media (prefers-reduced-motion:reduce){.balk{transition:none}}

/* iPhone-mockup (vaste maat 256px, schaalt via .telefoons): concentrische hoeken, dunne titanium rand */
.iphone{position:relative;aspect-ratio:9/19.5;border-radius:46px;padding:3px;background:linear-gradient(135deg,#f7f7f8 0%,#c9cbcf 22%,#f1f1f2 45%,#9fa2a8 72%,#e6e7e9 100%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25),0 40px 70px -24px rgba(20,32,26,.38),0 10px 24px rgba(20,32,26,.10)}
.ip-rand{height:100%;border-radius:43px;background:#0a0a0b;padding:7px;box-shadow:inset 0 0 0 1px #2a2a2c}
.ip-scherm{position:relative;height:100%;overflow:hidden;border-radius:36px;background:#000}
.ip-eiland{position:absolute;z-index:5;top:10px;left:50%;width:70px;height:21px;transform:translateX(-50%);border-radius:999px;background:#000}
.ip-status{position:absolute;z-index:4;top:0;left:0;right:0;height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 26px;font-size:12px;font-weight:700;letter-spacing:-.01em}
.ip-home{position:absolute;z-index:5;bottom:6px;left:50%;width:88px;height:4px;transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.9)}
.ip-knop{position:absolute;width:3px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#8e9197,#d6d7da)}
.ip-actie{left:-2px;top:96px;height:22px}.ip-vol1{left:-2px;top:136px;height:44px}.ip-vol2{left:-2px;top:190px;height:44px}.ip-aan{right:-2px;top:150px;height:66px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#d6d7da,#8e9197)}
/* telefoons schalen als geheel mee, zodat de inhoud in verhouding blijft */
/* mobiel/tablet: telefoons als één geheel schalen en precies centreren (transform i.p.v. zoom, werkt ook in iOS Safari) */
@media (max-width:1023px){.telefoons{position:absolute;left:50%;top:54%;width:max-content;transform:translate(-50%,-50%) scale(var(--ts,.6));margin:0!important}}
@media (min-width:1024px){.telefoons{zoom:.8}}
@media (min-width:1600px){.telefoons{zoom:1}}
.kantel{transition:transform .9s cubic-bezier(.16,1,.3,1);will-change:transform}

/* footer: lichte kaart, kolommen, het logo groot als waterteken onderaan */
.f2{background:#F5F2EC;padding-top:8px}
.f2-kaart{background:#E4EEE6;border-radius:26px;margin:0 10px;padding:64px 0 0;overflow:hidden}
.f2-boven{display:grid;grid-template-columns:1.35fr 1fr .8fr;gap:40px}
.f2-oproep{font-weight:700;font-size:22px;letter-spacing:-.025em;color:#1F3A2E;line-height:1.2}
.f2-oproep-zin{font-size:15px;margin-top:7px;max-width:34ch;color:#5E6A63}
.f2-kolomkop{font-size:15px;font-weight:700;color:#14201A;margin-bottom:14px}
.f2-groot{font-size:16px;line-height:1.75}
.f2-groot a{color:#14201A;font-weight:700}
.f2-groot a:hover,.f2-sociaal a:hover,.f2-lijst a:hover,.f2-balk a:hover{color:#367350}
.f2-sociaalcel{justify-self:end}
.f2-sociaal{display:flex;gap:16px;justify-content:flex-end;color:#1F3A2E}
.f2-sociaal a{display:flex}
.f2-lijn{border:0;border-top:1px solid #C9D9CD;margin:48px 0 50px}
.f2-rij{display:grid;grid-template-columns:2.2fr .95fr .85fr .8fr .9fr;gap:34px}
.f2-merknaam{display:flex;align-items:center;gap:9px;font-weight:700;font-size:28px;letter-spacing:-.05em;color:#1F3A2E}
.f2-onder-tekst{font-size:15px;line-height:1.65;margin-top:20px;max-width:32ch;color:#5E6A63}
.f2-lijst{display:flex;flex-direction:column;gap:16px;font-size:15px;color:#5E6A63}
/* een tint donkerder dan de kaart, onderaan afgesneden */
.f2-waterteken{display:flex;align-items:flex-end;gap:.06em;font-weight:700;letter-spacing:-.06em;font-size:clamp(58px,15.4vw,290px);line-height:.8;color:#CFE0D3;margin:100px 0 -.1em;white-space:nowrap;user-select:none}
.f2-waterteken-teken{display:block;width:.62em;height:.68em;flex-shrink:0;margin-bottom:.02em;background:#CFE0D3;-webkit-mask:url(logo/teken.svg) center/contain no-repeat;mask:url(logo/teken.svg) center/contain no-repeat}
.f2-balk{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;font-size:13px;color:#5E6A63}
@media(max-width:900px){
  .f2-kaart{padding-top:48px}
  .f2-boven{grid-template-columns:1fr 1fr;gap:34px}
  .f2-sociaalcel{grid-column:1/-1;justify-self:start}
  .f2-sociaal{justify-content:flex-start}
  .f2-rij{grid-template-columns:1fr 1fr;gap:32px}
  .f2-rij>:first-child{grid-column:1/-1}
}
@media(max-width:620px){.f2-boven{grid-template-columns:1fr}.f2-waterteken{margin-top:48px}}
/* groeipad: elke stap iets hoger, als een trap omhoog */
@media (min-width:1024px){.trap>li{transform:translateY(calc((3 - var(--trap)) * 26px))}}

/* hero als één geheel meeschalen op desktop (--z wordt in index.html gezet) */
@media (min-width:1024px){
  .hero-podium,.hero-onder{zoom:var(--z,1)}
  .hero-podium .ava{width:var(--s)}
}
.woord{transition:opacity .25s linear}
/* story-advertentie: woorden komen één voor één in beeld */
.sw{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);transition-delay:calc(.6s + var(--i) * .09s)}
.in .sw{opacity:1;transform:none}
/* bereikkaart: stippen rond de vestiging lichten op */
.kaart .bereik{fill:#1F3A2E;fill-opacity:.14;transition:fill .5s ease,fill-opacity .5s ease;transition-delay:calc(.6s + var(--d))}
.in .kaart .bereik{fill:#367350;fill-opacity:.85}
.kaart .ring{transform-box:fill-box;transform-origin:center;transform:scale(.2);opacity:0;transition:transform 1.4s cubic-bezier(.16,1,.3,1) .4s,opacity .6s ease .4s}
.in .kaart .ring{transform:none;opacity:1}
@keyframes puls{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.4);opacity:0}}
.kaart .puls{transform-box:fill-box;transform-origin:center;animation:puls 2.2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.sw,.kaart .ring{opacity:1!important;transform:none!important;transition:none!important}.kaart .bereik{fill:#367350;fill-opacity:.85;transition:none}.kaart .puls{animation:none}}
/* camera-telefoon: knipperende REC; story: loopt als een video */
@keyframes knipper{50%{opacity:.2}}
.rec{animation:knipper 1.2s steps(1) infinite}
@keyframes voortgang{from{width:0}to{width:100%}}
.voortgang{animation:voortgang 8s linear infinite}
@keyframes langzaam{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.langzaam{animation:langzaam 8s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.rec,.voortgang,.langzaam{animation:none}.voortgang{width:40%}}
/* hero: vakicoontjes in plaats van foto's */
.ava-tegel{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:999px;border:5px solid #fff;box-shadow:0 0 0 1px rgba(31,58,46,.05),0 18px 40px rgba(110,90,190,.22)}
.ava-tegel svg{width:44%;height:44%}
.ava-ico{display:block;width:100%;filter:drop-shadow(0 14px 20px rgba(31,58,46,.18)) drop-shadow(0 3px 5px rgba(31,58,46,.08))}
.ava-ico svg{display:block;width:100%;height:auto}
/* icoon vult het vlak van de oude ronde foto, zelfde middelpunt */
.ava-ico svg{transform:scale(1.12)}

/* We blijven bellen: rail vult zich, stappen komen één voor één */
.bel-vul{transform:scaleY(0);transition:transform 1.6s cubic-bezier(.65,0,.35,1) .3s}
@media (min-width:1024px){.bel-vul{transform:scaleX(0)}}
.in .bel-vul{transform:none}
.bel-stap{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(.4s + var(--n) * .3s)}
.in .bel-stap{opacity:1;transform:none}
.bel-punt{transform:scale(.4);transition:transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.5s + var(--n) * .3s)}
.in .bel-punt{transform:none}
/* Verschil: links wordt per rij doorgestreept, rechts verschijnt het antwoord */
.vs-x span:last-child{position:relative;transition:color .5s ease;transition-delay:calc(.5s + var(--r) * .35s)}
.vs-x span:last-child::after{content:"";position:absolute;left:0;top:52%;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s ease;transition-delay:calc(.5s + var(--r) * .35s)}
.in .vs-x span:last-child{color:#A3ABA6}
.in .vs-x span:last-child::after{transform:none}
.vs-v{opacity:.15;transform:translateX(-10px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(.75s + var(--r) * .35s)}
.in .vs-v{opacity:1;transform:none}
.vs-v .vink{transition-delay:calc(.8s + var(--r) * .35s)}
@media (prefers-reduced-motion:reduce){.bel-vul,.bel-stap,.bel-punt,.vs-v{transform:none!important;opacity:1!important;transition:none!important}.vs-x span:last-child::after{transform:none;transition:none}}

/* ---- mobiel menu ---- */
.hamb{position:relative;z-index:80;display:grid;place-items:center;width:46px;height:46px;border-radius:999px;background:#1F3A2E;margin-left:8px}
@media (min-width:1024px){.hamb{display:none}}
.hamb span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:#fff;transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .25s ease,width .35s ease}
.hamb span:nth-child(1){transform:translateY(-6px)}
.hamb span:nth-child(3){transform:translateY(6px);right:20px}
.menu-open .hamb span:nth-child(1){transform:rotate(45deg)}
.menu-open .hamb span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-open .hamb span:nth-child(3){transform:rotate(-45deg);right:14px}
.mmenu-kop{display:flex;align-items:center;justify-content:space-between;min-height:46px}
.mmenu-dicht{background:#1F3A2E;margin:0}
.mmenu-dicht span{background:#fff}
.menu-open .hamb:not(.mmenu-dicht){opacity:0}
.mmenu{position:fixed;inset:0;z-index:70;pointer-events:none;visibility:hidden;transition:visibility 0s linear .7s}
.menu-open .mmenu{pointer-events:auto;visibility:visible;transition:none}
.mmenu-bg{position:absolute;inset:0;background:linear-gradient(180deg,#E6E1F8 0%,#ECE9FA 45%,#F7F6FD 75%,#FFFFFF 100%);clip-path:circle(0 at calc(100% - 44px) 44px);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.menu-open .mmenu-bg{clip-path:circle(150% at calc(100% - 44px) 44px)}
.mmenu-bg::after{content:"";position:absolute;right:-30%;bottom:-20%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(181,217,190,.45),transparent)}
.mmenu-in{position:relative;height:100%;display:flex;flex-direction:column;padding:26px 24px 32px;color:#1F3A2E;overflow-y:auto}
.mmenu-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:26px;letter-spacing:-.05em;opacity:0;transition:opacity .4s ease}
.mmenu-logo img{height:1.1em}
.menu-open .mmenu-logo{opacity:1;transition-delay:.35s}
.mmenu nav{margin-top:auto;margin-bottom:auto;padding:40px 0}
.mmenu li{overflow:hidden;border-bottom:1px solid rgba(31,58,46,.1)}
.mmenu li a{display:flex;align-items:center;gap:14px;padding:18px 0;font-size:clamp(30px,9vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1;transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1),color .2s}
.menu-open .mmenu li a{transform:none;transition-delay:calc(.3s + var(--i) * .07s)}
.mmenu li a:active,.mmenu li a:hover{color:#367350}
.mmenu li svg{width:26px;height:26px;margin-left:auto;color:#9C86E8}
.mmenu-nr{font-size:12px;letter-spacing:.08em;color:#B5D9BE;align-self:flex-start;margin-top:4px}
.mmenu-onder{display:grid;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.menu-open .mmenu-onder{opacity:1;transform:none;transition-delay:calc(.35s + var(--i) * .07s)}
.mmenu-app{display:block;text-align:center;border-radius:999px;background:#1F3A2E;color:#fff;font-weight:700;font-size:17px;padding:17px}
.mmenu-tel{display:block;text-align:center;border-radius:999px;border:1.5px solid #1F3A2E;font-weight:700;font-size:17px;padding:16px}
.mmenu-onder p{text-align:center;font-size:13px;color:rgba(255,255,255,.55);margin-top:4px}
html.menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mmenu-bg,.mmenu li a,.mmenu-onder,.mmenu-logo,.hamb span{transition:none!important}}

.belknop{display:grid;place-items:center;width:46px;height:46px;border-radius:999px;background:rgba(255,255,255,.75);border:1.5px solid rgba(31,58,46,.18);color:#1F3A2E;margin-left:auto;transition:background .2s}
.belknop:active{background:#B5D9BE}
.belknop svg{width:19px;height:19px}
@media (min-width:1024px){.belknop{display:none}}
/* mobiel: geen verspringend paneel, tekst staat meteen stil */
@media (max-width:1023px){.paneel{transform:none!important;transition:none}}

/* ---- aanvraagcheck ---- */
.chk{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;pointer-events:none;visibility:hidden;transition:visibility 0s linear .4s}
.chk-open .chk{pointer-events:auto;visibility:visible;transition:none}
.chk-open{overflow:hidden}
.chk-bg{position:absolute;inset:0;background:rgba(20,32,26,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease}
.chk-open .chk-bg{opacity:1}
.chk-kaart{position:relative;width:min(640px,100%);max-height:calc(100svh - 32px);overflow:auto;border-radius:28px;background:linear-gradient(180deg,#ECE9FA 0%,#F7F6FD 45%,#FFFFFF 100%);box-shadow:0 30px 80px rgba(20,32,26,.25);padding:22px 28px 34px;transform:translateY(24px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.chk-open .chk-kaart{transform:none;opacity:1}
@media (max-width:640px){.chk{padding:0;place-items:end stretch}.chk-kaart{width:100%;max-height:94svh;border-radius:26px 26px 0 0;padding:18px 20px 28px;transform:translateY(100%)}}
.chk-top{display:flex;align-items:center;gap:14px}
.chk-terug,.chk-dicht{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:999px;background:#fff;color:#1F3A2E;font-size:16px;box-shadow:0 1px 0 rgba(31,58,46,.08)}
.chk-balk{flex:1;height:4px;border-radius:4px;background:rgba(31,58,46,.1);overflow:hidden}
.chk-balk span{display:block;height:100%;width:6%;border-radius:4px;background:#1F3A2E;transition:width .5s cubic-bezier(.16,1,.3,1)}
.chk-scherm{padding-top:26px;animation:chkIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes chkIn{from{opacity:0;transform:translateX(calc(var(--r,1) * 28px))}}
.chk-stap{font-size:13px;font-weight:700;letter-spacing:.04em;color:#367350}
.chk-kop{margin-top:6px;font-size:clamp(26px,4vw,36px);font-weight:700;line-height:1.08;letter-spacing:-.035em;color:#1F3A2E}
.chk-rollen{display:grid;gap:14px;margin-top:24px}
@media (min-width:520px){.chk-rollen{grid-template-columns:1fr 1fr}}
.chk-rol{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:22px;border-radius:22px;background:#fff;text-align:left;border:2px solid transparent;box-shadow:0 8px 24px rgba(31,58,46,.06);transition:border-color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.chk-rol:hover{border-color:#B5D9BE;transform:translateY(-3px)}
.chk-rol svg{width:64px;height:64px;margin-bottom:10px}
.chk-rol b{font-size:20px;letter-spacing:-.02em;color:#1F3A2E}
.chk-rol span{font-size:14px;color:#5E6A63}
.chk-opties{display:grid;gap:10px;margin-top:22px}
@media (min-width:520px){.chk-opties{grid-template-columns:1fr 1fr}}
.chk-optie{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:0 18px;border-radius:16px;background:#fff;border:1.5px solid #DCE4DE;font-size:16px;font-weight:700;color:#14201A;text-align:left;transition:border-color .2s,background .2s}
.chk-optie:hover{border-color:#7D8A83}
.chk-optie i{width:22px;height:22px;flex-shrink:0;border-radius:999px;border:1.5px solid #B9C3BD;transition:all .2s}
.chk-optie.aan{border-color:#1F3A2E;background:#E4EEE6}
.chk-optie.aan i{border-color:#1F3A2E;background:#1F3A2E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.chk-hint{margin-top:12px;font-size:14px;color:#5E6A63}
.chk-verder{display:flex;align-items:center;justify-content:center;width:100%;height:56px;margin-top:20px;border-radius:999px;background:#1F3A2E;color:#fff;font-size:16px;font-weight:700;transition:background .2s,opacity .2s}
.chk-verder:hover{background:#367350}
.chk-verder:disabled{opacity:.3;cursor:default}
.chk-form{display:grid;gap:12px;margin-top:22px}
.chk-veld{display:grid;gap:6px;font-size:14px;font-weight:700;color:#1F3A2E}
.chk-veld input{height:56px;border-radius:16px;border:1.5px solid #DCE4DE;background:#fff;padding:0 18px;font-size:16px;font-weight:400;color:#14201A}
.chk-veld input:focus{outline:none;border-color:#1F3A2E;box-shadow:0 0 0 3px rgba(181,217,190,.6)}
.chk-klein{font-size:13px;color:#5E6A63;text-align:center}
.chk-klein a{text-decoration:underline}
.chk-klaar{text-align:center;padding-top:10px}
.chk-vink{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:999px;background:#B5D9BE;animation:chkPop .5s cubic-bezier(.34,1.56,.64,1)}
.chk-vink svg{width:34px;height:34px;fill:none;stroke:#1F3A2E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes chkPop{from{transform:scale(.3);opacity:0}}
.chk-tekst{margin:12px auto 0;max-width:30em;font-size:17px;line-height:1.55;color:#14201A}
.chk-link{margin-top:14px;font-size:15px;font-weight:700;color:#1F3A2E;text-decoration:underline}
@media (prefers-reduced-motion:reduce){.chk-kaart,.chk-bg,.chk-scherm,.chk-vink,.chk-balk span{transition:none!important;animation:none!important}}
.chk-anders{display:none;margin-top:12px}
.chk-anders.aan{display:grid}
.chk-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* aanvraagcheck op mobiel: alles in één scherm, knop altijd zichtbaar */
@media (max-width:640px){
  .chk-kaart{padding:14px 18px 18px}
  .chk-top .chk-terug,.chk-top .chk-dicht{width:36px;height:36px}
  .chk-scherm{padding-top:16px}
  .chk-stap{font-size:12px}
  .chk-kop{font-size:24px;margin-top:4px}
  .chk-opties{gap:7px;margin-top:14px}
  .chk-optie{min-height:48px;padding:0 14px;font-size:15px;border-radius:14px}
  .chk-optie i{width:20px;height:20px}
  .chk-hint{margin-top:8px;font-size:13px}
  .chk-rollen{margin-top:16px;gap:10px}
  .chk-rol{flex-direction:row;align-items:center;gap:14px;padding:16px}
  .chk-rol svg{width:52px;height:52px;margin:0;flex-shrink:0}
  .chk-rol b{display:block;font-size:18px}
  .chk-form{gap:10px;margin-top:14px}
  .chk-veld input{height:50px}
}
.chk-scherm > .chk-verder{position:sticky;bottom:0;box-shadow:0 -14px 18px 6px #fff}
/* check als zwevend venster in het midden, overal even hoog zodat hij niet verspringt */
.chk-kaart{display:flex;flex-direction:column;height:min(660px,calc(100svh - 24px))}
.chk-in{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.chk-scherm{min-height:100%;display:flex;flex-direction:column}
.chk-scherm > .chk-verder{margin-top:auto;position:sticky;bottom:0}
.chk-scherm > .chk-hint + .chk-verder{margin-top:auto}
.chk-form .chk-verder{margin-top:10px}
.chk-klaar{margin:auto 0}
@media (max-width:640px){
  .chk{padding:12px;place-items:center}
  .chk-kaart{width:100%;border-radius:26px;transform:translateY(24px) scale(.96);height:min(680px,calc(100svh - 24px))}
}
.chk-hint{margin-bottom:14px}