/* ============================================================
   Pervolo: art direction "Nachtvlucht"
   ------------------------------------------------------------
   De scene: een ondernemer kijkt 's avonds naar de werkbak.
   Het scherm is de verkeerstoren boven een donker veld waar
   werk als licht doorheen vliegt. Donker is hier geen mode
   maar het decor van het verhaal: licht is het werk, de lijn
   is de mens. Niets passeert de lijn zonder paraaf.

   Kleurstrategie: drenched. Het hele oppervlak IS de kleur:
   een blauwzwart veld, warme ivoren inkt, EEN elektrisch
   cyaan signaal. Violet, magenta en lime bestaan alleen in
   het licht zelf (hero-aurora, merktegels), nooit als chrome.

   Een familie (Archivo variabel), contrast via de breedte-as.
   De machine spreekt mono. Geen font-CDN: de browser praat
   met geen enkele derde partij.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* de machinekamer: de enige donkere lagen (werkbak, band,
     footer, merktegels). De pagina zelf is dag; de plek waar
     de machine draait, blijft nacht. */
  --board: oklch(0.135 0.02 278);
  --board-2: oklch(0.175 0.024 274);
  --board-3: oklch(0.215 0.028 272);
  --board-line: oklch(0.32 0.028 270);

  /* het papier: koel bijna-wit. Chroma vrijwel nul met een
     koele zweem; warm creme is de AI-reflex, niet onze stem. */
  --paper: oklch(0.985 0.003 220);
  --strip: oklch(0.972 0.005 220);
  --strip-2: oklch(0.937 0.01 222);
  --strip-3: oklch(0.90 0.012 224);
  --line: oklch(0.885 0.012 230);

  /* het signaal: diepe teal. Donker genoeg voor 4,5:1 op het
     papier; de heldere cyaan bestaat alleen nog als licht op
     de donkere lagen (canvas, tegels, node). */
  --signal: oklch(0.50 0.10 205);
  --signal-hot: oklch(0.42 0.10 207);
  --signal-deep: oklch(0.58 0.10 203);
  --signal-tint: oklch(0.945 0.028 200);
  --signal-bright: oklch(0.87 0.128 200);

  /* het spectrum: alleen voor licht (hero-doek, merktegels),
     nooit voor knoppen, borders of chrome */
  --violet: oklch(0.55 0.16 295);
  --magenta: oklch(0.58 0.19 350);
  --lime: oklch(0.72 0.17 135);

  /* inkt: diep blauwzwart op koel papier */
  --ink: oklch(0.21 0.025 265);
  --text: oklch(0.34 0.022 262);
  --muted: oklch(0.50 0.02 260);
  --link: oklch(0.50 0.10 205);
  --link-hover: oklch(0.40 0.10 207);

  /* op de donkere lagen */
  --on-board: oklch(0.965 0.01 90);
  --on-board-dim: oklch(0.745 0.02 272);

  --focus: var(--signal);

  /* typografie: Archivo draagt de mensenkant, contrast via de
     breedte- en gewichtsas. De machine heeft een eigen stem:
     alles wat een systeem produceerde (tijdstempels, modelnamen,
     domeinen, nummers) staat in mono. Geen kostuum, een register. */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --wd-display: "wdth" 115;
  --wd-normal: "wdth" 100;
  --wd-slot: "wdth" 70;

  /* leesregel: 1ch is ~1,31 gemiddelde tekens in Archivo (gemeten);
     48ch is ~63 tekens per regel. Niet op gevoel instellen. */
  --measure: 48ch;
  --measure-tight: 44ch;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.2rem;
  --fs-h3: clamp(1.18rem, 1.05rem + 0.45vw, 1.42rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 1.9vw, 2.9rem);
  /* ondergrens laag genoeg dat "ADMINISTRATIEKANTOOR" in uitgebreide
     kapitalen ook op 390px binnen de kolom blijft */
  --fs-hero: clamp(1.75rem, 1.2rem + 3.4vw, 3.8rem);

  --radius: 3px;
  --radius-pill: 999px;
  --shadow-board: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 22px 55px oklch(0.2 0.02 260 / 0.28);
  --shadow-soft: 0 1px 2px oklch(0.3 0.02 260 / 0.08), 0 14px 34px oklch(0.3 0.02 260 / 0.12);

  /* z-index-schaal, semantisch */
  --z-sticky: 100;
  --z-nav: 200;
  --z-focus: 300;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-variation-settings: var(--wd-normal);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.18em; }

::selection { background: var(--signal); color: oklch(0.99 0 0); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 0.55em;
  line-height: 1.1;
  font-weight: 780;
  font-variation-settings: var(--wd-display);
  letter-spacing: -0.015em;
}
h1, h2, h3 { text-wrap: balance; }

h1 {
  font-size: var(--fs-hero);
  font-weight: 860;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 0.96;
  /* vangnet voor lange samenstellingen in uitgebreide kapitalen.
     Bewust geen hyphens:auto: dat breekt ook gewone koppen af
     ("DIENSTENLAD-DER"). Koppen kort houden is de echte fix. */
  overflow-wrap: break-word;
}
h2 { font-size: var(--fs-h2); font-weight: 820; letter-spacing: -0.02em; overflow-wrap: break-word; }
h2 em { color: var(--signal); font-style: normal; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-base); font-weight: 700; }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li { margin-bottom: 0.35em; max-width: var(--measure-tight); }
strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.section { padding: clamp(3.4rem, 7vw, 6rem) 0; }
/* tint is een vlak koeler papier; binnen de tint verspringen de
   strook-tokens een stap, zodat rijen er wit op afsteken */
.section.tint {
  background: var(--strip-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --strip: oklch(0.985 0.003 220);
  --strip-2: oklch(0.965 0.006 221);
}
/* inhoudssecties lezen als een gefocuste documentkolom, niet als een
   volle-breedte plaat met lege ruimte rechts (ijkpunt: perduro).
   Header, hero, factbar, band en footer houden de bredere `.wrap`. */
.section .wrap, .page-head .wrap { max-width: 820px; }
/* brede momenten binnen een sectie (merktegels, sticky-split)
   mogen wel de volle 1040px pakken */
.section .wrap.wide { max-width: 1040px; }
.section-intro, .lead-geo { font-size: var(--fs-lg); color: var(--text); max-width: var(--measure-tight); }
.lead-geo { color: var(--ink); }
.small { font-size: var(--fs-sm); color: var(--muted); }
.prose { max-width: 68ch; }
/* .prose op een sectie betekent "prozapagina", niet "knijp de
   sectie": de kolom komt dan van de wrap, de maat van de p's */
.section.prose { max-width: none; }

/* ---------- de machinekamer: donkere context ----------
   Binnen elke donkere laag verspringt het signaal naar het
   heldere cyaan: diepe teal is licht-op-donker te dof. */
.board {
  background: var(--board);
  color: var(--on-board);
  --ink: var(--on-board);
  --text: var(--on-board);
  --muted: var(--on-board-dim);
  --signal: var(--signal-bright);
  --link: var(--signal-bright);
  --link-hover: oklch(0.93 0.10 198);
  --line: var(--board-line);
  --strip: var(--board-2);
  --strip-2: var(--board-3);
  --focus: var(--signal-bright);
}

/* ---------- knoppen: pillen, want dit zijn de enige ronde
   dingen op een verder strak bord. Wat klikt, is rond. ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.16s var(--ease-out), border-color 0.16s var(--ease-out),
    color 0.16s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--signal);
  color: oklch(0.99 0 0);
  border-color: var(--signal);
}
.btn-primary:hover {
  background: var(--signal-hot);
  border-color: var(--signal-hot);
  color: oklch(0.99 0 0);
  box-shadow: 0 6px 26px oklch(0.50 0.10 205 / 0.3);
}
.btn-primary .arw { transition: transform 0.2s var(--ease-out); }
.btn-primary:hover .arw { transform: translateX(4px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.board .btn-ghost { color: var(--on-board); border-color: var(--board-line); }
.board .btn-ghost:hover { border-color: var(--signal); color: var(--signal); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }

/* ---------- merkteken ---------- */
.mark-body { stroke: currentColor; }
.mark-fold { stroke: var(--signal); }
/* op de donkere lagen is de vouw het heldere cyaan licht */
.site-footer .mark-fold, .board .mark-fold { stroke: var(--signal-bright); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: oklch(0.985 0.003 220 / 0.78);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  color: var(--ink);
  border-bottom: 1px solid oklch(0.885 0.012 230 / 0.7);
  transition: background-color 0.3s var(--ease-out);
}
.site-header.scrolled { background: oklch(0.985 0.003 220 / 0.94); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-weight: 820;
  font-size: 1.2rem;
  font-variation-settings: var(--wd-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand svg { flex: none; }

.site-nav { display: flex; align-items: center; gap: clamp(0.7rem, 1.8vw, 1.4rem); }
.site-nav a {
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 0.5rem 0.15rem;
}
.site-nav a:hover { color: var(--signal); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--signal); box-shadow: inset 0 -2px 0 var(--signal); }
.site-nav .btn { padding: 0.5rem 1.1rem; font-size: var(--fs-sm); min-height: 40px; }
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover { color: oklch(0.99 0 0); }

.site-header :focus-visible { outline-color: var(--signal); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.4rem 1.1rem 1.1rem;
    box-shadow: var(--shadow-soft);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--strip-2); min-height: 44px; display: flex; align-items: center; }
  .site-nav .btn { margin-top: 0.9rem; border: 1px solid var(--signal-deep); justify-content: center; }
}

/* ============================================================
   DE STROOK: het enige inhoudsprimitief
   Geen kaarten. Een strook is een rij op het bord: een slot
   (nummer of naam), de inhoud, en rechts de klaringsstatus.
   ============================================================ */

.strips,
.cards,
.steps,
.tiers,
.deflist {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.strip,
.card,
.step,
.tier,
.defrow {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  /* expliciete rijen: `grid-row: 1 / -1` op het slot adresseert
     alleen het expliciete grid; zonder deze regel spant het slot
     maar een rij en vult de houdercel de strook niet. Lege
     restrijen zijn 0 hoog, dus dit kost niets. */
  grid-template-rows: repeat(12, auto);
  align-items: start;
  gap: 0 clamp(0.9rem, 2vw, 1.5rem);
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  background: var(--strip);
  transition: background-color 0.16s var(--ease-out);
}
.strip:first-child,
.cards > :first-child,
.steps > :first-child,
.tiers > :first-child,
.deflist > :first-child { border-top: 0; }

.strip:hover,
.card:hover,
.step:hover,
.tier:hover,
.defrow:hover { background: var(--strip-2); }

/* het slot: nummer of fase, in een eigen houdercel */
.strip > .n, .strip > .q,
.card > .q, .card > .n,
.step > .n,
.tier > .n,
.defrow > dt {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0.5rem;
  border-right: 1px solid var(--line);
  background: var(--strip-2);
  /* het slot draagt de rij-titel: niet dimmen tot metadata */
  color: var(--text);
  font-variation-settings: var(--wd-slot);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.strip > .n, .card > .n, .step > .n, .tier > .n {
  font-size: 1.5rem;
  font-variation-settings: "wdth" 75;
  color: var(--signal);
  font-feature-settings: "tnum" 1;
}

/* de inhoud van de strook */
.strip > *:not(.n):not(.q),
.card > *:not(.q):not(.n),
.step > div,
.tier > div,
.defrow > dd {
  grid-column: 2;
  margin-left: 0;
}
.card > *:not(.q):not(.n):first-of-type,
.step > div,
.tier > div,
.defrow > dd { padding-top: clamp(1.1rem, 2.2vw, 1.5rem); }
.card > *:not(.q):not(.n):last-child,
.step > div,
.tier > div,
.defrow > dd { padding-bottom: clamp(1.1rem, 2.2vw, 1.5rem); }
.step > div, .tier > div, .defrow > dd { padding-right: clamp(1rem, 2.5vw, 1.8rem); }
.card > *:not(.q):not(.n) { padding-right: clamp(1rem, 2.5vw, 1.8rem); }

.card > h3, .step h3, .tier h3, .strip h3 { margin-bottom: 0.3em; }
.card > p:last-of-type, .step p:last-child, .tier p:last-child { margin-bottom: 0; }
/* de deflist heeft namen in het slot, geen nummers: ruimere kolom */
.defrow { grid-template-columns: minmax(8rem, 11rem) 1fr; }
.defrow > dd { margin: 0; color: var(--text); max-width: var(--measure); }
/* dt's zijn hele zinnen, geen labels: kapitalen zijn hier fout */
.defrow > dt {
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding-left: clamp(1rem, 2.5vw, 1.4rem);
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}
.defrow > dt a { color: var(--ink); font-variation-settings: var(--wd-slot); }
.defrow > dt a:hover { color: var(--link); }
/* duur of doelgroep bij een naam in het slot: machine-informatie,
   dus mono, op een eigen regel onder de naam */
.defrow > dt { flex-wrap: wrap; row-gap: 0.15rem; }
.defrow > dt .dur {
  flex-basis: 100%;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Stroken zonder nummerslot: de kop wordt zelf het slot. Zo blijft
   er een primitief (naam links, uitleg rechts) en staat de rechter-
   helft niet leeg. */
.card:not(:has(> .q)):not(:has(> .n)),
.strip:not(:has(> .n)):not(:has(> .q)) { grid-template-columns: minmax(9rem, 14rem) 1fr; }
.card:not(:has(> .q)):not(:has(> .n)) > h3,
.strip:not(:has(> .n)):not(:has(> .q)) > h3 {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  margin: 0;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(0.9rem, 2vw, 1.2rem);
  border-right: 1px solid var(--line);
  background: var(--strip-2);
  font-size: var(--fs-base);
  font-variation-settings: var(--wd-slot);
  text-wrap: balance;
}
.board .card:not(:has(> .q)):not(:has(> .n)) > h3,
.board .strip:not(:has(> .n)):not(:has(> .q)) > h3 {
  background: oklch(0 0 0 / 0.28);
  border-right-color: var(--board-line);
}
@media (max-width: 620px) {
  .card:not(:has(> .q)):not(:has(> .n)),
  .strip:not(:has(> .n)):not(:has(> .q)) { grid-template-columns: 1fr; }
  .card:not(:has(> .q)):not(:has(> .n)) > h3,
  .strip:not(:has(> .n)):not(:has(> .q)) > h3 {
    grid-row: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.6rem clamp(1rem, 4vw, 1.4rem);
  }
}

/* stroken op de nachtzijde */
.board .strips, .board .cards, .board .steps, .board .tiers, .board .deflist { border-color: var(--board-line); }
.board .strip, .board .card, .board .step, .board .tier, .board .defrow {
  background: var(--board-2);
  border-top-color: var(--board-line);
}
.board .strip:hover, .board .card:hover, .board .step:hover, .board .tier:hover, .board .defrow:hover { background: var(--board-3); }
.board .strip > .n, .board .card > .q, .board .card > .n, .board .step > .n, .board .tier > .n, .board .defrow > dt {
  background: oklch(0 0 0 / 0.28);
  border-right-color: var(--board-line);
  color: var(--on-board-dim);
}
.board .strip > .n, .board .card > .n, .board .step > .n, .board .tier > .n { color: var(--signal); }

/* de gemarkeerde strook: het onderscheid dat we verkopen */
.step.accent, .strip.accent, .card.accent { background: var(--signal-tint); }
.step.accent > .n, .strip.accent > .n, .card.accent > .n {
  background: var(--signal);
  color: oklch(0.99 0 0);
  border-right-color: var(--signal-hot);
}
.board .step.accent, .board .strip.accent, .board .card.accent { background: oklch(0.24 0.05 212); }

.strip-status {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 clamp(1rem, 2.5vw, 1.8rem) clamp(1.1rem, 2.2vw, 1.5rem) 0;
  font-variation-settings: var(--wd-slot);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--signal);
}
.strip-status .paraaf { color: var(--signal); }
.board .strip-status .paraaf { color: var(--signal); }

/* de paraaf: goedkeuring is een mark, geen kleur */
.paraaf { display: inline-block; vertical-align: middle; flex: none; }
.paraaf path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* de hoofdtrede draagt het onderscheid dat de tekst claimt */
.tier.hero-tier { background: var(--signal-tint); }
.tier.hero-tier > .n { background: var(--signal); color: oklch(0.99 0 0); border-right-color: var(--signal-hot); }

.tier-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem 1.6rem; margin-top: 1rem; }
.tier-meta h4 { margin-bottom: 0.2em; color: var(--muted); font-variation-settings: var(--wd-slot); text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-xs); }
.tier-meta p { font-size: var(--fs-sm); }

.more {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.more::after { content: " →"; }
/* domeinen zijn machine-adressen, geen proza: mono */
.ext {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ext::after { content: " ↗"; }
.num { font-family: var(--mono); }

@media (max-width: 620px) {
  .strip, .card, .step, .tier, .defrow { grid-template-columns: 1fr; }
  .strip > .n, .strip > .q, .card > .q, .card > .n, .step > .n, .tier > .n, .defrow > dt {
    grid-row: auto;
    grid-column: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 0.55rem clamp(1rem, 4vw, 1.4rem);
    border-right: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  /* de inhoud MOET terug naar kolom 1: met zijn desktop-plaatsing
     (grid-column: 2) maakt hij anders een impliciete tweede kolom
     en blijft het slot als smal strookje naast de tekst hangen */
  .strip > *:not(.n):not(.q),
  .card > *:not(.q):not(.n),
  .step > div,
  .tier > div,
  .defrow > dd { grid-column: 1; }
  .board .strip > .n, .board .card > .q, .board .card > .n, .board .step > .n, .board .tier > .n, .board .defrow > dt { border-bottom-color: var(--board-line); }
  .card > *:not(.q):not(.n), .step > div, .tier > div, .defrow > dd { padding-left: clamp(1rem, 4vw, 1.4rem); }
  .strip > *:not(.n):not(.q) { padding-left: clamp(1rem, 4vw, 1.4rem); }
}

/* ============================================================
   HERO: de klaringslijn, schermvullend
   Het doek is het hele veld. Werk vliegt binnen als licht,
   valt stil bij de lijn, en gaat pas door als een mens klaart.
   De tekst staat onderin op een gegarandeerd donkere zone
   (scrim naar --paper), dus het contrast is hard, niet hoopvol.
   ============================================================ */
.hero {
  position: relative;
  min-height: max(88svh, 620px);
  display: flex;
  align-items: flex-end;
  background: var(--paper);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.hero #klaring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
/* de scrim: onderin en links gegarandeerd papier-licht, zodat de
   kop nooit op een lichtstreep staat. Boven blijft het doek vrij. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--paper) 6%, oklch(0.985 0.003 220 / 0.88) 30%, transparent 62%),
    linear-gradient(105deg, oklch(0.985 0.003 220 / 0.8) 0%, transparent 44%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: clamp(5.5rem, 12vh, 9rem) 0 clamp(3.4rem, 7vh, 5.5rem); }
.hero .wrap { position: relative; }
.hero-copy { max-width: 940px; }

/* de kop is het grootste ding op de site: drie regels licht.
   De regels zijn hard (elke .li is een regel). Gemeten: de
   breedste regel ("LAAT HET WERK") is 9,74x de lettergrootte;
   de clamp is daarop geijkt zodat hij van 375px tot 2560px
   binnen de kolom blijft. Niet op gevoel bijstellen. */
.hero h1 {
  color: var(--ink);
  font-size: clamp(2rem, 0.6rem + 6.6vw, 5.9rem);
  line-height: 0.94;
  letter-spacing: -0.012em;
  margin-bottom: 0.45em;
}
/* elke regel is een lade: de tekst schuift eruit omhoog (WAAPI,
   alleen als motion mag; de basis is altijd zichtbaar) */
.hero h1 .li { display: block; overflow: hidden; }
.hero h1 .li span { display: block; }
.hero h1 em { color: var(--signal); font-style: normal; }
.hero .sub {
  color: var(--text);
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  max-width: 50ch;
}
.hero .sub strong { color: var(--signal); font-weight: 700; }
.hero .btn-ghost {
  color: var(--ink);
  border-color: oklch(0.21 0.025 265 / 0.3);
}
.hero .btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.hero :focus-visible { outline-color: var(--signal); }

/* de rail onderlangs: instrumentchrome, geen decoratie */
.hero-rail {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  padding-inline: max(clamp(1.1rem, 4vw, 2rem), calc(50% - 500px));
  border-top: 1px solid oklch(0.885 0.012 230 / 0.8);
  background: linear-gradient(to top, oklch(0.985 0.003 220 / 0.92), oklch(0.985 0.003 220 / 0));
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-rail .rail-r { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-rail svg { animation: nudge 2.6s var(--ease-out) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@media (max-width: 640px) {
  .hero { min-height: max(82svh, 540px); }
  .hero-rail .rail-l { display: none; }
  .hero-rail { justify-content: flex-end; }
}

/* het klaringsbord in de hero (nog in gebruik op enkele pagina's) */
.boardstack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.boardstack li {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  max-width: none;
  padding: 0.85rem 1rem;
  background: var(--board-2);
  border: 1px solid var(--board-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-board);
  animation: strip-in 0.7s var(--ease-out) both;
}
.boardstack li:nth-child(1) { animation-delay: 0.05s; }
.boardstack li:nth-child(2) { animation-delay: 0.14s; }
.boardstack li:nth-child(3) { animation-delay: 0.23s; }
.boardstack .slot {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--signal);
}
.boardstack .what { color: var(--on-board); font-size: var(--fs-sm); font-weight: 600; }
.boardstack .what small { display: block; color: var(--on-board-dim); font-weight: 400; font-size: var(--fs-xs); }
.boardstack .state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-variation-settings: var(--wd-slot);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--on-board-dim);
  white-space: nowrap;
}
.boardstack .state .paraaf { color: var(--on-board); }
.boardstack li.waiting {
  border-color: var(--signal-deep);
  background: oklch(0.22 0.045 212);
}
.boardstack li.waiting .state { color: var(--signal); }

@keyframes strip-in {
  from { transform: translateY(10px); }
  to { transform: none; }
}

/* de paraaf tekent zichzelf zodra hij in beeld komt */
.paraaf path {
  stroke-dasharray: 120;
  stroke-dashoffset: 0;
}
@supports (animation-timeline: view()) {
  .paraaf path {
    animation: sign 1s var(--ease-out) both;
    animation-timeline: view();
    animation-range: entry 10% cover 28%;
  }
}
@keyframes sign {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   PAGE-HEAD: elke subpagina opent met de klaringslijn.
   Een lijn loopt onder de kop door; een lichtpuls reist erover,
   houdt in bij de node (de mens) en gaat dan pas door. De hele
   site herhaalt zo hetzelfde betoog, zonder zwaar doek.
   ============================================================ */
.page-head {
  position: relative;
  background:
    radial-gradient(90% 120% at 85% -10%, oklch(0.86 0.08 200 / 0.5), transparent 58%),
    radial-gradient(70% 100% at 15% -20%, oklch(0.88 0.06 295 / 0.3), transparent 60%),
    var(--paper);
  color: var(--text);
  padding: clamp(3.2rem, 7vw, 5.2rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  overflow: hidden;
}
.page-head h1 { color: var(--ink); max-width: 24ch; }
.page-head .lead-geo, .page-head p { color: var(--text); }
.page-head .lead-geo { max-width: var(--measure); }
.page-head a { color: var(--link); }
.page-head :focus-visible { outline-color: var(--signal); }

/* de klaringslijn zelf: de onderrand van de page-head */
.page-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.klaring-lijn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 7px;
  pointer-events: none;
  overflow: hidden;
  /* statische aanwezigheid: de hele onderrand is de lijn, in teal
     dat naar de node toe aanzwelt. Zonder dit spoor leest de node
     als een zwerfpixel in plaats van als handtekening. */
  background:
    linear-gradient(90deg,
      oklch(0.50 0.10 205 / 0.18) 0%,
      oklch(0.50 0.10 205 / 0.4) 40%,
      oklch(0.50 0.10 205 / 0.85) 62%,
      oklch(0.50 0.10 205 / 0.25) 72%,
      oklch(0.50 0.10 205 / 0.08) 100%)
    50% 3px / 100% 1px no-repeat;
}
.klaring-lijn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal));
  animation: klaring-puls 7s var(--ease-out) infinite;
}
/* de node: het vaste punt waar de mens staat */
.klaring-lijn::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 62%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px 2px oklch(0.50 0.10 205 / 0.5);
}
/* de puls remt bij de node (62%), wacht, en schiet dan door */
@keyframes klaring-puls {
  0% { transform: translateX(-180px); opacity: 1; }
  38% { transform: translateX(calc(62vw - 180px)); }
  52% { transform: translateX(calc(62vw - 180px)); }
  78% { transform: translateX(100vw); opacity: 1; }
  79%, 100% { transform: translateX(100vw); opacity: 0; }
}

.price-note {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--signal-deep);
  border-radius: var(--radius-pill);
  font-variation-settings: var(--wd-slot);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-note .was { color: var(--muted); text-decoration: line-through; }
.price-note .now { color: var(--signal); }

/* ---------- factbar: de vaste regels van het bord ---------- */
.factbar {
  background: var(--strip);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.factbar .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}
.fact {
  padding: 1.3rem clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--line);
}
.fact:first-child { border-left: 0; }
.fact .t {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--signal);
  margin-bottom: 0.35rem;
}
.fact .d { display: block; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
@media (max-width: 780px) {
  .fact { border-left: 0; border-top: 1px solid var(--line); }
  .fact:first-child { border-top: 0; }
}

/* ---------- sticky-split: statement links blijft staan,
   de stroken rechts schuiven erlangs ---------- */
.sticky-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.sticky-split > .pin { position: sticky; top: clamp(5rem, 14vh, 8rem); }
.sticky-split .pin h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.02; }
@media (max-width: 860px) {
  .sticky-split { grid-template-columns: 1fr; }
  .sticky-split > .pin { position: static; }
}

/* ============================================================
   HET BEWIJS: marquee + generatieve merktegels
   Vier echte bedrijven, elk met een eigen lichtveld dat live
   op canvas wordt getekend. Geen stockfoto's: het beeld is
   van ons, want het is berekend.
   ============================================================ */
/* de ticker: het audit-spoor als bewegend element. Geen verzonnen
   cijfers of tijden, alleen de echte processtappen die deze vier
   bedrijven dagelijks doorlopen. De machine spreekt mono. */
.ticker {
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: mq 46s linear infinite;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}
.ticker .tk b { color: var(--ink); font-weight: 600; }
.ticker .tk i { color: var(--signal); font-style: normal; font-weight: 600; }
@keyframes mq { to { transform: translateX(-50%); } }

/* de bedrijvenrij: vijf wordmarks in de eigen typografie, tussen
   twee regels. Geen kunst, geen kleur: namen die je kunt nalopen. */
.brandrow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brandrow a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(0.9rem, 1.8vw, 1.3rem);
  border-left: 1px solid var(--line);
  transition: background-color 0.16s var(--ease-out);
}
.brandrow a:first-child { border-left: 0; }
.brandrow a:hover { background: var(--strip); text-decoration: none; }
.brandrow .bn {
  color: var(--ink);
  font-weight: 850;
  font-variation-settings: "wght" 850, "wdth" 112;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -0.01em;
}
.brandrow a:hover .bn { color: var(--signal); }
.brandrow .bd { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.brandrow .bd::after { content: " ↗"; }
.brandrow a:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
@media (max-width: 900px) {
  .brandrow { grid-template-columns: repeat(2, 1fr); }
  .brandrow a { border-left: 0; border-top: 1px solid var(--line); }
  .brandrow a:nth-child(-n+2) { border-top: 0; }
  .brandrow a:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .brandrow { grid-template-columns: 1fr; }
  .brandrow a:nth-child(even) { border-left: 0; }
  .brandrow a:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ---------- de werkbak: het goedkeurmoment zelf ---------- */
.panel-demo {
  background: var(--board);
  color: var(--on-board);
  border: 1px solid var(--board-line);
  border-radius: 8px;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow-board);
  --ink: var(--on-board);
  --text: var(--on-board);
  --muted: var(--on-board-dim);
  --signal: var(--signal-bright);
  --line: var(--board-line);
  --focus: var(--signal-bright);
}
/* op het heldere cyaan hoort donkere knoptekst */
.panel-demo .btn-primary, .band .btn-primary, .board .btn-primary,
.panel-demo .btn-primary:hover, .band .btn-primary:hover, .board .btn-primary:hover {
  color: oklch(0.17 0.03 220);
}
.demo-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-board-dim);
  margin-bottom: 0.8rem;
}

/* status-label in lopende koppen. "beschikbaar" en "op de roadmap"
   MOETEN visueel verschillen, en het verschil zit in een mark,
   niet alleen in kleur. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: middle;
  margin-left: 0.5em;
  padding: 0.12em 0.55em 0.14em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-variation-settings: var(--wd-slot);
  /* ondergrens: in kleine lijstjes mag het label niet onder de
     leesbaarheidsgrens zakken */
  font-size: max(0.62em, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.tag::before { content: "○"; font-size: 0.9em; line-height: 1; }
.tag.ok {
  color: var(--signal);
  border-color: var(--signal-deep);
  background: oklch(0.50 0.10 205 / 0.07);
}
.tag.ok::before { content: "✓"; font-weight: 900; }
.wb-item { background: var(--board-2); border: 1px solid var(--board-line); border-radius: 6px; padding: clamp(0.9rem, 2vw, 1.3rem); }
.wb-head .type {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--signal);
  margin-bottom: 0.25rem;
}
.wb-head .title { display: block; color: var(--on-board); font-weight: 700; font-size: var(--fs-lg); font-variation-settings: var(--wd-display); margin-bottom: 0.8rem; }
.wb-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.pill {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--on-board-dim);
  background: oklch(0 0 0 / 0.32);
  border: 1px solid var(--board-line);
  border-radius: var(--radius);
  padding: 0.22rem 0.5rem;
}
.pill b { color: var(--on-board); font-weight: 700; }
.pill.ok { border-color: var(--signal-deep); }
.pill.ok b { color: var(--signal); }
.wb-body { border-top: 1px solid var(--board-line); border-bottom: 1px solid var(--board-line); padding: 0.9rem 0; margin-bottom: 0.9rem; }
.wb-body p { color: var(--on-board-dim); font-size: var(--fs-sm); margin-bottom: 0.5em; }
.wb-body p:last-child { margin-bottom: 0; }
.wb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.wb-actions .note { font-size: var(--fs-xs); color: var(--on-board-dim); }
.caption { font-size: var(--fs-sm); color: var(--on-board-dim); margin: 0.9rem 0 0; }

/* ---------- lead-split: een statement met toelichting ernaast ---------- */
.lead-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.lead-split > h2 {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.05;
  margin: 0;
  overflow-wrap: break-word;
}
.lead-split > h2 em { color: var(--signal); font-style: normal; }
.lead-body { padding-top: 0.4rem; }
.lead-body .lead-geo { margin-bottom: 1rem; }
.lead-body > p:last-child { margin-bottom: 0; }
@media (max-width: 780px) {
  .lead-split { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ---------- split + aside ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
/* de split blijft binnen de leeskolom: een bredere wrap zou de
   linker-rail breken op pagina's die splits en stroken mengen */
/* om-en-om: op pagina's met een reeks split-secties wisselt het
   zijblok van kant, zodat het stramien niet vijf keer identiek
   gestempeld oogt */
@media (min-width: 861px) {
  main > .section:nth-of-type(even) .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  main > .section:nth-of-type(even) .split > .aside { order: -1; }
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.aside {
  background: var(--strip);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.aside h3 { font-size: var(--fs-base); font-variation-settings: var(--wd-slot); color: var(--muted); }
.aside ul { padding-left: 1.1em; }
.aside li { font-size: var(--fs-sm); }
.board .aside { background: var(--board-2); border-color: var(--board-line); }

/* ---------- band: de oproep, met ademend licht ---------- */
.band {
  position: relative;
  background: var(--board);
  color: var(--on-board);
  padding: clamp(3.6rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--board-line);
  overflow: hidden;
  isolation: isolate;
  --ink: var(--on-board);
  --text: var(--on-board-dim);
  --signal: var(--signal-bright);
  --line: var(--board-line);
  --focus: var(--signal-bright);
}
.band #ambient { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.85; }
.band .wrap { position: relative; z-index: 1; }
.band h2 { color: var(--on-board); font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); }
.band p { color: var(--on-board-dim); max-width: 56ch; }
.band .btn-ghost { color: var(--on-board); border-color: var(--board-line); }
.band .btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
/* de band lijnt uit met de leeskolom van de secties erboven,
   niet met het bredere site-chrome */
.band .wrap { max-width: 820px; }

/* ---------- formulier ---------- */
.form-card { background: var(--strip); border: 1px solid var(--line); border-radius: 8px; padding: clamp(1.2rem, 3vw, 1.8rem); }
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--ink); margin-bottom: 0.3rem; }
.field input, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--strip-3);
  border-radius: var(--radius);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--signal-deep); }
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: var(--fs-sm); color: var(--muted); }
.form-status { margin-top: 0.9rem; font-size: var(--fs-sm); font-weight: 700; }
.form-status.ok { color: var(--signal); }
.form-status.err { color: oklch(0.48 0.17 25); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--board);
  color: var(--on-board-dim);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem;
  border-top: 1px solid var(--board-line);
  --signal: var(--signal-bright);
  --focus: var(--signal-bright);
}
.pillar-line { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.pillar-line span {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-board-dim);
  border: 1px solid var(--board-line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); padding-bottom: 2rem; border-bottom: 1px solid var(--board-line); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { color: var(--on-board); margin-bottom: 0.7rem; }
.site-footer p { font-size: var(--fs-sm); color: var(--on-board-dim); max-width: 40ch; }
.site-footer h3 {
  color: var(--on-board);
  font-variation-settings: var(--wd-slot);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.7rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.1em; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-board-dim); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--signal-bright); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding-top: 1.2rem; font-size: var(--fs-xs); color: var(--on-board-dim); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .boardstack li { animation: none; opacity: 1; transform: none; }
  .paraaf path { animation: none; stroke-dashoffset: 0; }
  /* het doek tekent zichzelf een keer stil (zie hero.js) en blijft
     dan staan: de scene is er, hij beweegt alleen niet */
  .hero-rail svg { animation: none; }
  .ticker-track { animation: none; }
  .klaring-lijn::before { animation: none; opacity: 0; }
}