/* ============================================================
   SCA · RONDE 11 · DESIGN SYSTEM "OBSIDIAN BLUEPRINT"
   styles/blueprint.css · vervangt system.css op elke pagina (?v=21)
   Waarheid: scratchpad/r11/MASTER-BRIEF.md §2 + ENGINE-CONTRACT.md · markup: COMPONENTS.md.
   Donker = :root, licht = html[data-theme="light"]. Hairlines i.p.v. schaduwen, radius 2px,
   75/20/5. tabular-nums ALLEEN op cijferdragers (§T), nooit op :root/html/body.
   Engine-selectors 1-op-1 geport (hernoemen verboden). Initial-hidden motion staat onder
   html.js: zonder JS is elke pagina volledig leesbaar.
   Secties: zie de "== n · ... ==" kopjes hieronder.
   ============================================================ */

/* == 0 · RESET + A11Y == */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--nav-h) + 20px)}
body{min-height:100svh;font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--fg-2);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background-color .25s var(--ease),color .25s var(--ease)}
img,picture,video,canvas,svg,iframe{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul[class],ol[class]{list-style:none;padding:0}
[hidden]{display:none !important}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--fg-3)}
.skip-link{position:absolute;left:16px;top:-60px;z-index:var(--z-toast);background:var(--accent);color:#FFFFFF;padding:10px 18px;border-radius:2px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;transition:top var(--t1)}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:#FFFFFF}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}
}

/* == 1 · TOKENS == */
:root{color-scheme:dark;
/* oppervlak */
--bg:#0A0A09;/* obsidian */
--bg-2:#141412;/* carbon */
--bg-3:#1C1C19;/* elevated: hovers, modals, inputs */
/* tekst */
--fg:#F2F0EA;/* ivory: koppen, nav, cijfers */
--fg-2:#A7A49C;/* body, metadata · 7,2:1 op --bg */
--fg-3:#87847D;/* zeer secundair: .spec, .perf__note, labels. Bewust lichter dan de #6C6A63 uit
   de brieftabel, want die haalt op obsidian 3,3:1 en zakt onder AA zodra de mono-metadata op
   11,5px staat; #87847D = 5,3:1. Er is dus GEEN derde grijs (bevinding 37). */
/* accent · 5% van het beeld */
--accent:#2563FF;/* vlakken, randen, knoppen, actieve states */
--accent-ink:#7A9BFF;/* KLEINE blauwe tekst/links · 6,8:1 op --bg */
--accent-soft:#2563FF1F;
/* lijnen */
--line:#F2F0EA24;
--line-2:#F2F0EA12;
/* status (sui-signalen + toasts) */
--ok:#5FE3B0;--ok-soft:#5FE3B021;
--warn:#E5C07B;--warn-soft:#E5C07B21;
--err:#F08CA0;--err-soft:#F08CA01F;
--amber:#E0A34A;/* alleen admin-mail */

--veil:#0A0A09DB;
--sweep:#F2F0EA0D;
/* vorm + maat */
--radius:2px;--radius-lg:4px;
--container:1440px;
--gutter:clamp(20px,6vw,96px);
--section:clamp(88px,11vw,176px);
--nav-h:72px;
/* motion */
--ease:cubic-bezier(.22,1,.36,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--ease-spring:cubic-bezier(.34,1.42,.64,1);
--dur-1:.18s;--dur-2:.35s;--dur-3:.6s;--t1:var(--dur-1) var(--ease);--t2:var(--dur-2) var(--ease);--t3:var(--dur-3) var(--ease);

/* z-ladder (ENGINE-CONTRACT §1.4) */
--z-chat:90;--z-mobilecta:95;--z-stickycta:96;--z-nav:100;
--z-drawer:110;--z-modal:200;--z-shot:250;--z-toast:300;
/* fontfallback: de echte stacks staan in fonts.css op html:root en winnen */
--font-body:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
--font-display:"Inter Tight",var(--font-body);
--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace}
html[data-theme="light"]{color-scheme:light;
--bg:#F2F0EA;--bg-2:#FFFFFF;--bg-3:#EAE7DF;
--fg:#0A0A09;--fg-2:#5C5A54;--fg-3:#6A675F;
--accent:#1D4FD8;--accent-ink:#1D4FD8;
--accent-soft:#1D4FD81A;
--line:#0A0A0924;--line-2:#0A0A0912;
--ok:#0B6B45;--ok-soft:#16A36A1F;
--warn:#8A5310;--warn-soft:#E08A1E1F;
--err:#A32439;--err-soft:#E0455F1A;
--amber:#B77A1E;
/* veil 96% i.p.v. 88% (bevinding 26): op 88% schemerde de donkere hero door de gescrolde
   navbalk en zakte nav__link/portal/toggle naar 4,70:1; op 96% blijft de balk ivoor (5,6:1). */
--veil:#F2F0EAF5;
--sweep:#0A0A090B}

/* == 2 · TYPOGRAFIE == */
/* line-height 1.05 i.p.v. .94 (brief 2.2). Gemeten in Inter Tight op 88px: de inkt van
   een uppercase E-trema loopt 83px boven zijn basislijn. Bij .94 stond het trema 0,3px
   BOVEN de basislijn van de regel erboven (dots in de vorige regel, las als vuil), bij
   1.0 bleef er 5px over. 1.05 geeft 9px lucht en blijft ruim strakker dan normaal. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--fg);text-transform:uppercase;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(44px,6.6vw,96px)}
h2{font-size:clamp(32px,4.4vw,64px)}
h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.15}
h4{font-size:1.05rem;letter-spacing:-.01em;line-height:1.3}
p{max-width:62ch}
strong{color:var(--fg);font-weight:600}
.display-xl{font-size:clamp(44px,6.6vw,96px);line-height:1.05;letter-spacing:-.035em;color:var(--fg)}
/* Twee kopschalen, meer niet (bevinding 5): sectie-H2 = de 64-schaal hierboven, display/slot =
   de 78-schaal hieronder. De slotkop van .cta-final draagt meestal geen klasse en had daarom een
   derde maat (clamp(36px,5.4vw,80px), stond in §E); die staat nu in dezelfde regel. `:not(.display-l)`
   blijft: een slotkop die de klasse wel draagt mag een pagina-eigen maat houden. */
.display-l,.cta-final h2:not(.display-l):not(.display-xl){font-size:clamp(40px,5.4vw,78px);line-height:1.05;letter-spacing:-.035em;color:var(--fg)}
.lead{font-size:clamp(1.05rem,.95rem + .5vw,1.25rem);line-height:1.6;color:var(--fg-2);max-width:62ch}
/* verticaal ritme na koppen · specificiteit 0 via :where, elke eigen margin wint */
:where(h1,h2,.display-xl,.display-l) + .lead{margin-top:clamp(16px,2vw,24px)}
:where(p,.lead) + .list-hair{margin-top:22px}
:where(.grid-hair > *,.card,.route-card,.panel,.tool) :where(h3,h4) + p{margin-top:12px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:500;font-size:.719rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:18px}
.modal__title,.quiz-mini__title,.lead-magnet__title,.postcard__title,.accordion__trigger,.article h1,.article h2,.article h3,.toast,.review__name{text-transform:none}
.spec{font-family:var(--font-mono);font-weight:400;font-size:.719rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.6;color:var(--fg-3)}
.spec a{color:var(--fg-2)}
.spec a:hover{color:var(--fg)}
/* inline tekstlink in bodycopy · een stijl sitewide */
.txt-link{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent-ink) 45%,transparent);transition:text-decoration-color var(--t1)}
.txt-link:hover{text-decoration-color:var(--accent-ink)}
.microcopy{font-family:var(--font-mono);font-weight:400;font-size:.6875rem;letter-spacing:.04em;line-height:1.5;color:var(--fg-3);margin-top:10px}
/* 960 i.p.v. 920: op de 78-schaal (vanaf 1445px viewport) meet "GEEN MARKETINGBUREAU." 923px en
   brak de statementregel in tweeen. Met 960 blijft elke regel eenregelig (gemeten op 1920). */
.statement{text-align:center;max-width:960px;margin-inline:auto}
.statement p{margin-inline:auto}
/* Boven- EN ondermarge: met een strakke line-height steken de glyphs onder hun lijnbox uit,
   dus zonder margin-top wordt dit een streep DOOR de kop (mockup-0: vrij zwevend). */
.statement__rule{display:block;width:56px;height:2px;border:0;background:var(--accent);margin:clamp(26px,4vw,44px) auto}
.statement__answer{display:block;margin-top:clamp(22px,3vw,34px);font-family:var(--font-mono);font-weight:500;font-size:clamp(.75rem,.9vw,.95rem);letter-spacing:.24em;text-transform:uppercase;color:var(--accent-ink)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:.688rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.breadcrumb a:hover{color:var(--fg)}
/* §T · cijferdiscipline: tabular-nums ALLEEN hier, nooit op :root/html/body */
.stat[data-count] [data-count-val],.stat__num,[data-count-val],.kpi__n,.perf__n,.sui__data,.article .num{font-variant-numeric:tabular-nums}
.stat__num .stat__prefix,.stat__num .stat__suffix{font-variant-numeric:normal;letter-spacing:-.02em}
/* prefix/suffix zijn flex-items: een leidende spatie (" MIN") wordt daar weggehaald
   door de witruimteregels van een inline formatting context. white-space:pre bewaart hem,
   zodat "5 MIN" niet als "5MIN" rendert; "K" en "+" blijven strak omdat ze geen spatie bevatten. */
.stat__prefix,.stat__suffix{white-space:pre}

/* == 3 · LAYOUT == */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(760px + 2 * var(--gutter))}
.section{padding-block:var(--section);position:relative}
.section--hairline-top{border-top:1px solid var(--line-2)}
.section--carbon{background:var(--bg-2)}
.section[data-cv]{content-visibility:auto;contain-intrinsic-size:auto 640px}
.split{display:grid;grid-template-columns:var(--split-ratio,1fr 1fr);gap:clamp(28px,5vw,80px);align-items:center}
.grid-hair{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.grid-hair > *{background:var(--cell-bg,var(--bg));padding:clamp(22px,2.6vw,36px);min-width:0}
.section--carbon .grid-hair > *,.grid-hair--carbon > *{--cell-bg:var(--bg-2)}
.list-hair{list-style:none;margin:0;padding:0}
/* heel-pixelraster: op em-posities smeerde het ene 1px-streepje blauw, het andere grijs. Op DPR 1
   bleef dat zichtbaar (bevinding 41: item 1 en 3 blauw, 2 en 4 vaalgrijs), want een 1px-lijn kan nog
   altijd op een halve devicepixel landen. 2px dekt er altijd een hele; top schuift 1px mee zodat het
   streepje optisch op de basislijn blijft. Zelfde marker, zelfde recept in .step__list. */
.list-hair li{position:relative;padding:13px 0 13px 28px;line-height:26px;border-top:1px solid var(--line-2);color:var(--fg-2)}
.list-hair li:last-child{border-bottom:1px solid var(--line-2)}
.list-hair li::before{content:"";position:absolute;left:0;top:25px;width:14px;height:2px;background:var(--accent)}
.photo{position:relative;overflow:hidden;border-radius:2px;background:#0A0A09}
.photo img{width:100%;height:100%;object-fit:cover}
/* EEN fotograde sitewide (bevinding 6 + 45): het recept dat op over-ons al goed stond, nu ook op de
   stills, de hero-poster, de heroloop, de hostfoto en het cta-beeld. De bronfoto's zijn licht; zonder
   brightness bleven de brede beeldbanden de lichtste vlakken van de site. Alleen de overlay verschilt
   per rol: gewoon 45>72%, band en heavy 60>85%. */
.photo img,.hero__media img,.hero__video,.host__photo img,.cta-final__media img{filter:saturate(.72) contrast(1.08) brightness(.8)}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0A0A0973,#0A0A09B8);pointer-events:none}
.photo--band::after,.photo--heavy::after{background:linear-gradient(180deg,#0A0A0999,#0A0A09D9)}
.photo--band{aspect-ratio:21 / 9}
.photo--4x3{aspect-ratio:4 / 3}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)} .photo--band{aspect-ratio:16 / 9}
}
@media (max-width:768px){.grid-hair{grid-template-columns:1fr} .grid-hair--2m{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* == 4 · KNOPPEN == */
.btn{--btn-bg:var(--accent);--btn-fg:#FFFFFF;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:2px;font-family:var(--font-mono);font-weight:500;font-size:.719rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--btn-fg);background:var(--btn-bg);border:1px solid transparent;cursor:pointer;isolation:isolate;overflow:hidden;transition:transform var(--t1),background var(--t1),border-color var(--t1),color var(--t1)}
.btn svg{width:15px;height:15px;flex:none}
.btn:hover{transform:translateY(-2px);background:#2058EA}
html[data-theme="light"] .btn:hover{background:#2A5CE0}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.btn--ghost,.btn-ghost{--btn-bg:transparent;--btn-fg:var(--fg);background:transparent;border-color:var(--line)}
.btn--ghost:hover,.btn-ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
/* .btn-glow = alias van .btn (app.js injecteert hem) */
.btn--lg{padding:18px 30px;font-size:.781rem}
.btn--sm,.btn-sm{padding:10px 14px;font-size:.656rem}
.btn--block,.btn-block{display:flex;width:100%}
.btn--text{--btn-bg:transparent;--btn-fg:var(--fg);background:none;border:0;border-bottom:1px solid var(--accent);border-radius:0;padding:6px 2px;overflow:visible}
.btn--text:hover{transform:none;background:none;color:var(--accent-ink)}
.btn--text svg,.btn--text .btn__arrow{transition:transform var(--t1)}
.btn--text:hover svg,.btn--text:hover .btn__arrow{transform:translateX(3px)}
/* Raakvlak >= 44px (projecteis; WCAG 2.5.8 vraagt 24px): een transparant ::before
   vergroot ALLEEN het hitgebied, de optische maat blijft die van de mockup. .btn heeft
   overflow:hidden, dus te lage knoppen (mobile-cta) krijgen echte padding. */
.theme-toggle,.nav__burger,.nav__drawer-close,.dsocial__btn,.footer__social-btn,.reviews__btn,.sticky-cta__x{position:relative}
.theme-toggle::before,.nav__burger::before,.nav__drawer-close::before,.dsocial__btn::before,.footer__social-btn::before,.reviews__btn::before,.sticky-cta__x::before,.btn--text::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}
.breadcrumb a{display:inline-block;padding-block:4px}
/* <=1024px: 44px raakvlak op elke knop. .btn--text uitgezonderd (heeft al een
   ::before-raakvlak; anders zakt zijn blauwe onderlijn weg). */
@media (max-width:1024px){.btn:not(.btn--text){min-height:44px}
}
.magnetic{transition:transform var(--t2)}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-70%;width:40%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#FFFFFF4D,transparent);transition:left .6s var(--ease);pointer-events:none}
.btn-shine:hover::after,.btn-shine:focus-visible::after{left:140%}
.ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,#FFFFFF66,#FFFFFF00 70%);pointer-events:none;z-index:0;animation:ripple-out .6s var(--ease) forwards}
.btn--ghost .ripple,.btn-ghost .ripple,.btn--text .ripple{background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
@keyframes ripple-out{to{transform:translate(-50%,-50%) scale(1);opacity:0}
}
@media (max-width:480px){.btn--lg{white-space:normal;text-align:center;line-height:1.25;padding-left:20px;padding-right:20px}
}

/* kaart · pointermove zet --gx/--gy */
.card{position:relative;background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px;padding:clamp(22px,3vw,34px);overflow:hidden;transition:border-color var(--t2),background var(--t2)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--gx,50%) var(--gy,0%),var(--accent-soft),transparent 62%);opacity:0;transition:opacity var(--t2);pointer-events:none}
.card:hover{border-color:var(--line)}
.card:hover::after{opacity:1}
.card > *{position:relative;z-index:1}
.card p{color:var(--fg-2)}
.panel{background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px;padding:clamp(24px,4vw,40px)}
.route-card{position:relative;background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px;padding:clamp(20px,2.6vw,30px)}
.route-card .btn{margin-top:4px}
.spotlight-card,[data-spotlight]{position:relative}
.spotlight-card::before,[data-spotlight]::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 60%);transition:opacity var(--t2)}
.spotlight-card.is-spot::before,[data-spotlight].is-spot::before{opacity:1}
.spotlight-card > *{position:relative;z-index:1}

/* == 5 · NAV + DRAWER == */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:var(--z-nav);display:flex;align-items:center;border-bottom:1px solid transparent;transition:background var(--t2),border-color var(--t2)}
.nav.is-scrolled{background:var(--veil);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);border-bottom-color:var(--line-2)}
/* Nav transparant boven een beeldhero: donkere tokens, anders viel in het lichte thema
   alles weg (merk 1,01:1). Twee losse regels: :has() in een lijst sloopt de hele lijst. */
/* Zonder JS komt .is-scrolled er nooit: dan krijgt de nav meteen zijn veil, zodat hij
   in beide thema's leesbaar blijft over zowel de donkere hero als de lichte secties.
   Daarom staan de twee regels hieronder onder html.js: ivory op een lichte veil zou
   juist onleesbaar zijn. */
html:not(.js) .nav{background:var(--veil);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);border-bottom-color:var(--line-2)}
html.js .nav--on-dark:not(.is-scrolled){--fg:#F2F0EA;--fg-2:#A7A49C;--fg-3:#87847D;--accent:#2563FF;--accent-ink:#7A9BFF;--accent-soft:#2563FF1F;--line:#F2F0EA24;--line-2:#F2F0EA12;color:var(--fg-2)}
html.js body:has(.hero--video,.hero--photo) .nav:not(.is-scrolled){--fg:#F2F0EA;--fg-2:#A7A49C;--fg-3:#87847D;--accent:#2563FF;--accent-ink:#7A9BFF;--accent-soft:#2563FF1F;--line:#F2F0EA24;--line-2:#F2F0EA12;color:var(--fg-2)}
.nav__inner{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav__brand{display:inline-flex;align-items:center;color:var(--fg);flex:none;transition:color var(--t2)}
.nav__brand svg,.nav__brand img,.brand-logo{display:block;height:30px;width:auto}
/* volledig lockup (8,28:1) i.p.v. de mark (4,06:1) */
.brand-logo--full{height:32px;max-width:100%}
.nav__menu{display:flex;align-items:center;gap:clamp(4px,1vw,10px)}
.nav__link{padding:9px 10px;font-family:var(--font-mono);font-weight:500;font-size:.719rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap;transition:color var(--t1)}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--fg)}
.nav__link[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:7px;text-decoration-thickness:1px}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__portal{display:none;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);padding:9px 10px;border:1px solid var(--line-2);border-radius:2px;transition:color var(--t1),border-color var(--t1)}
.nav__portal:hover{color:var(--fg);border-color:var(--line)}
.nav__portal svg{width:13px;height:13px}
.theme-toggle{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:2px;color:var(--fg-2);background:transparent;transition:color var(--t1),border-color var(--t1)}
.theme-toggle:hover{color:var(--fg);border-color:var(--line)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle__moon{display:none}
html[data-theme="light"] .theme-toggle__sun{display:none}
html[data-theme="light"] .theme-toggle__moon{display:block}
.nav__burger{display:none;flex:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:2px;background:transparent;position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nav__burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--fg);transform-origin:center;transition:transform var(--t2),opacity var(--t1),background var(--t2)}
.nav__burger span:nth-child(1){top:14px}
.nav__burger span:nth-child(2){top:20px}
.nav__burger span:nth-child(3){top:26px}
body.drawer-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.drawer-open .nav__burger span:nth-child(2){opacity:0;transform:scaleX(.4)}
body.drawer-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (min-width:1200px){.nav__portal{display:inline-flex}
}
@media (max-width:1024px){.nav__menu,.nav__cta > .btn{display:none} .nav__burger{display:block}
}

/* drawer fullscreen */
.nav__drawer{position:fixed;inset:0;z-index:var(--z-drawer);background:#0A0A0900;opacity:0;visibility:hidden;transition:opacity var(--t2),visibility 0s linear var(--dur-2)}
.nav__drawer-panel{position:absolute;inset:0;width:100%;background:var(--bg);display:flex;flex-direction:column;gap:16px;padding:18px var(--gutter) calc(28px + env(safe-area-inset-bottom));transform:translateX(6%);opacity:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transition:transform var(--t3),opacity var(--t2)}
body.drawer-open .nav__drawer{opacity:1;visibility:visible;background:#0A0A0980;transition:opacity var(--t2),visibility 0s}
body.drawer-open .nav__drawer-panel{transform:translateX(0);opacity:1}
body.drawer-open{overflow:hidden}
.nav__drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:calc(var(--nav-h) - 18px);padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.nav__drawer-tools{display:flex;align-items:center;gap:10px;flex:none}
.nav__drawer-close{flex:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:2px;display:grid;place-items:center;color:var(--fg-2);transition:color var(--t1),border-color var(--t1)}
.nav__drawer-close:hover{color:var(--fg);border-color:var(--line)}
.nav__drawer-close svg{width:18px;height:18px}
.dnav{display:flex;flex-direction:column}
.dnav__item{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2);font-family:var(--font-display);font-weight:600;font-size:32px;letter-spacing:-.03em;line-height:1;text-transform:uppercase;color:var(--fg);transition:color var(--t1),padding-left var(--t2)}
.dnav__item:hover,.dnav__item[aria-current="page"]{color:var(--accent-ink);padding-left:8px}
.dnav__label{flex:1 1 auto;min-width:0}
.dsec{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.dsec__label{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.656rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.dsec__spark{display:grid;place-items:center;width:16px;height:16px;color:var(--accent-ink)}
.dsec__spark svg{width:13px;height:13px}
.dsvc{display:inline-flex;align-items:center;gap:10px;padding:7px 0;color:var(--fg-2);font-size:.95rem;transition:color var(--t1)}
.dsvc:hover{color:var(--fg)}
.dsvc__label{min-width:0}
.dsec--ai{border:1px solid var(--line-2);border-radius:2px;padding:14px;background:var(--bg-2)}
.nav__drawer .dcta{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.dsocial{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line-2)}
.dsocial__btn{flex:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:2px;display:grid;place-items:center;color:var(--fg-2);transition:color var(--t1),border-color var(--t1)}
.dsocial__btn:hover{color:var(--fg);border-color:var(--line)}
.dsocial__btn svg{width:18px;height:18px}
.dsocial__label{font-family:var(--font-mono);font-size:.656rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.nav__drawer-panel > *{opacity:0;transform:translateY(12px);transition:opacity var(--t2),transform var(--t2)}
body.drawer-open .nav__drawer-panel > *{opacity:1;transform:none}
body.drawer-open .nav__drawer-panel > :nth-child(1){transition-delay:.04s}
body.drawer-open .nav__drawer-panel > :nth-child(2){transition-delay:.09s}
body.drawer-open .nav__drawer-panel > :nth-child(3){transition-delay:.14s}
body.drawer-open .nav__drawer-panel > :nth-child(4){transition-delay:.19s}
body.drawer-open .nav__drawer-panel > :nth-child(n+5){transition-delay:.24s}

/* == 6 · HERO == */
.hero{position:relative;display:flex;align-items:flex-end;min-height:min(92svh,900px);padding:calc(var(--nav-h) + 48px) 0 clamp(44px,6vw,80px);overflow:hidden;isolation:isolate}
.hero--video,.hero--photo,.cta-final{--fg:#F2F0EA;--fg-2:#A7A49C;--fg-3:#87847D;--accent-ink:#7A9BFF;--accent:#2563FF;--accent-soft:#2563FF1F;--line:#F2F0EA24;--line-2:#F2F0EA12;--sweep:#F2F0EA0D;background:#0A0A09;color:var(--fg-2);color-scheme:dark}
/* .hero.hero--type (0-2-0) moet winnen van de 768px-regel .hero{min-height:86svh} verderop */
.hero.hero--type{min-height:0;align-items:stretch;padding-top:calc(var(--nav-h) + clamp(56px,9vw,132px));padding-bottom:clamp(28px,4vw,56px)}
.hero__video,.hero__media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* De grade draagt de tekst: gemeten op de echte poster haalde de eyebrow 4,23:1 en de
   spec-regel 3,05:1 met de oude stops. Met deze waarden zit alles boven 4,5:1 (gemeten
   met compositie: foto + gradient), en het beeld komt dichter bij de mockup. */
.hero__grade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0A0A099E,#0A0A0999 40%,#0A0A09E0 100%);pointer-events:none}
.hero__eyebrow{margin-bottom:16px}
.hero__title{max-width:15ch}
.hero__sub{margin-top:clamp(18px,2.4vw,26px);max-width:52ch;font-size:clamp(1rem,.95rem + .4vw,1.2rem);color:var(--fg-2)}
.hero__ctas{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;margin-top:clamp(24px,3.4vw,40px)}
.hero__ctas + .spec{margin-top:18px;display:block;max-width:none}
/* meta-regel in een beeldhero: --fg-3 haalt 4,5:1 niet over de foto, --fg-2 wel */
.hero--video .spec,.hero--photo .spec{color:var(--fg-2)}
@media (max-width:768px){.hero{min-height:86svh}
.hero__title{font-size:clamp(44px,13.4vw,52px)}
.hero__ctas{flex-direction:column;align-items:stretch}
.hero__ctas .btn:not(.btn--text){width:100%}
}

/* == 7 · BEWIJS == */
/* §2.1 wijst --line aan voor hairlines; de scheidingen stonden op --line-2 (bevinding 39) en waren
   daardoor half zo zwaar als bedoeld, waardoor de strip niet als raster las. Ook .metrics-4: zelfde rol. */
.perf-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.perf-strip > *{min-width:0;padding:clamp(18px,2.6vw,34px) clamp(16px,2.4vw,36px);border-left:1px solid var(--line)}
.perf-strip > :first-child{border-left:0;padding-left:0}
.perf__n{display:flex;align-items:baseline;font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);letter-spacing:-.03em;line-height:1;color:var(--fg)}
.perf__l{display:block;margin-top:10px;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.perf__note{grid-column:1 / -1;border-left:0;padding:0;margin-top:22px;max-width:none}
.kpis{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px)}
.kpi__n{display:flex;align-items:baseline;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);letter-spacing:-.03em;line-height:1;color:var(--fg)}
.kpi__l{display:block;margin-top:8px;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.metrics-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.metrics-4 > *{min-width:0;padding:clamp(18px,2.4vw,32px) clamp(16px,2vw,32px);border-left:1px solid var(--line)}
.metrics-4 > :first-child{border-left:0;padding-left:0}
.stat-strip{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);align-items:center}
.stat{display:flex;flex-direction:column;gap:4px}
/* prefix en suffix erven de kleur van hun cijfer (bevinding 21). Ze hadden hier een eigen blauwe
   regel en in .sui__kpi een tweede; in de perf-strip stonden dezelfde tekens al in ivoor, dus stond
   hetzelfde cijfer per pagina anders. Beide regels geschrapt: blauw blijft zo het schaarse accent. */
.stat__num{font-family:var(--font-display);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--fg);display:inline-flex;align-items:baseline}
.stat__label{font-family:var(--font-mono);font-size:.656rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.stat-strip .stat + .stat{position:relative}
.stat-strip .stat + .stat::before{content:"";position:absolute;left:calc(-1 * clamp(10px,2vw,28px));top:6px;bottom:6px;width:1px;background:var(--line-2)}
.stat.is-counting [data-count-val]{color:var(--fg)}
/* cijferdragers die zelf .stat dragen (perf/kpi/sui): rij, geen kolom (anders stapelt "€ 68 K") */
.perf__n.stat,.kpi__n.stat,.stat__num.stat{flex-direction:row;gap:0}
@media (max-width:768px){.perf-strip,.metrics-4{grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.perf-strip > *,.metrics-4 > *{border-bottom:1px solid var(--line);padding:18px 16px}
.perf-strip > :nth-child(odd),.metrics-4 > :nth-child(odd){border-left:0;padding-left:0}
.perf__note{grid-column:1 / -1;border:0;padding:14px 0 0;margin-top:0}
.stat-strip{gap:20px}
.stat-strip .stat + .stat::before{display:none}
}

/* == 8 · STEPS + MODULES == */
.steps{border-top:1px solid var(--line-2);counter-reset:step}
/* Geen zij-padding (bevinding 17): die zette .step__num 15px naar binnen terwijl de eyebrow, de H2,
   de hairline en de link van dezelfde sectie op de containerrand staan. De accentbalk (.step::before)
   ligt op de padding-rand en kan niet naar buiten (overflow:hidden), dus de rij moet naar hem toe.
   Onder 860px stond padding-inline al op 0; die override is daardoor overbodig geworden. */
.step{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:64px minmax(200px,.85fr) 1.3fr;gap:clamp(16px,3vw,56px);padding-block:clamp(26px,3.6vw,48px);border-bottom:1px solid var(--line-2);transition:background var(--t2)}
.step.is-active{background:linear-gradient(90deg,var(--accent-soft),transparent 64%)}
/* Actieve gradient tilt de bg op: --fg-3 mat 4,32 tot 4,40:1 (licht), --fg-2 5,3:1. */
.step__num{font-family:var(--font-mono);font-size:.719rem;letter-spacing:.1em;color:var(--accent-ink);padding-top:6px}
.step__title{font-size:clamp(1.35rem,1.05rem + 1.3vw,2rem);letter-spacing:-.02em;line-height:1.05}
.step__title a{color:inherit}
/* --fg-2: --fg-3 haalde 4,27:1 op de actieve rij in het lichte thema (10px) */
.step__tag{display:block;margin-top:8px;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.step__body{color:var(--fg-2);max-width:62ch;min-width:0}
.step__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.step__list li{position:relative;padding-left:24px;font-size:.95rem;line-height:24px;color:var(--fg-2)}
.step__list li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:2px;background:var(--accent)}
.step__roles{display:grid;grid-template-columns:1fr 1fr;gap:14px clamp(14px,2vw,28px);margin-top:18px}
.step__roles .spec{display:block;margin-bottom:6px}
.step__roles p{font-size:.92rem}
.step .btn--text{margin-top:18px}
.modules{border-top:1px solid var(--line-2)}
.module{display:grid;grid-template-columns:56px minmax(220px,.9fr) 1.2fr;gap:clamp(16px,3vw,56px);align-items:start;padding-block:clamp(24px,3vw,40px);border-bottom:1px solid var(--line-2)}
.module__num{font-family:var(--font-mono);font-size:.719rem;letter-spacing:.1em;color:var(--accent-ink);padding-top:5px}
.module__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1rem + 1vw,1.7rem);letter-spacing:-.02em;text-transform:uppercase;color:var(--fg);line-height:1.05}
.module__line{display:block;margin-top:8px;font-size:.92rem;color:var(--fg-3)}
.module__body{color:var(--fg-2);max-width:60ch;min-width:0}
.how{counter-reset:how;list-style:none;margin:0;padding:0}
.how > li{position:relative;counter-increment:how;padding:18px 0 18px 52px;border-top:1px solid var(--line-2)}
.how > li:last-child{border-bottom:1px solid var(--line-2)}
.how > li::before{content:"0" counter(how);position:absolute;left:0;top:21px;font-family:var(--font-mono);font-size:.719rem;letter-spacing:.1em;color:var(--accent-ink)}
.how__title{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.01em;text-transform:uppercase;color:var(--fg)}
.how p{margin-top:4px;font-size:.95rem}
@media (max-width:860px){.step,.module{grid-template-columns:1fr;gap:10px}
.step__num,.module__num{padding-top:0}
.step__roles{grid-template-columns:1fr}
}

/* == 9 · PRODUCT (altijd donker) == */
/* product: vaste donkere literals, in beide thema's donker */
.browser,.sui,.pipeline{--s-bg:#121210;--s-bg2:#0C0C0B;--s-soft:#FFFFFF0B;--s-soft2:#FFFFFF14;--s-fg:#F2F0EA;--s-fg2:#A7A49C;--s-fg3:#8A8780;--s-hair:#F2F0EA1A;--s-hair2:#F2F0EA0F;--s-acc:#7A9BFF;--s-blue:#2563FF;--s-blue-soft:#2563FF2B;--s-live:#7A9BFF;--s-live-soft:#7A9BFF21;--s-wait:#E5C07B;--s-wait-soft:#E5C07B21;--s-lost:#F08CA0;--s-lost-soft:#F08CA01F;--fg:#F2F0EA;--fg-2:#A7A49C;--fg-3:#87847D;--accent:#2563FF;--accent-ink:#7A9BFF;--accent-soft:#2563FF1F;--ok:#7A9BFF;--ok-soft:#7A9BFF21;--line:#F2F0EA24;--line-2:#F2F0EA12;color-scheme:dark}
.browser{position:relative;border:1px solid var(--s-hair);border-radius:4px;background:var(--s-bg2);overflow:hidden}
.browser__bar{display:flex;align-items:center;gap:10px;height:40px;padding-inline:14px;background:var(--s-soft);border-bottom:1px solid var(--s-hair2);font-family:var(--font-mono);font-size:.688rem;letter-spacing:.04em;color:var(--s-fg2)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#F2F0EA29;flex:none}
.browser__url{margin-left:8px;padding:3px 10px;border:1px solid var(--s-hair2);border-radius:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.browser__body{padding:clamp(10px,1.4vw,16px);display:flex;gap:clamp(10px,1.4vw,16px);align-items:stretch;min-width:0}
.browser .sui{border:0;box-shadow:none;background:transparent}
.sui__nav{flex:none;width:148px;display:flex;flex-direction:column;gap:2px;padding:4px 0;border-right:1px solid var(--s-hair2);font-family:var(--font-mono);font-size:.688rem;letter-spacing:.05em;color:var(--s-fg2)}
.sui__nav-item{padding:8px 12px;border-left:2px solid transparent;border-radius:0 2px 2px 0}
.sui__nav-item.is-active{color:var(--s-fg);border-left-color:var(--s-blue);background:var(--s-blue-soft)}
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-width:0}
/* homepage: 5 kolommen in een halve split werden 103px en braken elke klantnaam */
.pipeline--compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.pipeline__col{display:grid;gap:6px;align-content:start;min-width:0;padding:8px;border-radius:2px;background:var(--s-soft);box-shadow:inset 0 0 0 1px var(--s-hair2)}
.pipeline__head{display:flex;justify-content:space-between;gap:6px;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--s-fg2);padding:2px 2px 4px}
.pipeline__card{min-width:0;padding:8px 10px;border-radius:2px;background:var(--s-soft2);box-shadow:inset 0 0 0 1px var(--s-hair2);font-size:.75rem;color:var(--s-fg)}
.pipeline__card small{display:block;margin-top:2px;font-family:var(--font-mono);font-size:.625rem;color:var(--s-fg2)}
.pipeline__card i{display:block;height:2px;margin-top:7px;background:var(--s-blue);width:var(--w,62%);border-radius:1px}
@media (max-width:900px){.sui__nav{display:none}
.pipeline{grid-auto-flow:column;grid-auto-columns:minmax(44%,1fr);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.pipeline__col{scroll-snap-align:start}
}

/* --- .sui-schermen · geport uit system.css §36, herkleurd, altijd donker --- */
.sui{--sui-pad:12px;position:relative;isolation:isolate;overflow:hidden;margin:0;min-width:0;border-radius:4px;background:var(--s-bg);color:var(--s-fg2);font-family:var(--font-body);font-size:.875rem;line-height:1.45;box-shadow:inset 0 0 0 1px var(--s-hair)}
.sui__bar{display:flex;align-items:center;gap:10px;height:38px;padding-inline:12px;background:var(--s-soft);border-bottom:1px solid var(--s-hair2);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--s-fg2)}
.sui__dots{display:inline-flex;gap:5px;flex:none}
.sui__dots i{width:8px;height:8px;border-radius:50%;background:#F2F0EA29}
.sui__crumb{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sui__live{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 8px;border-radius:2px;background:var(--s-live-soft);color:var(--s-live);font-weight:500}
.sui__dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--s-live)}
.sui__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--s-live);animation:sui-pulse 2.4s var(--ease) infinite}
@keyframes sui-pulse{0%{transform:scale(1);opacity:.55} 70%,100%{transform:scale(2.6);opacity:0}
}
.sui__body{display:flex;align-items:stretch;min-width:0}
.sui__rail{flex:none;width:44px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;background:var(--s-soft);border-right:1px solid var(--s-hair2)}
.sui__rail i,.sui__rail span{display:block;width:20px;height:20px;border-radius:2px;background:#F2F0EA1F;opacity:.75}
.sui__rail i:first-child{background:var(--s-blue);opacity:1}
.sui__main{flex:1;min-width:0;display:grid;gap:8px;align-content:start;padding:var(--sui-pad)}
.sui__cap{grid-column:1 / -1;padding:8px 12px;background:var(--s-soft);border-top:1px solid var(--s-hair2);font-size:.75rem;line-height:1.4;color:var(--s-fg2)}
.sui--dark{background:linear-gradient(165deg,#161613,var(--s-bg2))}
.sui__micro{font-family:var(--font-mono);font-weight:500;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--s-fg2)}
.sui__data{font-family:var(--font-mono);font-weight:500;font-size:.8125rem;letter-spacing:.01em;color:var(--s-fg2)}
.sui__label{font-weight:500;font-size:.8125rem;letter-spacing:-.005em;color:var(--s-fg)}
.sui__kpi{position:relative;display:grid;gap:2px;align-content:start;min-width:0;padding:10px 12px 14px;border-radius:2px;background:var(--s-blue-soft);box-shadow:inset 0 0 0 1px #7A9BFF38;overflow:hidden}
.sui__kpi .stat__num{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);line-height:1;letter-spacing:-.04em;color:var(--s-fg);font-variant-numeric:tabular-nums}
.sui__bar-fill{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--s-blue);transform:scaleX(0);transform-origin:left center;will-change:transform}
.is-live .sui__bar-fill,.is-final .sui__bar-fill,.sui__kpi.is-counting .sui__bar-fill{animation:sui-fill 1.4s var(--ease) forwards}
@keyframes sui-fill{from{transform:scaleX(0)} to{transform:scaleX(1)}
}
.sui__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sui__kpis--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sui__list{display:grid;gap:6px;min-width:0}
.sui__row{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 11px;border-radius:2px;background:var(--s-soft);box-shadow:inset 0 0 0 1px var(--s-hair2)}
.sui__row > .sui__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sui__row time,.sui__row .sui__data{flex:none}
.sui__row--new{background:var(--s-blue-soft);box-shadow:inset 0 0 0 1px #7A9BFF4D}
.sui__chip{flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.04em;background:var(--s-soft2);color:var(--s-fg2)}
.sui__chip--live{background:var(--s-live-soft);color:var(--s-live)}
.sui__chip--wait{background:var(--s-wait-soft);color:var(--s-wait)}
.sui__chat{display:grid;gap:8px;min-width:0}
.sui__msg{position:relative;max-width:82%;padding:9px 12px;border-radius:2px;font-size:.8125rem;line-height:1.5}
.sui__msg p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.sui__msg time,.sui__msg .sui__data{display:block;margin-top:4px;font-size:.625rem;letter-spacing:.04em;opacity:.8}
.sui__msg--out{justify-self:end;background:var(--s-blue-soft);color:var(--s-fg);box-shadow:inset 0 0 0 1px #7A9BFF42;border-bottom-right-radius:0}
.sui__msg--in{justify-self:start;background:var(--s-soft2);color:var(--s-fg);box-shadow:inset 0 0 0 1px var(--s-hair2);border-bottom-left-radius:0}
.sui__check{display:inline-block;margin-left:6px;width:12px;height:12px;color:var(--s-live);transform:scale(.4);opacity:0}
.is-live .sui__check,.is-final .sui__check{animation:sui-check-in .32s var(--ease) 1.6s forwards}
.is-final .sui__check{animation-delay:0s}
@keyframes sui-check-in{from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1}
}
.sui__typing{justify-self:start;display:inline-flex;align-items:center;gap:5px;padding:10px 12px;border-radius:2px;background:var(--s-soft2);box-shadow:inset 0 0 0 1px var(--s-hair2)}
.sui__typing i{width:6px;height:6px;border-radius:50%;background:var(--s-fg3);transform:scale(.55);opacity:.45}
.is-live .sui__typing i{animation:sui-typing .9s var(--ease-in-out) infinite}
.sui__typing i:nth-child(2){animation-delay:.15s}
.sui__typing i:nth-child(3){animation-delay:.3s}
@keyframes sui-typing{0%,100%{transform:scale(.55);opacity:.45} 50%{transform:scale(1);opacity:1}
}
.sui__stamp{margin:2px 0 0;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;color:var(--s-live)}
.sui__stamp .sui__data{color:inherit;font-size:inherit}
.sui__cal{gap:6px;min-width:0}
.sui__cal .agenda-viz__row{padding:8px 11px;border-radius:2px;background:var(--s-soft);border-color:var(--s-hair2)}
.sui__cal .agenda-viz__time{font-family:var(--font-mono);font-size:.75rem;font-variant-numeric:tabular-nums;min-width:46px;color:var(--s-fg2)}
.sui__cal .agenda-viz__label{font-size:.8125rem;color:var(--s-fg2)}
.sui__cal .agenda-viz__badge{font-family:var(--font-mono);font-size:.625rem}
.sui__cal .agenda-viz__row.is-booked{background:var(--s-blue-soft);border-color:#7A9BFF57}
.sui__cal .agenda-viz__row.is-booked .agenda-viz__time{color:var(--s-acc)}
.sui__cal .agenda-viz__row.is-booked .agenda-viz__label{color:var(--s-fg)}
.sui__cal .agenda-viz__row.is-booked .agenda-viz__badge{color:var(--s-live)}
[data-live-screen]:not(.is-live) *{animation-play-state:paused !important}
.sui a:focus-visible,.sui button:focus-visible,.flow-chain a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--s-acc);border-radius:2px}
.sui,.sui__main,.sui__body,.sui__row,.flow-chain__link{min-width:0}
.sui img,.sui svg{max-width:100%}
@media (max-width:480px){.sui__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){.sui{--sui-pad:10px;border-radius:2px}
.sui__kpis--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.sui__rail{display:none}
.sui__bar{height:32px;padding-inline:10px}
.sui__msg{max-width:92%}
.sui__bar-fill{will-change:auto}
}

/* == 10 · CASES == */
.case-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,72px);align-items:center;padding-block:clamp(36px,5vw,72px);border-bottom:1px solid var(--line-2)}
.case-row:first-of-type{border-top:1px solid var(--line-2)}
.case-row h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,3.4rem)}
.case-row .kpis{margin-top:clamp(18px,2.4vw,28px)}
.case-row .btn--text{margin-top:20px}
.case-row__media{min-width:0}
.case-row__media .photo{aspect-ratio:16 / 10}
.case-hero{position:relative;padding:calc(var(--nav-h) + clamp(48px,8vw,120px)) 0 clamp(36px,5vw,64px)}
.case-hero h1{font-size:clamp(56px,10vw,152px)}
.case-hero__result{margin-top:clamp(20px,3vw,34px);font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.03em;line-height:1.06;font-size:clamp(26px,3.8vw,54px)}
.case-hero__result > span{display:block;color:var(--fg-3)}
.case-hero__result > .is-hl{color:var(--fg)}
.case-hero__result .tfx-w{color:inherit}
.quote{position:relative;padding:6px 0 6px clamp(20px,2.6vw,30px);border-left:2px solid var(--accent);max-width:62ch}
.quote p,.quote blockquote{font-size:clamp(1.1rem,1rem + .7vw,1.45rem);line-height:1.5;color:var(--fg)}
.quote cite,.quote footer{display:block;margin-top:14px;font-style:normal}
.case-nav{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;padding-top:clamp(22px,3vw,36px);border-top:1px solid var(--line-2)}
@media (max-width:860px){.case-row{grid-template-columns:1fr}
}

/* == 11 · REVIEWS == */
.reviews{position:relative}
.reviews__track{display:grid;grid-auto-flow:column;gap:clamp(14px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 10px}
.reviews__track::-webkit-scrollbar{display:none}
.review{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px;padding:clamp(20px,2.6vw,30px)}
.review__stars{display:inline-flex;gap:3px;color:var(--accent-ink)}
.review__stars svg{width:15px;height:15px;fill:currentColor}
.review__text{color:var(--fg-2);font-size:.96rem;flex:1}
.review__foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review__name{font-weight:600;color:var(--fg);font-size:.95rem}
.review__meta{display:block;margin-top:2px;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.review__badge{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-2);border-radius:2px;background:var(--bg-3)}
.review__badge svg{width:15px;height:15px}
.reviews__nav{display:flex;align-items:center;gap:16px;margin-top:16px}
.reviews__btn{flex:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:2px;color:var(--fg-2);transition:color var(--t1),border-color var(--t1)}
.reviews__btn:hover{color:var(--fg);border-color:var(--accent)}
.reviews__btn[disabled]{opacity:.4;pointer-events:none}
.reviews__btn svg{width:17px;height:17px}
.reviews__dots{display:flex;gap:6px}
/* Raakvlak 24x44 (WCAG 2.5.8 + projecteis 44px); het zichtbare streepje blijft 22x2. */
.reviews__dot{position:relative;width:24px;height:44px;border:0;padding:0;background:none;cursor:pointer}
.reviews__dot::before{content:"";position:absolute;left:1px;right:1px;top:50%;height:2px;transform:translateY(-50%);background:var(--line);transition:background var(--t1)}
.reviews__dot.is-active::before{background:var(--accent)}
.reviews__dot:focus-visible{outline:none}
.reviews__dot:focus-visible::before{outline:2px solid var(--accent);outline-offset:4px}

/* == 12 · DIENSTEN == */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.svc{display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--cell-bg,var(--bg));padding:clamp(24px,2.8vw,38px);transition:background var(--t2)}
.svc:hover{background:var(--bg-2)}
.section--carbon .svc{--cell-bg:var(--bg-2)}
.section--carbon .svc:hover{background:var(--bg-3)}
.svc h3{font-size:clamp(1.05rem,1vw + .8rem,1.35rem)}
.svc p{color:var(--fg-2);font-size:.95rem;flex:1 1 auto}
.svc .btn--text{align-self:flex-start;margin-top:4px}
@media (max-width:1024px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}
}

/* == 13 · FORMULIEREN == */
.form{display:block}
.field{margin-bottom:20px}
.field label,.label{display:block;font-family:var(--font-mono);font-weight:500;font-size:.656rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);margin-bottom:8px}
.field .req{color:var(--accent-ink)}
.field__hint{display:block;margin-top:6px;font-size:.8rem;color:var(--fg-3)}
.input,.textarea,.select,.field--select select,.field--textarea textarea{width:100%;padding:12px 2px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--fg);font-size:1rem;transition:border-color var(--t1),box-shadow var(--t1)}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input:focus,.textarea:focus,.select:focus,.field--select select:focus,.field--textarea textarea:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.textarea,.field--textarea textarea{resize:vertical;min-height:96px;line-height:1.55}
.select,.field--select select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A7A49C' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:30px}
html[data-theme="light"] .select,html[data-theme="light"] .field--select select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235C5A54' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")}
.select option,.field--select option{background:var(--bg-2);color:var(--fg)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__submit{display:flex;width:100%;margin-top:6px}
.form__note{margin-top:14px;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;color:var(--fg-3)}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;margin:8px 0 6px}
.consent input[type="checkbox"]{appearance:none;flex:none;width:18px;height:18px;margin-top:3px;border:1px solid var(--line);border-radius:2px;background:transparent;cursor:pointer;position:relative;transition:background var(--t1),border-color var(--t1)}
.consent input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.consent input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:10px;border:solid #FFFFFF;border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent label{font-family:var(--font-body);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--fg-3);line-height:1.5;margin:0}
.consent a{color:var(--accent-ink);text-decoration:underline}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:2px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:.93rem;font-weight:500;color:var(--fg-2);transition:border-color var(--t1),background var(--t1),color var(--t1)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice:hover{border-color:var(--fg-3);color:var(--fg)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.choice__dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex:none;position:relative;transition:border-color var(--t1)}
.choice:has(input:checked) .choice__dot{border-color:var(--accent)}
.choice:has(input:checked) .choice__dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
@media (max-width:480px){.choice-grid,.field-row{grid-template-columns:1fr}
}

/* == 14 · AGENDA == */
.cal{background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px;padding:clamp(16px,2vw,24px)}
.cal__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cal__title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:1.05rem;color:var(--fg)}
.cal__chip{flex:none;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);padding:5px 10px;border:1px solid var(--line-2);border-radius:2px}
.cal__frame{background:#F2F0EA;border:1px solid var(--line);border-radius:2px;overflow:hidden;min-height:680px;color-scheme:light}
/* licht thema: #F2F0EA is de paginakleur zelf, het kader las als vlek */
html[data-theme="light"] .cal__frame{background:#FFFFFF}
.cal__frame iframe{width:100%;border:0;min-height:inherit}
.cal__note{margin-top:12px}
.cal__fallback{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.cal__fallback p{font-size:.93rem;margin-bottom:12px}
.host{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px;border:1px solid var(--line-2);border-radius:2px;background:var(--bg-2)}
.host__photo{flex:none;width:56px;height:56px;border-radius:2px;overflow:hidden;background:#0A0A09}
.host__photo img{width:100%;height:100%;object-fit:cover}
.host__body{min-width:0}
.host__name{display:block;font-weight:600;color:var(--fg)}
.host__line{display:block;margin-top:2px;font-size:.85rem;color:var(--fg-3)}
@media (max-width:720px){.cal__frame{min-height:620px}
}

/* == 15 · CONTENT == */
/* FAQ / accordion (hooks: app.js initAccordion) */
.faq{max-width:860px}
.accordion{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.accordion__item{border-bottom:1px solid var(--line-2);transition:background var(--t2)}
/* flex-start + margin-left:auto: space-between zette de kale tekstnode per rij anders uit */
.accordion__trigger{width:100%;text-align:left;display:flex;align-items:center;justify-content:flex-start;gap:18px;padding:22px 2px;font-family:var(--font-display);font-size:clamp(1rem,1.4vw,1.15rem);font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.accordion__trigger .sui__micro{color:var(--accent-ink)}
.accordion__icon{flex:none;margin-left:auto;width:30px;height:30px;border:1px solid var(--line-2);border-radius:2px;display:grid;place-items:center;color:var(--accent-ink);position:relative;transition:border-color var(--t2)}
.accordion__icon::before,.accordion__icon::after{content:"";position:absolute;background:currentColor}
.accordion__icon::before{width:12px;height:1.5px}
.accordion__icon::after{width:1.5px;height:12px;transition:transform var(--t2)}
.accordion__item.is-open .accordion__icon{border-color:var(--accent)}
.accordion__item.is-open .accordion__icon::after{transform:rotate(90deg) scaleX(0)}
.accordion__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t3)}
.accordion__item.is-open .accordion__panel{grid-template-rows:1fr}
.accordion__panel > div{overflow:hidden}
.accordion__panel p{padding:0 2px 22px;color:var(--fg-2);max-width:68ch}

/* footer */
.footer{border-top:1px solid var(--line-2);padding-top:clamp(48px,7vw,96px)}
.footer__grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:clamp(28px,4vw,72px)}
.footer__brand{color:var(--fg)}
.footer__brand svg,.footer__brand img{height:34px;width:auto}
.footer__brand p{font-size:.92rem;max-width:34ch}
.footer__brand .footer__slogan{margin:22px 0 14px;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.03em;line-height:1.04;font-size:clamp(26px,2.6vw,38px);color:var(--fg);max-width:none}
.footer__portal{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);padding:9px 12px;border:1px solid var(--line-2);border-radius:2px;transition:color var(--t1),border-color var(--t1)}
.footer__portal:hover{color:var(--fg);border-color:var(--line)}
.footer__portal svg{width:13px;height:13px}
.footer__label{display:block;font-family:var(--font-mono);font-size:.656rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px}
.footer__col ul{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.footer__col a{color:var(--fg-2);font-size:.93rem;transition:color var(--t1)}
.footer__col a:hover{color:var(--fg)}
.footer__socials{display:flex;align-items:center;gap:10px;margin-top:18px}
.footer__socials-label{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.footer__social-btn{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:2px;color:var(--fg-2);transition:color var(--t1),border-color var(--t1)}
.footer__social-btn:hover{color:var(--fg);border-color:var(--line)}
.footer__social-btn svg{width:16px;height:16px}
.footer__bottom{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line-2);padding-block:22px;display:flex;justify-content:space-between;align-items:center;gap:14px 22px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.footer__bottom a{color:var(--fg-3)}
.footer__bottom a:hover{color:var(--fg)}
@media (max-width:1024px){.footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}
}

/* blog-index */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.postcard{display:flex;flex-direction:column;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px;overflow:hidden;transition:border-color var(--t2)}
.postcard:hover{border-color:var(--line)}
.postcard__media{position:relative;aspect-ratio:16 / 9;display:grid;place-items:center;overflow:hidden;color:#7A9BFF}
.postcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.postcard__media svg{width:42px;height:42px;position:relative;z-index:1;opacity:.9}
.postcard__media--a{background:linear-gradient(135deg,#0C1428,#16337A)}
.postcard__media--b{background:linear-gradient(135deg,#0A0F1E,#1D4FD8)}
.postcard__media--c{background:linear-gradient(135deg,#101724,#2456C7)}
.postcard__media--d{background:linear-gradient(135deg,#0B1120,#3D6BE0)}
.postcard__media--e{background:linear-gradient(135deg,#0A1322,#2563FF)}
.postcard__media--f{background:linear-gradient(135deg,#0C1018,#1C4FBF)}
.postcard__body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2vw,26px)}
.postcard__cat{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.postcard__title{font-family:var(--font-display);font-weight:600;font-size:1.1rem;line-height:1.3;letter-spacing:-.01em;color:var(--fg);margin:0 0 10px}
.postcard__excerpt{font-size:.92rem;color:var(--fg-2);margin:0 0 18px}
.postcard__meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.postcard__more{display:inline-flex;align-items:center;gap:7px;color:var(--accent-ink)}
.postcard__more svg{width:14px;height:14px}
@media (max-width:1024px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}
}

/* artikelcomponent (geport uit §37; .article h1/h2/h3 zijn NIET uppercase) */
.article{font-size:clamp(1rem,.97rem + .2vw,1.125rem);line-height:1.65;color:var(--fg-2);max-width:62ch}
.article h1{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.02em;line-height:1.05}
.article > p{margin:0 0 22px;max-width:none}
.article h2{font-size:clamp(1.4rem,3vw,1.85rem);letter-spacing:-.02em;line-height:1.15;margin:44px 0 14px}
.article h3{font-size:clamp(1.1rem,2vw,1.3rem);margin:30px 0 10px;line-height:1.25}
.article ul,.article ol{margin:0 0 22px;padding:0;display:grid;gap:11px;list-style:none}
.article ul li{position:relative;padding-left:28px}
.article ul li::before{content:"";position:absolute;left:0;top:.74em;width:14px;height:1px;background:var(--accent)}
.article ol{counter-reset:a}
.article ol li{position:relative;padding-left:40px;counter-increment:a}
.article ol li::before{content:counter(a,decimal-leading-zero);position:absolute;left:0;top:.28em;font-family:var(--font-mono);font-size:.719rem;letter-spacing:.04em;color:var(--accent-ink)}
.article strong{color:var(--fg);font-weight:600}
.article a{color:var(--accent-ink);border-bottom:1px solid var(--accent-soft);transition:border-color var(--t1)}
.article a:hover{border-color:var(--accent-ink)}
.article blockquote{position:relative;margin:28px 0;padding:6px 0 6px 24px;border-left:2px solid var(--accent);color:var(--fg);font-size:1.08em}
.article__meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:18px 0 0;font-family:var(--font-mono);font-size:.688rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.article__cover{position:relative;display:grid;place-items:center;min-height:220px;max-height:320px;margin:28px 0;border:1px solid var(--line-2);border-radius:2px;overflow:hidden;color:#7A9BFF;background:linear-gradient(135deg,#0A0A09,#141412)}
.article__cover svg{width:54px;height:54px;opacity:.92}
.article__cover img{width:100%;height:100%;object-fit:cover}
.article__key{margin:28px 0;padding:20px clamp(18px,3vw,26px);background:var(--bg-2);border-left:2px solid var(--accent);border-radius:0 2px 2px 0}
.article__key h3{margin-top:0}
.article__toc{margin:0 0 30px;padding:20px clamp(18px,3vw,24px);border:1px solid var(--line-2);border-radius:2px;background:var(--bg-2)}
.article__toc > :first-child{margin-top:0}
.article__toc h2,.article__toc h3{font-size:.95rem;line-height:1.4;margin:0 0 12px}
.article__toc ol,.article__toc ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;counter-reset:toc}
.article__toc li{position:relative;margin:0;padding-left:32px;counter-increment:toc;font-size:.92rem;line-height:1.5}
.article__toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.04em;color:var(--accent-ink);background:none;border:0;width:auto;height:auto}
.article__toc a{color:var(--fg-2);border-bottom:1px solid transparent}
.article__toc a:hover{color:var(--fg);border-bottom-color:currentColor}
.article figure{margin:28px 0 30px;padding:0;max-width:100%}
.article figure > img,.article figure > svg,.article figure > video{display:block;width:100%;height:auto;border-radius:2px}
.article figcaption{margin:12px 0 0;font-size:.8125rem;line-height:1.55;color:var(--fg-3)}
/* bijschrift in een altijd-donker productscherm volgt het scherm, niet de pagina */
.article .sui__cap{margin:0;font-size:.75rem;line-height:1.4;color:var(--s-fg2)}
.article figure:has(> table){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.tablewrap{margin:26px 0 30px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--line-2);border-radius:2px}
.tablewrap:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent)}
.article figure > .tablewrap{margin:0}
.article table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.5}
.article caption{text-align:left;padding:12px 14px;font-family:var(--font-mono);font-size:.688rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.article th,.article td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2);min-width:0}
.article thead th{background:var(--bg-3);font-family:var(--font-mono);font-size:.656rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);border-bottom:1px solid var(--line)}
.article tbody th{font-weight:600;color:var(--fg)}
.article tbody tr:last-child th,.article tbody tr:last-child td{border-bottom:0}
.article tr.is-total th,.article tr.is-total td{border-top:1px solid var(--line);color:var(--fg);font-weight:600}
.article .num{font-family:var(--font-mono);font-size:.85rem;white-space:nowrap}
.article .win{color:var(--accent-ink);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:2px;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-ink)}
.tbl-src{display:block;margin:10px 0 0;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.06em;color:var(--fg-3)}
.article__sources{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-2);font-size:.88rem}
.article__sources ol,.article__sources ul{counter-reset:src;gap:8px}
.article__sources ol li,.article__sources ul li{padding-left:32px;counter-increment:src}
.article__sources ol li::before,.article__sources ul li::before{content:counter(src,decimal-leading-zero);top:.3em}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;margin-top:44px;padding:clamp(24px,3.4vw,40px);background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px}
.post-cta h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:6px 0 8px}
.post-cta p{color:var(--fg-2);margin:0;max-width:48ch}
.post-cta .btn{flex:none}
@media (max-width:768px){.post-cta{align-items:stretch}
.post-cta .btn{width:100%;justify-content:center}
}
.post-nav{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.post-nav a{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.688rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);transition:color var(--t1)}
.post-nav a:hover{color:var(--fg)}
.post-nav a svg{width:15px;height:15px;color:var(--accent-ink)}

/* AI-tools + legal */
.tool{background:var(--bg-2);border:1px solid var(--line-2);border-radius:2px;padding:clamp(22px,3vw,40px)}
.tool__form{display:grid;gap:4px}
.tool__result{margin-top:26px}
.legal{max-width:760px}
.legal h2{font-size:clamp(1.25rem,2.4vw,1.7rem);margin:40px 0 12px}
.legal h3{margin:26px 0 8px}
.legal p,.legal li{color:var(--fg-2);margin-bottom:14px}
.legal ul,.legal ol{padding-left:22px;margin:0 0 18px;display:grid;gap:8px;list-style:disc}
.legal a{color:var(--accent-ink);text-decoration:underline}
.legal__list{list-style:none;padding:0}

/* flow-chain (blogartikelen) */
.flow-chain{position:relative;display:grid;gap:clamp(14px,2vw,20px);margin:0;padding:0;list-style:none}
.flow-chain__link{position:relative;display:grid;gap:6px;align-content:start;min-width:0;padding-left:28px}
.flow-chain__node{position:absolute;left:0;top:3px;width:13px;height:13px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--accent)}
.flow-chain__link--done .flow-chain__node{background:var(--accent)}
.flow-chain__label{font-weight:600;font-size:.9375rem;color:var(--fg);min-width:0}
.flow-chain__t{color:var(--accent-ink)}
.flow-chain::before{content:"";position:absolute;z-index:-1;left:6px;top:8px;bottom:8px;width:1px;background:var(--line-2)}

/* == 16 · CONVERSIELAAG == */
/* modal + funnel (app.js injecteert; selectors bindend) */
/* visibility met 0s-delay i.p.v. een duur: anders is de dialog in de frame van
   classList.add nog niet focusbaar en vuren Escape en de Tab-trap nooit. */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity var(--t2),visibility 0s linear var(--dur-2)}
.modal.is-open{opacity:1;visibility:visible;transition:opacity var(--t2),visibility 0s}
.modal__backdrop{position:absolute;inset:0;background:#060605A8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modal__dialog{position:relative;z-index:1;width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;box-shadow:0 40px 120px #0000008C;padding:clamp(24px,4vw,40px);transform:translateY(18px) scale(.98);transition:transform var(--t3)}
.modal.is-open .modal__dialog{transform:translateY(0) scale(1)}
.modal__close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:1px solid var(--line-2);border-radius:2px;display:grid;place-items:center;color:var(--fg-2);transition:color var(--t1),border-color var(--t1)}
.modal__close:hover{color:var(--fg);border-color:var(--accent)}
.modal__eyebrow{margin-bottom:10px}
.modal__title{font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.modal__sub{color:var(--fg-2);font-size:.95rem;margin-bottom:22px;max-width:none}
.stepper__bar{display:flex;gap:6px;margin-bottom:26px}
.stepper__bar span{flex:1;height:2px;background:var(--line-2);transition:background var(--t2)}
.stepper__bar span.is-active,.stepper__bar span.is-done{background:var(--accent)}
.stepper__step{display:none;animation:step-in var(--t3)}
.stepper__step.is-active{display:block}
.stepper__step.is-active[data-step-content]{animation:step-in var(--t3)}
@keyframes step-in{from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)}
}
.stepper__count{font-family:var(--font-mono);font-size:.656rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px}
.stepper__nav{display:flex;gap:12px;margin-top:26px}
.stepper__nav .btn{flex:1}
.funnel-progress{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.funnel-ring{position:relative;width:46px;height:46px;flex:none}
.funnel-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.funnel-ring__track{fill:none;stroke:var(--line-2);stroke-width:5}
.funnel-ring__fill{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset var(--t3)}
.funnel-ring__pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:.656rem;color:var(--accent-ink)}
.funnel-progress__copy{font-size:.88rem;color:var(--fg-2);font-weight:500}
.funnel-progress__copy strong{color:var(--accent-ink)}
.step-nudge{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:5px 12px;border-radius:2px;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ok-soft);border:1px solid var(--ok-soft);color:var(--ok)}
.step-nudge svg{width:13px;height:13px}
.guarantee__seal{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-soft)}
.guarantee__seal svg{width:30px;height:30px}
.quiz-mini{margin:4px 0 6px;padding:18px 18px 16px;border-radius:2px;position:relative;overflow:hidden;background:var(--bg-3);border:1px solid var(--line-2)}
.quiz-mini__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.quiz-mini__ring{position:relative;width:64px;height:64px;flex:none}
.quiz-mini__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.quiz-mini__ring .t{fill:none;stroke:var(--line-2);stroke-width:7}
.quiz-mini__ring .f{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.3s var(--ease)}
.quiz-mini__pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-weight:500;font-size:.9rem;color:var(--accent-ink)}
.quiz-mini__title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--fg)}
.quiz-mini__title span{color:var(--accent-ink)}
.quiz-mini__list{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.quiz-mini__item{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--fg-2)}
.quiz-mini__item svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--ok)}
.quiz-mini__lock{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--font-mono);font-size:.656rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.quiz-mini__lock svg{width:13px;height:13px}
.exit-offer__ribbon{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 14px;border-radius:2px;background:var(--accent-soft);border:1px solid var(--accent-soft);font-family:var(--font-mono);font-size:.656rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.exit-offer__ribbon svg{width:14px;height:14px}
.progress-ring{position:relative;width:120px;height:120px}
.progress-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.progress-ring__track{fill:none;stroke:var(--line-2);stroke-width:9}
.progress-ring__fill{fill:none;stroke:url(#ringGrad);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset var(--t3)}
.progress-ring__label{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--fg)}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .7s linear infinite}
.spinner--lg{width:40px;height:40px;border-width:3.5px}
@keyframes spin{to{transform:rotate(360deg)}
}
.btn .spinner{width:16px;height:16px;border-color:#FFFFFF59;border-top-color:#FFFFFF}
.is-loading{pointer-events:none}
.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5;border-radius:inherit}
.confetti-piece{position:absolute;top:38%;width:8px;height:8px;border-radius:1px;will-change:transform,opacity;animation:confetti-fall var(--c-dur,1.1s) var(--ease) forwards;animation-delay:var(--c-delay,0s)}
@keyframes confetti-fall{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:1} 100%{transform:translate3d(var(--c-x,0),var(--c-y,120px),0) rotate(var(--c-r,360deg)) scale(.6);opacity:0}
}
.celebrate-pop{animation:celebrate-pop .7s var(--ease) both}
@keyframes celebrate-pop{0%{transform:scale(.4);opacity:0} 55%{transform:scale(1.12);opacity:1} 100%{transform:scale(1)}
}

/* toasts */
.toast-region{position:fixed;z-index:var(--z-toast);bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(420px,calc(100vw - 32px))}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border-radius:2px;background:var(--bg-3);border:1px solid var(--line);color:var(--fg);font-size:.9rem;font-weight:500;transform:translateY(20px);opacity:0;transition:transform var(--t2),opacity var(--t2)}
.toast.is-visible{transform:translateY(0);opacity:1}
.toast__ico{flex:none;width:20px;height:20px;display:grid;place-items:center}
.toast--success{border-color:var(--ok)}
.toast--success .toast__ico{color:var(--ok)}
.toast--error{border-color:var(--err)}
.toast--error .toast__ico{color:var(--err)}
.toast--info .toast__ico{color:var(--accent-ink)}
.toast--warning{border-color:var(--warn)}
.toast--warning .toast__ico{color:var(--warn)}

/* social-proof-toast */
.proof-toast{position:fixed;left:22px;bottom:22px;z-index:var(--z-toast);display:flex;align-items:center;gap:12px;width:min(330px,calc(100vw - 44px));padding:12px 14px;border-radius:2px;background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2);font-size:.86rem;line-height:1.4;transform:translateY(140%);opacity:0;transition:transform var(--t3),opacity var(--t2)}
.proof-toast.is-visible{transform:translateY(0);opacity:1}
.proof-toast__ico{flex:none;width:32px;height:32px;border-radius:2px;display:grid;place-items:center;color:var(--accent-ink);background:var(--accent-soft)}
.proof-toast__ico svg{width:17px;height:17px}
.proof-toast strong{color:var(--fg);font-weight:600}
.proof-toast small{display:block;color:var(--fg-3);font-size:.74rem;margin-top:2px}
.proof-toast__x{flex:none;margin-left:auto;width:24px;height:24px;border-radius:2px;display:grid;place-items:center;color:var(--fg-3);transition:color var(--t1)}
.proof-toast__x:hover{color:var(--fg)}
.proof-toast__x svg{width:14px;height:14px}

/* chat-bubbel (canon-markup) */
.chat-bubble{position:fixed;right:22px;bottom:22px;z-index:var(--z-chat);display:inline-flex;align-items:center;gap:11px;padding:10px 16px 10px 10px;border-radius:2px;background:var(--bg-3);border:1px solid var(--line);color:var(--fg);font-weight:500;font-size:.88rem;transition:transform var(--t2),border-color var(--t2),bottom var(--t2)}
/* chat-bubbel en sticky-CTA staan allebei rechtsonder (z 90 vs 96): zonder dit dekt de
   sticky de bubbel volledig af zodra hij verschijnt. De bubbel wijkt naar boven.
   92 i.p.v. 74 (bevinding 49): de sticky zit op clamp(16px,3vw,26px) en is op 900px
   66px hoog, samen 92px. Met 74 bleef er 4px tussen beide panelen over en las dat als
   een renderfout; nu is het gat 22px (900px) tot 28px (1440px) en lezen ze als twee
   losse elementen. De <=720px-variant hieronder staat al op 96px en blijft ongemoeid. */
body:has(.sticky-cta.is-shown) .chat-bubble{bottom:calc(22px + 92px)}
.chat-bubble:hover{transform:translateY(-3px);border-color:var(--accent)}
.chat-bubble__avatar{width:36px;height:36px;border-radius:2px;flex:none;display:grid;place-items:center;color:#FFFFFF;background:var(--accent);position:relative}
.chat-bubble__avatar svg{width:19px;height:19px}
.chat-bubble__avatar::after{content:"";position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:var(--ok);border:2px solid var(--bg-3)}
.chat-bubble__pulse{position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--accent);animation:pulse-ring 2.4s var(--ease) infinite;opacity:0}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.9);opacity:0}
}
.chat-bubble__label small{display:block;font-size:.7rem;color:var(--fg-3);font-weight:400}
@media (max-width:768px){.chat-bubble{right:16px;max-width:calc(100vw - 32px)}
}
@media (max-width:720px){.chat-bubble{bottom:calc(76px + env(safe-area-inset-bottom) + 14px)}
body:has(.sticky-cta.is-shown) .chat-bubble{bottom:calc(76px + env(safe-area-inset-bottom) + 10px + 96px)}
}
@media (max-width:540px){.chat-bubble__label{display:none} .chat-bubble{padding:9px}
}

/* mobile-cta */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobilecta);display:none;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--veil);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line-2)}
.mobile-cta .btn{flex:1}
@media (max-width:720px){.mobile-cta{display:flex} body{padding-bottom:76px}
}

/* sticky-cta */
.sticky-cta{position:fixed;z-index:var(--z-stickycta);right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,26px);display:flex;align-items:center;gap:12px;max-width:min(380px,calc(100vw - 32px));padding:10px 12px 10px 14px;border-radius:2px;background:var(--bg-3);border:1px solid var(--line);transform:translateY(140%) scale(.98);opacity:0;visibility:hidden;transition:transform var(--t3),opacity var(--t2),visibility var(--dur-2);will-change:transform,opacity}
.sticky-cta.is-shown{transform:translateY(0) scale(1);opacity:1;visibility:visible}
.sticky-cta.is-hidden{transform:translateY(140%) scale(.98);opacity:0;visibility:hidden}
.sticky-cta__pulse{position:relative;flex:none;width:38px;height:38px;border-radius:2px;display:grid;place-items:center;color:#FFFFFF;background:var(--accent)}
.sticky-cta__pulse svg{width:19px;height:19px}
.sticky-cta__pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid var(--accent);animation:pulse-ring 2.6s var(--ease) infinite;opacity:0}
.sticky-cta__body{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sticky-cta__body strong{font-size:.9rem;color:var(--fg);font-weight:600;letter-spacing:-.01em}
.sticky-cta__body small{font-size:.74rem;color:var(--fg-3)}
.sticky-cta__go{flex:none;margin-left:2px;padding:10px 14px;font-size:.656rem}
.sticky-cta__x{flex:none;width:26px;height:26px;border-radius:2px;display:grid;place-items:center;color:var(--fg-3);transition:color var(--t1)}
.sticky-cta__x svg{width:14px;height:14px}
.sticky-cta__x:hover{color:var(--fg)}
@media (max-width:720px){.sticky-cta{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom) + 10px);max-width:none} .sticky-cta__go{margin-left:auto} .proof-toast{left:12px;bottom:calc(76px + env(safe-area-inset-bottom) + 14px);width:min(300px,calc(100vw - 24px))}
}
@media (max-width:380px){.sticky-cta__body small{display:none}
}

/* lead-magnet */
.lead-magnet{position:relative;overflow:hidden;padding:clamp(20px,3vw,30px);border-radius:2px;background:var(--bg-2);border:1px solid var(--line-2)}
.lead-magnet__eyebrow{margin-bottom:8px}
.lead-magnet__title{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.lead-magnet__sub{color:var(--fg-2);font-size:.95rem;margin:6px 0 18px;max-width:52ch}
.lead-magnet__row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.lead-magnet__row .input{flex:1 1 220px;min-width:0}
.lead-magnet__row .btn{flex:none}
.lead-magnet__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:.8rem;color:var(--fg-3)}
.lead-magnet__foot svg{width:14px;height:14px;color:var(--ok);flex:none}
.lead-magnet__consent{margin-top:12px}
.lead-magnet__success{display:flex;align-items:center;gap:14px;padding:4px 2px}
.lead-magnet__success .seal{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;background:var(--accent)}
.lead-magnet__success .seal svg{width:24px;height:24px}
.lead-magnet__success strong{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--fg)}
.lead-magnet__success small{color:var(--fg-2);font-size:.88rem}
@media (max-width:520px){.lead-magnet__row .btn{flex:1 1 100%}
}

/* shot-zoom + videobox */
[data-shot-zoom]{cursor:zoom-in}
[data-shot-zoom]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shotbox{position:fixed;inset:0;z-index:var(--z-shot);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:#060605D1;opacity:0;transition:opacity .22s ease}
.shotbox.is-open{opacity:1}
.shotbox__img{max-width:min(1400px,94vw);max-height:86vh;width:auto;height:auto;border-radius:4px;background:var(--bg-2);box-shadow:0 40px 120px #00000080}
.shotbox__close,.videobox__close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:2px;border:1px solid #F2F0EA40;background:#F2F0EA0F;color:#F2F0EA;display:grid;place-items:center;cursor:pointer}
.shotbox__close:hover,.videobox__close:hover{background:#F2F0EA24}
.shotbox__close svg,.videobox__close svg{width:20px;height:20px}
.shotbox__cap{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#F2F0EABF;font-size:.85rem;max-width:84vw;text-align:center;margin:0}
.videobox{position:fixed;inset:0;z-index:var(--z-shot);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:#060605D9;opacity:0;transition:opacity .22s ease}
.videobox.is-open{opacity:1}
.videobox__frame{width:min(1100px,94vw);aspect-ratio:16 / 9;border-radius:4px;overflow:hidden;background:#000;box-shadow:0 40px 120px #0000008C}
.videobox__frame iframe,.videobox__frame video{width:100%;height:100%;border:0;display:block}

/* mediafeature (Over ons) */
.mediafeature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center}
.mediafeature__copy h2{margin-bottom:14px}
.mediafeature__copy .lead{margin-bottom:24px}
.mediafeature__stage{position:relative;border-radius:2px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16 / 10;background:#0A0A09}
.mediafeature__poster,.mediafeature__ambient{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mediafeature__scrim{position:absolute;inset:0;background:linear-gradient(120deg,#0A0A09AD,#0A0A0947 55%,#0A0A0980)}
.mediafeature__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(64px,8vw,84px);height:clamp(64px,8vw,84px);border-radius:50%;display:grid;place-items:center;cursor:pointer;background:#F2F0EA;color:#0A0A09;border:0;transition:transform var(--t2)}
.mediafeature__play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid #F2F0EA80;opacity:0;animation:mf-pulse 2.6s var(--ease) infinite}
@keyframes mf-pulse{0%{transform:scale(.85);opacity:.55} 100%{transform:scale(1.25);opacity:0}
}
.mediafeature__play svg{width:28px;height:28px;margin-left:4px}
.mediafeature__play:hover{transform:translate(-50%,-50%) scale(1.06)}
@media (max-width:860px){.mediafeature{grid-template-columns:1fr} .mediafeature__stage{order:-1}
}
@media (max-width:720px){.mediafeature__ambient{display:none}
}

/* ref-strip */
.ref-strip{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:clamp(16px,3vw,34px);padding:clamp(18px,2.4vw,26px) 0}
.ref-strip__label{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.656rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.ref-strip__label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ref-strip__items{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:clamp(16px,3vw,38px)}
.ref-strip__item{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.5vw,1.18rem);letter-spacing:.02em;text-transform:uppercase;color:var(--fg-3);transition:color var(--t2)}
.ref-strip__item:hover{color:var(--fg)}
.ref-strip__item img{height:26px;width:auto;filter:grayscale(1);opacity:.7}
.ref-strip[hidden]{display:none}

/* agenda-viz */
.agenda-viz{display:flex;flex-direction:column;gap:8px}
.agenda-viz__row{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:2px;border:1px solid var(--line-2);background:var(--bg-2);transition:border-color var(--t2),background var(--t2)}
.agenda-viz__time{font-family:var(--font-mono);font-size:.8rem;color:var(--fg-3);min-width:52px;flex:none}
/* label krijgt de rest en mag breken; anders duwt zijn min-content-breedte het badge
   buiten de (overflow:hidden) .sui-kolom en verdwijnt "Geboekt" op smalle schermen */
.agenda-viz__label{font-size:.9rem;color:var(--fg-2);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.agenda-viz__badge{flex:none;white-space:nowrap;margin-left:auto;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);opacity:0;transform:translateX(8px);transition:opacity var(--t2),transform var(--t2)}
.agenda-viz__row.is-booked{border-color:var(--ok-soft);background:var(--ok-soft)}
.agenda-viz__row.is-booked .agenda-viz__time{color:var(--ok)}
.agenda-viz__row.is-booked .agenda-viz__label{color:var(--fg)}
.agenda-viz__row.is-booked .agenda-viz__badge{opacity:1;transform:none;color:var(--ok)}
/* zonder JS zet niets .is-booked: toon de eindtoestand uit de HTML */
html:not(.js) .agenda-viz__badge{opacity:1;transform:none}

/* == 17 · MOTION-ENGINE == */

.cursor-glow{display:none}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:calc(var(--z-nav) + 1);pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--scroll-progress,0));background:var(--accent);will-change:transform}
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity var(--t3),transform var(--t3);will-change:opacity,transform}
.js [data-reveal="up"]{transform:translateY(30px)}
.js [data-reveal="left"]{transform:translateX(-34px)}
.js [data-reveal="right"]{transform:translateX(34px)}
.js [data-reveal="zoom"]{transform:scale(.92)}
.js [data-reveal].is-revealed{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}
[data-reveal-delay="6"]{transition-delay:.48s}
.js [data-reveal-stagger] > *{opacity:0;transform:translateY(24px);transition:opacity var(--t3),transform var(--t3);transition-delay:calc(var(--reveal-i,0) * .07s);will-change:opacity,transform}
.js [data-reveal-stagger].is-revealed > *{opacity:1;transform:none}
.js .hero-cinema [data-hero-line]:not([data-hero-lcp]){opacity:0;transform:translateY(18px);transition:opacity var(--t3),transform var(--t3);transition-delay:calc(var(--hero-i,0) * .06s + .1s);will-change:opacity,transform}
.js .hero-cinema [data-hero-lcp]{opacity:1;transform:translateY(18px);transition:transform var(--t3);transition-delay:calc(var(--hero-i,0) * .06s + .1s);will-change:transform}
.js .hero-cinema.is-loaded [data-hero-line]:not([data-hero-lcp]){opacity:1;transform:none;will-change:auto}
.js .hero-cinema.is-loaded [data-hero-lcp]{transform:none;will-change:auto}
.hero-spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--t3);background:radial-gradient(420px circle at var(--spot-x,50%) var(--spot-y,30%),var(--accent-soft),transparent 62%)}
.hero-cinema.is-spotlit .hero-spotlight{opacity:1}
[data-textfx] .tfx-w{display:inline-block;white-space:pre;opacity:0;transform:translateY(.55em);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--tfx-i,0) * 38ms);will-change:opacity,transform}
[data-textfx].is-textfx-in .tfx-w{opacity:1;transform:none}
[data-textfx="scramble"] .tfx-char{display:inline-block}
[data-textfx="scramble"].is-scrambling{color:var(--accent-ink)}
.draw-on-view path,.draw-on-view line,.draw-on-view polyline,.draw-on-view circle,.draw-on-view rect{stroke-dasharray:var(--dash,0);stroke-dashoffset:var(--dash,0);transition:stroke-dashoffset 1.4s var(--ease)}
.draw-on-view.is-drawn path,.draw-on-view.is-drawn line,.draw-on-view.is-drawn polyline,.draw-on-view.is-drawn circle,.draw-on-view.is-drawn rect{stroke-dashoffset:0}

/* == E · EPIC-LAAG (§2.5) == */
/* transform/opacity only · uit onder reduced-motion (§18) · minimaal <=720px */

/* E8 cta-final · enige aurora-plek, CSS-only */
.cta-final{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding-block:clamp(88px,12vw,176px)}
.cta-final > .container{position:relative;z-index:2}
/* De maat staat in §2 op dezelfde regel als .display-l; hier alleen de regellengte.
   :not(.display-*) blijft: een slotkop die bewust .display-l draagt houdt zijn eigen maat,
   anders sprong "EEN VERANTWOORDELIJKE PARTIJ." mee omhoog en brak op het zachte koppelteken. */
.cta-final h2:not(.display-l):not(.display-xl){max-width:18ch}
.cta-final h2{margin-inline:auto}
.cta-final .eyebrow{justify-content:center}
.cta-final__sub{margin:clamp(16px,2.4vw,26px) auto 0;max-width:52ch;color:var(--fg-2);font-size:clamp(1rem,.95rem + .4vw,1.15rem)}
.cta-final__ctas{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 22px;margin-top:clamp(26px,3.6vw,42px)}
/* Aurora tilt de bg tot rgb(44,50,71): --fg-3 mat 3,40 tot 4,27:1 over 14 punten,
   --fg-2 haalt 5,1:1 op het slechtste punt. */
.cta-final .form__note{margin-top:18px;margin-inline:auto;color:var(--fg-2)}
.cta-final__media{position:absolute;inset:0;z-index:0}
.cta-final__media img{width:100%;height:100%;object-fit:cover}
.cta-final__media::after{content:"";position:absolute;inset:0;background:#0A0A09B8}
.cta-final::before{content:"";position:absolute;inset:-30% -10%;z-index:1;pointer-events:none;background:radial-gradient(42% 44% at 28% 68%,#2563FF29,transparent 66%),radial-gradient(34% 38% at 74% 26%,#2563FF1A,transparent 62%);animation:aurora-drift 26s var(--ease-in-out) infinite alternate;will-change:transform}
@keyframes aurora-drift{from{transform:translate3d(-2.5%,2%,0) rotate(-1.5deg)} to{transform:translate3d(2.5%,-2%,0) rotate(1.5deg)}
}

/* E1 filmgrain + Ken Burns + eyebrow-tracking */
/* de typografische hero had nul lagen: subtiele diepte + dezelfde filmgrain */
.hero--type::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 12% 0%,var(--bg-2),transparent 62%)}
.hero--video::after,.hero--photo::after,.hero--type::after,.cta-final::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.038;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;background-size:140px 140px}
@media (min-width:721px) and (prefers-reduced-motion:no-preference){.hero__video,.hero--video .hero__media img,.hero--photo .hero__media img{animation:kb-zoom 22s var(--ease-in-out) infinite alternate both;will-change:transform}
}
@keyframes kb-zoom{from{transform:scale(1)} to{transform:scale(1.06)}
}
.js .hero-cinema .hero__eyebrow[data-hero-line]{letter-spacing:.34em;transition:opacity var(--t3),transform var(--t3),letter-spacing 1.2s var(--ease);transition-delay:calc(var(--hero-i,0) * .06s + .1s)}
.js .hero-cinema.is-loaded .hero__eyebrow[data-hero-line]{letter-spacing:.2em}

/* E3 perf-strip hairlines tekenen in */
@media (min-width:721px){.perf-strip > *{position:relative}
.js [data-reveal].perf-strip > *::before,.js [data-reveal] .perf-strip > *::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--bg);transform-origin:bottom center;transition:transform .9s var(--ease)}
.js [data-reveal].is-revealed.perf-strip > *::before,.js [data-reveal].is-revealed .perf-strip > *::before{transform:scaleY(0)}
.perf-strip > :nth-child(2)::before{transition-delay:.12s}
.perf-strip > :nth-child(3)::before{transition-delay:.26s}
.perf-strip > :nth-child(4)::before{transition-delay:.4s}
}

/* E4 statement: stagger + lijn + tracking */
.js [data-reveal-stagger] > .statement__rule{transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease);transition-delay:calc(var(--reveal-i,0) * .07s + .1s)}
.js [data-reveal-stagger].is-revealed > .statement__rule{transform:scaleX(1)}
.js [data-reveal-stagger] > .statement__answer{letter-spacing:.42em;transition:opacity var(--t3),transform var(--t3),letter-spacing 1.1s var(--ease);transition-delay:calc(var(--reveal-i,0) * .07s + .1s)}
.js [data-reveal-stagger].is-revealed > .statement__answer{letter-spacing:.24em}

/* E5 steps: accentlijn + hover-sweep */
/* z-index:-1 + isolation op .step (bevinding 17): met padding-inline:0 staat de balk op dezelfde
   as als het stapnummer. Als overlay sneed hij de eerste letter weg (op <=860px al gemeld); in de
   negatieve laag ligt hij boven de is-active-gradient maar onder de tekst, dus blijft elke letter heel. */
.step::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top center;transition:transform .5s var(--ease)}
.step.is-active::before{transform:scaleY(1)}
@media (hover:hover) and (min-width:721px){.step::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 32%,var(--sweep) 50%,transparent 68%);transform:translateX(-101%)}
.step:hover::after{transform:translateX(101%);transition:transform .8s var(--ease)}
}

/* E6 pipeline-stagger + chat + card-tilt */
.js [data-live-screen] .pipeline__card{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js [data-live-screen].is-live .pipeline__card,.js [data-live-screen].is-final .pipeline__card{opacity:1;transform:none}
.pipeline__col:nth-child(1) .pipeline__card{transition-delay:.05s}
.pipeline__col:nth-child(2) .pipeline__card{transition-delay:.16s}
.pipeline__col:nth-child(3) .pipeline__card{transition-delay:.27s}
.pipeline__col:nth-child(4) .pipeline__card{transition-delay:.38s}
.pipeline__col:nth-child(5) .pipeline__card{transition-delay:.49s}
.js [data-live-screen] .pipeline__card:nth-child(3){transition-delay:.6s}
.js [data-live-screen] .sui__chat .sui__msg,.js [data-live-screen] .sui__chat .sui__stamp{opacity:0;transform:translateY(8px)}
[data-live-screen].is-live .sui__chat .sui__msg,[data-live-screen].is-live .sui__chat .sui__stamp{animation:msg-in .5s var(--ease) both}
[data-live-screen].is-live .sui__chat .sui__msg:nth-of-type(2){animation-delay:.9s}
[data-live-screen].is-live .sui__chat .sui__msg:nth-of-type(3){animation-delay:1.7s}
[data-live-screen].is-live .sui__chat .sui__stamp{animation-delay:2.1s}
[data-live-screen].is-final .sui__chat .sui__msg,[data-live-screen].is-final .sui__chat .sui__stamp{animation:none;opacity:1;transform:none}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}
}
.card-tilt{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s var(--ease);will-change:transform}
.card-tilt.is-tilting{transition:none}
.tilt-glare{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),#F2F0EA14,transparent 60%);transition:opacity .3s var(--ease)}
.card-tilt.is-tilting .tilt-glare{opacity:1}

/* E7 sterren vullen bij reveal */
.js [data-reveal] .review__stars svg{opacity:0;transform:scale(.3)}
.js [data-reveal].is-revealed .review__stars svg{animation:star-in .45s var(--ease-spring) forwards}
.js [data-reveal].is-revealed .review__stars svg:nth-child(2){animation-delay:.07s}
.js [data-reveal].is-revealed .review__stars svg:nth-child(3){animation-delay:.14s}
.js [data-reveal].is-revealed .review__stars svg:nth-child(4){animation-delay:.21s}
.js [data-reveal].is-revealed .review__stars svg:nth-child(5){animation-delay:.28s}
@keyframes star-in{to{opacity:1;transform:scale(1)}
}

/* E9 footer-slogan per woord */
.footer__slogan span{display:block}
.js [data-reveal-stagger].footer__slogan > span{transform:translateY(.55em)}
.js [data-reveal-stagger].is-revealed.footer__slogan > span{transform:none}

/* E10 mobiel minimaal */
@media (max-width:720px){.hero--video::after,.hero--photo::after,.cta-final::after,.cta-final::before,.step::after{display:none}
.cta-final{padding-block:clamp(72px,16vw,100px)}
}

/* == 18 · REDUCED MOTION == */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
html{scroll-behavior:auto}
body{transition:none}
[data-reveal],[data-reveal-stagger] > *,.hero-cinema [data-hero-line],[data-textfx] .tfx-w{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}
[data-textfx="scramble"].is-scrambling{color:inherit}
.scroll-progress,.hero-spotlight,.chat-bubble__pulse,.confetti-layer,.ripple,.btn-shine::after{display:none !important}
.card-tilt{transform:none !important}
.sticky-cta,.sticky-cta.is-shown,.sticky-cta.is-hidden{transform:none !important;transition:opacity .2s linear !important}
.sticky-cta__pulse::after{animation:none !important}
.nav__drawer-panel,.nav__drawer-panel > *{opacity:1;transform:none !important;transition:none !important}
.nav__drawer{transition:none !important}
.nav__drawer:not(.is-open) .nav__drawer-panel > *{opacity:1}
.quiz-mini__ring .f,.progress-ring__fill{transition:none !important}
.celebrate-pop{animation:none !important}
.draw-on-view path,.draw-on-view line,.draw-on-view polyline,.draw-on-view circle,.draw-on-view rect{stroke-dashoffset:0 !important;transition:none !important}
.agenda-viz__badge{opacity:1 !important;transform:none !important}
html.js .agenda-viz__row:not(.is-booked) .agenda-viz__badge{opacity:0 !important}
.sui__dot::after{animation:none !important;opacity:0 !important}
.sui__typing{display:none !important}
.sui__check{animation:none !important;opacity:1 !important;transform:none !important}
.sui__bar-fill{animation:none !important;transform:scaleX(1) !important}
.sui__msg,.sui__stamp{opacity:1 !important;transform:none !important;animation:none !important}
.mediafeature__play::before{animation:none}
.cta-final::before,.hero__video,.hero--video .hero__media img,.hero--photo .hero__media img{animation:none !important}
.statement__rule,.review__stars svg,.pipeline__card,.footer__slogan > span{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}
.perf-strip > *::before{display:none !important}
.step::before{transition:none !important}
.shotbox,.videobox{transition:none}
.theme-toggle,.nav,.btn{transition:none}
}

/* == 19 · PRINT == */
@media print{:root{--bg:#FFFFFF;--bg-2:#FFFFFF;--bg-3:#FFFFFF;--fg:#000000;--fg-2:#222222;--fg-3:#444444;--line:#999999;--line-2:#CCCCCC}
html,body{background:#FFFFFF !important;color:#000000}
.nav,.nav__drawer,.chat-bubble,.mobile-cta,.sticky-cta,.modal,.toast-region,.proof-toast,.scroll-progress,.shotbox,.videobox,.theme-toggle,.skip-link,.reviews__nav,.btn-shine::after{display:none !important}
.hero,.hero--video,.hero--photo,.cta-final,.section--carbon,.sui,.browser{background:#FFFFFF !important;color:#000000 !important}
.hero--video::after,.hero--photo::after,.cta-final::after,.cta-final::before{display:none !important}
[data-reveal],[data-reveal-stagger] > *,.hero-cinema [data-hero-line],[data-textfx] .tfx-w{opacity:1 !important;transform:none !important}
a{color:#000000;text-decoration:underline}
.section{padding-block:28px}
}

/* == 20 · SLOTVERFIJNING (r11) · append-only · `.pg-fin` staat op <main id="main">
   van alle 53 contentpagina's; de 3 legacy-stubs en het GSC-bestand hebben geen main. */
/* de pijl was platte tekst, dus §4 vond nooit een .btn__arrow; nu ook op focus */
.btn__arrow{display:inline-block;transition:transform var(--t2)}
a:hover .btn__arrow,a:focus-visible .btn__arrow,
button:hover .btn__arrow,button:focus-visible .btn__arrow{transform:translateX(3px)}
.btn--text:hover .btn__arrow,.btn--text:focus-visible .btn__arrow{transform:translateX(4px)}
/* weduwen/wezen · koppen hadden balance, bodycopy niets */
.pg-fin p,.pg-fin li{text-wrap:pretty}
.pg-fin .cta-final__sub,.pg-fin .statement p{text-wrap:balance}
/* .spec erfde p{max-width:62ch} = 428px in de mono en brak captions middenin */
.pg-fin .spec{max-width:min(100%,820px)}
/* basislijn tussen kolommen als één kop over twee regels loopt (>=769px = 3 koloms) */
@media (min-width:769px){
.pg-fin .grid-hair--baseline{grid-template-rows:auto auto}
.pg-fin .grid-hair--baseline > *{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0;align-content:start}
}
@media (prefers-reduced-motion:reduce){
.btn__arrow{transition:none}
a:hover .btn__arrow,a:focus-visible .btn__arrow,
button:hover .btn__arrow,button:focus-visible .btn__arrow,
.btn--text:hover .btn__arrow,.btn--text:focus-visible .btn__arrow{transform:none}
}

/* == 21 · LIVE-REPARATIES (r11) · append-only · layout- en responsive-bevindingen uit de
   live-testronde op www.scagency.nl. Elke regel staat hier bewust onderaan zodat hij van de
   bestaande sectie wint zonder die te herschrijven; waar een bestaande waarde zelf fout was
   (bevinding 49, de chat-bubbel) is die op zijn eigen plek gecorrigeerd i.p.v. hier gedubbeld. */

/* 21.1 · #10 · stepper-balk vrij van de sluitknop
   .modal__close is 40px breed op right:14px en beslaat dus de eerste 54px vanaf de rechterrand
   van de dialoog. De balk loopt tot de dialogpadding, clamp(24px,4vw,40px), en dook daar met
   14px (1440px) tot 30px (390px) onder. Precies dat verschil is nu de extra marge, zodat de
   balk op elke maat net vrijloopt en niet onnodig kort wordt. */
.stepper__bar{margin-right:calc(54px - clamp(24px,4vw,40px))}

/* 21.2 · #19 · reviewkaart afgeleid van de trackbreedte
   De kaart stond vast op 420px in een track van 1267px: 2,9 kaarten, dus de derde werd middenin
   een woord afgesneden ("het mensen erachte") en las als renderfout in plaats van als peek.
   De breedte volgt nu de track, zodat er precies --rev-cols kaarten in passen. Onder 720px
   blijft de peek van 86vw staan: een halve kaart is ondubbelzinnig, 0,9 kaart niet. */
.reviews__track{--rev-gap:clamp(14px,2vw,24px);--rev-cols:3;gap:var(--rev-gap);grid-auto-columns:calc((100% - (var(--rev-cols) - 1) * var(--rev-gap)) / var(--rev-cols))}
@media (max-width:1024px){.reviews__track{--rev-cols:2}
}

/* 21.3 · #20 · de leegte in een korte reviewkaart als structuur
   grid-auto-flow:column strekt elke kaart naar de hoogte van de langste review, dus bij 88
   tekens stond er 268px niets tussen tekst en naam. De hoogtes blijven gelijk (drie kaarten
   naast elkaar met verschillende hoogtes leest slechter), maar de auteursrij krijgt een
   hairline: dezelfde witruimte leest dan als kaartstructuur in plaats van als een gat. */
.review__text{flex:0 1 auto}
.review__foot{margin-top:auto;padding-top:15px;border-top:1px solid var(--line-2)}

/* 21.4 · #29 · op mobiel krijgt elke kaart zijn eigen hoogte
   Daar staat er maar een kaart tegelijk in beeld, dus gelijke hoogtes leveren alleen het gat op
   (kaart 537px bij een review van 88 tekens). align-items:start laat elke kaart om zijn eigen
   tekst sluiten; scroll-snap en de peek werken onveranderd. */
@media (max-width:720px){.reviews__track{align-items:start;grid-auto-columns:min(420px,86vw)}
}

/* 21.5 · #22 · KPI-kolommen in de caserijen op een raster
   De drie kolommen stonden op inhoudsbreedte (flex), dus de derde schoof 29px op tussen twee
   caserijen die verder identiek zijn (CAMPAGNES tegen CONSULTAANVRAGEN). Met een vast raster
   staan de cijfers van alle vier de cases onder elkaar. Elke .kpis op de site staat binnen
   een .case-row (cases.html plus alle dienstenpagina's), dus het raster geldt overal.
   CONSULTAANVRAGEN is een woord van 16 tekens en meet in de mono circa 122px; onder de 860px-
   breakpoint is een kolom smaller dan dat, dus het label mag afbreken i.p.v. buiten zijn kolom
   te lopen (hyphens waar de browser het woord kent, anders een harde afbreking). */
.case-row .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px);max-width:520px}
.case-row .kpi__l{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

/* 21.6 · #27 · geen spookcel meer in het dienstenraster
   Op 2 kolommen (<=1024px) bleef bij een oneven aantal kaarten een cel over. Het raster draagt
   zelf de hairlinekleur (gap:1px op var(--line-2) met kaarten erop), dus die lege cel werd als
   grijs blok geverfd in plaats van als niets, in beide thema's. De laatste kaart vult nu de rij.
   Boven 1024px staan overal 3, 6 of 9 kaarten in 3 kolommen, dus daar valt er niets te vullen;
   onder 641px is het raster 1 koloms en is de regel al een no-op. */
@media (min-width:641px) and (max-width:1024px){.svc-grid > :last-child:nth-child(odd){grid-column:1 / -1}
}

/* 21.7 · #28 · slot-CTA full-width op mobiel
   Exact dezelfde regel als .hero__ctas in §6: op 390px stond "PLAN EEN GESPREK" met 208px
   links uitgelijnd in een kolom van 343px, terwijl dezelfde knop in een hero wel de volle
   breedte kreeg. Binnen een site hoort hetzelfde patroon zich hetzelfde te gedragen. */
@media (max-width:768px){.cta-final__ctas{flex-direction:column;align-items:stretch}
.cta-final__ctas .btn:not(.btn--text){width:100%}
}

/* 21.8 · #30 · de twee resterende aanraakdoelen
   .theme-toggle, .nav__burger, .nav__drawer-close, .dsocial__btn, .footer__social-btn,
   .reviews__btn en .sticky-cta__x kregen hun 44px-raakvlak al in §4, en .reviews__dot is daar
   al 24x44. Deze twee stonden er nog niet in. Zelfde recept: een transparant ::before vergroot
   alleen het hitgebied, de optische maat blijft 40x40 resp. 18x18. .modal__close staat al op
   position:absolute en hoort daarom niet in de position:relative-lijst van §4; de consent-
   checkbox staat al op position:relative en gebruikt zijn ::after voor het vinkje, vandaar ook
   hier ::before. Het vlak groeit 13px buiten de checkbox: boven zit >=28px marge (.field
   margin-bottom + .consent margin-top) en rechts alleen de eerste 2px van het label, dat via
   label[for] toch dezelfde checkbox schakelt.
   .dsvc (39px hoog) krijgt bewust GEEN hitbox: die rijen staan 39px uit elkaar, dus een
   44px-vlak zou over de buurlink vallen en de verkeerde dienst openen. Een kleiner doel is daar
   beter dan een doel dat het verkeerde raakt; de echte oplossing is meer padding, en die
   verlengt de drawer die in bevinding 48 al te lang is. */
.modal__close::before,.consent input[type="checkbox"]::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}

/* 21.9 · #38 · FAQ-breedte op een rasterwaarde
   860px lijnde met niets uit: de H2 erboven loopt tot 1354 en het accordeon stopte op 946.
   944px = 9 van de 12 kolommen op de container van 1267px (kolom 83,6px, goot 24px). Dat is
   een rasterwaarde en het haalt tegelijk 107px dood vlak weg t.o.v. de 8-kolomsvariant.
   De antwoordalinea's blijven op hun eigen leesmaat staan (.accordion__panel p, 68ch). */
.faq{max-width:944px}

/* 21.10 · #44 · de gecentreerde mono-onderregels balanceren
   Ze braken op circa 430px af met een rafelige tweede regel ("SYSTEEM." alleen). Een kortere
   maat plus balance geeft twee vrijwel even lange regels. De bevinding noemt .statement__note;
   die klasse bestaat nergens in de markup, het gaat om .spec in .statement en .form__note in
   .cta-final. In #aan-boord blijft de linkse uitlijning staan: die override staat op een ID en
   wint van de margin-inline hier. */
.statement .spec,.cta-final .form__note{max-width:58ch;margin-inline:auto;text-wrap:balance}

/* 21.11 · #48 · de slot-CTA van de drawer blijft bereikbaar
   Het paneel is 1630px hoog tegen een viewport van 844px, dus "PLAN EEN GESPREK" lag circa
   800px scrollen diep. Hij is het laatste kind van het paneel en het paneel is de scroller,
   dus sticky volstaat: de knop staat onderin het paneel zolang er nog te scrollen valt en
   landt aan het eind vanzelf op zijn eigen plek (de panelpadding van 28px is groter dan de
   offset hier, dus hij zakt niet door). Hij is .btn--block met een dekkende accentvulling,
   dus er scrolt niets zichtbaar onderdoor. */
.nav__drawer .dcta{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:1}

/* 21.12 · #3 (CSS-vangnet) · legal-rij vrij onder de sticky-CTA
   Bij scrollY=max lagen de sticky-CTA en de chatbubbel over Privacy · Voorwaarden · Cookies;
   elementFromPoint gaf DIV.sticky-cta, dus de links waren niet alleen onleesbaar maar ook niet
   klikbaar. Het echte werk (verbergen zodra de footer in beeld komt) zit in app.js; dit is het
   vangnet: 96px is meer dan de sticky-CTA hoog is (circa 60 tot 66px) plus zijn bottom-offset
   van maximaal 26px, dus de rij ligt ook bij een blijvende bar vrij. Op <=720px komt de
   body-padding van 76px voor de mobile-cta er nog bij. */
.footer__bottom{padding-bottom:96px}

/* 21.13 · #4 (filmgrain) · stond er al; twee correcties
   De bevinding meldt de grain als ontbrekend, maar hij staat in §E-1:
   .hero--video::after,.hero--photo::after,.hero--type::after,.cta-final::after met een inline
   feTurbulence-SVG als data-URI op opacity .038, dus zonder extra request en zonder JS. De
   bevinding zocht op klassenamen met "grain" of "noise" en vindt een pseudo-element daarom
   niet. Twee dingen klopten wel niet:
   1. z-index:3 legde de laag BOVEN de inhoud, ook boven .cta-final > .container (z-index:2).
      Nu ligt hij eronder: in de hero net boven .hero__grade (beide -1, ::after komt later in de
      boomvolgorde en wint daarmee) en onder de statische containerinhoud; in .cta-final net
      boven de aurora (beide 1, zelfde redenering) en onder de container. Daarmee valt hij
      nergens meer over tekst of over de bedieningslaag van een video.
   2. .hero--type volgt als enige heromaat wel het thema. In het lichte thema lag de korrel dan
      als waas over ivoor in plaats van als grain over obsidian; daar gaat hij uit.
   mix-blend-mode:overlay is bewust NIET toegevoegd: overlay rekent op een donkere achtergrond
   2*b*s, en met b = 0,04 op obsidian zakt de korrel terug naar circa 0,15% verschil, oftewel
   onzichtbaar. Normale menging op .038 IS de zichtbare filmgrain; overlay zou het effect dat nu
   live staat feitelijk uitzetten. */
.hero--video::after,.hero--photo::after,.hero--type::after{z-index:-1}
.cta-final::after{z-index:1}
html[data-theme="light"] .hero--type::after{display:none}

/* == 22 · LOCATIEPAGINA'S (regio-matrix) · append-only ==
   Componenten voor de werkgebied×dienst-matrix (/regio/): .localfacts
   (feitenbalk), .locmap (schematische kaart in inline SVG · nul externe
   hosts), .regio-chips (wijken, postcodes, steden-crosslinks) en
   .cityfinder (zoekfilter op /regio/). Verder bewust hergebruik van
   .svc-grid, .list-hair, .steps, .statement en .faq. */

.localfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.localfacts__cell{background:var(--bg);padding:clamp(18px,2.4vw,30px);min-width:0}
.section--carbon .localfacts__cell{background:var(--bg-2)}
.localfacts__label{display:block;font-family:var(--font-mono);font-size:.719rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.localfacts__value{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1.2vw + .8rem,1.6rem);letter-spacing:-.02em;line-height:1.25;color:var(--fg);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.localfacts__sub{display:block;margin-top:6px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;line-height:1.5;color:var(--fg-3)}
@media (max-width:1024px){.localfacts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.locmap{border:1px solid var(--line-2);background:var(--bg-2);padding:clamp(16px,2.4vw,30px)}
.locmap svg{display:block;width:100%;height:auto}
.locmap .locmap__cap{margin-top:12px}

.regio-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.regio-chip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.719rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line);padding:10px 14px;border-radius:2px;transition:color var(--t1),border-color var(--t1)}
a.regio-chip:hover{color:var(--fg);border-color:var(--accent)}
.regio-chip--flat{color:var(--fg-3);border-color:var(--line-2)}

.cityfinder{max-width:520px;margin-top:clamp(24px,3vw,36px)}
.cityfinder__input{width:100%;background:var(--bg-3);border:1px solid var(--line);color:var(--fg);font-family:var(--font-display);font-size:1rem;padding:16px 18px;border-radius:2px;letter-spacing:-.01em}
.cityfinder__input:focus{outline:none;border-color:var(--accent)}
.cityfinder__input::placeholder{color:var(--fg-3)}
.cityfinder__count{margin-top:12px}

@media (max-width:720px){.locmap{padding:14px}}