@font-face{font-family:'TeX Gyre Heros';src:url(fonts/TeXGyreHeros-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'TeX Gyre Heros';src:url(fonts/TeXGyreHeros-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 */
.telefoons{zoom:.5}
@media (min-width:640px){.telefoons{zoom:.68}}
@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}