/* ==========================================================================
   Akadea — stylesheet
   Tokens exact uit DESIGN.md §12. Niets toevoegen wat daar niet staat,
   behalve afgeleiden die expliciet als zodanig gemarkeerd zijn.
   ========================================================================== */

:root{
  /* Kleur */
  --ink:#152C3A; --teal:#2F6F6D; --brass:#C48A48;
  --paper:#F5F2EA; --card:#FFFFFF; --text:#161B22; --muted:#6B6A63; --line:#E0DCCF;
  --g0:#CFD3D2; --g1:#9DBDBA; --g2:#63938F; --g3:#2F6F6D;

  /* Afgeleiden voor tekst op inkt (contrast-eis §1: teal op ink = 2,4:1 en dus
     niet toegestaan als tekst; --g1 op ink = 7,0:1). */
  --on-ink:#F5F2EA;
  --on-ink-muted:rgba(245,242,234,.74);
  --on-ink-line:rgba(245,242,234,.16);
  --on-ink-accent:var(--g1);

  /* Type */
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display:clamp(40px, 7.4vw, 72px);
  --fs-h1:clamp(31px, 5.2vw, 44px);
  --fs-h2:clamp(25px, 3.6vw, 32px);
  --fs-h3:22px;
  --fs-lede:clamp(18px, 1.6vw, 21px);
  --fs-body:18px; --fs-meta:15px; --fs-eyebrow:12px;

  /* Ruimte & vorm */
  --maxw:1120px; --section-gap:96px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --radius-card:16px; --radius-input:12px; --radius-btn:10px; --radius-img:12px;
  --shadow-artifact:0 1px 0 rgba(21,44,58,.04), 0 12px 28px -12px rgba(21,44,58,.18);
}

@media (max-width:760px){ :root{ --section-gap:64px; } }

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg{max-width:100%;display:block;}
button,input,textarea,select{font:inherit;color:inherit;}

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- typografie ----------------------------------------------------------- */
h1,h2,h3,.belofte{font-family:var(--serif);color:var(--ink);font-weight:700;}
h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.015em;text-wrap:balance;}
h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.01em;text-wrap:balance;}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.005em;font-weight:600;}
p{text-align:left;}                       /* nooit justified — §2 */

.display{font-family:var(--serif);font-weight:700;color:var(--ink);text-wrap:balance;
  font-size:var(--fs-display);line-height:1.05;letter-spacing:-.02em;}
.lede{font-size:var(--fs-lede);line-height:1.5;max-width:60ch;}
.meta{font-size:var(--fs-meta);color:var(--muted);line-height:1.5;}
.data,.score{font-variant-numeric:tabular-nums lining-nums;font-weight:700;}
.measure{max-width:66ch;}

.eyebrow{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;
  line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);
  margin:0 0 var(--sp-4);
}

/* --- links & knoppen ------------------------------------------------------ */
a{color:var(--teal);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}

.link{color:var(--teal);font-weight:600;display:inline-flex;align-items:baseline;gap:.45em;}
.link .arw{transition:transform .18s ease;}
.link:hover .arw{transform:translateX(3px);}

.btn{
  display:inline-block;font-family:var(--sans);font-size:16px;font-weight:600;
  line-height:1.2;padding:14px 22px;border-radius:var(--radius-btn);
  border:1px solid var(--ink);background:var(--ink);color:var(--card);
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:#0F2230;border-color:#0F2230;text-decoration:none;}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:rgba(21,44,58,.06);border-color:var(--ink);color:var(--ink);}

/* op inkt */
.band--ink .btn{background:var(--paper);border-color:var(--paper);color:var(--ink);}
.band--ink .btn:hover{background:#fff;border-color:#fff;}
.band--ink .btn--ghost{background:transparent;color:var(--on-ink);border-color:rgba(245,242,234,.42);}
.band--ink .btn--ghost:hover{background:rgba(245,242,234,.08);border-color:var(--on-ink);}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);align-items:center;}

/* --- toegankelijkheid ----------------------------------------------------- */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px;}
.band--ink :focus-visible{outline-color:var(--g1);}
.skip{
  position:absolute;left:var(--sp-4);top:-100px;z-index:99;
  background:var(--card);color:var(--ink);padding:12px 18px;border-radius:var(--radius-btn);
  border:1px solid var(--line);font-weight:600;transition:top .15s ease;
}
.skip:focus{top:var(--sp-4);text-decoration:none;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* --- layout --------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-6);}
@media (min-width:760px){ .wrap{padding-inline:var(--sp-8);} }

.band{padding-block:var(--section-gap);}
.band--ink{background:var(--ink);color:var(--on-ink);}
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink .display{color:var(--on-ink);}
.band--ink .eyebrow{color:var(--on-ink-accent);}
.band--ink .meta{color:var(--on-ink-muted);}
.band--ink .when{color:var(--on-ink-accent);}
.band--ink .phases__list p,.band--ink .phases__note{color:var(--on-ink-muted);}
.band--ink .card{background:transparent;border-color:var(--on-ink-line);}
.band--ink a{color:var(--on-ink-accent);}
.band--ink .link{color:var(--on-ink-accent);}


/* Sectiekop: eyebrow + kop + optionele lede, links uitgelijnd. */
.sec-head{max-width:620px;}
.sec-head p{margin-top:var(--sp-4);}
.sec-head + .measure{margin-top:var(--sp-6);}

/* ==========================================================================
   Navigatie — transparante bovenbalk in het inkt-veld, geen schaduw (§5)
   ========================================================================== */
.nav{padding-block:var(--sp-6);}
.nav .wrap{display:flex;align-items:center;gap:var(--sp-8);}
.nav__links{display:flex;gap:var(--sp-6);margin-inline:auto;flex-wrap:wrap;}
.nav__links a{
  color:var(--on-ink-muted);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.01em;padding-block:4px;
}
.nav__links a:hover{color:var(--on-ink);text-decoration:none;}
.nav__links a[aria-current="page"]{
  color:var(--on-ink);box-shadow:inset 0 -1px 0 var(--on-ink-accent);
}
.nav .btn{padding:10px 18px;font-size:15px;}
/* Telefoon naast de CTA: bereikbaar maar fluisterstil (§5). Geen knop, geen
   schaduw — alleen een hairline die bij hover oplicht. */
.nav__tel{
  font-size:var(--fs-meta);font-weight:600;color:var(--on-ink-muted);
  white-space:nowrap;padding-block:4px;
  box-shadow:inset 0 -1px 0 var(--on-ink-line);
}
.nav__tel:hover{color:var(--on-ink);text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--on-ink-accent);}

/* Woordmerk-lockup. Het teken is bijgesneden tot de tekening, dus met
   align-items:baseline staan de bogen op dezelfde grondlijn als de letters.
   Kleine letter: de hoogte van het teken is afgestemd op de stokhoogte van
   de k en de d, niet op de x-hoogte, anders zweeft het woord los. */
.wordmark{
  display:inline-flex;align-items:baseline;gap:.34em;
  color:var(--on-ink);font-size:23px;
}
.wordmark:hover{text-decoration:none;}
.wordmark__name{
  font-family:var(--serif);font-weight:700;font-size:1em;letter-spacing:-.005em;
  color:inherit;line-height:1;
}
/* 0.80em = 1,09x de stokhoogte van de k (0,731em): net dominant, niet torenend. */
.wordmark__mark{flex:none;height:.80em;width:auto;align-self:baseline;}
.mark__arch{stroke:currentColor;}
.mark__key{fill:var(--brass);}
/* In de footer staat het woordmerk zonder teken: dezelfde boogvorm twee keer
   op één pagina is een dubbeling, geen systeem. */
.wordmark--plain{gap:0;}

/* Nav-toggle (mobiel) */
.nav__toggle{
  display:none;background:transparent;border:1px solid rgba(245,242,234,.42);
  color:var(--on-ink);border-radius:var(--radius-btn);padding:8px 14px;
  font-size:15px;font-weight:600;cursor:pointer;margin-left:auto;
}
@media (max-width:880px){
  .nav__toggle{display:inline-block;}
  .nav .wrap{flex-wrap:wrap;gap:var(--sp-4);}
  .nav__links{
    display:none;order:3;flex-basis:100%;flex-direction:column;gap:0;margin:0;
    border-top:1px solid var(--on-ink-line);padding-top:var(--sp-2);
  }
  .nav__links.is-open{display:flex;}
  .nav__links a{padding-block:12px;border-bottom:1px solid var(--on-ink-line);}
  /* De telefoon blijft naast de Menu-knop staan en klapt niet mee in. */
  .nav__tel{order:2;margin-left:auto;font-size:14px;}
  .nav__toggle{order:3;}
  .nav__cta{order:4;flex-basis:100%;display:none;padding-top:var(--sp-2);}
  .nav__cta.is-open{display:block;}
  .nav__cta .btn{width:100%;text-align:center;}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding-top:var(--sp-16);padding-bottom:var(--sp-20);}
.hero .display{margin-top:var(--sp-2);}
.hero h1{max-width:15em;}
.hero .lede{margin-top:var(--sp-6);color:var(--on-ink-muted);max-width:52ch;}
.hero .btn-row{margin-top:var(--sp-12);}
@media (max-width:760px){ .hero{padding-top:var(--sp-8);padding-bottom:var(--sp-16);} }

/* De schaal als structureel element: de vier niveaus in publiekstaal,
   in de gradatie --g0 -> --g3. Codeert iets waars, is geen decoratie (§11). */
.scale{margin-top:var(--sp-20);border-top:1px solid var(--on-ink-line);padding-top:var(--sp-6);}
.scale__legend{
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-meta);color:var(--on-ink-muted);margin-bottom:var(--sp-4);
}
.scale__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);}
.scale__steps .seg{display:block;height:8px;border-radius:2px;background:var(--c);
  margin-bottom:var(--sp-3);}
.scale__steps .lbl{font-size:13px;line-height:1.35;color:var(--on-ink-muted);}
@media (max-width:700px){
  .scale{margin-top:var(--sp-16);}
  /* De vier labels dragen de betekenis al; de tweede legendaregel is op mobiel
     alleen ruis. */
  .scale__legend span + span{display:none;}
  .scale__steps{grid-template-columns:1fr;gap:var(--sp-3);}
  .scale__steps li{display:grid;grid-template-columns:52px 1fr;gap:var(--sp-4);align-items:center;}
  .scale__steps .seg{margin-bottom:0;}
}

/* ==========================================================================
   Data-artefact — het enige element met elevatie (§5)
   ========================================================================== */
.artifact{
  background:var(--card);border-radius:var(--radius-img);
  box-shadow:var(--shadow-artifact);padding:var(--sp-8);
  border:1px solid var(--line);
}
@media (max-width:520px){ .artifact{padding:var(--sp-6);} }

.artifact__head{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);
  align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-6);
}
.artifact__title{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
}
.artifact__note{font-size:13px;color:var(--muted);}

.legend{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6);}
.legend li{display:flex;align-items:center;gap:8px;font-size:var(--fs-meta);color:var(--text);}
.legend .key{width:14px;height:14px;border-radius:3px;flex:none;}
.legend .key--base{background:var(--g0);border:1px solid #b9bebd;}
.legend .key--now{background:rgba(47,111,109,.16);border:1.5px solid var(--g3);}

/* Radar */
.radar{width:100%;max-width:520px;height:auto;margin-inline:auto;}
.radar .ring{fill:none;stroke:#EDE9DE;stroke-width:1;}
.radar .ring--outer{stroke:var(--line);}
.radar .spoke{stroke:#EDE9DE;stroke-width:1;}
.radar .poly--base{fill:var(--g0);fill-opacity:.55;stroke:#a9afae;stroke-width:1.5;
  stroke-dasharray:4 3;}
.radar .poly--now{fill:var(--g3);fill-opacity:.16;stroke:var(--g3);stroke-width:2;
  stroke-linejoin:round;}
.radar .dot{fill:var(--g3);}
.radar .axis-label{
  font-family:var(--sans);font-size:12.5px;font-weight:600;fill:var(--text);
}

/* Annotatie naast de data — verplicht, geen kale grafiek (§7) */
.annot{display:flex;flex-direction:column;gap:var(--sp-6);}
.annot li{border-left:2px solid var(--g1);padding-left:var(--sp-4);}
.annot .when{
  display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:6px;
  font-variant-numeric:tabular-nums lining-nums;
}
.annot p{font-size:var(--fs-meta);line-height:1.55;}
.annot .who{display:block;margin-top:8px;font-size:13px;color:var(--muted);}

.artifact-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--sp-12);align-items:center;margin-top:var(--sp-12);
}
@media (max-width:900px){
  .artifact-grid{grid-template-columns:1fr;gap:var(--sp-8);}
}

/* ==========================================================================
   Rail — drie deuren / opsommingen zonder kaarten
   ========================================================================== */
.rail{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:var(--sp-12);border-top:1px solid var(--line);
}
.rail > li{padding:var(--sp-8) var(--sp-8) var(--sp-6) 0;border-right:1px solid var(--line);}
.rail > li:last-child{border-right:0;}
.rail > li:not(:first-child){padding-left:var(--sp-8);}
.rail h3{margin-bottom:var(--sp-3);}
.rail p{font-size:var(--fs-meta);color:var(--text);margin-bottom:var(--sp-6);}
.rail .link{font-size:var(--fs-meta);}
.band--ink .rail{border-color:var(--on-ink-line);}
.band--ink .rail > li{border-color:var(--on-ink-line);}
.band--ink .rail p{color:var(--on-ink-muted);}
@media (max-width:860px){
  .rail{grid-template-columns:1fr;}
  .rail > li{border-right:0;border-bottom:1px solid var(--line);padding:var(--sp-6) 0;}
  .rail > li:not(:first-child){padding-left:0;}
  .rail > li:last-child{border-bottom:0;}
  .band--ink .rail > li{border-color:var(--on-ink-line);}
}

/* ==========================================================================
   Gedragingen — genummerde editorial lijst (01–06), geen icoonkaarten
   ========================================================================== */
.behav{
  margin-top:var(--sp-12);display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--sp-16);
}
.behav > li{
  padding-block:var(--sp-6);border-top:1px solid var(--on-ink-line);
  display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-6);align-items:start;
}
.behav--plain > li{grid-template-columns:1fr;}
.behav .idx{
  font-variant-numeric:tabular-nums lining-nums;font-weight:700;font-size:var(--fs-meta);
  color:var(--on-ink-accent);letter-spacing:.04em;padding-top:5px;
}
.behav h3{font-size:19px;font-weight:600;margin-bottom:6px;}
.behav p{font-size:var(--fs-meta);color:var(--on-ink-muted);}
.behav .from-to{display:block;}
.behav .from-to b{color:var(--on-ink);font-weight:600;}
.behav__close{margin-top:0;padding-top:var(--sp-8);border-top:1px solid var(--on-ink-line);}

/* Papierversie van dezelfde lijst */
.behav--paper{margin-top:var(--sp-12);border-bottom:1px solid var(--line);}
.behav--paper > li{border-top-color:var(--line);}
.behav--paper .idx{color:var(--teal);}
.behav--paper h3{color:var(--ink);}
.behav--paper p{color:var(--text);}
@media (max-width:860px){ .behav{grid-template-columns:1fr;} }

/* ==========================================================================
   Fasebalk — intensief -> monitoring -> afbouw
   ========================================================================== */
.phases{margin-top:var(--sp-12);}
.phases__bar{display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:3px;}
.phases__bar span{height:10px;border-radius:2px;}
.phases__list{
  display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:3px;margin-top:var(--sp-6);
}
.phases__list > li{padding-right:var(--sp-8);}
.phases__list h3{font-size:19px;font-weight:600;margin-bottom:var(--sp-2);}
.phases__list .when{
  display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:8px;
}
.phases__list p{font-size:var(--fs-meta);color:var(--text);}
.phases__note{margin-top:var(--sp-8);font-size:var(--fs-meta);color:var(--muted);}
@media (max-width:860px){
  /* De boog-iconen dragen de progressie al; de gestapelde balk is dan dubbelop. */
  .phases__bar{display:none;}
  .phases__list{grid-template-columns:1fr;gap:var(--sp-8);}
  .phases__list > li{padding-right:0;}
}

/* ==========================================================================
   Verdeling — gestapelde balken per gedraging (gemeente/stichting)
   ========================================================================== */
.dist{margin-top:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-6);}
.dist__row h3{font-size:16px;font-weight:600;font-family:var(--sans);color:var(--text);
  margin-bottom:var(--sp-3);}
.dist__pair{display:flex;flex-direction:column;gap:6px;}
.dist__line{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:var(--sp-4);}
.dist__line > .lbl{font-size:13px;color:var(--muted);}
.dist__stack{display:flex;height:22px;border-radius:3px;overflow:hidden;background:var(--paper);}
.dist__stack span{
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;
  min-width:0;overflow:hidden;white-space:nowrap;
}
.dist__key{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);margin-top:var(--sp-8);
  border-top:1px solid var(--line);padding-top:var(--sp-6);
}
.dist__key li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);}
.dist__key .key{width:14px;height:14px;border-radius:3px;flex:none;border:1px solid rgba(21,44,58,.12);}
@media (max-width:640px){
  .dist__line{grid-template-columns:1fr;gap:4px;}
  .dist__line > .lbl{font-size:12.5px;}
}

/* ==========================================================================
   De eerlijke grens — het enige messing-moment per pagina (§1, §11)
   ========================================================================== */
.limit{border-top:2px solid var(--brass);padding-top:var(--sp-8);}
.limit__cols{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);margin-top:var(--sp-8);
}
.limit__cols h3{font-family:var(--serif);font-size:var(--fs-h3);font-weight:700;
  margin-bottom:var(--sp-4);}
.limit__cols ul{display:flex;flex-direction:column;gap:var(--sp-3);}
.limit__cols li{
  font-size:var(--fs-meta);padding-left:var(--sp-6);position:relative;line-height:1.5;
}
.limit__cols li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:1.5px;background:var(--teal);
}
.limit__cols .no li{color:var(--muted);}
.limit__cols .no li::before{background:var(--muted);}
.limit__close{margin-top:var(--sp-8);}
@media (max-width:760px){ .limit__cols{grid-template-columns:1fr;gap:var(--sp-8);} }

/* ==========================================================================
   Kaart / lijstjes
   ========================================================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--sp-8);}
.stack{display:flex;flex-direction:column;gap:var(--sp-4);}
.ticks{display:flex;flex-direction:column;gap:var(--sp-4);}
.ticks li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-meta);}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1.5px;
  background:var(--teal);}
.band--ink .ticks li::before{background:var(--on-ink-accent);}
.band--ink .ticks li{color:var(--on-ink-muted);}
.band--ink .ticks li b{color:var(--on-ink);font-weight:600;}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-16);
  align-items:start;}
.split--lead{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
@media (max-width:900px){ .split,.split--lead{grid-template-columns:1fr;gap:var(--sp-8);} }

/* ==========================================================================
   CTA + footer
   ========================================================================== */
.cta h2{max-width:560px;}
.cta p{margin-top:var(--sp-6);color:var(--on-ink-muted);max-width:52ch;}
.cta .btn-row{margin-top:var(--sp-8);}

.foot{background:var(--ink);color:var(--on-ink-muted);padding-block:var(--sp-12);
  border-top:1px solid var(--on-ink-line);font-size:var(--fs-meta);}
.foot a{color:var(--on-ink-muted);}
.foot a:hover{color:var(--on-ink);}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-8);}
.foot h3{font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-accent);
  margin-bottom:var(--sp-4);}
.foot ul{display:flex;flex-direction:column;gap:var(--sp-3);}
.foot__note{margin-top:var(--sp-12);padding-top:var(--sp-6);
  border-top:1px solid var(--on-ink-line);display:flex;flex-wrap:wrap;gap:var(--sp-4);
  justify-content:space-between;font-size:13.5px;}
.foot p{max-width:44ch;margin-top:var(--sp-4);}
@media (max-width:1000px){ .foot__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8);} }
@media (max-width:640px){ .foot__grid{grid-template-columns:1fr;gap:var(--sp-8);} }

/* ==========================================================================
   Formulier
   ========================================================================== */
.form{display:grid;gap:var(--sp-6);}
.field label{display:block;font-size:var(--fs-meta);font-weight:600;margin-bottom:var(--sp-2);}
.field .hint{display:block;font-size:13.5px;color:var(--muted);font-weight:400;margin-bottom:var(--sp-2);}
.field input,.field textarea,.field select{
  width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-input);padding:12px 14px;font-size:16px;color:var(--text);
}
.field textarea{min-height:120px;resize:vertical;}
/* Twee korte keuzevelden op één regel; ze horen bij elkaar en kosten samen
   minder aandacht dan onder elkaar. */
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);}
@media (max-width:640px){ .field-pair{grid-template-columns:1fr;} }
.field input:hover,.field textarea:hover,.field select:hover{border-color:#cec9ba;}
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
.choice label{
  display:block;border:1px solid var(--line);background:var(--card);
  border-radius:var(--radius-input);padding:14px 16px;cursor:pointer;font-weight:600;
  font-size:var(--fs-meta);
}
.choice label .sub{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:4px;}
.choice input{position:absolute;opacity:0;width:1px;height:1px;}
.choice input:checked + span,.choice label:has(input:checked){border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);}
.choice label:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:3px;}
@media (max-width:640px){ .choice{grid-template-columns:1fr;} }
.field fieldset{border:0;padding:0;margin:0;}
.field legend{font-size:var(--fs-meta);font-weight:600;margin-bottom:var(--sp-2);padding:0;}
.form__status{font-size:var(--fs-meta);}
.form__note{font-size:13.5px;color:var(--muted);}
/* De geruststelling hoort bij de knop, niet in een kolom ernaast: daar zit de
   aarzeling. Hairline erboven, zodat het bij de knop hoort en niet bij het
   laatste veld. */
.form__assure{
  margin-top:calc(var(--sp-3) * -1);padding-top:var(--sp-4);
  border-top:1px solid var(--line);display:grid;gap:var(--sp-2);
}
.form__assure p{font-size:13.5px;color:var(--muted);margin:0;}
.form__assure__when{font-weight:600;color:var(--teal);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__status[data-state="error"]{color:var(--ink);font-weight:600;}

/* ==========================================================================
   Motion — één beweging op de hele site, en alleen als die iets betekent.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

@media print{
  .nav,.cta,.foot{display:none;}
  body{background:#fff;}
}

/* --- aanvullingen --------------------------------------------------------- */

/* Twee papiersecties na elkaar worden gescheiden door een hairline, niet door
   een kleurvlak — dat houdt het rustig en voorkomt een lappendeken. */
.band--divided{padding-top:0;}
.band--divided > .wrap{border-top:1px solid var(--line);padding-top:var(--section-gap);}
.band--ink.band--divided > .wrap{border-color:var(--on-ink-line);}

/* De schaal binnen een data-artefact (papierversie van .scale) */
.scale--paper{margin-top:var(--sp-8);border-top:1px solid var(--line);padding-top:var(--sp-6);}
.scale--paper .scale__legend{color:var(--muted);margin-bottom:var(--sp-3);}
.scale--paper .scale__steps .lbl{color:var(--muted);font-size:12.5px;}

/* Zwevend artefact krijgt op inkt een lichte rand i.p.v. schaduw */
.band--ink .artifact{border-color:rgba(21,44,58,.2);}

/* ==========================================================================
   REVISIE — nieuwe componenten
   Structuur uit de Refero-research (Anthropic: contained inversion, split hero,
   underline-nadruk; Operate: inset-hairline op het data-artefact). Kleur, font
   en vormtaal blijven exact DESIGN.md.
   ========================================================================== */

/* --- Split hero: kop links, de wending rechts -----------------------------
   Breekt het "elke kop links uitgelijnd en even lang"-ritme. */
.hero--split .hero__grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:var(--sp-16);align-items:start;
}
.hero--split .hero__turn{padding-top:var(--sp-3);}
.hero--split .hero__turn p{color:var(--on-ink-muted);font-size:var(--fs-body);max-width:38ch;}
.hero--split .btn-row{margin-top:var(--sp-12);}
@media (max-width:900px){
  .hero--split .hero__grid{grid-template-columns:1fr;gap:var(--sp-8);}
  .hero--split .hero__turn{padding-top:0;}
}

/* --- Nadruk op één kernwoord ---------------------------------------------
   Onderstreping in dezelfde kleur als de tekst, nooit een kleurwissel: een
   accentwoord in een afwijkende kleur is precies de decoratieve slop-tell. */
.mark{
  text-decoration:underline;
  text-decoration-thickness:.075em;
  text-underline-offset:.1em;
  text-decoration-skip-ink:none;
}

/* --- Contained inversion --------------------------------------------------
   Donker is een oppervlak binnen het papierveld, geen achtergrond die de
   pagina overneemt. Het papier kijkt om alle vier de hoeken heen. */
.inversion{
  background:var(--ink);color:var(--on-ink);
  border-radius:24px;padding:var(--sp-16) var(--sp-12);
}
.inversion h2,.inversion h3{color:var(--on-ink);}
.inversion .eyebrow{color:var(--on-ink-accent);}
.inversion .meta{color:var(--on-ink-muted);}
.inversion .ticks li{color:var(--on-ink-muted);}
.inversion .ticks li::before{background:var(--on-ink-accent);}
.inversion .ticks li b{color:var(--on-ink);font-weight:600;}
.inversion .measure{color:var(--on-ink-muted);}
@media (max-width:760px){
  .inversion{border-radius:16px;padding:var(--sp-12) var(--sp-6);}
}

/* --- Routering: volle-breedte regels, geen kaartenrij ----------------------
   Drie deuren zijn echt drie, maar ze hoeven geen gelijke kolommen te zijn.
   Als gestapelde regels lezen ze als een inhoudsopgave.
   Het publiekslabel staat vóór de quote: een bezoeker scant op zijn eigen
   categorie, niet op andermans woorden. De quote is de toelichting. */
.routes{border-top:1px solid var(--line);margin-top:var(--sp-12);}
.routes > li{border-bottom:1px solid var(--line);}
.routes a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8);
  align-items:center;padding:var(--sp-8) var(--sp-4);color:inherit;text-decoration:none;
  margin-inline:calc(var(--sp-4) * -1);border-radius:8px;
  transition:background-color .18s ease;
}
.routes a:hover,.routes a:focus-visible{text-decoration:none;background:rgba(21,44,58,.035);}
.routes .route__text{display:block;}
.routes .who{
  display:block;font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(21px,2.4vw,28px);line-height:1.2;letter-spacing:-.008em;
}
.routes .say{
  display:block;margin-top:var(--sp-2);
  font-size:var(--fs-body);line-height:1.5;color:var(--muted);
  max-width:44ch;text-wrap:pretty;
}
/* Zichtbare knop-affordance, geometrie van de ghost-knop (§5): afgeronde
   rechthoek van 10px, hairline, geen pill. */
.routes .route__go{
  display:inline-flex;align-items:center;gap:var(--sp-3);white-space:nowrap;
  font-size:var(--fs-meta);font-weight:600;color:var(--ink);
  border:1px solid var(--ink);border-radius:var(--radius-btn);
  padding:10px 18px;
  transition:background-color .18s ease,color .18s ease;
}
.routes a:hover .route__go,.routes a:focus-visible .route__go{
  background:var(--ink);color:var(--paper);
}
.routes a:hover .arw{transform:translateX(3px);}
@media (max-width:700px){
  .routes a{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-6) var(--sp-4);}
  .routes .say{max-width:none;}
  .routes .route__go{justify-self:start;}
}

/* --- De sturingsmeter: twee metingen, niet één meetlat ---------------------
   De ouderversie van het profiel. Eerder stond hier de kale schaal — vier
   even lange balken — en dat is een legenda, geen meting. Nu staan er twee
   metingen onder elkaar op dezelfde vier stappen: de nulmeting en de latere
   meting, met een verbinding ertussen die de sprong toont. De balklengte ís
   de uitspraak; de gradatie g0→g3 blijft de betekenis van de stap dragen.

   De verbinding rekent op stap-randen: de rand ná stap n ligt op n/4 van de
   breedte. Daarom heeft de track geen gap maar een scheiding ín de stap
   (border-right), zodat die randen exact blijven kloppen. */
.shift{
  background:var(--card);border-radius:var(--radius-img);
  /* Zelfde UI-frame als .artifact: een 1px hairline plus precies één
     micro-schaduw. De hairline zat hier eerder ín de box-shadow, waardoor rand
     en elevatie in dezelfde declaratie zaten. Nu zijn het twee eigenschappen,
     net als op .artifact — maar getekend als outline met offset -1px, zodat de
     lijn geen ruimte reserveert en het artefact exact zijn maat houdt. Een
     border zou 2px aan de sectiehoogte toevoegen. */
  outline:1px solid var(--line);
  outline-offset:-1px;
  box-shadow:var(--shadow-artifact);
  padding:var(--sp-8);
}
.shift__q{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:var(--fs-h3);line-height:1.3;margin-bottom:var(--sp-8);max-width:34ch;
}
.shift__when{
  font-size:13px;font-weight:700;line-height:1.3;color:var(--muted);
  margin:0 0 var(--sp-2);
}
.shift__when--now{color:var(--teal);}
.shift__track{
  display:grid;grid-template-columns:repeat(4,1fr);
  list-style:none;margin:0;padding:0;
}
.shift__track li{
  height:12px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--line);
  border-right:2px solid var(--card);
}
.shift__track li:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px;}
.shift__track li:last-child{
  border-right:0;border-top-right-radius:2px;border-bottom-right-radius:2px;
}
.shift__track li.on{background:var(--c);box-shadow:none;}

/* De sprong: van de rand ná --from naar de rand ná --to. */
.shift__gap{position:relative;height:30px;}
.shift__link{
  position:absolute;top:50%;
  left:calc(var(--from) / 4 * 100%);
  right:calc(100% - var(--to) / 4 * 100%);
  border-top:2px solid var(--teal);
}
.shift__link::before{
  content:"";position:absolute;left:0;top:-9px;width:2px;height:18px;
  background:var(--teal);
}
.shift__link::after{
  content:"";position:absolute;right:-1px;top:-5px;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:9px solid var(--teal);
}
.shift__axis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);
  list-style:none;margin:var(--sp-3) 0 0;padding:0;
}
.shift__axis li{font-size:13px;line-height:1.35;color:var(--muted);padding-right:var(--sp-2);}
.shift__note{
  margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--line);
}
.shift__note p{font-size:var(--fs-meta);line-height:1.55;}
.shift__note .who{display:block;margin-top:var(--sp-2);font-size:13px;color:var(--muted);}
.shift__caption{margin-top:var(--sp-4);font-size:13px;color:var(--muted);}
@media (max-width:640px){
  .shift{padding:var(--sp-6);}
  /* De aslabels blijven vier kolommen, ook als het krap wordt: een label onder
     twee segmenten koppelt de betekenis aan de verkeerde stap. Liever smal en
     afgebroken dan verkeerd uitgelijnd. */
  .shift__axis{gap:0;}
  .shift__axis li{
    font-size:11.5px;line-height:1.3;padding-right:6px;
    hyphens:manual;overflow-wrap:break-word;
  }
  .shift__gap{height:26px;}
}

/* --- Momenten: ongelijke kolommen i.p.v. een 3-koloms kaartenrij ---------- */
.moments{border-top:1px solid var(--line);margin-top:var(--sp-12);max-width:860px;}
.moments > li{
  border-bottom:1px solid var(--line);padding:var(--sp-8) 0;
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:var(--sp-12);
}
.moments h3{margin:0;max-width:22ch;text-wrap:balance;}
.moments p{font-size:var(--fs-meta);color:var(--text);}
@media (max-width:760px){
  .moments > li{grid-template-columns:1fr;gap:var(--sp-3);padding:var(--sp-6) 0;}
  .moments h3{max-width:none;}
}

/* --- Terzijde onder de hero-CTA ------------------------------------------
   Eén regel die zegt waar de knop op uitkomt, zodat de stap kleiner voelt dan
   hij oogt. Bewust klein en gedempt: het is geruststelling, geen belofte. */
.hero__aside{
  margin-top:var(--sp-4);max-width:46ch;
  font-size:var(--fs-meta);color:var(--on-ink-muted);
}

/* --- Stappen: een echte volgorde, dus nummering is hier wél waar ---------- */
.steps{counter-reset:stap;display:flex;flex-direction:column;gap:var(--sp-6);}
.steps > li{
  position:relative;background:var(--card);border-radius:var(--radius-card);
  padding:var(--sp-6) var(--sp-8);color:var(--text);
}
.steps > li::before{
  counter-increment:stap;content:counter(stap);
  position:absolute;right:var(--sp-6);top:var(--sp-6);
  font-variant-numeric:tabular-nums lining-nums;font-weight:700;
  font-size:var(--fs-meta);color:var(--g1);
}
.steps__when{
  display:block;font-size:var(--fs-eyebrow);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--teal);margin-bottom:var(--sp-2);
}
.steps h3{margin:0 0 var(--sp-2);font-size:var(--fs-h3);color:var(--ink);}
.steps p{font-size:var(--fs-meta);color:var(--text);margin:0;}
@media (max-width:640px){
  .steps > li{padding:var(--sp-6);}
  .steps > li::before{position:static;display:block;margin-bottom:var(--sp-2);}
}

/* --- Twee sectoren naast elkaar: primair en voortgezet -------------------- */
.sectors{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-8);margin-top:var(--sp-12);
}
.sectors article{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:var(--sp-8);
}
.sectors h3{margin:0 0 var(--sp-4);font-size:var(--fs-h3);}
.sectors p{font-size:var(--fs-meta);}
.sectors .ticks{margin-top:var(--sp-6);}
.sectors__note{margin-top:var(--sp-6);padding-top:var(--sp-4);
  border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;}

/* --- Veelgestelde vragen -------------------------------------------------
   Eén <details> per vraag: open zonder JS, doorzoekbaar, en de antwoorden
   staan in de bron voor wie ze niet openklikt. */
.faq{border-top:1px solid var(--line);margin-top:var(--sp-12);max-width:860px;}
.faq > li{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--sp-6) var(--sp-8) var(--sp-6) 0;
  position:relative;font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:var(--fs-h3);line-height:1.3;text-wrap:balance;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:6px;top:calc(var(--sp-6) + .5em);
  width:9px;height:9px;border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.faq summary:hover{color:var(--teal);}
.faq__body{padding-bottom:var(--sp-8);max-width:64ch;}
.faq__body p{font-size:var(--fs-meta);}
.faq__body p + p{margin-top:var(--sp-4);}
.band--ink .faq{border-color:var(--on-ink-line);}
.band--ink .faq > li{border-color:var(--on-ink-line);}
.band--ink .faq summary{color:var(--on-ink);}
.band--ink .faq__body p{color:var(--on-ink-muted);}

/* --- Lopende tekst op leesmaat ------------------------------------------- */
.prose{max-width:62ch;}
.prose p + p{margin-top:var(--sp-6);}
.prose b{font-weight:600;color:var(--ink);}

/* --- De belofte als slotregel, niet als kopregel -------------------------- */
.promise{
  font-family:var(--serif);font-weight:700;color:var(--on-ink);
  font-size:clamp(34px,5vw,52px);line-height:1.1;letter-spacing:-.018em;
}

/* ==========================================================================
   VISUELE UPGRADE
   Vormtaal afgeleid van het merkteken: concentrische bogen, radius-verhouding
   4:3:2, stroke = halve tussenruimte, butt caps, brass sluitsteen als trapezium.
   Referentie-lock: Syllabus (teal als paneelvlak, blueprint-ondergrond,
   technische lijndiagrammen) + Integrated Biosciences (dramatische donkere
   momenten, accent-als-label). Kleur/font/radii blijven DESIGN.md.
   ========================================================================== */

/* --- Het merkteken -------------------------------------------------------- */
/* Groot boogmotief als rustig visueel anker per sectie */
.archmark{width:64px;height:64px;color:var(--ink);}
.band--ink .archmark,.inversion .archmark,.panel--teal .archmark{color:var(--on-ink);}

/* --- Boogveld: het hero-motief, afgeleid van het merk ---------------------
   Ligt achter de hero, bloedt rechts af, fluistert. Geen decoratieve vulling:
   het is hetzelfde teken, uitvergroot. */
.arcfield{
  position:absolute;right:-260px;top:52%;transform:translateY(-46%);
  width:720px;height:720px;pointer-events:none;z-index:0;
  color:rgba(245,242,234,.085);
}
.arcfield path{stroke:currentColor;fill:none;stroke-width:10;stroke-linecap:butt;}
.arcfield .key{fill:none;stroke:rgba(196,138,72,.42);stroke-width:6;}
.hero{position:relative;overflow:hidden;}
.hero > *:not(.arcfield){position:relative;z-index:1;}
@media (max-width:1100px){ .arcfield{right:-320px;opacity:.7;} }
@media (max-width:760px){ .arcfield{display:none;} }

/* --- Teal paneel: teal als dragend vlak, niet als lijntje -----------------
   DESIGN.md §11: "anker elke sectie in ink- of teal-structuur". Wit op
   --teal haalt 5,81:1. */
.panel--teal{
  background:var(--teal);color:#fff;border-radius:24px;
  padding:var(--sp-16) var(--sp-12);
}
.panel--teal h2,.panel--teal h3{color:#fff;}
.panel--teal .eyebrow{color:rgba(255,255,255,.90);}
.panel--teal p{color:rgba(255,255,255,.90);}
.panel--teal .meta{color:rgba(255,255,255,.88);}
.panel--teal .ticks li{color:rgba(255,255,255,.90);}
.panel--teal .ticks li::before{background:rgba(255,255,255,.75);}
.panel--teal .ticks li b{color:#fff;font-weight:600;}
/* Datakaarten binnen een teal-vlak houden hun eigen papierkleuren: anders
   erven ze wit-op-wit en verdwijnt de tekst. */
.panel--teal .shift,.panel--teal .artifact,.panel--teal .steps > li,
.inversion .shift,.inversion .artifact{color:var(--text);}
.panel--teal .shift p,.panel--teal .artifact p,.panel--teal .steps p,
.inversion .shift p,.inversion .artifact p{color:var(--text);}
.panel--teal .steps h3{color:var(--ink);}
.panel--teal .shift .shift__caption,.panel--teal .shift .who,
.panel--teal .shift .shift__when,.panel--teal .shift .shift__axis li,
.panel--teal .artifact .artifact__note,
.inversion .shift .shift__caption,.inversion .shift .who,
.inversion .shift .shift__when,.inversion .shift .shift__axis li,
.inversion .artifact .artifact__note{color:var(--muted);}
.panel--teal .shift .shift__when--now,
.inversion .shift .shift__when--now{color:var(--teal);}
.panel--teal .shift .shift__q,.inversion .shift .shift__q{color:var(--ink);}
.panel--teal .artifact .artifact__title{color:var(--teal);}

.panel--teal .btn{background:#fff;border-color:#fff;color:var(--teal);}
.panel--teal .btn:hover{background:var(--paper);border-color:var(--paper);}
.panel--teal :focus-visible{outline-color:#fff;}
@media (max-width:760px){ .panel--teal{border-radius:16px;padding:var(--sp-12) var(--sp-6);} }

/* --- De sluitsteen als label ---------------------------------------------
   Brass keert terug zoals het merk het gebruikt: één klein trapezium-label,
   nooit een vlak. Max één per pagina, naast het teken in de navigatie. */
.keystone{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.keystone::before{
  content:"";width:22px;height:13px;flex:none;background:var(--brass);
  clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);
}
.band--ink .keystone,.inversion .keystone{color:var(--on-ink);}
.panel--teal .keystone{color:#fff;}

/* --- Blueprint-ondergrond onder data -------------------------------------
   Fijne liniatuur, zoals een archiefblad. Fluistert; nooit ruis. */
.blueprint{
  background-image:repeating-linear-gradient(
    to bottom, transparent 0, transparent 27px,
    rgba(21,44,58,.045) 27px, rgba(21,44,58,.045) 28px);
}

/* --- Cijfer-callouts ------------------------------------------------------
   Alleen structurele feiten (zes gedragingen, drie fasen). Nooit verzonnen
   prestatiecijfers — DESIGN.md §10 verbiedt folkloristische cijfers. */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);
  border-top:1px solid var(--line);margin-top:var(--sp-12);padding-top:var(--sp-8);
}
.stats .num{
  font-family:var(--serif);font-weight:700;color:var(--teal);
  font-size:clamp(38px,4.6vw,56px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;display:block;
}
.stats .lbl{display:block;margin-top:var(--sp-3);font-size:var(--fs-meta);color:var(--text);
  max-width:26ch;}
.band--ink .stats{border-color:var(--on-ink-line);}
.band--ink .stats .num{color:var(--on-ink-accent);}
.band--ink .stats .lbl{color:var(--on-ink-muted);}
@media (max-width:760px){ .stats{grid-template-columns:1fr;gap:var(--sp-6);} }

/* --- Pull-quote: proza opbreken ------------------------------------------
   Geen gekleurde zijrand: dat is de bekendste AI-tell. Schaal, maat en lucht
   doen het werk. */
.pull{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(23px,3.1vw,33px);line-height:1.28;letter-spacing:-.012em;
  max-width:24ch;margin-block:var(--sp-16);text-wrap:balance;
}
.band--ink .pull,.inversion .pull{color:var(--on-ink);}
.panel--teal .pull{color:#fff;}
.pull cite{display:block;margin-top:var(--sp-4);font-family:var(--sans);font-size:13px;
  font-weight:400;font-style:normal;color:var(--muted);letter-spacing:0;}
.band--ink .pull cite,.inversion .pull cite{color:var(--on-ink-muted);}

/* --- Iconografische stappen: de boog die zich afbouwt --------------------
   Fase 1 draagt drie bogen, fase 3 nog één. De stelling verdwijnt, de eigen
   boog blijft staan. Hetzelfde verhaal als het traject. */
.phases__list .archicon{display:block;width:64px;height:64px;margin-bottom:var(--sp-4);}
.archicon path{fill:none;stroke-width:3.5;stroke-linecap:butt;}
.archicon .a1{stroke:var(--g1);}
.archicon .a2{stroke:var(--g2);}
.archicon .a3{stroke:var(--g3);}
.band--ink .archicon .a1{stroke:rgba(157,189,186,.55);}
.band--ink .archicon .a2{stroke:var(--g1);}
.band--ink .archicon .a3{stroke:#BFD6D3;}

/* --- Progressive disclosure ---------------------------------------------- */
.disclose{border-top:1px solid var(--line);margin-top:var(--sp-8);}
.disclose > summary{
  list-style:none;cursor:pointer;padding-block:var(--sp-6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  font-weight:600;color:var(--teal);font-size:var(--fs-meta);
}
.disclose > summary::-webkit-details-marker{display:none;}
.disclose > summary::after{
  content:"";width:10px;height:10px;flex:none;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.disclose[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.disclose__body{padding-bottom:var(--sp-8);}
.band--ink .disclose{border-color:var(--on-ink-line);}
.band--ink .disclose > summary{color:var(--on-ink-accent);}

/* --- Data-als-held: schaalvergroting -------------------------------------- */
.artifact--hero{padding:var(--sp-12);}
.artifact--hero .radar{max-width:620px;}
.shift--hero{padding:var(--sp-12);max-width:900px;margin-inline:auto;}
.shift--hero .shift__q{font-size:clamp(22px,2.6vw,30px);max-width:40ch;}
.shift--hero .shift__track li{height:16px;}
.shift--hero .shift__axis li{font-size:14px;}
.shift--hero .shift__when{font-size:14px;}
.shift--hero .shift__gap{height:38px;}
@media (max-width:760px){
  .artifact--hero,.shift--hero{padding:var(--sp-6);}
}

/* --- Scroll-onthulling van data ------------------------------------------
   Progressive enhancement: zonder JS staan de balken er gewoon. Pas als JS
   .can-grow zet, worden ze ingeklapt en groeien ze bij het in beeld komen.
   Zo verdwijnt de data nooit als er iets misgaat. */
@media (prefers-reduced-motion:no-preference){
  [data-grow].can-grow .shift__track,
  [data-grow].can-grow .dist__stack span,
  [data-grow].can-grow .scale__steps .seg,
  [data-grow].can-grow .phases__bar span{
    transform:scaleX(0);transform-origin:left center;
    transition:transform .7s cubic-bezier(.22,.8,.28,1);
  }
  [data-grow].can-grow.is-in .shift__track,
  [data-grow].can-grow.is-in .dist__stack span,
  [data-grow].can-grow.is-in .scale__steps .seg,
  [data-grow].can-grow.is-in .phases__bar span{transform:scaleX(1);}

  /* De latere meting komt ná de nulmeting in beeld, en de sprong pas als
     beide er staan. Dat is de volgorde van het verhaal. */
  [data-grow].can-grow .shift__track--now{transition-delay:.18s}
  [data-grow].can-grow .shift__link{
    opacity:0;transition:opacity .45s ease .55s;
  }
  [data-grow].can-grow.is-in .shift__link{opacity:1;}
  [data-grow].can-grow .scale__steps li:nth-child(2) .seg{transition-delay:.06s}
  [data-grow].can-grow .scale__steps li:nth-child(3) .seg{transition-delay:.12s}
  [data-grow].can-grow .scale__steps li:nth-child(4) .seg{transition-delay:.18s}
  [data-grow].can-grow .phases__bar span:nth-child(2){transition-delay:.08s}
  [data-grow].can-grow .phases__bar span:nth-child(3){transition-delay:.16s}
  [data-grow].can-grow .dist__row:nth-child(2) .dist__stack span{transition-delay:.05s}
  [data-grow].can-grow .dist__row:nth-child(3) .dist__stack span{transition-delay:.10s}
  [data-grow].can-grow .dist__row:nth-child(4) .dist__stack span{transition-delay:.15s}
  [data-grow].can-grow .dist__row:nth-child(5) .dist__stack span{transition-delay:.20s}
  [data-grow].can-grow .dist__row:nth-child(6) .dist__stack span{transition-delay:.25s}
}


/* ==========================================================================
   Ritmebrekers — twee ongelijke kolommen i.p.v. de derde drieslag
   ========================================================================== */

/* Eén dragend blok links, de rest compact rechts. */
.leadsplit{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:var(--sp-16);margin-top:var(--sp-12);
  border-top:1px solid var(--line);padding-top:var(--sp-8);
}
.leadsplit__lead h3{
  font-family:var(--serif);font-size:var(--fs-h2);font-weight:700;
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);
  max-width:16ch;text-wrap:balance;
}
.leadsplit__lead p{margin-top:var(--sp-6);max-width:46ch;}
.leadsplit__rest{display:flex;flex-direction:column;gap:var(--sp-6);}
.leadsplit__rest li{border-top:1px solid var(--line);padding-top:var(--sp-6);}
.leadsplit__rest li:first-child{border-top:0;padding-top:0;}
.leadsplit__rest h3{font-size:17px;font-weight:600;margin-bottom:var(--sp-2);}
.leadsplit__rest p{font-size:var(--fs-meta);color:var(--muted);}
@media (max-width:880px){
  .leadsplit{grid-template-columns:1fr;gap:var(--sp-8);}
  .leadsplit__lead p{max-width:none;}
}

/* Volle-breedte stelling, daaronder twee kolommen die haar onderbouwen. */
.leadstack{margin-top:var(--sp-12);}
.leadstack__claim{
  font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(26px,3.6vw,40px);line-height:1.18;letter-spacing:-.014em;
  max-width:20ch;text-wrap:balance;
  border-top:1px solid var(--line);padding-top:var(--sp-8);
}
.leadstack__claim + p{max-width:52ch;margin-top:var(--sp-6);}
.leadstack__cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);
  margin-top:var(--sp-12);border-top:1px solid var(--line);padding-top:var(--sp-8);
}
.leadstack__cols h3{font-size:18px;font-weight:600;margin-bottom:var(--sp-3);}
.leadstack__cols p{font-size:var(--fs-meta);color:var(--text);}
@media (max-width:760px){
  .leadstack__cols{grid-template-columns:1fr;gap:var(--sp-8);}
}

/* --- FAQ per publiek ------------------------------------------------------
   Hergebruikt de bestaande disclose-component; alleen de bundeling is nieuw. */
.faq{margin-top:var(--sp-12);max-width:820px;}
.faq .disclose{margin-top:0;}
.faq .disclose:last-child{border-bottom:1px solid var(--line);}
.faq .disclose > summary{font-family:var(--sans);font-size:17px;color:var(--ink);}
.faq .disclose[open] > summary{color:var(--teal);}
.faq .disclose__body{max-width:64ch;}
.faq .disclose__body p + p{margin-top:var(--sp-4);}

/* --- Meetkader: de vier niveaus per gedraging, naleesbaar -----------------
   Alleen op de voorbeeldrapportage. In de marketingflow blijft de 0-3-schaal
   uit beeld (DESIGN.md §8); hier staat hij er juist omdat een controleur moet
   kunnen nalezen waarop is beoordeeld. */
.levels{display:flex;flex-direction:column;gap:var(--sp-12);margin-top:var(--sp-12);}
.levels__axis{border-top:1px solid var(--line);padding-top:var(--sp-6);}
.levels__axis h3{font-family:var(--serif);font-size:var(--fs-h3);font-weight:600;color:var(--ink);}
.levels__rows{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6);}
.levels__row{display:grid;grid-template-columns:28px 1fr;gap:var(--sp-4);align-items:start;}
.levels__n{
  width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  font-weight:700;font-size:13px;font-variant-numeric:tabular-nums lining-nums;
  background:var(--c);color:var(--fg);
}
.levels__row p{font-size:var(--fs-meta);line-height:1.55;}
.levels__key{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);
  margin-top:var(--sp-8);border-top:1px solid var(--line);padding-top:var(--sp-8);
}
.levels__key div{display:flex;flex-direction:column;gap:var(--sp-3);}
.levels__key .lbl{font-size:var(--fs-meta);font-weight:600;color:var(--ink);}
.levels__key p{font-size:13.5px;color:var(--muted);line-height:1.5;}
@media (max-width:760px){ .levels__key{grid-template-columns:1fr;gap:var(--sp-6);} }

/* ==========================================================================
   Scholen-oplossingen: hub-rail, keuzehulp en de samengestelde intro
   ========================================================================== */

/* Editorial rail voor de vier oplossingen. Geen 4-koloms kaartenrij: gestapelde
   regels met een betekenisdragend metalabel (voor wie de oplossing bedoeld is). */
.solutions{border-top:1px solid var(--line);margin-top:var(--sp-12);}
.solutions > li{border-bottom:1px solid var(--line);}
.solutions a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8);
  align-items:center;padding:var(--sp-8) var(--sp-4);
  margin-inline:calc(var(--sp-4) * -1);border-radius:8px;
  color:inherit;text-decoration:none;transition:background-color .18s ease;
}
.solutions a:hover,.solutions a:focus-visible{background:rgba(21,44,58,.035);text-decoration:none;}
.solutions .for{
  display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-3);
}
.solutions h3{font-size:var(--fs-h3);margin-bottom:var(--sp-2);}
.solutions p{font-size:var(--fs-meta);color:var(--text);max-width:56ch;}
.solutions .go{
  white-space:nowrap;font-size:var(--fs-meta);font-weight:600;color:var(--ink);
  border:1px solid var(--ink);border-radius:var(--radius-btn);padding:10px 16px;
}
.solutions a:hover .go{background:var(--ink);color:var(--card);}
@media (max-width:760px){
  .solutions a{grid-template-columns:1fr;gap:var(--sp-4);}
  .solutions .go{justify-self:start;}
}

/* Samengestelde intro (Model B). Staat als neutrale zin in de HTML en wordt
   door JS vervangen zodra er keuzehulp-antwoorden in de URL staan. */
.tailored{
  border:1px solid var(--on-ink-line);background:rgba(245,242,234,.05);
  border-radius:var(--radius-card);padding:var(--sp-6) var(--sp-8);
  margin-top:var(--sp-12);font-size:var(--fs-meta);line-height:1.55;
  color:var(--on-ink-muted);max-width:60ch;
}
.tailored b{font-weight:600;color:var(--on-ink);}
.tailored .again{
  display:block;margin-top:var(--sp-4);font-size:var(--fs-meta);font-weight:400;
}

/* Keuzehulp */
.wizard{max-width:760px;margin-top:var(--sp-12);}
.wizard__step[hidden]{display:none;}
.wizard__count{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-4);
  font-variant-numeric:tabular-nums lining-nums;
}
.wizard fieldset{border:0;padding:0;margin:0;}
.wizard legend{
  font-family:var(--serif);font-size:var(--fs-h2);font-weight:700;color:var(--ink);
  line-height:1.15;letter-spacing:-.01em;padding:0;margin-bottom:var(--sp-6);
  text-wrap:balance;
}
.wizard__opts{display:flex;flex-direction:column;gap:var(--sp-3);}
.wizard__opts label{
  display:block;border:1px solid var(--line);background:var(--card);
  border-radius:var(--radius-input);padding:16px 18px;cursor:pointer;
  font-size:var(--fs-body);font-weight:600;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.wizard__opts label:hover{border-color:#cec9ba;}
.wizard__opts label .sub{
  display:block;font-weight:400;font-size:var(--fs-meta);color:var(--muted);margin-top:4px;
}
.wizard__opts input{position:absolute;opacity:0;width:1px;height:1px;}
.wizard__opts label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.wizard__opts label:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:3px;}
.wizard__nav{display:flex;gap:var(--sp-4);align-items:center;margin-top:var(--sp-8);}
.wizard__back{
  background:transparent;border:0;padding:0;cursor:pointer;
  font-size:var(--fs-meta);font-weight:600;color:var(--teal);
}
.wizard__back[hidden]{display:none;}
.wizard__soft{
  margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line);
  font-size:var(--fs-meta);color:var(--muted);max-width:56ch;
}
.wizard__soft[hidden]{display:none;}

/* Verdeling van verantwoordelijkheid — het artefact op /scholen/zorgteam */
.split-resp{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin-top:var(--sp-12);border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;background:var(--card);
}
.split-resp > div{padding:var(--sp-8);}
.split-resp > div + div{border-left:1px solid var(--line);}
.split-resp h3{font-size:var(--fs-h3);margin-bottom:var(--sp-6);}
.split-resp .who{
  display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-3);
}
.split-resp ul{display:flex;flex-direction:column;gap:var(--sp-4);}
.split-resp li{font-size:var(--fs-meta);padding-left:var(--sp-6);position:relative;}
.split-resp li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:1.5px;background:var(--teal);
}
@media (max-width:760px){
  .split-resp{grid-template-columns:1fr;}
  .split-resp > div + div{border-left:0;border-top:1px solid var(--line);}
}

/* --- Ingang op Thuis: onderwijstype → niveau → optioneel vak ---------------
   Geen mega-menu; twee kolommen met per sector de fases, en de vakken als
   compacte rij eronder. */
.pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);
  margin-top:var(--sp-12);}
.pick__col > h3{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--line);
}
.pick__col ul{display:flex;flex-direction:column;}
.pick__col li{border-bottom:1px solid var(--line);}
.pick__col a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-3);margin-inline:calc(var(--sp-3) * -1);
  border-radius:6px;color:var(--ink);text-decoration:none;
  font-family:var(--serif);font-size:19px;font-weight:600;
  transition:background-color .16s ease;
}
.pick__col a:hover,.pick__col a:focus-visible{background:rgba(21,44,58,.04);text-decoration:none;}
.pick__col .sub{
  font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted);
  white-space:nowrap;
}
.subjects{margin-top:var(--sp-16);border-top:1px solid var(--line);padding-top:var(--sp-8);}
.subjects h3{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-6);
}
.subjects ul{display:flex;flex-wrap:wrap;gap:var(--sp-3);}
.subjects a{
  display:inline-block;border:1px solid var(--line);border-radius:var(--radius-btn);
  padding:9px 15px;font-size:var(--fs-meta);font-weight:600;color:var(--ink);
  text-decoration:none;background:var(--card);
  transition:border-color .16s ease,background-color .16s ease;
}
.subjects a:hover,.subjects a:focus-visible{border-color:var(--ink);text-decoration:none;}
.subjects__note{margin-top:var(--sp-6);font-size:var(--fs-meta);color:var(--muted);}
@media (max-width:760px){ .pick{grid-template-columns:1fr;gap:var(--sp-12);} }

/* ==========================================================================
   THUIS-PROEF — structuurkaart, bones 01-09.
   Alles hieronder is gescoped op .p-thuis of op classes die uitsluitend op
   thuis.html voorkomen (.hero__offer, .sectors__head, .steps__col,
   .band--joined, .pledges, .faq-split, .matrix, .legalstrip). Geen andere
   pagina verandert. Geen token uit DESIGN.md §12 is aangeraakt; de type-scale
   blijft zoals hij is — de sprong komt uit het overslaan van h3, niet uit
   nieuwe groottes.
   ========================================================================== */

/* --- Bone 01: de hero als twee-traps blok ---------------------------------
   Trede 1 is de kop, vrij op het canvas. Trede 2 is de wending + de knop + het
   voorbehoud, samen in één begrensd blok. De hero wint hoogte uit dat blok. */
.hero__offer{
  margin-top:var(--sp-12);max-width:520px;
  border:1px solid var(--on-ink-line);border-radius:var(--radius-card);
  padding:var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-6);
}
.hero__offer-lede{color:var(--on-ink-muted);font-size:var(--fs-body);}
.hero__offer .btn-row{margin-top:0;}
.hero__offer .hero__aside{
  margin-top:0;max-width:none;
  padding-top:var(--sp-6);border-top:1px solid var(--on-ink-line);
}
@media (max-width:760px){ .hero__offer{padding:var(--sp-6);max-width:none;} }

/* --- Bone 03: de sprong, door h3 over te slaan ----------------------------
   Van h2 (32) direct naar 19px kaarttitel + 15px meta, precies zoals
   .phases__list en .behav het al doen. Binnen de vaste scale. */
.sectors h3,.steps h3{font-size:19px;font-weight:600;}

/* --- Bone 04: het zware kaartenblok --------------------------------------
   Gutter van 32 naar 64: twee objecten in plaats van twee tekstkolommen.
   De kaartkop is een hairline-zone, geen fotomassa. */
.sectors{gap:var(--sp-16);}
.sectors article{overflow:hidden;}
.sectors__head{
  margin:calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) var(--sp-6);
  padding:var(--sp-6) var(--sp-8);
  border-bottom:1px solid var(--line);
}
.sectors__head h3{margin:0;}

/* --- Bone 05: de sectiekoppeling als variabele ----------------------------
   Waar twee secties één gedachte zijn vervalt de hairline en zakt de
   tussenruimte van 192 naar 144. Op Thuis: het traject en de meting ervan. */
.band--joined{padding-top:0;}
.band--joined > .wrap{padding-top:var(--sp-12);}
/* De disclose hoort bij het artefact erboven, niet bij de sectie. */
.p-thuis .disclose{margin-top:var(--sp-6);}

/* --- Bone 06a: de knop onder stap 3 --------------------------------------- */
.steps__col{display:flex;flex-direction:column;gap:var(--sp-8);}
.steps__cta{margin-top:0;}

/* --- Bone 06b: de kern-correctie -----------------------------------------
   Het shift-artefact is breed-en-laag (900x527, ratio 1,71). Het krijgt de
   brede kolom (0,55) en de begeleidersnotitie komt ernaast te staan in plaats
   van eronder — narrative annotation naast de data, per DESIGN.md §7.
   De aslabels blijven staan: die dragen de betekenis van de stap. */
@media (min-width:900px){
  .p-thuis .shift--hero{
    max-width:none;
    display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,.45fr);
    column-gap:var(--sp-12);align-items:start;
  }
  .p-thuis .shift--hero .shift__q{grid-column:1;grid-row:1;}
  .p-thuis .shift--hero .shift__plot{grid-column:1;grid-row:2;}
  .p-thuis .shift--hero .shift__caption{grid-column:1;grid-row:3;}
  .p-thuis .shift--hero .shift__note{
    grid-column:2;grid-row:1 / span 3;align-self:stretch;
    margin-top:0;padding-top:0;border-top:0;
    padding-left:var(--sp-8);border-left:1px solid var(--line);
  }
  .p-thuis .shift--hero .shift__axis li{font-size:13px;}
}

/* --- Bone 07: het ritmevlak in drie kolommen ------------------------------
   Dezelfde drie toezeggingen, naast elkaar in plaats van onder elkaar. */
.inversion__head .measure{margin-top:var(--sp-6);}
.pledges{
  margin-top:var(--sp-12);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);
}
.pledges > li{border-top:1px solid var(--on-ink-line);padding-top:var(--sp-6);}
.pledges h3{font-size:19px;font-weight:600;color:var(--on-ink);margin-bottom:var(--sp-3);}
.pledges p{font-size:var(--fs-meta);color:var(--on-ink-muted);}
@media (max-width:860px){ .pledges{grid-template-columns:1fr;gap:var(--sp-8);} }

/* --- Bone 08: de FAQ in twee kolommen ------------------------------------
   Kop en kader links (0,42), accordeon rechts (0,58). De linkerkolom vult
   zich met wat er al was: de kaderzin, de voorbeeldrapportage en het nummer. */
.faq-split{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:var(--sp-16);align-items:start;
}
.faq-split__aside h2{margin-top:var(--sp-4);}
.faq-split__frame{
  margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--line);
  font-size:var(--fs-meta);color:var(--muted);max-width:36ch;
}
.faq-split__links{
  margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);
  font-size:var(--fs-meta);
}
.p-thuis .faq{margin-top:0;max-width:none;}
@media (max-width:900px){ .faq-split{grid-template-columns:1fr;gap:var(--sp-8);} }

/* --- Bone 09: de naslagmat -----------------------------------------------
   Vier smalle kolommen in metaformaat met hairlines, in plaats van
   serif-regels en knopjes. Zelfde links, veel minder gewicht: dit is naslag
   en hoort niet het zwaarste blok van de pagina te zijn. */
.matrix{
  margin-top:var(--sp-8);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);
  gap:var(--sp-16);
}
.matrix__col h3{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}
.matrix__col ul{display:flex;flex-direction:column;}
.matrix__col--vakken ul{display:block;column-count:2;column-gap:var(--sp-16);}
.matrix__col li{border-bottom:1px solid var(--line);break-inside:avoid;}
.matrix__col a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding:9px 0;color:var(--ink);text-decoration:none;
  font-size:var(--fs-meta);font-weight:600;
  transition:color .16s ease;
}
.matrix__col a:hover,.matrix__col a:focus-visible{color:var(--teal);text-decoration:none;}
.matrix__col .sub{
  font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);
  white-space:nowrap;
}
.matrix__note{margin-top:var(--sp-6);font-size:var(--fs-meta);color:var(--muted);}
.matrix__note + .matrix__note{margin-top:var(--sp-3);}
@media (max-width:900px){
  .matrix{grid-template-columns:1fr 1fr;gap:var(--sp-12);}
  .matrix__col--vakken{grid-column:1 / -1;}
}
@media (max-width:600px){
  .matrix{grid-template-columns:1fr;gap:var(--sp-8);}
  .matrix__col--vakken ul{column-count:1;}
}

/* --- Bone 02: de dunne band ----------------------------------------------
   Het voorbehoud stond in de donkere footer, waar het wegvalt. Als eigen
   strip op papier is het leesbaar — en het is meteen de adempauze die de
   pagina nergens had. */
.legalstrip{
  border-top:1px solid var(--line);
  padding-block:var(--sp-12);
  font-size:13px;color:var(--muted);
}
.legalstrip p{max-width:80ch;}

/* --- Bone 02, vervolg: de wending als eigen ademband ----------------------
   De pull-quote stond middenin de agitatieband van 974px en verdween daar in
   de massa. Als eigen dunne band splitst hij die band in de herken-lijst en
   het scharnier naar de nulmeting — en levert hij de adempauze die de
   bovenhelft van de pagina nergens had. Zelfde zin, andere plek: geen nieuwe
   copy, alleen een andere plaatsing.
   Breder dan de standaard 24ch, zodat de quote drie regels wordt in plaats van
   vier en de band onder de 200px blijft. */
.band.pullband{padding-block:var(--sp-8);}
.pullband .pull{margin-block:0;max-width:32ch;}
/* De pull leverde de witruimte tussen de lijst en de afsluitende zin; die
   ruimte moet nu uit een eigen marge komen. */
.p-thuis .moments + .measure{margin-top:var(--sp-8);}

/* ==========================================================================
   GROEP 1 — het Thuis-recept op index.html en de-aanpak.html.
   Zelfde werkwijze als het Thuis-blok hierboven: alles gescoped op .p-index /
   .p-aanpak of op classes die alleen daar voorkomen (.statsband). Geen andere
   pagina verandert; tokens uit §12 blijven ongemoeid.
   ========================================================================== */

/* --- index · bone 02: de cijfers als eigen ademband ----------------------
   De rij stond als staart onder het teal-paneel binnen dezelfde band. Op een
   eigen dunne band met gereduceerde padding telt hij mee in het ritme. */
.band.statsband{padding-block:var(--sp-8);}
.statsband .stats{margin-top:0;padding-top:0;border-top:0;}

/* --- index · Mercury: de routelijst als regel, niet als kaart -------------
   De rij had een eigen hover-vlak met radius en negatieve marges; dat leest
   als kaart. Wat blijft is de regel met onderrand en meer verticale lucht.
   De ghost-knop-affordance op .route__go blijft staan (DESIGN.md §5) en draagt
   de hover-terugkoppeling. */
.p-index .routes a{
  margin-inline:0;border-radius:0;
  padding:var(--sp-12) 0;
}
.p-index .routes a:hover,.p-index .routes a:focus-visible{background:transparent;}
.p-index .routes a:hover .who,.p-index .routes a:focus-visible .who{color:var(--teal);}
.p-index .routes .who{transition:color .18s ease;}
@media (max-width:700px){
  .p-index .routes a{padding:var(--sp-8) 0;}
}

/* --- de-aanpak · bone 07: het ritmevlak in drie kolommen ------------------
   Zes gedragingen in drie kolommen in plaats van twee: het donkere vlak wordt
   breder gelezen en minder hoog. Zelfde zes items. */
@media (min-width:860px){
  .p-aanpak .band--ink .behav{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-8);}
}

/* --- bone 03: de sprong in de kaartrij ------------------------------------
   .rail is een kaartrij en staat op de-aanpak, over en kennismaking.
   Alle drie krijgen dezelfde sprong: van h2 direct naar de 19px-kaarttitel,
   h3 (22px) overgeslagen. Binnen de vaste scale. */
.rail h3{font-size:19px;font-weight:600;}

/* --- de-aanpak · dichtheids-herijking op de artefact-massa ----------------
   1. Het teal-paneel "Het einde": links stond alleen een kop van ~110px in een
      kolom van 482px hoog — 23% gevuld. Die kolom krimpt tot wat erin staat,
      de tekstkolom krijgt de ruimte.
   2. De annotaties naast het radar-artefact vulden 339px van een kaart van
      862px. Ze spreiden nu over de volle hoogte, zodat de kolom naast de data
      niet halfleeg oogt. De kolombreedte en de radar blijven zoals ze zijn:
      het artefact is hier vierkant, niet breed-en-laag. */
@media (min-width:900px){
  /* Beide splits op deze pagina hebben dezelfde vorm: een korte kop links naast
     een tekstblok rechts. De kopkolom krimpt tot wat erin staat. */
  .p-aanpak .split--lead{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);}
  .p-aanpak .annot{height:100%;justify-content:space-between;}
}

/* ==========================================================================
   GROEP 2 — het recept op de u-pagina's: scholen-hub, de vier oplossingen,
   keuzehulp en stichting. Zelfde werkwijze: gescoped op .p-scholen /
   .p-stichting / .p-opl, of op classes die alleen daar voorkomen. Geen andere
   pagina verandert; tokens uit §12 blijven ongemoeid.
   ========================================================================== */

/* --- .faq-split werkt nu ook met de <div class="faq">-variant --------------
   Thuis gebruikt <ul class="faq">, scholen en stichting <div class="faq">.
   De regel hangt aan de split, dus hij raakt alleen waar die staat. */
.faq-split > .faq{margin-top:0;max-width:none;}

/* --- scholen-hub · Mercury: de vier vormen als regel, niet als kaart -------
   De rij is al een editorial rail (geen 4-koloms kaartsymmetrie); wat weggaat
   is het hover-vlak met radius en negatieve marges, wat erbij komt is lucht.
   De ghost-knop op .go blijft: dat is de affordance uit DESIGN.md §5. */
.p-scholen .solutions a{
  margin-inline:0;border-radius:0;
  padding:var(--sp-12) 0;
}
.p-scholen .solutions a:hover,.p-scholen .solutions a:focus-visible{background:transparent;}
.p-scholen .solutions h3{transition:color .18s ease;}
.p-scholen .solutions a:hover h3,.p-scholen .solutions a:focus-visible h3{color:var(--teal);}
@media (max-width:700px){ .p-scholen .solutions a{padding:var(--sp-8) 0;} }

/* --- dichtheids-herijking naast het radar-artefact ------------------------
   De kolom naast de kaart vulde 365px van 862. Spreiden over de volle hoogte
   is hier geen optie: met twee blokken levert dat een gat van ruim 500px op.
   Dus de andere kant op — de kolom krimpt tot wat erin staat (0,75fr naar
   0,55fr) en het artefact krijgt de ruimte. De radar wordt daarbij op zijn
   huidige maat vastgezet, anders groeit de kaart mee en wordt de sectie juist
   hoger. Radar blijft vierkant, inhoud blijft. */
@media (min-width:900px){
  .p-scholen .artifact-grid,
  .p-opl .artifact-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);}
  .p-scholen .artifact--hero .radar,
  .p-opl .artifact--hero .radar{max-width:532px;}
}

/* --- oplossingspagina's · dichtheids-herijking op het shift-artefact -------
   Examentraining draagt hetzelfde brede-lage artefact als Thuis (900x546,
   ratio 1,65). Het krijgt de bredere kolom en de begeleidersnotitie komt
   ernaast te staan. De aslabels blijven staan. */
@media (min-width:900px){
  .p-opl .shift--hero{
    max-width:none;
    display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,.45fr);
    column-gap:var(--sp-12);align-items:start;
  }
  .p-opl .shift--hero .shift__q{grid-column:1;grid-row:1;}
  .p-opl .shift--hero .shift__plot{grid-column:1;grid-row:2;}
  .p-opl .shift--hero .shift__caption{grid-column:1;grid-row:3;}
  .p-opl .shift--hero .shift__note{
    grid-column:2;grid-row:1 / span 3;align-self:stretch;
    margin-top:0;padding-top:0;border-top:0;
    padding-left:var(--sp-8);border-left:1px solid var(--line);
  }
  .p-opl .shift--hero .shift__axis li{font-size:13px;}
}

/* --- u-pagina's · de kopkolom krimpt tot wat erin staat --------------------
   Op scholen, stichting en zorgteam staat links een korte kop naast een
   tekstblok rechts; die kolom was 67-73% leeg. Zelfde herijking als op
   de-aanpak. Splits met een formulier of artefact rechts blijven ongemoeid:
   daar draagt de rechterkolom echte massa. */
@media (min-width:900px){
  .p-scholen .band .split--lead:not(.panel--teal),
  .p-stichting .band .split--lead:not(.panel--teal){
    grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  }
  .p-opl .split--lead:has(> .sec-head){grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);}
}


/* ==========================================================================
   GROEP 4 — over en kennismaking. Alleen waar een bone echt landt.
   ========================================================================== */

/* --- over · de kopkolom krimpt tot wat erin staat ------------------
   Drie splits met links een korte kop (62-73% gevuld) naast een tekstblok
   rechts. Zelfde herijking als op de-aanpak en de u-pagina's. */
@media (min-width:900px){
  .p-over .split--lead{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);}
}

/* kennismaking krijgt hier bewust geen enkele regel: haar taak is converteren.
   De twee-koloms proces/formulier-opzet is haar ritme en haar kolommen zijn
   voor 93% en 95% gevuld — daar valt niets te herijken. De enige ingreep is
   de .rail-sprong hierboven, die zij met de andere twee deelt. */

/* --- bone 01 op over en kennismaking -------------------------------
   Deze twee hero's droegen een .lede in plaats van een hero__turn-alinea. De
   lede houdt zijn eigen maat (21px); alleen de marge vervalt, want de flex-gap
   van het blok regelt de ruimte. */
.hero__offer .lede{margin-top:0;max-width:none;}

/* --- bone 09 op het stramien: de kruislinkmat -----------------------------
   Lichte naslag onderaan elke vak- en niveaupagina: metaformaat, hairlines,
   geen kaarten. Zelfde vormtaal als de naslagmat op Thuis, zodat naslag overal
   hetzelfde gewicht heeft. Staat na het formulier en vóór de voorbehoud-strip
   — wie hem niet nodig heeft scrollt eroverheen. */
.band.crosslinks{padding-block:var(--sp-12);border-top:1px solid var(--line);}
.crosslinks__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-16);
}
.crosslinks__lbl{
  font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}
.crosslinks ul{display:flex;flex-direction:column;}
.crosslinks li{border-bottom:1px solid var(--line);}
.crosslinks a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding:9px 0;color:var(--ink);text-decoration:none;
  font-size:var(--fs-meta);font-weight:600;transition:color .16s ease;
}
.crosslinks a:hover,.crosslinks a:focus-visible{color:var(--teal);text-decoration:none;}
.crosslinks .sub{
  font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);
  white-space:nowrap;
}
@media (max-width:700px){ .crosslinks__grid{grid-template-columns:1fr;gap:var(--sp-8);} }

/* ==========================================================================
   SKIN-FINISH — oppervlaktebehandeling van de data-artefacten.
   Geen her-layout: alles hieronder raakt alleen rand, elevatie en het
   binnenframe. Sectiehoogtes blijven gelijk.
   ========================================================================== */

/* --- Linear: het radarvlak als instrument, niet als plaatje ---------------
   Een hairline-omkadering bínnen de kaart, op afstand van het diagram zelf.
   Uitgevoerd als outline: die reserveert geen ruimte, dus de radar en de kaart
   houden exact hun maat. De diepte komt van die lijn, niet van een tweede
   schaduw — de kaart eromheen draagt de enige elevatie in de sectie. */
.radar{
  border-radius:var(--radius-img);
  outline:1px solid var(--line);
  outline-offset:8px;
}