/* AannemersDossier, ronde 1. Tokens letterlijk uit SITE-SPEC par 1. */

:root{
  --klei:#9B4B2B;       /* gebrande klei: grond van de wereld, hero en hoofdstukken */
  --klei-diep:#7A3A20;  /* donkere secties: dossier-inhoud, start, footer */
  --klei-licht:#B8623F; /* lichtvlak op de grond, hover op klei */
  --kalk:#F4EFE6;       /* gebroken wit: objecten, tekst op klei, lichte secties */
  --zand:#E9DCC7;       /* tweede lichte grond (van losse stukken naar dossier, cijfers) */
  --inkt:#221A16;       /* tekst op kalk en zand */
  --keur:#2F7D4F;       /* het ENE accent: vinkje, stempel "compleet", hover van de hoofdknop */
  --keur-tekst:#256640; /* keur op lichte grond in tekstgrootte (contrast) */
  --dur-fast:.18s; --dur-mid:.56s; --dur-slow:.9s; --dur-story:1.6s;
  --ease:cubic-bezier(.16,1,.3,1); --travel:20px; --stagger:.08s;
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:.01ms;--dur-mid:.01ms;--dur-slow:.01ms;--dur-story:.01ms}}

/* ---------- basis ---------- */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:'Barlow',sans-serif;
  font-size:17.5px;
  line-height:1.6;
  background:var(--klei);
  color:var(--kalk);
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--klei-diep);color:var(--kalk)}
:focus-visible{outline:2px solid var(--kalk);outline-offset:3px}
.cijfers :focus-visible,.aanleveren :focus-visible,.prijs :focus-visible,
.voor-wie :focus-visible,.vragen :focus-visible,.oprichter :focus-visible,
.assemblage :focus-visible{outline-color:var(--inkt)}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.placeholder{opacity:.9;border-bottom:2px dashed currentColor;padding:0 .12em}

h1,h2,h3,.ch-num,.stap-nr,.badge-tekst,.bon-bedrag,.u-jaar,.foto-letter,.schuif-output,.tl-item strong{
  font-family:'Big Shoulders Display','Barlow',sans-serif;
}
h2{
  font-weight:800;
  font-size:clamp(1.9rem,3.8vw,4.5rem);
  line-height:.96;
  text-transform:uppercase;
  letter-spacing:.012em;
  margin-bottom:.35em;
}
h3{
  font-weight:800;
  font-size:clamp(1.35rem,2vw,1.8rem);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.015em;
}
p{max-width:62ch}

/* ---------- knoppen (tabblad-vorm) ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:'Big Shoulders Display','Barlow',sans-serif;
  font-weight:700;font-size:1.08rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.9em 1.5em .78em;
  text-decoration:none;cursor:pointer;border:0;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:background-color var(--dur-mid) var(--ease),
             color var(--dur-mid) var(--ease),
             box-shadow var(--dur-mid) var(--ease);
}
.btn-primary{background:var(--kalk);color:var(--inkt)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--keur);color:var(--kalk)}
.btn-sec{background:transparent;color:var(--kalk);box-shadow:inset 0 0 0 1.5px var(--kalk)}
.btn-sec:hover,.btn-sec:focus-visible{background:rgba(244,239,230,.14)}

/* ---------- nav ---------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:1.6rem;
  padding:.8rem clamp(1rem,4vw,3rem);
  color:var(--kalk);
  background:color-mix(in srgb,var(--klei-diep) 55%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform var(--dur-mid) var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:color-mix(in srgb,var(--klei-diep) 92%,transparent)}
}
body.nav-weg .nav{transform:translateY(-100%)}
.nav-brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
.nav-naam{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase}
.nav-sub{font-size:.78rem;opacity:.85}
.nav-links{margin-left:auto;display:flex;gap:1.6rem}
.nav-links a{
  position:relative;text-decoration:none;font-weight:500;font-size:.98rem;padding:.2rem 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--kalk);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-mid) var(--ease);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-tel{font-weight:600;font-size:.98rem;white-space:nowrap}
.btn-nav{padding:.62em 1.1em .52em;font-size:.98rem}

/* ---------- M1 hero + wereld: sticky filmstage met poster, film en lussen ---------- */

.world-region{position:relative;overflow:clip}
.film-stage{
  position:absolute;top:0;left:0;right:0;height:100svh;min-height:560px;
  z-index:1;overflow:clip;
  background:radial-gradient(120% 95% at 30% 18%,var(--klei-licht),var(--klei) 62%);
}
.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.97}
.film-poster.is-away{opacity:0}
.film{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity var(--dur-slow) var(--ease);
}
body.has-film .film{opacity:1}
.loops{position:absolute;inset:0;display:none}
.loop{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--dur-mid) var(--ease);
}
.loop.is-actief{opacity:1}

.hero{
  position:relative;z-index:2;
  height:100svh;min-height:560px;
  display:grid;align-items:center;
}
.gordijn{min-width:0}
.hero-copy{
  padding:5.2rem clamp(1.25rem,6vw,6.5rem) 4rem;
  max-width:1180px;
}
.kicker{
  font-family:'Big Shoulders Display',sans-serif;font-weight:700;
  font-size:clamp(.98rem,1.5vw,1.3rem);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:.9rem;
}
h1{
  font-weight:800;
  font-size:13vw;
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.015em;
  margin-bottom:1.4rem;
}
.wat-voor-wie{font-size:clamp(1.02rem,1.3vw,1.28rem);line-height:1.55;max-width:56ch}
.hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:.9rem;margin:1.7rem 0 1.1rem;max-width:26rem}
.prijs-kicker{font-weight:600;max-width:44ch}

.hero-badge{position:absolute;top:15vh;left:4vw;color:var(--kalk);z-index:3}
.badge-ring{width:clamp(100px,10.5vw,136px);height:auto;display:block}
.badge-tekst{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;fill:currentColor}

.scroll-cue{
  position:absolute;left:25%;bottom:1.8rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  color:var(--kalk);
  font-family:'Big Shoulders Display',sans-serif;font-size:.82rem;
  letter-spacing:.32em;text-transform:uppercase;
  transition:opacity var(--dur-mid) var(--ease);
}
.scroll-cue svg{width:17px;height:17px}
body.is-scrolled .scroll-cue{opacity:0}
.scroll-cue span,.scroll-cue svg{animation:cue-adem var(--dur-story) var(--ease) infinite}
@keyframes cue-adem{
  0%,100%{opacity:.4;transform:translateY(0)}
  50%{opacity:1;transform:translateY(7px)}
}

/* ---------- M2 hoofdstukken ---------- */

.chapters-static{padding:3.5rem clamp(1rem,4vw,3rem) 4.5rem;max-width:1240px;margin:0 auto}
.chapters-static h2{margin-bottom:1.6rem}
.chapter-block{
  display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;
  padding:2.6rem 0;border-top:1px solid color-mix(in srgb,var(--kalk) 22%,transparent);
}
.chapter-beeld{
  background:linear-gradient(160deg,var(--klei-licht),var(--klei-diep));
  border-radius:3px;overflow:hidden;
}
.chapter-beeld img{width:100%;aspect-ratio:3/2;object-fit:cover}
.chapter-beeld img.is-away{opacity:0}
.ch-num{
  font-weight:900;font-size:clamp(2.6rem,4.5vw,4rem);line-height:1;
  color:var(--klei-licht);margin-bottom:.4rem;
}
.chapter-tekst h3{margin-bottom:.9rem}
.chapter-block ol,.chapter-panel ol{
  list-style:none;counter-reset:stap;display:grid;gap:.55rem;margin-bottom:1.1rem;
}
.chapter-block ol li,.chapter-panel ol li{
  counter-increment:stap;position:relative;padding-left:2.1rem;max-width:56ch;
}
.chapter-block ol li::before,.chapter-panel ol li::before{
  content:counter(stap);
  position:absolute;left:0;top:.05em;
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  font-size:1.05em;color:var(--klei-licht);
}
.icon-labels{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.icon-labels li{display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.95rem}
.icon-labels svg{width:22px;height:22px;flex:none}

.hoofdstukken{display:none}
.hoofdstuk{position:relative}
.ch-reus{
  display:block;width:max-content;margin-left:48%;
  font-weight:900;font-size:min(680px,75svh);line-height:.8;
  letter-spacing:.02em;color:var(--kalk);opacity:.2;
  user-select:none;pointer-events:none;
}
.chapter-panel{
  position:relative;z-index:2;color:var(--kalk);
  background:color-mix(in srgb,var(--klei-diep) 58%,transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:6px;padding:1.7rem 1.9rem;
}
.chapter-panel .ch-num{font-size:3.2rem;color:var(--klei-licht)}
.chapter-panel h3{margin-bottom:.8rem}

/* ---------- M3 dossier-inhoud ---------- */

.dossier{background:var(--klei-diep);color:var(--kalk)}
.dossier-pin{padding:4.5rem clamp(1rem,4vw,3rem) 5.5rem;max-width:1360px;margin:0 auto}
.dossier-pin h2{margin-bottom:1rem}
.dossier .intro{margin-bottom:2rem}
.dossier-stappen-wrap{position:relative}
.dossier-stappen{list-style:none;position:relative;padding-left:2.5rem;display:grid;gap:1.15rem}
.dossier-lijn{position:absolute;left:9px;top:8px;width:4px;height:calc(100% - 16px)} /* vervangen element: bottom rekt niet, hoogte expliciet; JS kort in tot de laatste stip */
.dossier-lijn path{stroke:var(--kalk);stroke-width:4;fill:none;stroke-dasharray:1;stroke-dashoffset:0}
.dossier-step{position:relative}
.dossier-step h3{margin-bottom:.25rem}
.dossier-step p{max-width:52ch}
.step-stip{
  position:absolute;left:-2.5rem;top:.28rem;width:12px;height:12px;border-radius:50%;
  background:var(--klei-diep);border:3px solid var(--kalk);
}
.bronregel{margin-top:2.2rem;font-size:.95rem;opacity:.85}
.bronregel a{color:var(--kalk)}
.map-svg{width:100%;max-width:560px;display:block;margin:1.5rem auto 0}
.tab-num{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:22px;fill:var(--klei-diep)}
.map3-tab{transform-box:fill-box;transform-origin:left center}
.map3-check{stroke-dasharray:1;stroke-dashoffset:0}
#vink3{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- M4 assemblage ---------- */

.assemblage{background:var(--zand);color:var(--inkt);position:relative;overflow:clip;display:flow-root}
.watermark{
  position:absolute;top:6vw;left:50%;transform:translateX(-50%);
  font-family:'Big Shoulders Display',sans-serif;font-weight:900;
  font-size:22vw;line-height:1;letter-spacing:.02em;
  color:var(--kalk);opacity:.75;white-space:nowrap;
  pointer-events:none;user-select:none;
}
.assemble-kop{padding:5.5rem clamp(1rem,4vw,3rem) 0;max-width:1240px;margin:0 auto}
.assemble-kop p{max-width:58ch}
.assemble-scene{position:relative;height:min(540px,66vh);max-width:1240px;margin:1.5rem auto 0}
.assemble-map{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);width:min(500px,88%)}
.piece{position:absolute;left:50%;top:50%;width:min(150px,27vw)}
.piece svg{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 4px rgba(34,26,22,.12))}
.piece-titel{font-family:'Barlow',sans-serif;font-weight:600;font-size:11px;letter-spacing:.07em;fill:var(--klei-diep)}
.piece:nth-child(1){transform:translate(calc(-50% - 36px),10px) rotate(-3deg)}
.piece:nth-child(2){transform:translate(calc(-50% - 24px),22px) rotate(-1deg)}
.piece:nth-child(3){transform:translate(calc(-50% - 12px),34px) rotate(1deg)}
.piece:nth-child(4){transform:translate(-50%,46px) rotate(2deg)}
.piece:nth-child(5){transform:translate(calc(-50% + 12px),58px) rotate(-1deg)}
.piece:nth-child(6){transform:translate(calc(-50% + 24px),70px) rotate(2deg)}
.piece:nth-child(7){transform:translate(calc(-50% + 34px),82px) rotate(-2deg)}
.stempel{position:absolute;left:50%;top:34%;width:clamp(112px,13vw,150px)}
.stempel svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 16px rgba(34,26,22,.28))}
.stempel-tekst{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:19px;letter-spacing:.16em;fill:var(--keur)}
.assemble-voortgang{max-width:520px;margin:1.2rem auto 5.5rem;padding:0 1rem}
.assemble-rail{position:relative;height:3px;background:color-mix(in srgb,var(--klei) 38%,var(--zand))}
.assemble-vulling{position:absolute;inset:0;background:var(--klei-diep);transform:scaleX(0);transform-origin:left center}
.assemble-slider{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;
  background:var(--klei-diep);color:var(--kalk);
  display:grid;place-items:center;
}
.assemble-slider svg{width:19px;height:19px}

/* ---------- M5 aanleveren ---------- */

.aanleveren{background:var(--zand);color:var(--inkt)}
.strip-kop{padding:5rem clamp(1rem,4vw,3rem) 0;max-width:1240px;margin:0 auto}
.strip-kop .intro{margin-bottom:.5rem}
.strip-viewport{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.strip-track{
  list-style:none;display:flex;gap:1.1rem;
  padding:2.2rem clamp(1rem,4vw,3rem) 4.5rem;
  width:max-content;
}
.kaart{
  scroll-snap-align:center;
  flex:0 0 min(78vw,380px);
  background:var(--kalk);color:var(--inkt);
  border-radius:4px;padding:1.9rem 1.7rem 1.7rem;
  display:flex;flex-direction:column;gap:.75rem;
  transition:transform var(--dur-mid) var(--ease),opacity var(--dur-mid) var(--ease);
}
.kaart svg{width:30px;height:30px;color:var(--klei-diep)}
.kaart h3{font-size:1.28rem}
.kaart p{font-size:1rem}
@media (hover:hover){
  .strip-track:has(.kaart:hover) .kaart:not(:hover){opacity:.5;transform:scale(.985)}
  .kaart:hover{transform:translateY(-6px)}
}

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

.cijfers{background:var(--kalk);color:var(--inkt)}
.cijfers-kop{padding:5.5rem clamp(1rem,4vw,3rem) .5rem;max-width:1240px;margin:0 auto}
.stats{
  display:grid;grid-template-columns:1fr;gap:2.6rem;
  max-width:1240px;margin:0 auto;padding:1.6rem clamp(1rem,4vw,3rem) 0;
}
.stat-num{
  font-weight:900;font-size:clamp(3rem,10vw,5.4rem);
  line-height:.95;color:var(--klei);margin-bottom:.5rem;
}
.stat-num-sm{font-size:clamp(2rem,6vw,3.4rem)}
.stat-num .w{display:inline-block;white-space:nowrap}
.stat-label{max-width:40ch}
.stat-bron{font-size:.9rem;opacity:.75;margin-top:.35rem}
.tijdlijn{max-width:1240px;margin:3.2rem auto 0;padding:0 clamp(1rem,4vw,3rem) 5.5rem}
.tijdlijn-lijn{display:block;width:100%;height:4px}
.tijdlijn-lijn path{stroke:var(--klei-diep);stroke-width:4;fill:none;stroke-dasharray:1;stroke-dashoffset:0}
.tijdlijn-items{list-style:none;display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:1.8rem}
.tl-item strong{
  display:block;font-weight:800;font-size:1.5rem;color:var(--klei-diep);margin-bottom:.3rem;
}
.tl-item p{font-size:.98rem}
.bronnen{font-size:.9rem;opacity:.75;margin-top:2rem}

/* ---------- M7 voor wie ---------- */

.voor-wie{background:var(--kalk);color:var(--inkt)}
.trio-kop{padding:5.5rem clamp(1rem,4vw,3rem) .5rem;max-width:1240px;margin:0 auto}
.trio{
  display:grid;grid-template-columns:1fr;gap:2.6rem;
  max-width:1240px;margin:1.6rem auto 0;padding:0 clamp(1rem,4vw,3rem);
}
.trio-item{text-align:center}
.trio-object{position:relative;z-index:0}
.trio-object::before{
  content:"";position:absolute;inset:9% -3% 3%;
  background:var(--zand);
  clip-path:polygon(24px 0,100% 0,calc(100% - 24px) 100%,0 100%);
}
.trio-object svg{position:relative;width:min(235px,80%);height:auto;display:block;margin:0 auto}
.trio-item h3{margin:1.1rem 0 .8rem;color:var(--klei-diep)}
.trio-text{list-style:none;text-align:left;display:grid;gap:.5rem;margin:0 auto;max-width:44ch}
.trio-text li{position:relative;padding-left:1.1rem}
.trio-text li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;
  background:var(--klei);
}
/* duel: de twee andere routes zijn bijzaak, onze map is het antwoord */
.trio-item.route-anders .trio-object svg{width:min(170px,58%);opacity:.85}
.trio-item.route-anders h3{font-size:1.25rem;opacity:.9}
.trio-item.route-anders .trio-text{font-size:.98rem;opacity:.9}
.trio-item.route-wij{
  background:var(--klei-diep);color:var(--kalk);border-radius:10px;
  padding:2.2rem 1.6rem 2.4rem;position:relative;
}
.trio-item.route-wij .trio-object svg{width:min(300px,86%)}
.trio-item.route-wij h3{color:var(--kalk);font-size:1.9rem}
.trio-item.route-wij .trio-text li::before{background:var(--keur)}
.trio-item.route-wij .route-label{
  display:inline-block;font-family:'Barlow',sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kalk);opacity:.72;
  margin-bottom:.4rem;
}
.rightfit{max-width:1240px;margin:4.2rem auto 0;padding:0 clamp(1rem,4vw,3rem) 6rem}
.rightfit h2{margin-bottom:1.4rem}
.fit-kolommen{display:grid;grid-template-columns:1fr;gap:1.8rem}
.fit-kolommen h3{margin-bottom:.7rem;color:var(--klei-diep)}
.fit-kolommen ul{list-style:none;display:grid;gap:.7rem}
.fit-kolommen li{display:flex;gap:.7rem;align-items:flex-start;max-width:52ch}
.fit-kolommen svg{width:19px;height:19px;flex:none;margin-top:.22em}
.fit-voor svg{color:var(--keur-tekst)}
.fit-niet svg{color:var(--klei-diep)}

/* ---------- M8 prijs ---------- */

.prijs{background:var(--zand);color:var(--inkt)}
.prijs-kop{padding:5.5rem clamp(1rem,4vw,3rem) 1rem;max-width:1240px;margin:0 auto}
.prijs-grid{
  display:grid;grid-template-columns:1fr;gap:2.8rem;
  max-width:1240px;margin:1.2rem auto 0;padding:0 clamp(1rem,4vw,3rem) 6rem;
  align-items:start;
}
.bon-mask{max-width:560px}
.bon{
  position:relative;background:var(--kalk);color:var(--inkt);
  padding:2.4rem 1.9rem 2.8rem;
  filter:drop-shadow(0 16px 24px rgba(34,26,22,.16));
}
.bon::before,.bon::after{
  content:"";position:absolute;left:0;right:0;height:8px;
  background:linear-gradient(-45deg,var(--kalk) 8px,transparent 0),
             linear-gradient(45deg,var(--kalk) 8px,transparent 0);
  background-size:16px 16px;background-repeat:repeat-x;
}
.bon::before{top:-7px}
.bon::after{bottom:-7px;transform:scaleY(-1)}
.bon-regel{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.55rem 0;
  border-bottom:1px dotted color-mix(in srgb,var(--inkt) 38%,transparent);
}
.bon-regel span:first-child{max-width:30ch}
.bon-kopregel span:first-child{font-weight:600}
.bon-bedrag{font-weight:800;font-size:1.35rem;white-space:nowrap}
.bon-bedrag em{font-family:'Barlow',sans-serif;font-style:normal;font-weight:500;font-size:.85rem;opacity:.8}
.bon-garantie{font-weight:600;color:var(--keur-tekst);padding:.5rem 0 .2rem}
.bon-tussenkop{font-weight:700;padding-top:1rem}
.bon-inspring{padding-left:1.1rem}
.schuif-label{font-weight:600;display:block;margin-bottom:.7rem}
.schuif{display:flex;align-items:center;gap:1.1rem}
.schuif output{
  font-weight:800;font-size:2.1rem;min-width:2.6ch;text-align:right;color:var(--klei-diep);
}
input[type="range"]{
  flex:1;appearance:none;-webkit-appearance:none;
  height:4px;border-radius:2px;
  background:color-mix(in srgb,var(--klei) 45%,var(--zand));
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--klei-diep);border:3px solid var(--kalk);
  transition:transform var(--dur-fast) var(--ease);
}
input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--klei-diep);border:3px solid var(--kalk);
}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.15)}
.uitkomsten{display:grid;grid-template-columns:1fr;gap:1.7rem;margin-top:1.9rem}
.uitkomst h3{
  font-family:'Barlow',sans-serif;font-weight:600;font-size:.98rem;
  text-transform:none;letter-spacing:0;margin-bottom:.4rem;
}
.u-jaar{
  font-weight:900;font-size:clamp(2.5rem,4vw,3.4rem);line-height:1;
  color:var(--klei-diep);margin-bottom:.25rem;
}
.u-per{font-family:'Barlow',sans-serif;font-weight:500;font-size:.92rem}
.u-maand{opacity:.85}
.toelichting{margin-top:1.5rem;font-size:.95rem;opacity:.8}

/* ---------- M9 start ---------- */

.start{background:var(--klei-diep);color:var(--kalk)}
.start{
  display:grid;grid-template-columns:1fr;gap:2.6rem;
  max-width:1360px;margin:0 auto;padding:5rem clamp(1rem,4vw,3rem) 5.5rem;
}
.start-beeld{
  background:linear-gradient(160deg,var(--klei-licht),var(--klei-diep));
  border-radius:3px;overflow:hidden;min-height:300px;align-self:start;
}
.start-beeld img{width:100%;height:100%;object-fit:cover;clip-path:polygon(24px 0,100% 0,calc(100% - 24px) 100%,0 100%)}
.start-beeld img.is-away{opacity:0}
.start h2{margin-bottom:1rem}
.stappen{list-style:none;display:grid;gap:1.15rem;margin:1.6rem 0 1.8rem}
.stappen li{display:grid;grid-template-columns:2.9rem 1fr;gap:1rem;align-items:start}
.stap-nr{font-weight:900;font-size:2rem;line-height:1;color:var(--klei-licht)}
.stappen p{max-width:52ch}
.proefprijs{border-left:3px solid var(--kalk);padding:.3rem 0 .3rem 1.2rem;margin-bottom:2.4rem}
.proefprijs p{margin-bottom:1rem;max-width:52ch}
#formulier h3{margin-bottom:1.2rem}
.veld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.05rem}
.veld label,.veld legend{font-weight:600;font-size:.95rem}
.veld input,.veld select{
  font:inherit;color:var(--kalk);
  background:color-mix(in srgb,var(--kalk) 8%,transparent);
  border:1.5px solid color-mix(in srgb,var(--kalk) 45%,transparent);
  border-radius:3px;padding:.65em .8em;
  transition:border-color var(--dur-mid) var(--ease),background-color var(--dur-mid) var(--ease);
}
.veld input:hover,.veld select:hover{border-color:var(--kalk)}
.veld-tijd{border:0;min-width:0}
.tijd-keuze{display:flex;gap:.7rem}
.tijd-keuze select{flex:1}
.zin-onder-knop{margin-top:1.1rem;font-weight:600}
#formulier.is-verzonden{display:grid}
#formulier.is-verzonden .u-verberg{display:none}
#formulier.is-verzonden .zin-onder-knop{font-size:1.3rem}

/* ---------- M10 vragen ---------- */

.vragen{background:var(--kalk);color:var(--inkt)}
.vragen>h2{max-width:1240px;margin:0 auto;padding:5.5rem clamp(1rem,4vw,3rem) .5rem}
.vraag-groepen{
  max-width:1240px;margin:0 auto;
  padding:1.4rem clamp(1rem,4vw,3rem) 6rem;
  display:grid;grid-template-columns:1fr;gap:2.6rem;
}
.vraag-groep h3{color:var(--klei-diep);margin-bottom:.6rem}
details{border-bottom:1px solid color-mix(in srgb,var(--inkt) 16%,transparent)}
summary{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 0;cursor:pointer;list-style:none;font-weight:600;
}
summary::-webkit-details-marker{display:none}
summary svg{width:18px;height:18px;flex:none;color:var(--klei-diep);transition:transform var(--dur-mid) var(--ease)}
details[open] summary svg{transform:rotate(180deg)}
.antwoord{padding-bottom:1.15rem}
.antwoord p{max-width:58ch}

/* ---------- M11 oprichter ---------- */

.oprichter{background:var(--kalk);color:var(--inkt)}
.oprichter-grid{
  display:grid;grid-template-columns:1fr;gap:2.6rem;
  max-width:1240px;margin:0 auto;padding:5.5rem clamp(1rem,4vw,3rem) 6rem;
  align-items:center;
}
.foto-placeholder{
  aspect-ratio:4/5;max-width:400px;
  background:linear-gradient(160deg,var(--klei-licht),var(--klei) 55%,var(--klei-diep));
  border-radius:4px;color:var(--kalk);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
}
.foto-letter{font-weight:900;font-size:5.5rem;line-height:1}
.foto-alex img{width:100%;aspect-ratio:4/5;object-fit:cover;clip-path:polygon(24px 0,100% 0,calc(100% - 24px) 100%,0 100%);display:block}
.contactregel a{color:var(--kalk)}
.nav-tel a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.oprichter h2{margin-bottom:1.2rem}
.oprichter-zinnen p{font-size:1.08rem;max-width:56ch;margin-bottom:.85rem}
.genantis-regel{
  border-left:3px solid var(--klei);padding-left:1.2rem;
  max-width:56ch;opacity:.92;margin-top:1.6rem;
}

/* ---------- M12 footer ---------- */

.footer{background:var(--klei-diep);color:var(--kalk)}
.footer p,.footer nav{max-width:1240px;margin-inline:auto;padding-left:clamp(1rem,4vw,3rem);padding-right:clamp(1rem,4vw,3rem)}
.naamregel{
  font-family:'Big Shoulders Display',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2.4rem);text-transform:uppercase;
  padding-top:4rem;margin-bottom:.6rem;
}
.disclaimer{font-weight:600;margin-bottom:1rem}
.wettelijk{font-size:.95rem;opacity:.85;margin-bottom:.4rem}
.contactregel{font-size:.95rem;opacity:.85;margin-bottom:1.6rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1.8rem;padding-bottom:5.5rem}
.footer-links a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--kalk) 40%,transparent);padding-bottom:.1em}
.footer-links a:hover,.footer-links a:focus-visible{border-color:var(--kalk)}

/* ---------- sticky knop (mobiel) ---------- */

.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--klei-diep) 72%,transparent);
  transform:translateY(110%);
  transition:transform var(--dur-mid) var(--ease);
  pointer-events:none;
}
.sticky-cta .btn{pointer-events:auto;width:100%}
body.past-hero .sticky-cta{transform:translateY(0)}
body.past-hero.in-formulier .sticky-cta{transform:translateY(110%)}

/* ---------- aanwijzer ---------- */

#cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:130;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease)}
#cursor::after{
  content:"";position:absolute;left:-15px;top:-15px;
  width:30px;height:30px;border:1.5px solid var(--kalk);border-radius:50%;
  display:block;mix-blend-mode:difference;
  transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
#cursor.is-hot::after{transform:scale(.38);background:var(--keur);border-color:var(--keur);mix-blend-mode:normal}
body.cursor-on #cursor{opacity:1}

/* ---------- reveal-basis en maskers (alleen met js en motion) ---------- */

@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(var(--travel))}
  @supports (animation-timeline: view()){
    html.js [data-reveal]{
      opacity:1;
      animation:flow-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
  }
  html.js .line{display:block;overflow:clip}
  html.js .line .inner{display:block;transform:translateY(112%)}
  html.js .hero-copy [data-flow]{opacity:0;transform:translateY(var(--travel))}
}
@keyframes flow-in{
  from{opacity:0;transform:translateY(var(--travel))}
  to{opacity:1;transform:none}
}

/* ---------- desktop (vanaf 769 px) ---------- */

@media (min-width:769px){
  h1{font-size:6.4vw}
  .gordijn{
    position:absolute;top:0;bottom:0;left:50%;width:60%;
    background:var(--kalk);color:var(--inkt);
    clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);
    display:flex;align-items:center;overflow:clip;
  }
  .gordijn .hero-copy{padding:4.5rem clamp(1.75rem,3.2vw,4rem);max-width:none;width:100%}
  .gordijn .kicker{color:var(--klei-diep)}
  .gordijn :focus-visible{outline-color:var(--klei-diep)}
  .gordijn .btn-primary{background:var(--klei-diep);color:var(--kalk)}
  .gordijn .btn-primary:hover,.gordijn .btn-primary:focus-visible{background:var(--keur);color:var(--kalk)}
  .gordijn .btn-sec{color:var(--inkt);box-shadow:inset 0 0 0 1.5px var(--klei-diep)}
  .gordijn .btn-sec:hover,.gordijn .btn-sec:focus-visible{background:color-mix(in srgb,var(--klei) 15%,transparent)}
  .wat-voor-wie{font-size:clamp(1.05rem,1.3vw,1.3rem)}
  .hero-cta{flex-direction:row;align-items:center;max-width:none}
  .watermark{font-size:14vw;top:4vw}

  .chapter-block{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
  .chapter-block:nth-of-type(even) .chapter-beeld{order:2}

  .dossier-pin{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.5vw;align-items:center}
  .map-svg{margin:0 auto}

  .assemble-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end}
  .assemble-kop h2{margin-bottom:0}

  .stats{grid-template-columns:repeat(4,1fr);gap:2rem}
  .tijdlijn-items{grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:-.35rem}
  .tl-item{padding-top:1.2rem;position:relative}
  .tl-item::before{
    content:"";position:absolute;top:-.42rem;left:0;
    width:11px;height:11px;border-radius:50%;background:var(--klei-diep);
  }
  .tl-item p{font-size:.92rem}

  .trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr);gap:2rem;align-items:center}
  .trio-item.route-wij{padding:2.6rem 2.2rem 2.8rem}
  .fit-kolommen{grid-template-columns:1fr 1fr;gap:2.4rem}

  .prijs-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.5rem}
  .uitkomsten{grid-template-columns:1fr 1fr;gap:2rem}

  .start{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:3.5rem}
  .vraag-groepen{grid-template-columns:repeat(2,1fr);gap:2.4rem 3.2rem}
  .oprichter-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:3.5rem}
}

/* gepinde toestanden: alleen desktop met beweging */
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  html.js .film-stage{
    position:sticky;top:0;height:100svh;min-height:560px;
    margin-bottom:-100svh;
  }
  html.js .hero{position:sticky;top:0;pointer-events:none}
  html.js .gordijn{pointer-events:auto}
  html.js .werkt{position:relative;z-index:3;height:800vh}
  html.js .chapters-static{display:none}
  html.js .hoofdstukken{display:block}
  html.js .hoofdstuk{height:200vh}
  html.js .ch-reus{
    position:sticky;top:80px;z-index:1;
    height:0;margin-bottom:0;overflow:visible;
  }
  html.js .chapter-panel{
    position:sticky;top:50%;translate:0 -50%;
    margin-top:50svh;margin-bottom:calc(-50svh - 420px);
    margin-left:50%;width:min(560px,calc(50% - 4vw));
  }
  html.js .dossier{height:300vh}
  html.js .dossier-pin{
    position:sticky;top:0;height:100svh;
    padding-top:4.5rem;padding-bottom:4.5rem;
  }
  html.js .assemblage{height:240vh}
  html.js .assemble-pin{
    position:sticky;top:0;height:100svh;
    display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
    max-width:1240px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem);
  }
  html.js .assemble-kop{padding:0}
  html.js .assemble-scene{margin:0}
  html.js .assemble-voortgang{margin:0}
  html.js .strip-viewport{overflow:hidden}
}

/* ---------- mobiel (tot 768 px) ---------- */

@media (max-width:768px){
  .ch-reus{display:none}
  .hero{align-items:end}
  .hero-copy{
    padding:5.4rem 1.25rem 3rem;
    background:linear-gradient(to top,color-mix(in srgb,var(--klei-diep) 88%,transparent),transparent);
  }
  .assemble-scene{height:min(420px,58vh)}
  .piece:nth-child(n+4){display:none}
  .piece:nth-child(1){transform:translate(calc(-50% - 44px),-6px) rotate(-6deg)}
  .piece:nth-child(2){transform:translate(-50%,14px) rotate(2deg)}
  .piece:nth-child(3){transform:translate(calc(-50% + 44px),34px) rotate(7deg)}
  .piece{width:min(150px,38vw)}
  .nav{gap:.9rem;padding:.7rem 1rem}
  .nav-sub,.nav-links,.btn-nav{display:none}
  .nav-tel{margin-left:auto}
  .hero-copy{padding:4.4rem 1.25rem 4.6rem}
  .hero-badge{top:4.6rem;bottom:auto;left:auto;right:1rem}
  .badge-ring{width:86px}
  .dossier-pin{display:flex;flex-direction:column}
  .dossier-map{order:-1}
  .dossier-tekst h2{margin-top:1.2rem}
  .prijs-grid{padding-bottom:7rem}
  .sticky-cta{display:block}
}

/* mobiel met beweging: vijf lussen gepind achter de scrollende panelen */
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  html.js .film-stage{
    position:sticky;top:0;height:100svh;min-height:560px;
    margin-bottom:-100svh;
  }
  html.js .film{display:none}
  html.js .loops{display:block}
  html.js .chapters-static{display:none}
  html.js .hoofdstukken{display:block}
  html.js .hoofdstuk{height:100svh;display:flex;align-items:flex-end;padding:0 1rem 1.2rem}
  html.js .chapter-panel{
    width:100%;margin-left:0;top:auto;translate:none;
    background:linear-gradient(to top,var(--klei-diep) 26%,color-mix(in srgb,var(--klei-diep) 58%,transparent));
    backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:1.35rem 1.3rem 1.45rem;
  }
}

/* ---------- reduced motion: complete, stille pagina ---------- */

@media (prefers-reduced-motion:reduce){
  .scroll-cue{display:none}
  #cursor{display:none}
}