/* Every.systems — site.css
   Huisstijl = de app (ViVe/src/ui.ts, DESIGN.md): ivoor canvas, graphite tekst, forest als vulling, leaf als lijnkleur
   (nooit tekst: 3,8:1), sage als zacht vlak, champagne als merk-accent. Inter, radii 6/12/20, drie schaduwen.
   Rust is het merk: geen gloed, geen gradients, geen glas. */
:root{
  --forest:#1F3D2E;--forest-2:#24473A;--forest-ink:#12261B;
  --leaf:#5E8F63;--leaf-strong:#2F6B45;--sage:#A7C09F;--sage-2:#B3CBAB;--sage-soft:#EEF3EA;
  --champagne:#D8C6A0;--sand-strong:#8A6B35;
  --ivory:#FAF9F4;--ivory-2:#F1EFE7;--surface:#FFFFFF;--surface-2:#F3F2EC;
  --text:#2E2E2E;--muted:#5F6661;
  --line:rgba(31,61,46,.12);--line-2:rgba(31,61,46,.24);
  --d-text:#FAF9F4;--d-muted:rgba(250,249,244,.74);--d-line:rgba(250,249,244,.14);--d-line-2:rgba(250,249,244,.26);
  --r-sm:6px;--r-md:12px;--r-lg:20px;
  --sh-1:0 1px 2px rgba(31,61,46,.06),0 1px 1px rgba(31,61,46,.04);
  --sh-2:0 6px 16px rgba(31,61,46,.08),0 2px 4px rgba(31,61,46,.05);
  --sh-3:0 40px 80px -24px rgba(31,61,46,.28),0 12px 28px rgba(31,61,46,.08);
  --gutter:clamp(20px,4vw,56px);--max:1240px;--head-h:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sec:clamp(88px,11vw,168px);
}
@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}

*,::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(--ivory);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}
a{color:var(--leaf-strong);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--forest)}
.defs{position:absolute}
.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}

/* typografie */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-strong);margin-bottom:22px}
.h1{font-size:clamp(52px,7.6vw,116px);font-weight:650;letter-spacing:-.048em;line-height:.94;color:var(--forest)}
.h2{font-size:clamp(36px,4.8vw,68px);font-weight:650;letter-spacing:-.04em;line-height:1.01;color:var(--forest)}
.h3{font-size:clamp(20px,1.6vw,23px);font-weight:600;letter-spacing:-.018em;line-height:1.25;color:var(--forest)}
.ln{display:block;overflow:hidden;padding:.04em 0 .1em;margin:-.04em 0 -.1em}
.ln>span{display:block}
.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}
.we{color:var(--forest);font-weight:650}
.ws{color:var(--sand-strong);font-weight:500}

/* 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(--forest);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:var(--surface);color:var(--forest);box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-1)}
.btn-light{background:var(--sage);color:var(--forest-ink)}
.btn-light:hover{background:var(--sage-2);color:var(--forest-ink)}
.btn[disabled]{opacity:.6;cursor:progress}

/* statuschips (brand sheet): zacht vlak + stip + tekst; "Planned" = 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:#2B6B34;background:#E8F3E6}
.b-amber{color:#8A5A12;background:#FBF0DD}
.b-blue{color:#46617F;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 (gebruikt in intro, hero, probleem, platform) */
.lf{transform-box:view-box;transform-origin:0 0}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:50;background:rgba(250,249,244,.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}
.brand-mk{width:30px;height:30px;flex:none}
.wm{font-size:20px;letter-spacing:-.03em;line-height:1}
.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-strong)}
.head-act{display:flex;align-items:center;gap:22px}
.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(--forest);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(--surface);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-soft);color:var(--forest)}
@media (max-width:1099px){.head-nav{display:none}.menu{display:block}.head-act{margin-left:auto}}
@media (max-width:899px){.head-login,.head-act>.lang{display:none}.head-act{gap:8px}}
@media (max-width:480px){.head-bar{gap:12px}.wm{font-size:18px}.head-act{gap:4px}.head-act .btn-sm{padding:0 12px;font-size:14px}}
@media (max-width:374px){.brand{gap:8px}.wm{font-size:17px}.head-act .btn-sm{padding:0 10px}}
@media (max-width:359px){.head-act .btn-sm{display:none}}

/* taalkeuze (kopbalk, mobiel menu, footer) */
.lang{display:inline-flex;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.lang a,.menu nav .lang a{min-width:34px;padding:5px 8px;border-radius:999px;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.05em;
  color:var(--muted);text-decoration:none}
.lang a:hover,.menu nav .lang a:hover{color:var(--forest);background:transparent}
.lang a[aria-current],.menu nav .lang a[aria-current]{background:var(--forest);color:#fff}
.menu nav .lang{justify-self:start;margin:8px 0 4px 10px}

/* ---------- intro (de motion graphic) ---------- */
#intro{display:none}
.intro body{overflow:hidden}
.intro #intro{display:block;position:fixed;inset:0;z-index:100;animation:introSafe 0s 7s forwards;
  --mk-1:#7FA977;--mk-2:#5E8F63;--mk-3:#6E9B66;--mk-4:#4F7F57;--mk-5:#8DB385;--mk-6:#6A9A68}
.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-ros{width:min(34vh,52vw);height:min(34vh,52vw)}
.i-word{margin-top:clamp(26px,4.4vh,48px);font-size:clamp(40px,6.4vw,92px);letter-spacing:-.045em;line-height:1}
.i-word .we{color:var(--ivory)}
.i-word .ws{color:var(--champagne)}
.i-tag{margin-top:14px;font-size:clamp(16px,1.7vw,24px);color:var(--sage);letter-spacing:-.01em}
.i-skip{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:none;border:0;color:rgba(250,249,244,.6);
  font:500 14px Inter,system-ui,sans-serif;padding:12px;cursor:pointer}
.i-skip:hover{color:var(--ivory)}

/* ---------- 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.08fr) minmax(0,.92fr);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(--leaf)}
.orbit{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin-inline:auto}
.hero-ros{position:absolute;left:25%;top:25%;width:50%;height:50%}
.orbit-l li{position:absolute;display:flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;font-size:14px;font-weight:500;color:var(--forest);white-space:nowrap;box-shadow:var(--sh-1)}
.orbit-l li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.orbit-l [data-i="0"]{left:50%;top:9%;transform:translate(-50%,-50%);--c:#8DB383}
.orbit-l [data-i="1"]{left:76%;top:30%;transform:translate(0,-50%);--c:#D8C6A0}
.orbit-l [data-i="2"]{left:76%;top:70%;transform:translate(0,-50%);--c:#86AE7D}
.orbit-l [data-i="3"]{left:50%;top:91%;transform:translate(-50%,-50%);--c:#33603F}
.orbit-l [data-i="4"]{left:24%;top:70%;transform:translate(-100%,-50%);--c:#2A5236}
.orbit-l [data-i="5"]{left:24%;top:30%;transform:translate(-100%,-50%);--c:#4B7C54}
/* fijne cirkel achter het beeldmerk: de "baan" waar de zes onderdelen op liggen */
.orbit::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed var(--line-2)}
@media (max-width:899px){
  .hero{min-height:0}
  .hero-grid{grid-template-columns:1fr}
  .orbit{max-width:440px}
}
@media (max-width:520px){.orbit-l li{font-size:12.5px;padding:5px 10px 5px 8px}.orbit-l [data-i="1"],.orbit-l [data-i="2"]{left:72%}.orbit-l [data-i="4"],.orbit-l [data-i="5"]{left:28%}}

/* ---------- productbeeld ---------- */
.shot{padding-bottom:var(--sec)}
.mock{container-type:inline-size;max-width:1120px;margin-inline:auto;border-radius:var(--r-lg);background:var(--ivory);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(--surface-2);border-bottom:1px solid var(--line)}
.m-bar i{width:.95cqw;height:.95cqw;border-radius:50%;background:rgba(31,61,46,.16)}
.m-bar span{margin:0 auto;padding:.3cqw 3cqw;background:var(--surface);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(--surface);border-right:1px solid var(--line);padding:1.6cqw 1.1cqw}
.m-brand{display:flex;align-items:center;gap:.6cqw;font-size:1.45cqw;letter-spacing:-.03em;margin:0 .5cqw 1.6cqw}
.m-brand svg{width:2cqw;height:2cqw}
.m-brand b{color:var(--forest);font-weight:650}.m-brand em{font-style:normal;color:var(--sand-strong);font-weight:500}
.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(--forest);font-weight:600}
.m-nav s{text-decoration:none;font-size:.85cqw;background:var(--forest);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-size:1.75cqw;font-weight:650;letter-spacing:-.025em;color:var(--forest);margin-right:auto}
.m-search{display:flex;align-items:center;gap:2.6cqw;padding:.55cqw .9cqw;background:var(--surface);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(--surface);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-size:2.15cqw;font-weight:650;letter-spacing:-.03em;color:var(--forest);font-variant-numeric:tabular-nums}
.m-stat span{font-size:.95cqw;color:var(--leaf-strong)}
.m-card{background:var(--surface);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(--forest);margin-bottom:.8cqw}
.m-tr{display:grid;grid-template-columns:1.15fr 1.9fr 1.4fr 1.15fr .9fr;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;font-variant-numeric:tabular-nums}
.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}
@media (max-width:699px){
  /* op de telefoon een uitsnede: het overzicht groot, de zijbalk en de rechterkolommen 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(--ivory-2)}
.dark{background:var(--forest);color:var(--d-text);
  --mk-1:#7FA977;--mk-2:#5E8F63;--mk-3:#6E9B66;--mk-4:#4F7F57;--mk-5:#8DB385;--mk-6:#6A9A68}
.dark .eyebrow{color:var(--sage)}
.dark .h2,.dark .h3{color:var(--ivory)}
.dark .body{color:var(--d-muted)}
.dark a{color:var(--sage)}.dark a:hover{color:var(--ivory)}
.sec-head{max-width:760px;margin-bottom:clamp(48px,6vw,88px)}
.sec-head .body{margin-top:26px}

/* 01 probleem */
.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(250,249,244,.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)}
.isles [data-i="0"]{left:0;top:6%;rotate:-3deg}
.isles [data-i="1"]{left:58%;top:0;rotate:2deg}
.isles [data-i="2"]{right:0;top:46%;rotate:-2deg}
.isles [data-i="3"]{left:46%;bottom:2%;rotate:3deg}
.isles [data-i="4"]{left:0;bottom:16%;rotate:2deg}
.isles [data-i="5"]{left:4%;top:38%;rotate:-2deg}
.pr-ros{position:absolute;left:31%;top:28%;width:38%;height:38%}
.pr-word{display:none;position:absolute;left:0;right:0;top:72%;text-align:center;font-size:clamp(26px,3vw,40px);letter-spacing:-.04em}
.pr-word .we{color:var(--ivory)}.pr-word .ws{color:var(--champagne)}
.js .pr-word,.no-anim .pr-word{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-size:clamp(24px,2.6vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.2;color:var(--ivory);max-width:30em}
.pr-answer span{color:var(--sage);font-weight:500}
@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 keten */
.film{margin:0 0 clamp(64px,8vw,112px)}
.film-f{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--forest);box-shadow:var(--sh-3)}
.film-v{display:block;width:100%;height:100%;object-fit:cover}
.film figcaption{margin-top:16px;font-size:14.5px;color:var(--muted)}
.film figcaption a{margin-left:6px}
.chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;position:relative}
.chain::before{content:"";position:absolute;left:6px;right:0;top:6px;height:1px;background:var(--line-2);transform-origin:0 50%}
.js .chain::before{transform:scaleX(0);transition:transform 1.6s var(--ease)}
.js .chain.on::before{transform:none}
.cn{position:relative;padding-top:40px}
.cn-dot{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--ivory);box-shadow:inset 0 0 0 2px var(--leaf)}
.cn-n{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--sand-strong);margin-bottom:10px;font-variant-numeric:tabular-nums}
.cn h3{font-size:20px;font-weight:600;letter-spacing:-.018em;color:var(--forest);margin-bottom:10px}
.cn p{font-size:15.5px;line-height:1.55;color:var(--muted)}
@media (max-width:999px){
  .chain{grid-template-columns:1fr;gap:34px;padding-left:34px}
  .chain::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto;transform-origin:50% 0}
  .js .chain::before{transform:scaleY(0)}
  .cn{padding-top:0}
  .cn-dot{left:-34px;top:4px}
}
.docflow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(72px,9vw,128px);
  padding:clamp(28px,4vw,56px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.df-copy .body{margin-top:14px;font-size:17px}
.df{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:df}
.df li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 16px 20px;border-radius:var(--r-md);
  background:var(--ivory);border:1px solid var(--line);min-height:138px}
.df li::after{content:"";position:absolute;left:16px;right:16px;bottom:18px;height:28px;
  background:linear-gradient(var(--line-2),var(--line-2)) 0 0/100% 1px no-repeat,linear-gradient(var(--line-2),var(--line-2)) 0 50%/72% 1px no-repeat,linear-gradient(var(--line-2),var(--line-2)) 0 100%/86% 1px no-repeat}
.df li+li::before{content:"";position:absolute;left:-12px;top:50%;width:10px;height:10px;border-top:1.5px solid var(--leaf);border-right:1.5px solid var(--leaf);transform:translate(-2px,-50%) rotate(45deg)}
.df-k{max-width:100%;font-size:15px;font-weight:600;color:var(--forest);letter-spacing:-.01em;overflow-wrap:anywhere}
.df .bd{font-size:13px}
@media (max-width:999px){.docflow{grid-template-columns:1fr}}
@media (max-width:599px){.df{grid-template-columns:repeat(2,minmax(0,1fr))}.df li:nth-child(3)::before{display:none}}

/* 03 platform */
.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,520px);display:grid;place-items:center}
.pf-ros{width:min(100%,440px);height:auto;aspect-ratio:1}
.pf-ros .lf,.pt-mk .lf{transition:opacity .55s var(--ease),transform .7s var(--ease)}
.lf[data-i="0"]{--o:translate(-.7px,-9px)}.lf[data-i="1"]{--o:translate(7.3px,-5.2px)}.lf[data-i="2"]{--o:translate(8.2px,3.8px)}
.lf[data-i="3"]{--o:translate(.7px,9px)}.lf[data-i="4"]{--o:translate(-7.3px,5.2px)}.lf[data-i="5"]{--o:translate(-8.2px,-3.8px)}
[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"]),[data-on="4"] .lf:not([data-i="4"]),[data-on="5"] .lf:not([data-i="5"]){opacity:.2}
.pf-ros[data-on="0"] .lf[data-i="0"],.pf-ros[data-on="1"] .lf[data-i="1"],.pf-ros[data-on="2"] .lf[data-i="2"],
.pf-ros[data-on="3"] .lf[data-i="3"],.pf-ros[data-on="4"] .lf[data-i="4"],.pf-ros[data-on="5"] .lf[data-i="5"]{transform:var(--o) scale(1.04)}
.pf-list{counter-reset:pt}
.pt::before{counter-increment:pt;content:"0" counter(pt) " / 06";font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--sand-strong);margin-bottom:14px;font-variant-numeric:tabular-nums}
.pt{min-height:min(58vh,520px);display:flex;flex-direction:column;justify-content:center;padding:32px 0;border-top:1px solid var(--line)}
.pt:first-child{border-top:0}
.pt-mk{display:none;width:52px;height:52px;margin-bottom:18px}
.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-mk{display:block}
  .pt ul{grid-template-columns:1fr}
}

/* 04 rollen */
.r-tabs{display:none;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px -2px 20px}
.r-tabs::-webkit-scrollbar{display:none}
.js .r-tabs{display:flex}
.r-panel+.r-panel{margin-top:16px}
.js .r-panel+.r-panel{margin-top:0}
.r-tabs button{flex:none;min-height:46px;padding:0 20px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--text);font:500 15.5px Inter,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.r-tabs button:hover{background:var(--surface)}
.r-tabs button[aria-selected="true"]{background:var(--forest);color:#fff;box-shadow:none}
.r-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);padding:clamp(28px,4vw,52px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.r-panel[hidden]{display:none}
.r-panel .h3{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;margin-bottom:14px}
.r-panel p{font-size:clamp(17px,1.25vw,19px);line-height:1.62}
.r-panel ul{display:grid;gap:12px;align-content:start;padding-left:clamp(0px,3vw,40px);border-left:1px solid var(--line)}
.r-panel li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:var(--forest)}
.r-panel li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--sage-soft) no-repeat center/10px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.7 7 9 1' fill='none' stroke='%232F6B45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.r-note{margin-top:22px;color:var(--muted);font-size:15.5px}
@media (max-width:799px){.r-panel{grid-template-columns:1fr}.r-panel ul{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}}

/* 05 overal */
.spots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.spot{border-top:1px solid var(--line-2);padding-top:26px}
.spot-k{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sand-strong);margin-bottom:14px}
.spot .h3{margin-bottom:10px}
.spot p:last-child{font-size:16px;color:var(--muted);line-height:1.58}
@media (max-width:999px){.spots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@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-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ivory);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-size:40px;font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--sand-strong)}
.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-size:clamp(17px,1.35vw,19.5px);font-weight:600;letter-spacing:-.015em;color:var(--forest)}
.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(--forest),var(--forest)) center/11px 1.6px no-repeat,linear-gradient(var(--forest),var(--forest)) 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 */
.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:56px;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(250,249,244,.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(250,249,244,.06);
  color:var(--ivory);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) 50%),linear-gradient(135deg,var(--sage) 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(250,249,244,.4)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--sage);background:rgba(250,249,244,.09);box-shadow:0 0 0 3px rgba(167,192,159,.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(--ivory);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(--ivory)}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center}
.foot-tag{margin-top:10px;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-strong)}
.foot-bot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:26px;border-top:1px solid var(--line)}
.foot-by{color:var(--muted);font-size:14px}
@media (max-width:699px){.foot-grid{grid-template-columns:1fr}}

/* privacy */
.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 .h-art{opacity:0;animation:heroSafe 0s 2.5s forwards}
.anim-ready .hero-copy,.anim-ready .h-art,.no-anim .hero-copy,.no-anim .h-art{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}
}