/* VeraDossier — Site v5. Merkboek v1.0, palet-herziening 3.0.
   Archief, geen dashboard. Warm dossierpapier tegen diepe inkt, één patinagroen
   accent, en een serif voor de koppen: het dossier als instituut, niet als app.

   Systeemregels die hier hard gelden:
     · geen verlopen als decoratie, geen glow, geen schaduw, geen tweede accent
     · vlakken scheiden met 1px, nooit met schaduw
     · geen afgeronde hoeken; de vertrouwensregel is typografie, geen badge
     · Newsreader = koppen · Archivo = cijfers en knoppen
       Source Sans 3 = lopende tekst · IBM Plex Mono = bewijs en rubricering

   Alle beweging respecteert prefers-reduced-motion: animaties vallen terug op
   hun eindtoestand, canvassen tekenen één stilstaand frame. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100%;overflow-x:hidden}
ul{list-style:none}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

:root{
  --ink:#0E1418;          /* diepste vlak — gevel en app-chrome */
  --ink-2:#1A2228;        /* tweede donkere vlak */
  --marine:#17293C;       /* archiefmarine — autoriteitsvlakken */
  --marine-2:#22415E;     /* hover op marine */
  --verdigris:#1E6055;    /* het enige accent */
  --verdigris-2:#2C6B60;
  --patina:#A9C6BC;       /* labels op donker */
  --paper:#F4F2EC;        /* dossierpapier */
  --paper-2:#FAF9F5;      /* tweede papiervlak */
  --paper-3:#EFF5F2;      /* hover op papier */
  --oxide:#A63A22;

  --on-ink:#F4F2EC; --on-ink-dim:#B5BEC6; --on-ink-mute:#95A6B4; --on-ink-faint:#A5B1BA;
  --on-paper:#17293C; --on-paper-dim:#4A5560; --on-paper-mute:#656F7A;

  --rule-ink:#22333B; --rule-ink-2:#2E4150; --rule-paper:#DAD6CC; --rule-paper-2:#E2DFD6;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --pad:clamp(20px,4.5vw,88px);
  --sect:clamp(52px,6.5vw,104px);
  --maxw:1360px;
  --ease:cubic-bezier(.16,.84,.24,1);
}

body{font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.6;
  color:var(--on-paper);background:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--verdigris);color:var(--paper)}
:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px}
.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}
.skip{position:fixed;top:-60px;left:12px;z-index:200;background:var(--verdigris);
  color:var(--paper);padding:12px 18px;font-family:var(--display);font-weight:800;
  transition:top .16s var(--ease)}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- primitieven */
.sect{padding:var(--sect) var(--pad);position:relative}
.sect--ink{background:var(--ink);color:var(--on-ink)}
.sect--marine{background:var(--marine);color:var(--on-ink)}
.sect--paper{background:var(--paper);color:var(--on-paper)}
.sect--paper2{background:var(--paper-2);color:var(--on-paper)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto}

/* Donkere vlakken herdefiniëren de tokens; elementen lezen alleen tokens.
   Eerder stonden .hero en .close niet in de opsomming en kregen hun label en
   lede de papierkleur op inkt — 2,5:1. Eén lijst, één plek om aan te vullen. */
.sect--ink,.sect--marine,.hero,.close,.wall,.foot{
  --lbl-fg:var(--patina);
  --lede-fg:var(--on-ink-dim);
  --rule-paper:var(--rule-ink-2);
}

/* label — Plex Mono, uitsluitend bewijs en rubricering */
.lbl{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lbl-fg,var(--verdigris));display:block}

/* koppen — Newsreader 500; het merk mag gezaghebbend klinken, niet schreeuwen */
.h{font-family:var(--serif);font-weight:500;letter-spacing:-.03em;line-height:.94;
  text-wrap:balance}
.h--xl{font-size:clamp(44px,7.6vw,130px);line-height:.84;letter-spacing:-.035em}
.h--lg{font-size:clamp(34px,5.4vw,88px);line-height:.9}
.h--md{font-size:clamp(32px,4.6vw,66px)}
.h--sm{font-size:clamp(24px,3.2vw,46px);line-height:1;letter-spacing:-.02em}
.lede{font-size:clamp(16px,1.5vw,20px);line-height:1.55;max-width:62ch;
  color:var(--lede-fg,var(--on-paper-dim))}
p{max-width:74ch}

/* cijfers — Archivo, altijd tabulair */
.num{font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums lining-nums}

/* knoppen — vlak en vierkant */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:0 28px;font-family:var(--display);font-weight:800;font-size:15.5px;
  letter-spacing:-.01em;border:1px solid transparent;transition:background .18s var(--ease),
  color .18s var(--ease),border-color .18s var(--ease)}
.btn--primary{background:var(--verdigris);color:var(--paper)}
.btn--primary:hover{background:#17493F}
.btn--ghost{background:transparent;color:inherit;border-color:var(--rule-paper)}
.sect--ink .btn--ghost,.sect--marine .btn--ghost,.hero .btn--ghost{border-color:var(--rule-ink-2)}
.btn--ghost:hover{border-color:currentColor}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* merkteken — één massieve vorm, geen kader (merkboek 02/03)
   Het slot is op maat gebouwd, niet op het oog. Archivo 900 meet een
   kapitaalhoogte van 0,676em en een kapitaalbreedte van 0,685em. Het merkboek
   wil het teken op kapitaalhoogte met één kapitaalbreedte ruimte ernaast.

   Het getekende teken vult 88/100 van zijn vierkante viewBox, dus:
     svg-hoogte = 0,676 / 0,88 = 0,768em
   en het vak is aan weerszijden (0,768 − 0,645)/2 = 0,062em breder dan de
   inkt, wat van de tussenruimte af moet: 0,685 − 0,062 = 0,623em.

   De maat staat daarom op .lock zelf, zodat één font-size het hele slot
   schaalt en de verhouding nooit meer uit de pas kan lopen. */
.lock{display:inline-flex;align-items:center;gap:.623em;font-size:17px}
.lock svg{flex:none;width:.768em;height:.768em;
  /* optische correctie: het vak centreert op de regel, de kapitalen niet */
  margin-bottom:.045em}
.lock span{font-family:var(--display);font-weight:900;font-size:1em;line-height:1;
  letter-spacing:-.03em;text-transform:uppercase}

/* ---------------------------------------------------------------- leesvoortgang */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:90;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--verdigris)}
/* hoofdstukstippen — positie in het dossier, niet alleen decoratie */
.dots{position:fixed;right:clamp(10px,1.4vw,20px);top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.dots a{display:block;width:20px;height:3px;background:var(--marine);opacity:.25;
  transition:width .32s var(--ease),opacity .32s var(--ease),background .32s var(--ease)}
.dots a[aria-current="true"]{width:34px;opacity:1;background:var(--verdigris)}
@media (max-width:900px){.dots{display:none}}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:80;background:var(--ink);border-bottom:1px solid var(--rule-ink);
  color:var(--on-ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin-inline:auto;padding:12px var(--pad);min-height:62px}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);font-size:14px;
  color:var(--on-ink-dim)}
.nav-links a:hover{color:var(--on-ink)}
/* de uitgaande-teller is het argument in één regel: hij blijft op nul */
.outbound{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--patina);
  border:1px solid var(--rule-ink-2);padding:7px 11px;white-space:nowrap}
.outbound b{color:var(--on-ink);font-weight:500}
.nav-lang{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--on-ink-mute);
  border:1px solid var(--rule-ink-2);min-height:44px;padding:0 12px}
.nav-lang:hover{color:var(--on-ink);border-color:var(--patina)}
.nav-cta{font-family:var(--display);font-weight:800;font-size:14px;color:var(--paper);white-space:nowrap;
  background:var(--verdigris);min-height:44px;display:inline-flex;align-items:center;padding:0 18px}
.nav-cta:hover{background:#17493F}
@media (max-width:1000px){.nav-hide{display:none}}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--ink);color:var(--on-ink);padding:clamp(44px,6vw,84px) var(--pad) 0;
  overflow:hidden}
/* De hero staat bóven het vaste merkveld (z-index 2), zodat hier maar één V te
   zien is: deze. Onder de hero neemt het gedempte veld het weer over. */
.hero-mark{position:absolute;top:50%;left:50%;height:126%;width:auto;aspect-ratio:1;
  transform:translate(-50%,-50%);fill:var(--marine);pointer-events:none}
.hero-in{max-width:var(--maxw);margin-inline:auto}
.hero .lbl{margin-bottom:clamp(18px,2.6vw,26px)}
.hero h1{margin-bottom:clamp(26px,3.4vw,40px);color:var(--paper)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,64px);align-items:start}
.hero-sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--on-ink-dim);max-width:44ch}
.hero-re{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-ink-faint)}
.hero-btns{margin-top:clamp(22px,3vw,32px)}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:32px}}

/* opnamepaneel — de belofte gedemonstreerd: opnemen, vastleggen, ondertekenen */
.rec{border:1px solid var(--rule-ink);background:var(--ink-2)}
.rec-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--rule-ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-mute)}
.rec-live{color:var(--patina);transition:color .3s var(--ease)}
.rec canvas{width:100%;height:96px;display:block}
.rec-text{padding:16px;border-top:1px solid var(--rule-ink);min-height:96px;
  font-size:15.5px;line-height:1.6;color:var(--on-ink)}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--patina);
  vertical-align:text-bottom;margin-left:2px;animation:vd-caret 1s steps(1) infinite}
/* het zegel — vastlegging als handeling, niet als vinkje */
.seal{margin-top:14px;border:1px solid var(--rule-ink-2);background:var(--ink);
  padding:14px 16px;display:grid;gap:7px;opacity:0;transform:rotate(-.9deg)}
.seal-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--on-ink-mute)}
.seal-row:first-child{border-bottom:1px solid var(--rule-ink);padding-bottom:8px;
  text-transform:uppercase;color:var(--patina)}
.seal-row b{font-weight:500;color:var(--on-ink)}

@keyframes vd-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vd-stamp{0%{opacity:0;transform:scale(1.08) rotate(-.9deg)}
  60%{opacity:1;transform:scale(.995) rotate(-.9deg)}100%{opacity:1;transform:scale(1) rotate(-.9deg)}}
@keyframes vd-caret{0%,45%{opacity:1}50%,100%{opacity:0}}

/* inkoopregel — typografie, nooit een schild */
.procure{border-top:1px solid var(--rule-ink);margin-top:clamp(34px,4.5vw,56px);
  padding:20px 0 26px;display:flex;flex-wrap:wrap;gap:9px 24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-faint)}
.procure .lead{color:var(--patina)}

/* ---------------------------------------------------------------- drie pijlers */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--rule-paper);margin-top:clamp(26px,3vw,40px)}
.pillar{padding:30px 30px 34px;border-right:1px solid var(--rule-paper)}
.pillar:last-child{border-right:0}
.pillar-n{font-family:var(--display);font-weight:900;font-size:clamp(46px,10.5vw,190px);
  line-height:.84;letter-spacing:-.035em;color:var(--verdigris);
  font-variant-numeric:tabular-nums;margin-bottom:14px}
.pillar-t{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.01em;
  margin-bottom:8px;color:var(--on-paper)}
.pillar p{font-size:14.5px;line-height:1.55;color:var(--on-paper-dim);max-width:34ch}
@media (max-width:900px){
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-bottom:1px solid var(--rule-paper)}
  .pillar:last-child{border-bottom:0}
  .pillar-n{font-size:clamp(56px,18vw,96px)}
}

/* ---------------------------------------------------------------- de muur */
.wall{position:relative;overflow:hidden}
.wall canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.wall .wrap{position:relative;z-index:1}
.wall-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin:16px 0 clamp(30px,4vw,48px)}
@media (max-width:900px){.wall-head{grid-template-columns:1fr;align-items:start;gap:18px}}
.wall-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  border:1px solid var(--rule-ink-2);margin-bottom:clamp(22px,3vw,34px)}
.wall-in,.wall-out{padding:26px 28px 30px}
.wall-in{border-right:1px solid var(--rule-ink-2)}
.wall-in ul{display:grid;gap:9px;margin-top:14px;font-size:15px;color:var(--on-ink-dim)}
.wall-in li{padding-left:18px;position:relative}
.wall-in li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--patina)}
.wall-out .num{display:block;font-size:clamp(54px,6.4vw,104px);line-height:.86;
  color:var(--patina);margin:12px 0 10px}
.wall-out p{font-size:14px;line-height:1.55;color:var(--on-ink-mute);max-width:32ch}
@media (max-width:820px){
  .wall-split{grid-template-columns:1fr}
  .wall-in{border-right:0;border-bottom:1px solid var(--rule-ink-2)}
}

/* ---------------------------------------------------------------- bewijs · balken */
.proof2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule-paper);
  margin-top:clamp(26px,3vw,40px)}
.proof2-pane{padding:clamp(22px,2.6vw,32px);border-right:1px solid var(--rule-paper)}
.proof2-pane:last-child{border-right:0}
.proof2-pane .lbl{margin-bottom:22px}
.bar2{margin-bottom:18px}
.bar2-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:7px}
.bar2-n{font-size:14.5px;color:var(--on-paper-dim)}
.bar2-v{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--on-paper-mute)}
.bar2-track{height:7px;background:var(--rule-paper-2)}
.bar2-fill{height:100%;width:0;background:#AEB7BF;transition:width 1.1s var(--ease)}
.bar2--us .bar2-n{color:var(--marine);font-weight:600}
.bar2--us .bar2-v{color:var(--verdigris)}
.bar2--us .bar2-fill{background:var(--verdigris)}
.bar2--bad .bar2-v{color:var(--oxide)}
.bar2--bad .bar2-fill{background:var(--oxide)}
.proof2-note{font-size:13px;line-height:1.55;color:var(--on-paper-mute);margin-top:18px}
@media (max-width:820px){
  .proof2{grid-template-columns:1fr}
  .proof2-pane{border-right:0;border-bottom:1px solid var(--rule-paper)}
  .proof2-pane:last-child{border-bottom:0}
}

/* ---------------------------------------------------------------- inkoopvragen */
.qa2{border-top:1px solid var(--rule-paper);margin-top:clamp(26px,3vw,40px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);align-items:start}
.qa2-item{border-bottom:1px solid var(--rule-paper)}
.qa2-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(10px,1.6vw,22px);align-items:baseline;padding:20px 0;transition:color .2s var(--ease)}
.qa2-item summary::-webkit-details-marker{display:none}
.qa2-item summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--verdigris)}
.qa2-item[open] summary::after{content:"\2013"}
.qa2-item summary:hover h3{color:var(--verdigris)}
.qn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--verdigris);
  padding-top:3px}
.qa2-item h3{font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.8vw,22px);
  letter-spacing:-.015em;line-height:1.2;transition:color .2s var(--ease)}
.qa2-item p{font-size:15px;line-height:1.6;color:var(--on-paper-dim);max-width:62ch;
  padding:0 0 22px calc(11px * 2.2 + clamp(10px,1.6vw,22px))}
@media (max-width:900px){.qa2{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- slot */
.close{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);
  padding:clamp(60px,8vw,120px) var(--pad) 0}
.close canvas{position:absolute;inset:auto 0 0 0;width:100%;height:220px;opacity:.55;pointer-events:none}
/* handtekening — het woordmerk één keer op ware grootte (merkboek 03:
   Archivo 900, altijd kapitalen, altijd één woord, tracking −0,03em).

   Het woord moet de volle maatregel beslaan, op elke breedte. Gemeten op de
   pagina zelf, met Archivo 900 daadwerkelijk geladen, is VERADOSSIER 7,650em
   breed; 100 / 7,65 = 13,07cqw vult de regel precies, dus 12,9cqw laat een
   haar lucht. De maat hangt aan de container en niet aan de viewport: alleen
   zo blijft het kloppen ongeacht de padding van dat moment.

   Meet dit nooit op een losse testpagina — daar valt Archivo stil terug op
   Helvetica en meet hetzelfde woord 6,8em, wat een te grote letter oplevert. */
.signoff-wrap{container-type:inline-size;position:relative;z-index:1;
  max-width:var(--maxw);margin:clamp(52px,7vw,96px) auto 0}
.signoff{margin:0;font-family:var(--display);font-weight:900;letter-spacing:-.03em;
  text-transform:uppercase;font-size:12.9cqw;line-height:.82;color:var(--paper);
  white-space:nowrap;-webkit-user-select:none;user-select:none}
.close-in{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(26px,4vw,60px);align-items:center}
.close h2{color:var(--paper)}
@media (max-width:860px){.close-in{grid-template-columns:1fr;align-items:start}}
.foot{position:relative;z-index:1;max-width:var(--maxw);margin:clamp(48px,6vw,84px) auto 0;
  border-top:1px solid var(--rule-ink);padding:26px 0 34px;display:grid;gap:14px}
.foot-claim{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--patina)}
.foot-links{display:flex;flex-wrap:wrap;gap:9px 20px;font-size:13.5px;color:var(--on-ink-mute)}
.foot-links a:hover{color:var(--on-ink)}
.foot-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-faint)}
.foot-meta a{color:var(--patina)}
.foot-attrib{font-size:12.5px;line-height:1.5;color:var(--on-ink-faint);max-width:80ch}

/* ---------------------------------------------------------------- beweging */
/* Alles is standaard zichtbaar. De verborgen begintoestand hangt aan html.js,
   die alleen wordt gezet als het script echt draait — zonder JS blijft niets weg. */
.js [data-rise]{opacity:0}
.js [data-rise].in{animation:vd-rise 720ms var(--ease) both}
/* Verminderde beweging: WCAG richt zich op vestibulaire prikkels — verschuiving,
   parallax, doorlopende beweging. Een opacity-overgang is dat niet. Alles wat
   beweegt gaat uit; het invaden blijft, zodat de pagina niet dood aanvoelt voor
   de bezoeker die deze voorkeur heeft ingesteld. */
@media (prefers-reduced-motion:reduce){
  .js [data-rise]{opacity:0;transform:none;animation:none;
    transition:opacity .45s linear}
  .js [data-rise].in{opacity:1;animation:none;transform:none}
  .bar2-fill{transition:width .6s linear}
  .caret{animation:none;opacity:1}

}

.ledger{--lbl-fg:var(--verdigris);--lede-fg:var(--on-paper-dim);--rule-paper:#DAD6CC}

/* ---------------------------------------------------------------- bewijs · leesbare fouten
   Overgenomen uit het vorige systeem en op de v5-tokens gezet. */
/* ---------------------------------------------------------------- het bewijs · leesbare fouten
   Dossierpapier tussen de inktvlakken: het bewijs ligt op tafel. Woordfouten in
   oxide, gemiste woorden als stippen, onze eigen missers in dezelfde opmaak als
   die van de concurrentie — de sectie is alleen overtuigend als ze niets verbergt. */

.ledger-head{max-width:62ch}
.ledger-h{font-family:var(--display);font-weight:900;font-size:clamp(40px,7vw,96px);
  line-height:.86;letter-spacing:-.045em;margin:14px 0 20px;color:var(--on-paper)}
.ledger-lead{font-size:clamp(16px,1.9vw,20px);line-height:1.55;color:var(--on-paper-dim);max-width:60ch}

.ledger-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:clamp(36px,5vw,56px) 0 clamp(28px,4vw,40px);border-top:1px solid var(--rule-paper)}
.lstat{padding:24px 26px 26px;border-right:1px solid var(--rule-paper)}
.lstat:last-child{border-right:0}
.lstat-num{font-family:var(--display);font-weight:900;font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-.04em;line-height:1;color:var(--verdigris);margin-bottom:10px}
.lstat-lab{font-size:14px;line-height:1.5;color:var(--on-paper-dim);max-width:34ch}
@media (max-width:860px){
  .ledger-stats{grid-template-columns:1fr}
  .lstat{border-right:0;border-bottom:1px solid var(--rule-paper)}
  .lstat:last-child{border-bottom:0}
}

.ledger-box{border:1px solid var(--rule-paper);background:var(--paper-2)}
.ledger-filters{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule-paper)}
.lfilter{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  min-height:48px;padding:0 18px;color:var(--on-paper-mute);border-right:1px solid var(--rule-paper);
  transition:background .16s var(--ease),color .16s var(--ease)}
.lfilter:hover{background:#EFECE4;color:var(--on-paper)}
.lfilter[aria-selected="true"]{background:var(--verdigris);color:var(--paper)}
.lfilter .n{margin-left:8px;font-variant-numeric:tabular-nums;color:inherit}
/* Expliciet per staat. Overerving deed het al goed; dit staat er als
   vangnet zodat het telletje niet stilletjes de knopkleur verliest. */
.lfilter[aria-selected="true"],.lfilter[aria-selected="true"] .n{color:var(--paper)}

.ledger-card{padding:clamp(22px,3.4vw,34px)}
.lrow{padding:16px 0;border-top:1px solid var(--rule-paper)}
.lrow:first-child{border-top:0;padding-top:0}
.lrow-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:8px}
.lrow-name{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-paper-mute)}
.lrow--us .lrow-name{color:var(--verdigris)}
.lrow-wer{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--on-paper-mute)}
.lrow--us .lrow-wer{color:var(--verdigris)}
.lrow-wer[data-bad="1"]{color:var(--oxide)}
.ltext{font-size:clamp(16px,2vw,21px);line-height:1.5;color:var(--on-paper);
  word-break:break-word;hyphens:none}
.lrow--ref .ltext{font-weight:600}
.lrow--ref .lrow-name{color:var(--on-paper)}
/* fout woord · oxide met onderstreping, gemist woord · stippen. Kleur draagt de
   betekenis nooit alleen: de markering is ook typografisch. */
.lw-bad{color:var(--oxide);border-bottom:2px solid var(--oxide);padding-bottom:1px}
.lw-miss{color:var(--oxide);opacity:.75;letter-spacing:.1em}

.ledger-nav{display:flex;align-items:center;gap:6px;padding:0 clamp(22px,3.4vw,34px) 20px}
.lnav{min-width:44px;min-height:44px;border:1px solid var(--rule-paper);
  font-size:16px;color:var(--on-paper);transition:border-color .16s var(--ease),background .16s var(--ease)}
.lnav:hover{border-color:var(--on-paper);background:#EFECE4}
.ledger-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--on-paper-mute);margin-left:10px}
.ledger-src,.ledger-note{margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;line-height:1.7;color:var(--on-paper-mute);max-width:88ch}
/* De snelheidsconcessie staat in dezelfde opmaak als het bewijs eromheen:
   even zichtbaar als de cijfers die ons goed uitkomen. */

/* ================================================================
   RESPONSIEVE LAGEN — zes tiers, elk met een eigen indeling
   Niet dezelfde pagina die krimpt: per tier verandert de compositie.

     XS   ≤419   kleine telefoon  · foto als band boven, kopij eronder
     S    420–767 grote telefoon  · idem, 2-koloms rasters
     M    768–1023 tablet         · foto achter kopij, gecentreerd
     L    1024–1439 laptop        · kopij links, foto ademt rechts
     XL   1440–1799 desktop       · kopij links, bewijs als eigen kolom
     XXL  ≥1800  breedbeeld       · ruimere marges, grotere schaal, vaste maatregel

   Deze laag staat bewust achteraan: hij overschrijft de oudere ad-hoc
   breekpunten hierboven in plaats van ermee te vechten.
   ================================================================ */

/* ---------------------------------------------------------------- XS + S · telefoon
   De donkere fotohero werkt niet op een klein scherm: de kopij ligt óp het
   beeld en beide verliezen. Daarom wordt de foto een band bovenaan met een
   eigen hoogte, en staat alle tekst daaronder op vlakke inkt. */
@media (max-width:767.98px){
  .hero{min-height:0;padding:0 var(--pad) calc(env(safe-area-inset-bottom,0px) + 104px);
    display:block;isolation:auto}
  .hero-photo{position:relative;inset:auto;z-index:0;height:44vw;min-height:190px;max-height:280px;
    background-position:58% 28%}
  .hero-grade{position:absolute;inset:0 0 auto 0;height:44vw;min-height:190px;max-height:280px;z-index:1;
    background:linear-gradient(180deg,rgba(16,22,28,.30) 0%,rgba(16,22,28,.55) 60%,var(--bg) 100%)}
  .hero-inner{position:relative;z-index:2;max-width:none;text-align:left;
    padding:22px var(--pad) 0}
  .hero-copy{max-width:none}
  .hero-h1{font-size:clamp(34px,10.5vw,52px);line-height:.96;margin-top:10px}
  .hero-outcome{font-size:clamp(17px,4.6vw,21px);margin:14px 0 0;max-width:none}
  .hero-value{font-size:15px;margin:10px 0 0;max-width:none}
  .hero-proof{display:block;margin-top:22px;text-align:left}
  .proof-num{font-size:clamp(52px,17vw,74px);display:block;line-height:.84}
  .proof-side{max-width:none;padding-top:8px}
  .hero-cta-row{margin-top:20px;flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta-row .cta{width:100%}
  .scroll-hint{display:none}

  /* compliance · volle regels in plaats van zwevende chips */
  .pass-row{display:grid;grid-template-columns:1fr;gap:0;
    border-top:1px solid var(--line)}
  .pass{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:13px 2px;min-height:52px}
  .pass-more{max-height:none;opacity:1;margin-top:4px}

  /* producten · gestapeld, foto als kopband zodat de kaart niet één donker blok wordt */
  .product-grid{grid-template-columns:1fr;gap:20px}
  .pcard{min-height:0}
  .pcard-photo{height:150px}

  /* de echte test · knoppen op volle breedte, balken onder het label */
  .proof-toggle{display:grid;grid-template-columns:1fr 1fr}
  .pt-btn{min-height:48px}
  .cmp-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l v" "t t";
    gap:6px 12px;align-items:baseline}
  .cmp-label{grid-area:l}.cmp-val{grid-area:v}.cmp-track{grid-area:t}

  /* bewijs · alles op één kolom, filters horizontaal scrollbaar met snap */
  .ledger-stats{grid-template-columns:1fr}
  .ledger-filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ledger-filters::-webkit-scrollbar{display:none}
  .lfilter{flex:none;scroll-snap-align:start}
  .lrow-top{flex-direction:column;align-items:flex-start;gap:2px}
  .ltext{font-size:16.5px}

  /* pill-nav · alleen merk + demo; de ankers passen niet en zijn dubbelop */
  .pill-link{display:none}
  .pillnav{max-width:calc(100vw - 20px);gap:8px}
}

/* XS · de smalste telefoons: nog een tandje strakker, contact valt weg */
@media (max-width:419.98px){
  :root{--pad:16px}

  .hero-h1{font-size:clamp(31px,11vw,40px);letter-spacing:-.025em}
  .proof-num{font-size:clamp(46px,18vw,62px)}
  .pill--contact{display:none}
  .lstat{padding:18px 0}
  .lstat-num{font-size:30px}
  .ledger-card{padding:18px}
  .ledger-nav{padding:0 18px 18px}
  .lg-top,.topbar{padding-inline:16px}
}

/* S · grote telefoons: rasters mogen 2-op-een-rij */
@media (min-width:420px) and (max-width:767.98px){
  .pass-row{grid-template-columns:1fr 1fr}
  .pass{border-right:1px solid var(--line)}
  .pass:nth-child(2n){border-right:0}
}

/* ---------------------------------------------------------------- M · tablet
   Foto weer áchter de kopij, maar gecentreerd: er is breedte genoeg voor een
   leesbare regel, nog niet genoeg voor twee kolommen naast elkaar. */
@media (min-width:768px) and (max-width:1023.98px){
  .hero{min-height:auto;padding:clamp(72px,9vw,104px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 108px)}
  .hero-inner{max-width:720px;text-align:center}
  .hero-copy{max-width:none;margin-inline:auto}
  .hero-h1{font-size:clamp(52px,7.6vw,76px)}
  .hero-proof{justify-content:center;text-align:left}
  .hero-cta-row{justify-content:center}
  .pass-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .product-grid{grid-template-columns:1fr;gap:22px}
  .pcard-photo{height:190px}
  .ledger-stats{grid-template-columns:1fr 1fr}
  .lstat:nth-child(3){grid-column:1 / -1;border-right:0;border-top:1px solid var(--rule-paper)}
  .lstat:nth-child(2){border-right:0}
  .pillnav .pill-link:nth-of-type(n+3){display:none}
}

/* ---------------------------------------------------------------- L · laptop
   De indeling waarvoor de pagina oorspronkelijk is getekend. */
@media (min-width:1024px) and (max-width:1439.98px){
  .hero-inner{max-width:1180px;text-align:left}
  .hero-copy{max-width:620px}
  .ledger-stats{grid-template-columns:repeat(3,1fr)}
}

/* ---------------------------------------------------------------- XL · desktop
   Genoeg breedte om het bewijs uit de tekstkolom te tillen: de kopij houdt een
   leesbare maatregel links, het cijfer krijgt rechts een eigen omkaderd vlak. */
@media (min-width:1440px){
  :root{--maxw:1320px;--pad:clamp(48px,4.5vw,88px)}
  .hero-inner{max-width:var(--maxw);display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(360px,.72fr);
    gap:clamp(40px,4vw,72px);align-items:center;text-align:left}
  .hero-copy{max-width:none;grid-column:1}
  .hero-h1{font-size:clamp(76px,6.4vw,112px)}
  .hero-proof{grid-column:2;margin:0;display:block;
    border:1px solid var(--line);background:var(--bg-2);padding:30px 32px 32px}
  .proof-num{font-size:clamp(64px,5.4vw,92px);display:block}
  .proof-side{max-width:none;padding-top:10px}
  .proof-compare,.proof-sources,.proof-fleurs{margin-inline:0}
  .hero-cta-row{grid-column:1;justify-content:flex-start}
}

/* ---------------------------------------------------------------- XXL · breedbeeld
   Niet uitrekken maar ademen: bredere marges, iets grotere schaal, en de
   leesbare regellengte blijft begrensd. */
@media (min-width:1800px){
  :root{--maxw:1520px;--pad:clamp(72px,5vw,132px)}
  body{font-size:17px}
  .hero-h1{font-size:clamp(104px,6vw,132px)}
  .hero-outcome{font-size:30px}
  .hero-value{font-size:21px;max-width:52ch}
  .ledger-h{font-size:clamp(88px,5.4vw,112px)}
  .ltext{font-size:23px}
  .lstat-num{font-size:52px}
  .proof-h,.scene-h{font-size:clamp(56px,3.8vw,72px)}
  .pcard-photo{height:280px}
}

/* Landschap op een lage telefoon: de fotoband vreet de vouw op. */
@media (max-height:520px) and (orientation:landscape){
  .hero-photo,.hero-grade{height:32vh;min-height:0}
  .pillnav{display:none}
}

/* ---------------------------------------------------------------- hero · drie blokken
   .hero-copy / .hero-evidence / .hero-cta-row zijn broers, zodat elk breekpunt ze
   anders kan plaatsen in plaats van dezelfde kolom te laten krimpen. */
.hero-evidence{margin-top:clamp(16px,3vw,28px)}
@media (min-width:1440px){
  /* Breed: kopij en actie links onder elkaar, het bewijs als eigen paneel rechts
     dat beide rijen overspant. De bronregels zitten er nu ín, niet eronder. */
  .hero-inner{grid-template-areas:"copy evidence" "cta evidence";
    grid-template-rows:auto auto;align-items:center}
  .hero-copy{grid-area:copy}
  .hero-cta-row{grid-area:cta;margin-top:clamp(20px,2vw,30px)}
  .hero-evidence{grid-area:evidence;margin-top:0;
    border:1px solid var(--line);background:var(--bg-2);padding:30px 32px 32px}
  .hero-evidence .hero-proof{border:0;background:none;padding:0;margin:0;display:block}
  .hero-evidence .proof-compare{margin-top:16px}
  .hero-evidence .hero-src{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
}
.ledger .ledger-h{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.4vw,88px);
  line-height:.9;letter-spacing:-.03em;margin:14px 0 18px;color:var(--on-paper)}
/* WCAG 2.5.8 — de filterknoppen zaten op 26px */
.lfilter{min-height:48px}
.lnav{min-width:44px;min-height:44px}

/* ================================================================
   RESPONSIEVE LAGEN — zes tiers, elk met een eigen compositie
     XS   ≤419   kleine telefoon · alles op één kolom, nav afgeslankt
     S    420–767 grote telefoon · rasters 2-op-een-rij waar het past
     M    768–1023 tablet        · hero onder elkaar, EPD 2-koloms
     L    1024–1439 laptop       · de getekende indeling
     XL   1440–1799 desktop      · ruimere marges, grotere kopschaal
     XXL  ≥1800  breedbeeld      · meer lucht, maatregel begrensd
   ================================================================ */

/* ---------------------------------------------------------------- XS + S · telefoon */
@media (max-width:767.98px){
  /* De nav-CTA duwde de pagina 6px breder dan het scherm. Op telefoon is de
     onderste demo-knop toch dominanter; hier volstaat het merkteken + taal. */
  .nav-in{min-height:56px;gap:12px}
  .nav-cta{padding:0 14px;font-size:13px}
  .outbound{display:none}
  .hero{padding-top:clamp(30px,7vw,48px)}
  .hero h1{margin-bottom:22px}
  .hero-grid{gap:26px}
  .hero-sub{max-width:none;font-size:17px}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{width:100%}
  .rec canvas{height:72px}
  .rec-text{min-height:78px;font-size:15px}
  .seal-row{font-size:10px;letter-spacing:.06em}
  .procure{gap:7px 16px;font-size:9.5px;letter-spacing:.1em}
  .pillar{padding:22px 0 26px}
  .pillars{border-top:0}

  .wall-split{border-left:0;border-right:0}
  .wall-in,.wall-out{padding-inline:0}

  /* filters horizontaal scrollbaar met snap in plaats van afgekapt */
  .ledger-filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .ledger-filters::-webkit-scrollbar{display:none}
  .lfilter{flex:none;scroll-snap-align:start}
  .lrow-top{flex-direction:column;align-items:flex-start;gap:2px}

}
@media (max-width:419.98px){
  :root{--pad:16px}

  .h--xl{font-size:clamp(34px,11.5vw,46px);line-height:.92}
  .pillar-n{font-size:clamp(52px,20vw,76px)}
  .nav-links{gap:8px}
  .nav-cta{font-size:12px;padding:0 11px}
}

/* ---------------------------------------------------------------- M · tablet */
@media (min-width:768px) and (max-width:1023.98px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-sub{max-width:56ch}

}

/* ---------------------------------------------------------------- XL · desktop */
@media (min-width:1440px){
  :root{--pad:clamp(56px,5vw,104px);--maxw:1440px}
  .h--xl{font-size:clamp(112px,8.4vw,168px)}
  .hero-sub{font-size:22px}
}

/* ---------------------------------------------------------------- XXL · breedbeeld */
@media (min-width:1800px){
  :root{--pad:clamp(88px,5.6vw,150px);--maxw:1560px}
  body{font-size:17.5px}
  .h--xl{font-size:clamp(150px,8vw,190px)}
  .h--md{font-size:clamp(60px,4vw,78px)}
  .pillar-n{font-size:clamp(120px,9vw,190px)}
  .lede{font-size:21px}

}

/* Landschap op een lage telefoon: beeldbanden mogen de vouw niet opeten. */
@media (max-height:520px) and (orientation:landscape){

  .dots{display:none}
}

/* ---------------------------------------------------------------- voorbehouden + bronnen
   Stond eerder als één lap klein grijs monotype onder de vergelijking. Nu twee
   even zware kolommen voor de voorbehouden en een genummerde bronnenlijst: wat
   tegen ons pleit krijgt dezelfde opmaak als wat vóór ons pleit. */
.proof2-src{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--on-paper-mute);max-width:60ch}
.legalnote{max-width:78ch;margin:clamp(26px,3vw,38px) 0 0;padding-top:18px;
  border-top:1px solid var(--rule-paper);font-size:13px;line-height:1.65;
  color:var(--on-paper-mute)}
.caveats{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(26px,3vw,38px);
  border:1px solid var(--rule-paper)}
.caveat{padding:24px 26px 28px;border-right:1px solid var(--rule-paper);
  border-left:3px solid var(--oxide)}
.caveat:last-child{border-right:0}
.caveat .lbl{color:var(--oxide);margin-bottom:12px}
.caveat p{font-size:14.5px;line-height:1.6;color:var(--on-paper-dim);max-width:46ch}
@media (max-width:820px){
  .caveats{grid-template-columns:1fr}
  .caveat{border-right:0;border-bottom:1px solid var(--rule-paper)}
  .caveat:last-child{border-bottom:0}
}

.verify{margin-top:clamp(26px,3vw,38px)}
.verify-h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--verdigris);margin-bottom:16px}
.verify-list{display:grid;gap:0;border-top:1px solid var(--rule-paper);counter-reset:v}
.verify-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;
  padding:18px 0;border-bottom:1px solid var(--rule-paper);align-items:baseline}
.verify-list .vn{grid-row:span 2;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--on-paper-mute);padding-top:2px}
.verify-list a{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-.01em;
  color:var(--on-paper);justify-self:start;border-bottom:1px solid transparent}
.verify-list a:hover{color:var(--verdigris);border-bottom-color:var(--verdigris)}
.verify-list li>span:not(.vn){font-size:14px;line-height:1.55;color:var(--on-paper-dim);max-width:70ch}
@media (min-width:1000px){
  .verify-list li{grid-template-columns:auto minmax(0,.9fr) minmax(0,1.3fr);align-items:baseline}
  .verify-list .vn{grid-row:auto}
  .verify-list li>span:not(.vn){padding-left:6px}
}
.ledger-src{margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  line-height:1.8;color:var(--on-paper-mute);max-width:96ch;opacity:.85}

/* Onder 380px passen woordmerk, taalknop en CTA niet naast elkaar. Het merkteken
   is ontworpen om alleen te staan (merkboek 02), dus daar valt het woord weg —
   de knop en de taalwissel zijn op dat formaat nuttiger dan de herhaling. */
@media (max-width:379.98px){
  .nav .lock span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
  .nav-in{gap:10px}
  .nav-cta{font-size:12px;padding:0 12px}
  .nav-lang{padding:0 9px}
}
.ledger-hint{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-paper-mute);margin-left:auto}
@media (max-width:640px){.ledger-hint{display:none}}

/* ---------------------------------------------------------------- het merkteken op schaal
   Het merkboek noemt de V zowel Vera als de trechter: breed waar het gesprek
   binnenkomt, één punt waar de vastlegging staat. Klein in de nav is dat een
   afrondinkje; hier krijgt het de maat waarop het silhouet leesbaar is.
   Vrije ruimte rondom = halve V-breedte, één vlakke kleur, geen kader. */
.seal-mark{margin-bottom:clamp(22px,3vw,34px)}
.seal-mark svg{width:clamp(84px,9vw,132px);height:auto}
.seal-mark-cap{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--patina)}
/* het woordmerk staat op kapitaalhoogte naast het teken, met één kapitaalbreedte ruimte */
.nav .lock{font-size:18px}
.foot .lock{font-size:22px}

/* ---------------------------------------------------------------- methodepagina
   Eén leeskolom op dossierpapier. Geen kaarten, geen kolommen: dit is een
   document, en het moet zich als een document gedragen. */
.doc-body{background:var(--paper)}
/* max-width telt met border-box de padding mee; 74ch liet daardoor een kolom van
   nog geen 400px over. Vaste maat plus de padding erbovenop geeft een leesbare
   regel van ~72 tekens. */
.doc{max-width:calc(760px + var(--pad) * 2);margin-inline:auto;
  padding:clamp(40px,6vw,84px) var(--pad) clamp(56px,7vw,96px);color:var(--on-paper)}
.doc-head{margin-bottom:clamp(34px,4vw,52px);padding-bottom:clamp(26px,3vw,38px);
  border-bottom:1px solid var(--rule-paper)}
.doc-head .lbl{margin-bottom:14px}
.doc-head h1{color:var(--on-paper);margin-bottom:20px}
.doc-sec{margin-top:clamp(34px,4vw,52px)}
.doc-sec h2{margin-bottom:16px;color:var(--on-paper)}
.doc p{font-size:16.5px;line-height:1.7;color:var(--on-paper-dim);margin-bottom:14px}
.doc strong{color:var(--on-paper);font-weight:600}
.doc code{font-family:var(--mono);font-size:.86em;background:#E7E3DA;padding:.12em .4em;
  word-break:break-word}
.doc-list{margin:8px 0 0;display:grid;gap:14px;counter-reset:d;list-style:none;padding:0}
.doc-list li{position:relative;padding-left:34px;font-size:16px;line-height:1.65;
  color:var(--on-paper-dim)}
ol.doc-list li{counter-increment:d}
ol.doc-list li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--verdigris)}
ul.doc-list li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:1px;
  background:var(--verdigris)}
/* het voorbehoud krijgt dezelfde opmaak als het bewijs, met een oxide-rand */
.doc-sec--caveat{border-left:3px solid var(--oxide);padding:22px 0 4px 22px;
  background:var(--paper-2);margin-inline:calc(var(--pad) * -.4)}
.doc-sec--caveat h2{color:var(--oxide)}
.doc-table{overflow-x:auto;margin:18px 0 12px;border:1px solid var(--rule-paper)}
.doc-table table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc-table th,.doc-table td{text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--rule-paper);white-space:nowrap}
.doc-table thead th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-paper-mute);background:var(--paper-2)}
.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table td.n{font-variant-numeric:tabular-nums;text-align:right}
.doc-note{font-family:var(--mono);font-size:11.5px;line-height:1.75;letter-spacing:.04em;
  color:var(--on-paper-mute);margin-top:14px}
.doc-links{display:grid;gap:16px;margin-top:14px;border-top:1px solid var(--rule-paper);padding-top:18px}
.doc-links li{display:grid;gap:3px}
.doc-links a{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--on-paper);
  justify-self:start;border-bottom:1px solid transparent}
.doc-links a:hover{color:var(--verdigris);border-bottom-color:var(--verdigris)}
.doc-links span{font-size:14.5px;line-height:1.55;color:var(--on-paper-dim)}
.doc-back{margin-top:clamp(38px,5vw,60px);padding-top:22px;border-top:1px solid var(--rule-paper)}
.doc-back a{font-family:var(--display);font-weight:800;color:var(--verdigris)}
/* De footer is voor een donker vlak getekend; op de lichte methodepagina moet
   hij zijn eigen ondergrond meebrengen, anders staat patina op papier (1,6:1). */
.doc-foot{background:var(--ink);color:var(--on-ink);padding-inline:var(--pad);
  padding-block:34px 40px;margin-top:0}
.doc-foot .foot-meta a{color:var(--patina)}
@media (max-width:560px){
  .doc-sec--caveat{margin-inline:0;padding-left:16px}
}

/* ---------------------------------------------------------------- alle zinnen
   De volledige vergelijking als statische lijst. Op de startpagina blader je
   erdoor; hier staat alles uitgeschreven, zodat het ook leesbaar en vindbaar is
   zonder JavaScript. */
.ev-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:0;
  border-top:1px solid var(--rule-paper)}
.ev-row{padding:20px 0;border-bottom:1px solid var(--rule-paper)}
.ev-tag{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--verdigris);margin-bottom:12px}
.ev-row p{margin:0 0 9px;font-size:15.5px;line-height:1.5;color:var(--on-paper)}
.ev-row p:last-child{margin-bottom:0}
.ev-lbl{display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-paper-mute);margin-bottom:3px}
.ev-lbl b{font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--on-paper-mute)}
.ev-ref{font-weight:600}
.ev-ref .ev-lbl{color:var(--on-paper)}
.ev-hyp{color:var(--on-paper-dim)}
.ev-us .ev-lbl,.ev-us .ev-lbl b{color:var(--verdigris)}

/* ---------------------------------------------------------------- juridische pagina's
   De bedrijfs- en juridische pagina's draaiden nog op het vorige systeem: een
   andere papiertoon, een andere inkt en geen serif. Ze gebruiken nu dezelfde
   .doc-kolom als de methodepagina, met opmaak voor kale h2/ul/table omdat die
   pagina's geen .doc-sec-structuur hebben. */
.doc h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);
  letter-spacing:-.025em;line-height:1.1;margin:clamp(30px,4vw,44px) 0 14px;color:var(--on-paper)}
.doc h2:first-of-type{margin-top:clamp(24px,3vw,34px)}
.doc h1{color:var(--on-paper);margin-bottom:16px}
.doc > .lbl{margin-bottom:12px}
.doc ul:not(.doc-list):not(.doc-links),
.doc ol:not(.doc-list){list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}
.doc ul:not(.doc-list):not(.doc-links) li,
.doc ol:not(.doc-list) li{position:relative;padding-left:22px;font-size:16px;
  line-height:1.65;color:var(--on-paper-dim)}
.doc ul:not(.doc-list):not(.doc-links) li::before{content:"";position:absolute;left:0;
  top:.72em;width:11px;height:1px;background:var(--verdigris)}
.doc ol:not(.doc-list){counter-reset:lg}
.doc ol:not(.doc-list) li{counter-increment:lg}
.doc ol:not(.doc-list) li::before{content:counter(lg,decimal-leading-zero);position:absolute;
  left:0;top:.1em;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--verdigris)}
.doc a{color:var(--verdigris);border-bottom:1px solid var(--rule-paper)}
.doc a:hover{border-bottom-color:var(--verdigris)}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;margin:16px 0;
  border:1px solid var(--rule-paper);display:block;overflow-x:auto}
.doc th,.doc td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule-paper);
  white-space:nowrap}
.doc th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-paper-mute);font-weight:500}
.doc tbody tr:last-child td{border-bottom:0}
.lg-meta{margin-top:clamp(34px,4vw,50px);padding-top:20px;border-top:1px solid var(--rule-paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--on-paper-mute)}
.lg-draft{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oxide);border:1px solid var(--oxide);
  padding:6px 10px;margin-bottom:18px}
/* .doc a (0,1,1) wint van .lg-cta (0,1,0), waardoor de knop verdigris-op-
   verdigris werd — onzichtbaar. Vandaar de element-selector erbij. */
.doc a.lg-cta{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;
  font-family:var(--display);font-weight:800;font-size:15px;color:var(--paper);
  background:var(--verdigris);border:0;border-bottom:0;margin:6px 0 14px}
.doc a.lg-cta:hover{background:#17493F;color:var(--paper);border-bottom:0}
.doc .ph{color:var(--oxide);border-bottom:1px dotted var(--oxide)}

/* ---------------------------------------------------------------- hoofdstukrail
   Op brede schermen schuift het sectielabel naar de linkermarge en blijft het
   plakken zolang de sectie in beeld is. De pagina krijgt daarmee een ruggengraat
   in plaats van een reeks losse koppen — het enige wat de identiteitsstudie in
   Lovable doet dat hier past. Alleen ≥1180px: daaronder is er geen marge en
   blijft het label gewoon boven de kop staan. */
@media (min-width:1180px){
  .sect > .wrap{display:grid;grid-template-columns:96px minmax(0,1fr);
    column-gap:clamp(24px,3vw,56px);align-items:start}
  .sect > .wrap > .lbl{grid-column:1;grid-row:1;position:sticky;top:96px;
    margin:6px 0 0;text-align:right;line-height:1.5}
  .sect > .wrap > :not(.lbl){grid-column:2}
  /* De bewijssectie draagt twee blokken onder één label; die moeten allebei
     in de tweede kolom blijven staan. */
  .sect > .wrap > .ledger-part{grid-column:2}
}

/* ---------------------------------------------------------------- vast merkteken
   De V als permanent grondvlak: groot, aan boven- en onderkant bijgesneden, en
   altijd aanwezig terwijl de inhoud eroverheen schuift.

   De stapeling is het hele punt. De secties dragen elk hun eigen dekkende vlak,
   dus een teken eronder zou nergens te zien zijn. Het zit daarom er BOVEN
   (z-index 2) en de leesbare inhoud er weer boven (z-index 3).

   Twee lagen, want geen enkele blend-modus werkt op beide vlakken: screen tilt
   inkt op en laat dossierpapier ongemoeid, multiply doet precies het omgekeerde.
   Zo leest het teken door de hele pagina heen, zonder onder de tekst te kruipen. */
.brandmark{position:fixed;inset:0;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.brandmark svg{position:absolute;top:50%;left:50%;width:auto;height:150vh;
  transform:translate(-50%,-50%) translateX(22%)}
/* licht op inkt: screen laat dossierpapier onaangeroerd */
.brandmark-lt{fill:#F4F2EC;opacity:.10;mix-blend-mode:screen}
/* donker op papier: multiply laat inkt onaangeroerd */
.brandmark-dk{fill:#0E1418;opacity:.055;mix-blend-mode:multiply}

/* Secties dragen hun eigen vlak onder het teken ... */
.sect,.close,.foot,.doc{position:relative;z-index:1}
/* de hero staat juist bóven het merkveld — zie 'hero' hierboven */
.hero{position:relative;z-index:3}
/* ... en hun leesbare inhoud er weer boven. */
.hero-in,.sect > .wrap,.close-in,.foot > *,.nav-in,
.hero .procure,.ledger-part,.doc-body{position:relative;z-index:3}

/* Op smalle schermen is er geen marge om het teken in te schuiven: een V die
   opzij staat toont alleen nog een been en is niet meer herkenbaar. Daarom
   gecentreerd en op de breedte geschaald, zodat het hele merk in beeld valt. */
@media (max-width:900px){
  /* De hero is op een telefoon veel hoger dan breed. Op hoogte schalen levert
     dan een wig op in plaats van een V, en midden-uitlijnen laat het teken
     achter de kopij verdwijnen. Daarom bovenaan verankerd en op breedte
     geschaald: de mond staat om de kop, de punt valt onder de knoppen. */
  .hero-mark{top:0;height:auto;width:172vw;aspect-ratio:1;
    transform:translate(-50%,0)}
  .brandmark svg{width:132vw;height:auto;transform:translate(-50%,-50%)}
  .brandmark-lt{opacity:.085}
  .brandmark-dk{opacity:.05}
}
@media (prefers-contrast:more){.brandmark{display:none}}

.scn-t{font-family:var(--serif);font-weight:600;font-size:clamp(19px,1.8vw,23px);
  letter-spacing:-.02em;line-height:1.14;color:var(--paper)}

/* ---------------------------------------------------------------- de belofte
   Eén regel die met je meeschrijft: de woorden verschijnen terwijl je scrolt,
   alsof de pagina zelf vastlegt. Dit is het enige typografische intermezzo —
   geen beeld, geen kader, alleen de zin. */
.mani{background:var(--ink);color:var(--paper);
  padding:clamp(90px,16vh,180px) var(--pad);position:relative;z-index:1}
.mani-line{max-width:var(--maxw);margin-inline:auto;
  font-family:var(--serif);font-weight:500;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(38px,6.4vw,104px);text-wrap:balance}
.mani-line .mw{opacity:.13;transition:opacity .45s linear}
.mani-line .mw.on{opacity:1}
@media (prefers-reduced-motion:reduce){.mani-line .mw{opacity:1;transition:none}}

/* ---------------------------------------------------------------- demoformulier
   De aanvraag hoort bij de belofte: geen externe formulierdienst, geen POST
   naar een vreemde server. Het formulier stelt alleen een mail samen — de
   teller in de nav blijft bewijsbaar op nul. */
.demoform{width:min(460px,100%);justify-self:end;border:1px solid var(--rule-ink-2);
  background:var(--ink-2);padding:clamp(20px,2.4vw,30px)}
.df-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.df-field{display:grid;gap:7px}
.df-field--full{grid-column:1/-1}
.df-field span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--patina)}
.df-field input,.df-field select,.df-field textarea{font:inherit;font-size:15px;
  color:var(--paper);background:var(--ink);border:1px solid var(--rule-ink-2);
  padding:11px 12px;border-radius:0;width:100%;appearance:none;-webkit-appearance:none}
.df-field textarea{resize:vertical;min-height:64px}
.df-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A9C6BC' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.df-field input:focus,.df-field select:focus,.df-field textarea:focus{
  outline:0;border-color:var(--verdigris)}
.df-field input:user-invalid{border-color:var(--oxide)}
.df-actions{margin-top:16px}
.df-actions .btn{width:100%}
.df-note{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  line-height:1.7;color:var(--on-ink-mute)}
.df-note a{color:var(--patina);border-bottom:1px solid var(--rule-ink-2)}
.df-note[data-state="ok"]{color:var(--patina)}
.df-note[data-state="err"]{color:var(--oxide)}
@media (max-width:860px){.demoform{justify-self:stretch;width:100%}}
@media (max-width:560px){.df-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- signature-interactie
   Het 'out of the box'-moment binnen het merkboek: geen glow, geen schaduw,
   alleen transformatie. Het zegel en het opnameblok kantelen mee met de muis —
   het papier wordt even fysiek. De primaire knop komt de cursor tegemoet.
   Alles alleen bij fijne pointers en zonder verminderde beweging (zie v5.js). */
@media (hover:hover) and (pointer:fine){
  [data-tilt]{transition:transform .16s ease-out;will-change:transform}
  [data-mag]{transition:transform .25s var(--ease)}
}
@media (prefers-reduced-motion:reduce){
  [data-tilt],[data-mag]{transition:none!important;transform:none!important}
}

/* 404: hier in plaats van inline style-attributen, zodat de CSP geen 'unsafe-inline' nodig heeft */
.nf{min-height:64vh;display:flex;align-items:center}
.nf-h{color:var(--paper);margin:14px 0 18px}
.nf-btns{margin-top:26px}

/* ---------------------------------------------------------------- scènes
   Minder scrollen, meer diepte. Een scène is een hoge sectie met één podium dat
   vastpint (sticky) terwijl de stappen erin op hun plek wisselen. Drie lagen
   bewegen elk op hun eigen snelheid: beeld traag, rooster half, tekst volledig.

   Pinnen gebeurt alleen onder html.scenes-on, die v5.js zet op een scherm dat
   breed en hoog genoeg is en zonder verminderde beweging. Zonder die klasse —
   smal scherm, geen JS, reduced motion — staan de stappen gewoon onder elkaar
   en is dit een gewone, kortere pagina. --p is de voortgang door de scène,
   --sp die door de actieve stap; beide 0..1, gezet door v5.js. */
.scene{position:relative;z-index:1}
.stage{position:relative;overflow:hidden;padding:var(--sect) 0}
.step{position:relative;padding:0 var(--pad)}
.step+.step{margin-top:clamp(56px,7vw,96px)}
.step-body{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto}
.stage-back,.stage-nav{display:none}
.scene-at{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

.step-title{color:var(--paper);margin:14px 0 clamp(20px,3vw,32px);max-width:16ch}
.step-cap{display:grid;gap:10px;max-width:46ch}
.step-cap .lbl{color:var(--patina)}
.step-cap .scn-t{font-size:clamp(24px,2.6vw,36px);line-height:1.08;color:var(--paper)}
.step-cap p{font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:var(--on-ink-dim)}
.step-ph{margin:0 calc(var(--pad) * -1) clamp(22px,3vw,34px);overflow:hidden;
  aspect-ratio:16/9;background:var(--ink)}
.step-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04)}

/* de muur draagt nu ook de drie cijfers: op marine is patina het accent */
.wall .pillar-n{color:var(--patina)}
.wall .pillar-t{color:var(--paper)}
.wall .pillar p{color:var(--on-ink-dim)}

/* ---- gepind */
.scenes-on .scene{height:calc(100svh + var(--n) * 40svh);overflow:visible}
.scene--2{--n:2}
.scene--3{--n:3}
.scenes-on .stage{position:sticky;top:0;height:100svh;padding:0}
.scenes-on .step{position:absolute;inset:0;margin:0;pointer-events:none;
  padding:clamp(84px,12vh,120px) var(--pad) clamp(64px,10vh,96px);
  display:flex;flex-direction:column;justify-content:center}
.scenes-on .step.is-on{pointer-events:auto}
.scenes-on .step-body{width:100%;opacity:0;transform:translate3d(0,48px,0);
  transition:opacity .6s var(--ease),transform 1s var(--ease)}
.scenes-on .step.is-on .step-body{opacity:1;transform:none}
.scenes-on .step.is-past .step-body{transform:translate3d(0,-48px,0)}

/* beeldstappen: het beeld van een eerdere stap blijft liggen, het nieuwe valt
   eroverheen; binnen de stap zoomt het beeld traag in met --sp */
.scenes-on .step--photo{justify-content:flex-end}
.scenes-on .step-ph{position:absolute;inset:0;margin:0;aspect-ratio:auto;
  opacity:0;transition:opacity .9s var(--ease)}
.scenes-on .step.is-on .step-ph,.scenes-on .step.is-past .step-ph{opacity:1}
.scenes-on .step-ph img{transform:scale(calc(1.16 - var(--sp,0) * .12)) translate3d(0,calc(var(--sp,0) * -2%),0)}
.scenes-on .step-ph::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.68}
.scenes-on .step--photo .step-cap p{color:var(--on-ink)}

/* achterste laag: traag; rooster: half */
.scenes-on .stage-back{display:block;position:absolute;inset:-14% 0;z-index:0;opacity:.16;
  transform:translate3d(0,calc((var(--p,0) - .5) * -16%),0)}
.stage-back img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35)}
.scenes-on .wall canvas{z-index:1;transform:translate3d(0,calc((var(--p,0) - .5) * -6%),0) scale(1.08)}

.scenes-on .stage-nav{display:flex;align-items:center;gap:14px;position:absolute;z-index:3;
  left:var(--pad);bottom:clamp(20px,4vh,36px);list-style:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--on-ink-mute)}
.stage-nav li{transition:color .3s var(--ease)}
.stage-nav li.is-on{color:var(--paper)}
.stage-bar{width:clamp(80px,12vw,180px);height:1px;background:var(--rule-ink-2);position:relative;overflow:hidden}
.stage-bar i{position:absolute;inset:0;background:var(--patina);transform-origin:left;transform:scaleX(var(--p,0))}

/* diepte in de hero: het teken zakt trager weg dan de tekst */
[data-depth]{translate:0 var(--dy,0px)}


/* ---------------------------------------------------------------- waarom · horizontaal spoor
   Basis (geen JS, reduced motion, laag scherm): een gewone veegrij met
   scroll-snap. Onder .htrack.is-pinned pint het podium en schuift v5.js het spoor
   opzij terwijl de bezoeker verticaal scrolt. Per paneel zet v5.js --d (positie
   t.o.v. het midden, -1..1) en --a (|d|); het cijfer, de vraag en de
   achtergrondletters bewegen daarop elk met hun eigen factor. */
.htrack{position:relative;z-index:1;background:var(--paper);color:var(--on-paper)}
.ht-stage{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:var(--pad);
  padding:var(--sect) 0 clamp(70px,9vh,96px)}
.ht-stage::-webkit-scrollbar{display:none}
.ht-track{display:flex;width:max-content;padding-inline:var(--pad);position:relative;z-index:1}
.ht-panel{scroll-snap-align:start;flex:0 0 auto;width:clamp(290px,30vw,470px);overflow:hidden;
  padding:clamp(20px,2.4vw,40px) clamp(22px,2.6vw,44px);border-left:1px solid var(--rule-paper);
  display:flex;flex-direction:column;gap:clamp(12px,1.6vh,20px)}
.ht-panel--intro{width:clamp(300px,44vw,700px);border-left:0;padding-left:0;justify-content:center}
.ht-panel--intro .h{color:var(--marine);max-width:12ch}
.ht-panel--intro .lede{color:var(--on-paper-dim);max-width:44ch}
.ht-hint{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--verdigris)}
.ht-role{color:var(--verdigris)}
.ht-q{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.3vw,36px);line-height:1.08;
  letter-spacing:-.02em;color:var(--marine);max-width:14ch}
.ht-fig{font-size:clamp(60px,6.2vw,118px);line-height:.84;color:var(--verdigris);
  display:flex;flex-direction:column;gap:10px;margin:clamp(6px,2vh,24px) 0 0;white-space:nowrap}
.ht-fig--wide{font-size:clamp(46px,4.4vw,84px)}
.ht-fig small{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-paper-mute)}
.ht-a{font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.55;color:var(--on-paper-dim);max-width:38ch}
.ht-panel--cta{background:var(--ink);color:var(--on-ink);border-left:0;
  --rule-paper:var(--rule-ink-2)}
.ht-panel--cta .ht-role,.ht-panel--cta .ht-fig{color:var(--patina)}
.ht-panel--cta .ht-q{color:var(--paper)}
.ht-panel--cta .ht-a{color:var(--on-ink-dim)}
.ht-panel--cta .ht-fig small{color:var(--on-ink-mute)}
.ht-panel--cta .btns{margin-top:6px}
.ht-back{position:absolute;left:0;bottom:clamp(40px,9vh,90px);z-index:0;margin:0;white-space:nowrap;pointer-events:none;
  font-family:var(--display);font-weight:900;font-size:clamp(90px,17vw,300px);line-height:1;
  letter-spacing:-.04em;color:var(--marine);opacity:.035;transform:translate3d(var(--bx,0px),0,0)}
.ht-meta{display:none}
.ht-foot{position:relative;z-index:1;background:var(--paper);padding:0 var(--pad) clamp(30px,4vw,48px)}
.ht-legal{max-width:var(--maxw);margin:0 auto}

/* ---- gepind */
.htrack.is-pinned{height:var(--ht-h,auto)}
.is-pinned .ht-stage{position:sticky;top:0;height:100svh;overflow:hidden;scroll-snap-type:none;
  padding:0;display:flex;align-items:center}
.is-pinned .ht-track{height:100%;align-items:stretch;will-change:transform;
  padding-top:clamp(72px,10vh,96px);padding-bottom:clamp(56px,9vh,84px)}
.is-pinned .ht-panel{justify-content:flex-start;padding-top:clamp(28px,7vh,72px)}

.is-pinned .ht-fig,.is-pinned .ht-depth{transform:translate3d(calc(var(--d,0) * -32px),0,0)}
.is-pinned .ht-q{transform:translate3d(calc(var(--d,0) * 14px),0,0)}
.is-pinned .ht-panel>*{opacity:calc(1 - var(--a,0) * .5)}
.is-pinned .ht-meta{display:flex;align-items:center;gap:14px;position:absolute;z-index:2;
  left:var(--pad);bottom:clamp(18px,3.5vh,32px);font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--on-paper-mute)}
.ht-bar{width:clamp(80px,14vw,200px);height:1px;background:var(--rule-paper);position:relative;overflow:hidden}
.ht-bar i{position:absolute;inset:0;background:var(--verdigris);transform-origin:left;transform:scaleX(var(--hp,0))}

@media (max-width:760px){
  .ht-panel{width:84vw}
  .ht-panel--intro{width:88vw}
  .ht-fig{font-size:clamp(58px,19vw,96px)}
  .ht-fig--wide{font-size:clamp(44px,14vw,70px)}
}

/* bar onderin: teller, voortgang en een demoknop die het hele spoor meeloopt */
.ht-meta{align-items:center}
.ht-cta{font-family:var(--display);font-weight:800;font-size:13px;color:var(--verdigris);
  border-bottom:1px solid currentColor;padding-bottom:2px;margin-left:clamp(8px,2vw,24px)}
.ht-cta::after{content:" →"}
.ht-cta:hover{color:var(--marine)}

/* ---- bewijsspoor: bredere panelen, en de bestaande blokken zonder hun rasterranden */
.ht-panel--wide{width:clamp(300px,40vw,620px)}
.ht-panel--xl{width:clamp(320px,56vw,860px)}
.ht-panel .proof2-pane{padding:0;border:0}
.ht-panel .ledger-stats{grid-template-columns:1fr;border:0;margin:0}
.ht-panel .lstat{border-right:0;border-bottom:1px solid var(--rule-paper);padding:18px 0 20px}
.ht-panel .lstat:last-child{border-bottom:0}
.ht-panel .caveats{grid-template-columns:1fr;margin:0}
.ht-panel .caveat{border-right:0;border-bottom:1px solid var(--rule-paper)}
.ht-panel .caveat:last-child{border-bottom:0}
.ht-panel .verify{margin:0}
.ht-panel .qa2{grid-template-columns:1fr;margin-top:6px}
.ht-panel--buy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:clamp(24px,3vw,48px);align-content:start}
.ht-panel--buy .buy-head{display:flex;flex-direction:column;gap:14px}
.ht-panel--buy .qa2{margin-top:0}
.ht-panel--buy .qa2-item summary{padding:13px 0}
@media (max-width:900px){.ht-panel--buy{display:flex}.ht-panel--buy .qa2{margin-top:10px}}
.ht-panel--buy .qa2-item h3{font-size:clamp(17px,1.4vw,20px)}
.ht-panel .ledger-src{margin-top:4px}
.ht-panel.ledger-head{max-width:none}
.ht-panel .ledger-h{margin:6px 0 10px}
/* gepind kan een paneel hoger zijn dan het podium (zinsvergelijk, open
   inkoopvragen): dan scrolt dat ene paneel verticaal, het spoor niet */
.is-pinned .ht-panel{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
.htrack--proof .ht-stage{align-items:flex-start}
.htrack--proof .ht-track{align-items:flex-start}
.htrack--proof.is-pinned .ht-track{align-items:stretch}
@media (max-width:760px){
  .ht-panel--wide,.ht-panel--xl{width:88vw}
  .ht-cta{display:none}
}

/* ---- één leeslijn en één tekstmaat in de sporen
   Elk paneel: label, titel, inhoud — op dezelfde hoogte begonnen. Lopende tekst
   overal 15px/1.6, labels 11px, voetnoten 13px; geen kader-in-kader. */
.ht-panel .lbl{font-size:11px}
.ht-panel .proof2-note,.ht-panel .caveat p,.ht-panel .verify-list li>span:not(.vn),
.ht-panel .qa2-item p,.ht-panel .lstat-lab,.ht-panel .ht-a,.ht-panel .ledger-lead{
  font-size:15px;line-height:1.6;max-width:44ch}
.ht-panel .proof2-src,.ht-panel .ledger-src,.ht-legal{font-size:13px;line-height:1.6}
.ht-panel .proof2-pane .lbl,.ht-panel .caveat .lbl{margin-bottom:16px}
.ht-panel .caveats{border:0}
.ht-panel .caveat{padding:0 0 22px 18px;margin-bottom:22px}
.ht-panel .caveat:last-child{margin-bottom:0}
.ht-panel .verify-h{margin-bottom:12px}
.ht-panel .verify-list li{grid-template-columns:auto minmax(0,1fr)!important;align-items:start;padding:14px 0}
.ht-panel .verify-list .vn{grid-row:span 2!important}
.ht-panel .verify-list li>span:not(.vn){padding-left:0!important}
.ht-panel .verify-list a{font-size:18px}
.ht-panel .verify-list li>span:not(.vn){max-width:64ch}
.ht-panel .ledger-src{font-size:11px;line-height:1.55;max-width:none}
.ht-panel .lstat-num{font-size:clamp(34px,3.4vw,52px)}
.ht-panel--cta .ht-fig{margin-top:clamp(10px,2vh,22px)}

/* ---------------------------------------------------------------- ter plekke · groot en levend
   Het onderschrift is hier het beeld: de kop groot, woord voor woord uit een
   masker omhoog zodra de stap aan de beurt is; label en tekst volgen een tel
   later. Binnen de stap drijft het onderschrift tegen de inzoom van de foto in
   (--sp), en een groot stapnummer erachter op een eigen snelheid. */
.step--photo .step-title{font-size:clamp(20px,2vw,30px);font-style:italic;letter-spacing:-.01em;
  max-width:none;margin:10px 0 clamp(26px,5vh,56px);color:var(--patina)}
.step--photo .step-cap{gap:clamp(10px,1.6vh,18px);max-width:min(100%,58rem)}
.step--photo .step-cap .lbl{font-size:12px;letter-spacing:.22em}
.step--photo .step-cap .scn-t{font-size:clamp(34px,5.6vw,98px);line-height:.98;letter-spacing:-.035em;
  max-width:15ch;font-weight:500}
.step--photo .step-cap p{font-size:clamp(17px,1.5vw,23px);line-height:1.5;max-width:40ch}
.step-num{display:none}

.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wm>span{display:inline-block}

.scenes-on .step-num{display:block;position:absolute;z-index:1;right:var(--pad);bottom:clamp(40px,8vh,90px);
  font-family:var(--display);font-weight:900;font-size:clamp(140px,22vw,380px);line-height:.8;
  letter-spacing:-.05em;color:var(--paper);opacity:0;pointer-events:none;
  transform:translate3d(0,calc(60px - var(--sp,0) * 120px),0);transition:opacity 1s var(--ease)}
.scenes-on .step.is-on .step-num{opacity:.07}
.scenes-on .step--photo .step-cap{transform:translate3d(0,calc(var(--sp,0) * -44px),0)}
.scenes-on .step--photo .wm>span{transform:translate3d(0,108%,0);
  transition:transform 1s var(--ease) calc(.12s + var(--i,0) * 60ms)}
.scenes-on .step--photo.is-on .wm>span{transform:none}
.scenes-on .step--photo .step-cap .lbl,.scenes-on .step--photo .step-title{opacity:0;letter-spacing:.5em;
  transition:opacity .8s var(--ease),letter-spacing 1.2s var(--ease)}
.scenes-on .step--photo .step-title{letter-spacing:.06em}
.scenes-on .step--photo.is-on .step-cap .lbl{opacity:1;letter-spacing:.22em}
.scenes-on .step--photo.is-on .step-title{opacity:1;letter-spacing:-.01em}
.scenes-on .step--photo .step-cap p{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s var(--ease) .55s,transform .9s var(--ease) .55s}
.scenes-on .step--photo.is-on .step-cap p{opacity:1;transform:none}

/* ---------------------------------------------------------------- leesbaarheid · ondergrens
   Formulierlabels, de privacyregel onder het formulier en de wettelijke
   bedrijfsgegevens moeten echt gelezen worden: overal minimaal 12px. Op
   telefoon en tablet gaan ook de mono-labels en de inkoopregel omhoog. */
.df-field span{font-size:12px}
.df-note,.foot-meta{font-size:12px;line-height:1.6}
@media (max-width:900px){
  .lbl,.lrow-name,.ledger-src,.seal-row,.seal-mark-cap,.foot-claim{font-size:11.5px}
  .procure span{font-size:11px}
  .hero-re{font-size:12px}
}

/* lage laptopschermen (≤ 860 px hoog): het bewijsspoor iets compacter, zodat
   zinsvergelijk, narekenen en inkoop elk in hun paneel passen */
@media (max-height:860px){
  .htrack--proof.is-pinned .ht-track{padding-top:66px;padding-bottom:50px}
  .htrack--proof.is-pinned .ht-panel{padding-top:14px;padding-bottom:14px;gap:10px}
  .htrack--proof .ledger-card{padding:16px 20px}
  .htrack--proof .verify-list li{padding:9px 0}
  .htrack--proof .verify-list li>span:not(.vn){font-size:14px;line-height:1.5}
  .ht-panel--buy .qa2-item summary{padding:10px 0}
  .ht-panel--buy .lede{font-size:15px}
  .is-pinned .ht-panel--buy{padding-top:14px}
}

/* tablets: bredere panelen in de sporen; portret: de leeslijn lager, zodat de
   inhoud niet tegen de bovenrand hangt met een halve lege pagina eronder */
@media (min-width:761px) and (max-width:1100px){
  .ht-panel{width:46vw}
  .ht-panel--intro{width:72vw}
  .ht-panel--wide{width:62vw}
  .ht-panel--xl{width:84vw}
  .ht-q{font-size:clamp(26px,3.4vw,38px)}
  .ht-a{font-size:16px}
}
@media (orientation:portrait){
  .is-pinned .ht-panel{padding-top:clamp(28px,14vh,170px)}
  .htrack--proof.is-pinned .ht-panel,.is-pinned .ht-panel--buy{padding-top:clamp(20px,6vh,72px)}
}

/* ---------------------------------------------------------------- verhaal · één achtergrond
   Geen harde randen tussen hoofdstukken. Met JS schilderen de hoofdstukken hun
   eigen vlak niet meer; één vaste achtergrondlaag kleurt rustig mee met het
   hoofdstuk dat het midden van het scherm passeert (data-tone): inkt, dieper
   naar marine, langzaam licht naar papier voor het bewijs, en weer avond voor
   de uitnodiging. Op elk moment één effen kleur — geen verloop. Zonder JS
   houden de secties hun eigen vlak. De hero blijft dekkend: zijn eigen V moet
   het enige teken in beeld zijn. */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ink);
  transition:background-color .25s linear}
.has-backdrop :is(.scene,.mani,.htrack,.ht-foot,.close){background:transparent}
/* De muur lost aan het eind op in de ochtend: beeld en rooster doven over het
   laatste kwart van de scène uit, zodat er geen rand achterblijft tegen de
   lichter wordende achtergrond. */
.has-backdrop.scenes-on .wall .stage-back{opacity:calc(.16 * min(1, (1 - var(--p,0)) * 4))}
.has-backdrop.scenes-on .wall canvas{opacity:calc(.5 * min(1, (1 - var(--p,0)) * 4))}

/* telefoon/tablet: voettekstlinks en het logo als echte duimdoelen (≥ 44 px) */
@media (max-width:900px){
  .foot-links a{display:inline-block;padding:11px 0}
  .nav .lock{min-height:44px;display:inline-flex;align-items:center}
}