/* Agreed — site.css
   Huisstijl = het logopakket (Drive: Programma's/Agreed/Logo, LEESMIJ.txt) en de app (LoodsPJ/agreed, appCss.ts v3.54):
   inkt #13352A, bosgroen #1F4D35, bladgroen #2F6B45, salie #8AA866/#A9C181, goudgeel #F1E2A6, licht #F4F1E6.
   Koppen in Lexend (de letter van het woordmerk), lopende tekst in Inter. Salie is een lijn- en vlakkleur, geen
   tekstkleur op licht (2,4:1). Het verloop zit in het beeldmerk zelf; de rest van de site blijft vlak en rustig. */
:root{
  --ink:#13352A;--forest:#1F4D35;--forest-2:#255A3F;--forest-deep:#123226;
  --leaf:#2F6B45;--leaf-2:#456F45;--sage:#8AA866;--sage-2:#A9C181;--sage-soft:#E8EDDA;--sage-pale:#F0F3E6;
  --gold:#F1E2A6;--gold-soft:#F8F0D2;--ochre:#7A5C17;
  --cream:#F4F1E6;--cream-2:#ECE7D6;--paper:#FFFDF8;--paper-2:#F8F5EC;
  --text:#24302A;--muted:#5A6560;
  --line:rgba(19,53,42,.12);--line-2:rgba(19,53,42,.24);
  --d-text:#F4F1E6;--d-muted:rgba(244,241,230,.76);--d-line:rgba(244,241,230,.14);--d-line-2:rgba(244,241,230,.28);--d-accent:#C9D79E;
  --amber:#8A5A12;--amber-bg:#FBF0DD;--green:#2B6B34;--green-bg:#E5F0E1;--blue:#46617F;
  --r-sm:6px;--r-md:12px;--r-lg:20px;
  --sh-1:0 1px 2px rgba(19,53,42,.06),0 1px 1px rgba(19,53,42,.04);
  --sh-2:0 8px 20px rgba(19,53,42,.08),0 2px 4px rgba(19,53,42,.05);
  --sh-3:0 40px 80px -24px rgba(19,53,42,.30),0 12px 28px rgba(19,53,42,.08);
  --gutter:clamp(20px,4vw,56px);--max:1240px;--head-h:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sec:clamp(88px,11vw,168px);
  --display:Lexend,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (max-width:899px){:root{--head-h:64px}}
@font-face{font-family:Inter;src:url("/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Lexend;src:url("/fonts/lexend-latin-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--text);font:400 17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01";overflow-x:clip}
img,svg{display:block;max-width:100%}
svg{overflow:visible}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit}
a{color:var(--leaf);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--forest)}
.defs{position:absolute;pointer-events:none}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--forest);color:#fff;padding:10px 16px;border-radius:var(--r-sm)}
.skip:focus{left:16px;top:16px;color:#fff}
:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* typografie */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf);margin-bottom:22px}
.h1{font-family:var(--display);font-size:clamp(50px,7.2vw,112px);font-weight:500;letter-spacing:-.045em;line-height:.98;color:var(--ink)}
/* Duitse koppen zijn langer ("Von der Sorte"): iets kleiner, zodat de hero-kop op twee regels blijft */
:lang(de) .h1{font-size:clamp(44px,6vw,88px)}
.h2{font-family:var(--display);font-size:clamp(34px,4.6vw,66px);font-weight:500;letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
.h3{font-family:var(--display);font-size:clamp(20px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.ln{display:block;overflow:hidden;padding:.04em 0 .12em;margin:-.04em 0 -.12em}
.ln>span{display:block}
.h1 em,.h2 em{font-style:normal;color:var(--leaf)}
.body{font-size:clamp(17px,1.25vw,19px);line-height:1.62;color:var(--text);max-width:60ch}
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.58;color:var(--text);max-width:34em;margin-top:30px}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:52px;padding:0 24px;border:0;border-radius:var(--r-md);
  background:var(--forest);color:#fff;font:600 16px/1 Inter,system-ui,sans-serif;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  box-shadow:var(--sh-1);transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:var(--forest-2);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:none;box-shadow:var(--sh-1)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-1)}
.btn-light{background:var(--gold);color:var(--ink)}
.btn-light:hover{background:#F6EAC0;color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:progress}

/* statuschips (zelfde vorm als in de app): zacht vlak + stip + tekst; "open" = open ring */
.bd{display:inline-flex;align-items:center;gap:.45em;padding:.3em .75em .3em .65em;border-radius:999px;font-size:.84em;font-weight:600;font-style:normal;line-height:1.2;white-space:nowrap}
.bd::before{content:"";flex:none;width:.52em;height:.52em;border-radius:50%;background:currentColor}
.b-green{color:var(--green);background:var(--green-bg)}
.b-amber{color:var(--amber);background:var(--amber-bg)}
.b-blue{color:var(--blue);background:#fff;box-shadow:inset 0 0 0 1px rgba(70,97,127,.35)}
.b-blue::before{background:transparent;box-shadow:inset 0 0 0 1.6px currentColor}

/* beeldmerk: losse bladen (intro, hero, probleem, platform). Draaipunten per blad zet site.js. */
.mk .lf{transform-box:view-box}
.wm-svg{fill:currentColor}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:50;background:rgba(244,241,230,.94);border-bottom:1px solid transparent;transition:border-color .3s}
.head.scrolled{border-bottom-color:var(--line)}
.head-bar{height:var(--head-h);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;margin:0;color:var(--ink)}
.brand:hover{color:var(--ink)}
.logo{height:32px;width:auto;aspect-ratio:1074/278;flex:none}
.head-nav{display:flex;gap:30px;margin-left:auto}
.head-nav a,.head-login{color:var(--text);text-decoration:none;font-size:15px;font-weight:500}
.head-nav a:hover,.head-login:hover{color:var(--leaf)}
.head-act{display:flex;align-items:center;gap:22px}
/* taalkeuze: NL · EN · DE (in de kop; op smalle schermen in het menu en altijd in de voet) */
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.lang a{min-width:34px;height:30px;display:grid;place-items:center;padding:0 8px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.05em;
  color:var(--muted);text-decoration:none}
.lang a:hover{color:var(--ink);background:var(--paper)}
.lang a[aria-current="page"]{background:var(--forest);color:#fff}
.menu .lang{justify-self:start;margin:8px 10px 4px}
.menu nav .lang a{padding:0 10px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;gap:6px;border-radius:var(--r-md)}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease)}
.menu[open] summary span:first-child{transform:translateY(4px) rotate(45deg)}
.menu[open] summary span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:10px;display:grid}
.menu nav a{padding:12px 14px;border-radius:var(--r-md);color:var(--text);text-decoration:none;font-weight:500}
.menu nav a:hover{background:var(--sage-pale);color:var(--ink)}
@media (max-width:1199px){.head-nav{display:none}.head-act{margin-left:auto}.menu{display:block}}
@media (max-width:899px){.head-login,.head-act>.lang{display:none}.head-act{gap:8px}}
@media (max-width:420px){.head .logo{height:28px}.head-act .btn-sm{padding:0 14px;font-size:14px}}

/* ---------- intro (de motion graphic bij binnenkomst) ---------- */
#intro{display:none}
.intro body{overflow:hidden}
.intro #intro{display:block;position:fixed;inset:0;z-index:100;animation:introSafe 0s 7s forwards}
.intro-run #intro{animation:none}
@keyframes introSafe{to{visibility:hidden;opacity:0}}
.i-bg{position:absolute;inset:0;background:var(--forest)}
.i-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.i-mk{width:min(36vh,54vw);height:auto;aspect-ratio:618/542}
.i-ol{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linejoin:round}
.i-wm{width:min(40vh,60vw);height:auto;aspect-ratio:712/218;margin-top:clamp(22px,4vh,44px);color:var(--cream)}
.i-tag{margin-top:clamp(12px,2vh,20px);font:400 clamp(16px,1.7vw,24px)/1.3 var(--display);color:var(--sage-2);letter-spacing:-.01em}
.i-skip{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:none;border:0;color:rgba(244,241,230,.6);
  font:500 14px Inter,system-ui,sans-serif;padding:12px;cursor:pointer}
.i-skip:hover{color:var(--cream)}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vh,96px) 0 clamp(56px,8vh,104px);min-height:calc(100svh - var(--head-h));display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:44px;color:var(--muted);font-size:15px}
.hero-facts li{display:flex;align-items:center;gap:10px}
.hero-facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage)}
.ha{position:relative;width:100%;max-width:580px;aspect-ratio:1/1;margin-inline:auto;container-type:inline-size}
.ha-ring{position:absolute;inset:6%;border-radius:50%;border:1px dashed var(--line-2)}
.ha-ring+.ha-ring{inset:19%;border-style:solid;border-color:var(--line)}
.ha-mk{position:absolute;left:23%;top:24%;width:54%;height:auto;aspect-ratio:618/542}
.ha-wires{position:absolute;inset:0;width:100%;height:100%}
.ha-wires path{fill:none;stroke:var(--sage);stroke-width:1.4;stroke-dasharray:3 5;stroke-linecap:round}
.ha-wires circle{fill:var(--paper);stroke:var(--leaf);stroke-width:1.6}
.ha-c{position:absolute;display:flex;align-items:center;gap:2.2cqw;padding:1.6cqw 2.6cqw 1.6cqw 1.6cqw;background:var(--paper);border:1px solid var(--line);
  border-radius:2.6cqw;box-shadow:var(--sh-2);white-space:nowrap}
.ha-c svg{width:8cqw;height:8cqw;flex:none}
.ha-c b{display:block;font:500 2.9cqw/1.15 var(--display);color:var(--ink);letter-spacing:-.02em}
.ha-c span{display:block;font-size:2.25cqw;color:var(--muted);margin-top:.3cqw}
.ha-c[data-i="1"]{left:0;top:9%}
.ha-c[data-i="3"]{left:-3%;top:79%}
.ha-c[data-i="0"]{right:0;top:13%}
.ha-c[data-i="2"]{right:-3%;top:83%}
@media (max-width:899px){
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr}
  .ha{max-width:480px}
}
@media (max-width:520px){.ha-c{padding:1.4cqw 2.2cqw 1.4cqw 1.4cqw}.ha-c b{font-size:3.4cqw}.ha-c span{display:none}.ha-c svg{width:7cqw;height:7cqw}}

/* pictogrammen (uit het logopakket): lijn in bosgroen, blad in salieverloop */
.pc{fill:none;stroke:var(--forest);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pc .pl{stroke:url(#apS);stroke-width:3.6}
.pc .pf{stroke:none}
.dark .pc{stroke:var(--cream)}

/* ---------- productbeeld ---------- */
.shot{padding-bottom:var(--sec)}
.mock{container-type:inline-size;max-width:1120px;margin-inline:auto;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);
  box-shadow:var(--sh-3);overflow:hidden;font-size:1.18cqw;color:var(--text);transform-origin:50% 0}
.m-bar{display:flex;align-items:center;gap:.6cqw;height:3.4cqw;padding:0 1.4cqw;background:var(--cream-2);border-bottom:1px solid var(--line)}
.m-bar i{width:.95cqw;height:.95cqw;border-radius:50%;background:rgba(19,53,42,.16)}
.m-bar span{margin:0 auto;padding:.3cqw 3cqw;background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:1cqw;color:var(--muted);transform:translateX(-1.6cqw)}
.m-app{display:grid;grid-template-columns:18.5cqw 1fr;min-height:50cqw}
.m-side{background:var(--paper);border-right:1px solid var(--line);padding:1.6cqw 1.1cqw}
.m-brand{display:flex;align-items:center;gap:.7cqw;margin:0 .5cqw 1.6cqw;color:var(--ink)}
.m-brand .mk{width:2.6cqw;height:2.3cqw}
.m-brand .wm-svg{width:6.6cqw;height:2cqw}
.m-grp{font-size:.82cqw;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:1.3cqw .6cqw .4cqw}
.m-nav{display:flex;justify-content:space-between;align-items:center;padding:.5cqw .6cqw;border-radius:.55cqw;font-size:1.08cqw;font-weight:500;color:var(--text)}
.m-nav.on{background:var(--sage-soft);color:var(--ink);font-weight:600}
.m-nav s{text-decoration:none;font-size:.85cqw;background:var(--amber);color:#fff;border-radius:999px;padding:.05cqw .5cqw}
.m-main{padding:1.6cqw 2cqw;display:flex;flex-direction:column;gap:1.5cqw}
.m-top{display:flex;align-items:center;gap:1.2cqw}
.m-title{font:500 1.75cqw var(--display);letter-spacing:-.025em;color:var(--ink);margin-right:auto}
.m-search{display:flex;align-items:center;gap:2.6cqw;padding:.55cqw .9cqw;background:var(--paper);border:1px solid var(--line);border-radius:.65cqw;color:var(--muted);font-size:1.02cqw}
.m-search kbd{font:inherit;font-size:.85cqw;border:1px solid var(--line);border-radius:.35cqw;padding:0 .4cqw}
.m-av{width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-size:.95cqw;font-weight:600}
.m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw}
.m-stat{background:var(--paper);border:1px solid var(--line);border-radius:1cqw;padding:1.2cqw 1.3cqw}
.m-stat p{font-size:.86cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.m-stat b{display:block;margin:.5cqw 0 .3cqw;font:500 2.15cqw var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.m-stat span{font-size:.95cqw;color:var(--leaf)}
.m-stat span.warn{color:var(--amber)}
.m-row{display:grid;grid-template-columns:1.55fr 1fr;gap:1.1cqw}
.m-card{background:var(--paper);border:1px solid var(--line);border-radius:1cqw;padding:1.3cqw 1.4cqw .6cqw}
.m-ct{font-size:1.25cqw;font-weight:600;color:var(--ink);margin-bottom:.8cqw;display:flex;justify-content:space-between;align-items:center}
.m-ct small{font-size:.9cqw;font-weight:500;color:var(--muted)}
.m-tr{display:grid;grid-template-columns:1.25fr 1.6fr .9fr 1.2fr;align-items:center;gap:1cqw;padding:.78cqw 0;border-top:1px solid var(--line);font-size:1.05cqw}
.m-tr span:last-child{text-align:right}
.m-th{border-top:0;padding-top:0;font-size:.8cqw;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.m-tr .bd{font-size:.88cqw}
.m-chart{display:flex;flex-direction:column;gap:1cqw;padding-bottom:1cqw}
.m-bars{display:flex;align-items:flex-end;gap:.9cqw;height:13cqw;padding:0 .4cqw;border-bottom:1px solid var(--line-2)}
.m-bars i{flex:1;border-radius:.4cqw .4cqw 0 0;background:var(--sage-2);transform-origin:50% 100%}
.m-bars i:nth-child(odd){background:var(--leaf-2)}
.m-bars i:nth-child(1){height:38%}.m-bars i:nth-child(2){height:52%}.m-bars i:nth-child(3){height:44%}.m-bars i:nth-child(4){height:61%}.m-bars i:nth-child(5){height:47%}
.m-bars i:nth-child(6){height:66%}.m-bars i:nth-child(7){height:58%}.m-bars i:nth-child(8){height:74%}.m-bars i:nth-child(9){height:63%}.m-bars i:nth-child(10){height:88%}
.m-bars i.now{background:var(--gold);box-shadow:inset 0 0 0 1px rgba(122,92,23,.35)}
.m-axis{display:flex;justify-content:space-between;font-size:.85cqw;color:var(--muted);padding:0 .4cqw}
@media (max-width:699px){
  /* op de telefoon een uitsnede: het overzicht groot, de zijbalk en de rechterkolom vallen weg */
  .shot .wrap{overflow:hidden;padding-inline:0}
  .mock{width:178%;max-width:none;margin-left:-29%;border-radius:0;border-inline:0}
}
.shot-cap{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)}

/* ---------- secties ---------- */
.sec{padding:var(--sec) 0;position:relative}
.tint{background:var(--cream-2)}
.dark{background:var(--forest);color:var(--d-text)}
.dark .eyebrow{color:var(--d-accent)}
.dark .h2,.dark .h3{color:var(--cream)}
.dark .h2 em{color:var(--gold)}
.dark .body{color:var(--d-muted)}
.dark a{color:var(--d-accent)}.dark a:hover{color:var(--cream)}
.sec-head{max-width:780px;margin-bottom:clamp(48px,6vw,88px)}
.sec-head .body{margin-top:26px}

/* 01 probleem: losse stukken worden één A */
.pr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.pr-copy .body{margin-top:24px}
.pr-copy .h2{margin-bottom:8px}
.pr-stage{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto}
.isles li{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-md);background:rgba(244,241,230,.06);
  border:1px solid var(--d-line);font-size:14px;font-weight:500;color:var(--d-muted);white-space:nowrap}
.isles i{width:8px;height:8px;border-radius:50%;background:var(--sage-2)}
.isles [data-i="0"]{left:56%;top:2%;rotate:2deg}
.isles [data-i="1"]{left:0;top:8%;rotate:-3deg}
.isles [data-i="2"]{right:0;top:52%;rotate:-2deg}
.isles [data-i="3"]{left:2%;top:46%;rotate:2deg}
.isles [data-i="4"]{left:8%;bottom:6%;rotate:3deg}
.isles [data-i="5"]{left:50%;bottom:0;rotate:-2deg}
.pr-mk{position:absolute;left:25%;top:22%;width:50%;height:auto;aspect-ratio:618/542}
.pr-wm{position:absolute;left:30%;width:40%;top:72%;height:auto;aspect-ratio:712/218;color:var(--cream)}
/* de losse stukken bestaan alleen voor de animatie: zonder JS of met "minder beweging" staat meteen het eindbeeld */
.isles{display:none}
.js .isles{display:block}
.no-anim .isles{display:none}
.pr-answer{margin-top:clamp(56px,7vw,104px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--d-line);
  font:500 clamp(24px,2.6vw,38px)/1.22 var(--display);letter-spacing:-.03em;color:var(--cream);max-width:30em}
.pr-answer span{color:var(--d-accent);font-weight:400}
@media (max-width:899px){.pr-grid{grid-template-columns:1fr}.pr-stage{max-width:440px}.isles li{font-size:12.5px;padding:8px 11px}}

/* 02 levensloop: de animatie van contract tot royalty */
.ll{display:grid;gap:clamp(20px,2.4vw,32px)}
.ll-frame{position:relative;container-type:inline-size;aspect-ratio:16/9;isolation:isolate;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);box-shadow:var(--sh-3)}
.ll-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);counter-reset:st}
.ll-steps li{position:relative;padding-top:22px;border-top:2px solid var(--line);transition:border-color .4s var(--ease)}
.ll-steps li::before{counter-increment:st;content:"0" counter(st);display:block;font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ochre);margin-bottom:8px}
.ll-steps h3{margin-bottom:8px}
.ll-steps p{font-size:15.5px;line-height:1.55;color:var(--muted)}
.ll-steps li::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--leaf);transform:scaleX(0);transform-origin:0 50%}
.ll-steps li.on::after,.no-anim .ll-steps li::after{transform:none;transition:transform .6s var(--ease)}
.ll-replay{justify-self:start;display:none;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:500 14.5px Inter,system-ui,sans-serif;cursor:pointer}
.ll-replay:hover{background:var(--paper)}
.ll-replay svg{width:14px;height:14px}
.ll-ready .ll-replay{display:inline-flex}
@media (max-width:899px){.ll-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ll-steps{grid-template-columns:1fr}}

/* de bühne: alle maten in cqw (van de bühne zelf), zodat het geheel schaalt als één beeld. Onder ~1040 px wordt
   de bühne 960 px breed en hoger dan 16:9-kader zou zijn; levensloop.js laat er dan een camera overheen schuiven. */
.st{position:absolute;left:0;top:0;width:100%;height:100%;container-type:inline-size;font-size:1.05cqw;color:var(--text)}
@media (max-width:1040px){
  .ll-frame{aspect-ratio:auto;height:540px}
  .st{width:960px;height:540px}
}
.ll-cap{position:absolute;left:16px;top:14px;z-index:3;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 10px;border-radius:999px;
  background:rgba(255,253,248,.92);box-shadow:inset 0 0 0 1px var(--line);font:500 clamp(13px,1.2cqw,16px)/1.2 var(--display);color:var(--ink);letter-spacing:-.01em}
.ll-cap i{font:600 .78em Inter,sans-serif;font-style:normal;letter-spacing:.12em;color:var(--ochre)}
.no-anim .ll-cap{display:none}
.st-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(19,53,42,.12) .09cqw,transparent .1cqw);background-size:2.2cqw 2.2cqw;opacity:.7}
.st-card{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:1.1cqw;box-shadow:var(--sh-2)}
/* scène 1: het contract */
.st-doc{left:7cqw;top:9cqw;width:25cqw;height:33cqw;padding:2.2cqw 2.2cqw;overflow:hidden}
.st-doc .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6cqw}
.st-doc .dh b{font:500 1.35cqw var(--display);color:var(--ink)}
.st-doc .dh span{font-size:.8cqw;font-weight:700;color:#fff;background:#B5483C;border-radius:.3cqw;padding:.1cqw .45cqw}
.st-doc .tl{height:.62cqw;border-radius:.3cqw;background:rgba(19,53,42,.11);margin:.85cqw 0}
.st-doc .tl.s{width:62%}.st-doc .tl.m{width:82%}
.st-doc .fd{position:relative;display:flex;align-items:center;gap:.8cqw;height:1.9cqw;margin:.55cqw -.5cqw;padding:0 .5cqw;border-radius:.45cqw;font-size:.95cqw;color:var(--muted)}
.st-doc .fd u{text-decoration:none;color:var(--text);font-weight:500}
.st-doc .fd{z-index:0}
.st-doc .fd::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(122,92,23,.28);opacity:var(--hl,0)}
.st-doc .fd>*{position:relative}
.st-scan{position:absolute;left:0;right:0;top:0;height:3.4cqw;background:linear-gradient(180deg,transparent,rgba(138,168,102,.30) 70%,var(--sage));border-bottom:.15cqw solid var(--leaf);opacity:0}
.st-mail{left:7cqw;top:44.5cqw;display:flex;align-items:center;gap:.9cqw;padding:.8cqw 1.3cqw;border-radius:999px;font-size:.98cqw;color:var(--muted)}
.st-mail svg{width:1.6cqw;height:1.6cqw;stroke:var(--leaf);fill:none;stroke-width:1.6}
.st-rec{left:44cqw;top:9cqw;width:34cqw;padding:2cqw 2.2cqw 1.4cqw}
.st-rec .rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3cqw}
.st-rec .rh b{font:500 1.5cqw var(--display);color:var(--ink);letter-spacing:-.02em}
.st-rec .rh .bd{font-size:.95cqw}
.st-rec dl{display:grid;grid-template-columns:11cqw 1fr;border-top:1px solid var(--line)}
.st-rec dt,.st-rec dd{padding:.72cqw 0;border-bottom:1px solid var(--line);font-size:1.02cqw}
.st-rec dt{color:var(--muted)}
.st-rec dd{color:var(--ink);font-weight:500;position:relative;min-height:2.6cqw}
.st-rec dd span{display:inline-block}
.st-rec .st-end2{position:absolute;left:0;top:.72cqw;visibility:hidden;border-radius:.3cqw;padding:0 .2cqw;margin-left:-.2cqw}
.st-badge .b-amber{display:none}
.st-links{display:flex;flex-wrap:wrap;gap:.6cqw;margin-top:1.2cqw}
.st-links i{font-style:normal;padding:.3cqw .75cqw;border-radius:999px;background:var(--sage-pale);color:var(--leaf);font-size:.9cqw;font-weight:600;box-shadow:inset 0 0 0 1px rgba(47,107,69,.18)}
.st-rec .rf{position:relative;display:flex;justify-content:flex-end;gap:.8cqw;margin-top:1.3cqw}
.st-ok,.st-ren{visibility:hidden}
.st-ren{position:absolute;right:0;top:0}
.st-btn{display:inline-flex;align-items:center;height:2.6cqw;padding:0 1.3cqw;border-radius:.6cqw;font-size:1cqw;font-weight:600;background:var(--forest);color:#fff}
.st-btn.g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.st-ai{position:absolute;right:-1.2cqw;top:-1.2cqw;display:none;align-items:center;gap:.5cqw;padding:.45cqw .9cqw;border-radius:999px;background:var(--ink);color:var(--gold);font-size:.9cqw;font-weight:600}
.st-ai svg{width:1.2cqw;height:1.2cqw;fill:var(--gold)}
.st-chip{position:absolute;left:0;top:0;z-index:2;padding:.3cqw .7cqw;border-radius:.45cqw;background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(122,92,23,.3);font-size:.95cqw;font-weight:500;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none}
.st-cursor{position:absolute;left:0;top:0;z-index:3;width:2.2cqw;height:2.2cqw;opacity:0}
.st-cursor svg{width:100%;height:100%;fill:var(--ink);stroke:#fff;stroke-width:1.4}
/* scène 2: bewaakt */
.st-time{position:absolute;left:7cqw;right:7cqw;top:40cqw;height:12cqw;opacity:0}
.st-axis{position:absolute;left:0;right:0;top:5.2cqw;height:.5cqw;border-radius:999px;background:var(--line)}
.st-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sage-2),var(--leaf));transform-origin:0 50%;transform:scaleX(0)}
.st-warnzone{position:absolute;right:0;top:-.4cqw;bottom:-.4cqw;width:5%;border-radius:.4cqw;background:repeating-linear-gradient(135deg,rgba(138,90,18,.22) 0 .35cqw,transparent .35cqw .7cqw)}
.st-years{position:absolute;left:0;right:0;top:7.2cqw;display:flex;justify-content:space-between;font-size:.95cqw;color:var(--muted);font-variant-numeric:tabular-nums}
.st-now{position:absolute;left:0;top:3.3cqw;width:0;height:4.4cqw}
.st-now::before{content:"";position:absolute;left:-.9cqw;top:1.05cqw;width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 .3cqw var(--forest),var(--sh-1)}
.st-now span{position:absolute;left:50%;top:-1.9cqw;transform:translateX(-50%);font-size:.85cqw;font-weight:600;color:var(--ink);white-space:nowrap}
.st-alert{position:absolute;right:0;top:-1.6cqw;white-space:nowrap;display:flex;align-items:center;gap:.6cqw;padding:.5cqw 1cqw;border-radius:.7cqw;background:var(--amber-bg);color:var(--amber);font-size:1cqw;font-weight:600;box-shadow:var(--sh-2);opacity:0}
.st-alert .a2{display:none}
.st-years.y2{opacity:0}
.st-alert svg{width:1.3cqw;height:1.3cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-renew{left:52cqw;top:6cqw;width:27cqw;height:25.5cqw;padding:2cqw;opacity:0}
.st-renew b{display:block;font:500 1.35cqw var(--display);color:var(--ink);margin-bottom:1.2cqw}
.st-renew .tl{height:.55cqw;border-radius:.3cqw;background:rgba(19,53,42,.1);margin:.75cqw 0}
.st-renew .tl.s{width:58%}
.st-renew .rk{display:inline-block;margin:.2cqw 0;padding:.1cqw .5cqw;border-radius:.3cqw;background:var(--sage-pale);color:var(--leaf);font-size:.88cqw;font-weight:600}
.st-sign{position:absolute;left:2cqw;right:2cqw;bottom:2cqw;height:6cqw;border-top:1px dashed var(--line-2)}
.st-sign svg{position:absolute;left:0;top:.6cqw;width:15cqw;height:5cqw;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-sign .bd{position:absolute;right:0;bottom:0;font-size:.92cqw;opacity:0}
.st-hash{position:absolute;left:52cqw;top:32.6cqw;font:500 .85cqw ui-monospace,Menlo,Consolas,monospace;color:var(--muted);opacity:0}
/* scène 3: verrekend */
.st-sales{left:7cqw;top:9cqw;width:36cqw;padding:1.6cqw 1.8cqw 1cqw;opacity:0}
.st-sales b{display:flex;justify-content:space-between;font:500 1.35cqw var(--display);color:var(--ink);margin-bottom:.8cqw}
.st-sales b small{font:500 .9cqw Inter,sans-serif;color:var(--muted);align-self:center}
.st-auto{margin-top:.9cqw}
.st-auto .bd{font-size:.9cqw}
.st-sr{display:grid;grid-template-columns:1.6fr .8fr .7fr 1fr;gap:.8cqw;padding:.62cqw 0;border-top:1px solid var(--line);font-size:.98cqw}
.st-sr span:nth-child(3),.st-sr span:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}
.st-sr.h{border-top:0;font-size:.78cqw;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.st-roy{left:50cqw;top:9cqw;width:28cqw;padding:1.8cqw 2cqw;opacity:0}
.st-roy p{font-size:.86cqw;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.st-roy .big{display:block;margin:.5cqw 0 1.4cqw;font:500 3.6cqw var(--display);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.st-cb{display:grid;grid-template-columns:3cqw 1fr 5.5cqw;align-items:center;gap:.8cqw;margin:.7cqw 0;font-size:.98cqw}
.st-cb i{display:block;height:1.5cqw;border-radius:.3cqw;background:var(--leaf-2);transform-origin:0 50%}
.st-cb:nth-child(3) i{width:100%}
.st-cb:nth-child(4) i{width:61.6%;background:var(--sage-2)}.st-cb:nth-child(5) i{width:32.2%;background:var(--gold);box-shadow:inset 0 0 0 1px rgba(122,92,23,.3)}
.st-cb span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.st-inv{left:50cqw;top:34cqw;display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.4cqw;opacity:0}
.st-inv svg{width:3cqw;height:3cqw;flex:none}
.st-inv p{margin-right:.8cqw}
.st-inv b{display:block;font-size:1.05cqw;color:var(--ink)}
.st-inv span{display:block;font-size:.9cqw;color:var(--muted)}
.st-inv .bd{font-size:.9cqw}
/* slot */
.st-end{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.4cqw,32px);
  padding:24px;background:var(--forest);opacity:0;pointer-events:none}
.st-end .mk{width:clamp(96px,14cqw,190px);height:auto;aspect-ratio:618/542}
.st-end p{font:400 clamp(20px,2.4cqw,34px)/1.2 var(--display);color:var(--cream);letter-spacing:-.025em;text-align:center}
.st-end p span{color:var(--gold)}
/* zonder animatie: een rustig eindbeeld van scène 1 met het record ingevuld */
.no-anim .st-scan,.no-anim .st-chip,.no-anim .st-cursor{display:none}
.no-anim .st-doc .fd{--hl:1}

/* 03 platform: vier bladen, vier onderdelen */
.pf{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px)}
.pf-pin{position:sticky;top:calc(var(--head-h) + 8vh);height:min(70vh,540px);display:grid;place-items:center}
.pf-mk{width:min(100%,440px);height:auto;aspect-ratio:618/542}
.pf-mk .lf,.pt-mk .lf{transition:opacity .55s var(--ease),transform .7s var(--ease)}
[data-on="0"] .lf:not([data-i="0"]),[data-on="1"] .lf:not([data-i="1"]),[data-on="2"] .lf:not([data-i="2"]),[data-on="3"] .lf:not([data-i="3"]){opacity:.16}
.pf-mk .lf[data-i="0"]{--o:translate(14px,-6px)}.pf-mk .lf[data-i="1"]{--o:translate(-14px,-6px)}
.pf-mk .lf[data-i="2"]{--o:translate(14px,8px)}.pf-mk .lf[data-i="3"]{--o:translate(-14px,8px)}
.pf-mk[data-on="0"] .lf[data-i="0"],.pf-mk[data-on="1"] .lf[data-i="1"],.pf-mk[data-on="2"] .lf[data-i="2"],.pf-mk[data-on="3"] .lf[data-i="3"]{transform:var(--o)}
.pt{min-height:min(62vh,560px);display:flex;flex-direction:column;justify-content:center;padding:32px 0;border-top:1px solid var(--line)}
.pt:first-child{border-top:0}
.pt-top{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.pt-ic{width:64px;height:64px;flex:none}
.pt-n{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--ochre);font-variant-numeric:tabular-nums}
.pt-mk{display:none;width:52px;height:46px}
.pt .h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em;margin-bottom:16px}
.pt p{font-size:clamp(17px,1.25vw,19px);line-height:1.62;max-width:36em}
.pt ul{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.pt li{position:relative;padding-left:22px;font-size:15.5px;color:var(--muted)}
.pt li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--leaf)}
@media (max-width:899px){
  .pf{grid-template-columns:1fr}
  .pf-pin{display:none}
  .pt{min-height:0;padding:40px 0}
  .pt ul{grid-template-columns:1fr}
}

/* 04 aandacht: wat er moet gebeuren */
.at-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.at-grid .sec-head{margin-bottom:0}
.at{container-type:inline-size;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:clamp(20px,3vw,36px)}
.at-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.at-h b{font:500 clamp(18px,1.5vw,21px) var(--display);color:var(--ink);letter-spacing:-.02em}
.at-n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:999px;background:var(--amber);color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.at-l li{display:grid;grid-template-columns:36px 1fr auto auto;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.at-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sage-pale)}
.at-ic svg{width:18px;height:18px;fill:none;stroke:var(--leaf);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.at-l b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.at-l span{display:block;font-size:14px;color:var(--muted)}
.at-l .bd{font-size:12.5px}
.at-ok{position:relative;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.at-ok svg{position:absolute;inset:5px;width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.at-l li.done .at-ok{background:var(--leaf);box-shadow:none}
.at-l li.done .at-ok svg{opacity:1}
.at-l li.done b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-2)}
.at-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.at-foot svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--leaf);stroke-width:1.7}
@media (max-width:899px){.at-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .at-l li{grid-template-columns:1fr auto;grid-template-areas:"t ok" "b ok";gap:8px 14px}
  .at-ic{display:none}
  .at-l li>div{grid-area:t}
  .at-l li>.bd{grid-area:b;justify-self:start}
  .at-ok{grid-area:ok}
}

/* 05 overal: zoek-app + spots */
.ov-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.spots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(24px,3vw,44px);margin-top:clamp(36px,4vw,56px)}
.spot{border-top:1px solid var(--line-2);padding-top:24px}
.spot-k{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ochre);margin-bottom:12px}
.spot .h3{margin-bottom:10px}
.spot p:last-child{font-size:16px;color:var(--muted);line-height:1.58}
.phone{position:relative;width:min(100%,340px);margin-inline:auto;aspect-ratio:9/18.5;border-radius:44px;padding:12px;background:var(--ink);box-shadow:var(--sh-3);container-type:inline-size}
.ph-s{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--cream);padding:13cqw 5.5cqw 5cqw}
.ph-s::before{content:"";position:absolute;left:50%;top:3.2cqw;width:27cqw;height:7cqw;border-radius:999px;background:var(--ink);transform:translateX(-50%)}
.ph-top{display:flex;align-items:center;gap:2.4cqw;margin-bottom:5cqw;color:var(--ink)}
.ph-top .mk{width:7.4cqw;height:6.5cqw}
.ph-top b{font:500 4.6cqw var(--display);letter-spacing:-.02em}
.ph-q{display:flex;align-items:center;gap:2.6cqw;height:12.5cqw;padding:0 4cqw;border-radius:3.6cqw;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-1);font-size:4.4cqw;color:var(--ink)}
.ph-q svg{width:4.6cqw;height:4.6cqw;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.ph-q .ph-t{white-space:nowrap}
.ph-q .ph-ph{color:var(--muted)}
.ph-q .ph-c{display:inline-block;width:.45cqw;height:5.4cqw;background:var(--leaf);margin-left:.4cqw;vertical-align:-1cqw;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ph-r{margin-top:4.5cqw;display:grid;gap:2.6cqw}
.ph-r li{display:flex;align-items:center;gap:3cqw;padding:3.2cqw 3.4cqw;border-radius:3.4cqw;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.ph-r .k{flex:none;width:9cqw;height:9cqw;border-radius:2.6cqw;display:grid;place-items:center;background:var(--sage-pale);color:var(--leaf);font-size:3.4cqw;font-weight:700}
.ph-r b{display:block;font-size:4cqw;color:var(--ink);font-weight:600;line-height:1.25}
.ph-r span{display:block;font-size:3.3cqw;color:var(--muted);line-height:1.3}
.ph-ask{position:absolute;left:5.5cqw;right:5.5cqw;bottom:5cqw;display:flex;align-items:center;gap:2.4cqw;padding:3.4cqw 4cqw;border-radius:3.6cqw;background:var(--forest);color:var(--cream);font-size:3.7cqw}
.ph-ask svg{width:4.6cqw;height:4.6cqw;flex:none;fill:var(--gold)}
@media (max-width:899px){.ov-grid{grid-template-columns:1fr}.phone{width:min(100%,300px)}}
@media (max-width:599px){.spots{grid-template-columns:1fr}}

/* 06 veiligheid */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3.5vw,52px) clamp(24px,3vw,44px)}
.fact{border-top:1px solid var(--d-line-2);padding-top:24px}
.fact dt{font:500 18px/1.3 var(--display);letter-spacing:-.015em;color:var(--cream);margin-bottom:10px}
.fact dd{font-size:15.5px;line-height:1.58;color:var(--d-muted)}
@media (max-width:999px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.facts{grid-template-columns:1fr}}

/* 07 overstappen + 08 vragen: kop links, inhoud rechts */
.os-grid,.fq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.os-grid .sec-head,.fq-grid .sec-head{position:sticky;top:calc(var(--head-h) + 40px);margin-bottom:0}
.steps li{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:30px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.st-n{font:400 40px/1 var(--display);letter-spacing:-.04em;color:var(--ochre)}
.steps .h3{margin-bottom:8px}
.steps p:not(.st-n){color:var(--muted);font-size:16.5px;line-height:1.58}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;
  font:500 clamp(17px,1.35vw,19.5px)/1.35 var(--display);letter-spacing:-.015em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(var(--ink),var(--ink)) center/11px 1.6px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.6px 11px no-repeat;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 26px 0;color:var(--text);font-size:16.5px;line-height:1.62;max-width:40em}
@media (max-width:899px){.os-grid,.fq-grid{grid-template-columns:1fr}.os-grid .sec-head,.fq-grid .sec-head{position:static;margin-bottom:8px}}

/* contact */
.contact{background:var(--forest-deep)}
.ct-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.ct-mk{width:64px;height:56px;margin-bottom:34px}
.ct-copy .body{margin-top:24px}
.ct-alt{margin-top:26px;color:var(--d-muted);font-size:16px}
.form{display:grid;gap:18px;padding:clamp(24px,3.4vw,44px);border-radius:var(--r-lg);background:rgba(244,241,230,.05);border:1px solid var(--d-line)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:grid;gap:8px}
.f span{font-size:14px;font-weight:500;color:var(--d-muted)}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--d-line-2);background:rgba(244,241,230,.06);
  color:var(--cream);font:400 16px/1.4 Inter,system-ui,sans-serif;transition:border-color .2s,background .2s}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sage-2) 50%),linear-gradient(135deg,var(--sage-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.f select option{color:var(--text)}
.f textarea{resize:vertical;min-height:120px}
.f input::placeholder,.f textarea::placeholder{color:rgba(244,241,230,.42)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--sage-2);background:rgba(244,241,230,.09);box-shadow:0 0 0 3px rgba(169,193,129,.25)}
.f [aria-invalid="true"]{border-color:#E8A49F}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.f-note{font-size:14px;color:var(--d-muted)}
.f-msg{font-size:15.5px;color:var(--cream);min-height:1.4em}
.f-msg.err{color:#F2C2BE}
@media (max-width:899px){.ct-grid{grid-template-columns:1fr}}
@media (max-width:599px){.f-row{grid-template-columns:1fr}}

/* footer */
.foot{padding:56px 0 calc(48px + env(safe-area-inset-bottom,0px));background:var(--cream)}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center}
.foot-tag{margin-top:12px;color:var(--muted);font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot-nav a{color:var(--text);text-decoration:none;font-size:15px}
.foot-nav a:hover{color:var(--leaf)}
.foot-by{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot-lang{display:flex;gap:16px;margin-left:auto}
.foot-lang a{color:var(--muted);text-decoration:none}
.foot-lang a:hover{color:var(--leaf)}
.foot-lang a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (max-width:699px){.foot-grid{grid-template-columns:1fr}}

/* privacy en 404 */
.doc{padding-top:clamp(56px,8vw,112px);padding-bottom:var(--sec);max-width:calc(760px + 2 * var(--gutter))}
.doc .h2{margin-bottom:28px}
.doc .h3{margin:44px 0 12px}
.doc p{margin-bottom:14px;line-height:1.65}
.doc-lede{font-size:clamp(18px,1.45vw,21px)}
.doc ul{margin-bottom:14px;display:grid;gap:8px}
.doc li{position:relative;padding-left:22px}
.doc li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--leaf)}

/* ---------- animatie-startstanden ---------- */
/* Zolang site.js nog niet klaar is, staat de hero even uit beeld; vangnet na 2,5 s. */
.js .hero-copy,.js .ha{opacity:0;animation:heroSafe 0s 2.5s forwards}
.anim-ready .hero-copy,.anim-ready .ha,.no-anim .hero-copy,.no-anim .ha{opacity:1;animation:none}
@keyframes heroSafe{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,::before,::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .ph-q .ph-c{animation:none}
}