/* Self-hosted fonts. Latin + latin-ext only: geen derde partij vóór toestemming.
 *
 * Lato en Spline Sans Mono, en dat is geen smaakwissel. Het zijn de letters van
 * abovebeyond.ai, de studio waar dit onderzoek vandaan komt. Twee sites die
 * hetzelfde werk dragen en elkaar over en weer noemen horen niet uit twee
 * lettergezinnen te komen: dan leest de verwantschap als een link in plaats van
 * als een feit. Inter en Schibsted Grotesk waren goed gekozen en zijn eruit om
 * deze reden alleen.
 */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-latin-400.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/lato-latin-400-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/lato-latin-700.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/lato-latin-ext-900.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/lato-latin-900.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spline-sans-mono-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spline-sans-mono-latin-400.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spline-sans-mono-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/spline-sans-mono-latin-400-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/spline-sans-mono-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/spline-sans-mono-latin-500.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   trustedagentic.ai — Design System
   Eén huis met abovebeyond.ai: dezelfde letters, dezelfde grond, hetzelfde
   accent. Wat hier vandaan komt zijn de drie PAC-kleuren — die staan al in
   het palet van de studio (--fill-1 tot 3 daar) en blijven hier de bron.
   ========================================================================== */

/* --- Tokens --- */
:root {
  /* De ladder van abovebeyond.ai, letterlijk. Breed aan beide uiteinden: een
     echt wit voor wat opgetild wordt, een nacht die dieper is dan de inkt
     waarmee de pagina geschreven is, zodat een donkere sectie landt als een
     andere grond en niet als een grijs vlak. */
  --ink: #0e2433;
  --night: #14233b;
  --sky: #f2f6f7;
  --haze: #a8bfc9;
  --card: #fafcfd;
  --tint: #dfe8eb;
  --haze-line: rgba(14, 36, 51, 0.18);
  --shadow: 0 2px 4px rgba(14, 36, 51, 0.08), 0 18px 50px rgba(14, 36, 51, 0.16);

  /* Namen die de site al gebruikt, nu op de waarden van de studio. Ze blijven
     bestaan omdat 3.000 regels ernaar wijzen; wat ze aanwijzen is verhuisd. */
  --bg: var(--sky);
  --bg-elevated: var(--tint);
  --border: var(--haze-line);
  --text: var(--ink);
  --text-muted: #47616f;

  /* Eén accent, en het is het accent van de studio: een echt blauw in plaats
     van het blauwgrijs dat hier stond. De opgetilde waarde draagt op de
     nachtgrond, de diepe op het bleke vel. Geen enkele kleur haalt 4,5:1 op
     allebei, dus het zijn er twee. */
  --accent: #1a4fb4;
  --accent-lift: #6d9bff;

  /* PAC. Deze drie zijn hier gekozen en staan sinds de laatste redesign ook in
     abovebeyond.ai als --fill-1 tot 3. Ze veranderen dus niet: ze zijn het
     enige stuk van dit palet dat de andere kant heeft overgenomen, en dat is
     precies de verwantschap die zichtbaar hoort te blijven. */
  --potential: #2563eb;
  --accountability: #fbbf24;
  --control: #4ade80;
  /* De diepe varianten, voor waar de letter op bleek papier gelezen moet
     worden. Amber haalt daar 1,9:1 en dat is een kleur die je ziet en een
     woord dat je niet leest. */
  --potential-deep: #1a4fb4;
  --accountability-deep: #7d5806;
  --control-deep: #216c43;

  --font-body: 'Lato', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;
  /* Een systeemschreef, geen gedownloade. Ze zet één ding: de regel onder het
     woordmerk. Dat is de plek waar abovebeyond.ai "digital studio" zet, en de
     cursieve schreef daar is het herkenningsteken van het huis. */
  --font-serif: Georgia, 'Times New Roman', serif;

  --max-width: 1120px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-xxl: 7rem;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  /* Lato zet kleiner dan Inter op dezelfde maat. Dit is de maat van
     abovebeyond.ai, en met deze letter leest ze als 16px las. */
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Filmkorrel over alles: het veld waar dingen uit opduiken.
 *
 * Dit is het handschrift van de studio en het enige puur decoratieve element
 * dat beide sites delen. Het staat er om precies die reden: een bezoeker die
 * van abovebeyond.ai komt herkent de grond onder zijn voeten voor hij één
 * woord gelezen heeft. Het ligt boven de inhoud maar vangt geen klikken, en
 * het staat stil zodra iemand minder beweging vraagt. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 80;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.28;
  animation: grain 3.2s steps(3) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-1.2%, 0.8%); }
  50%      { transform: translate(0.9%, -1.1%); }
  75%      { transform: translate(-0.6%, -0.5%); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

a { color: inherit; text-decoration: none; }
.hidden { display: none; }
img { max-width: 100%; display: block; }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

section {
  padding: var(--space-xl) 0;
}

section.elevated {
  background: var(--bg-elevated);
}

/* --- Night sections ---
 *
 * De grond was var(--night), hetzelfde als de inkt: een donkere sectie las daardoor
 * als een grijs vlak op een bleek vel. --night is dieper dan de inkt waarmee
 * geschreven wordt, dus ze landt als een andere grond. Hetzelfde marineblauw
 * als abovebeyond.ai en als het dashboard van Elixir: die drie horen op één vel
 * te kunnen staan.
 *
 * De letter erop is --sky, niet het warme wit dat hier stond. Twee witten in
 * één systeem is een keuze die niemand kan navertellen. */
.section--dark {
  /* De tokens worden HIER opnieuw gezet, en dat is de hele truc.
   *
   * Eerst stond hier alleen een grond en een letterkleur, en werd elk
   * onderdeel dat op --text-muted stond apart teruggezet. Dat werkt tot je er
   * eentje vergeet, en dan staat er donkergrijs op donkerblauw: zichtbaar als
   * vlek, onleesbaar als woorden. Precies dat gebeurde met de bio en met de
   * lede onder de CTA-kop.
   *
   * Een variabele die je binnen de sectie herdefinieert bereikt alles wat
   * eronder valt, inclusief inline-stijlen en componenten die hier nooit van
   * gehoord hebben. Wie een nieuw onderdeel bouwt hoeft dus niets te weten van
   * de nachtgrond: het klopt vanzelf, of het klopt nergens. */
  --text: var(--sky);
  --text-muted: var(--haze);
  --border: rgba(242, 246, 247, 0.18);
  --card: rgba(242, 246, 247, 0.05);
  --tint: rgba(242, 246, 247, 0.05);
  --accent: var(--accent-lift);
  /* Op de nachtgrond dragen de PAC-kleuren hun heldere waarde: de diepe zijn
     gekozen om op bleek papier te dragen en zijn hier modder. */
  --potential-deep: var(--potential);
  --accountability-deep: var(--accountability);
  --control-deep: var(--control);

  background: var(--night);
  color: var(--sky);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark strong {
  color: var(--sky);
}


.section--dark .label,
.section--dark .eyebrow {
  color: var(--accent-lift);
}

.section--dark a {
  color: var(--sky);
}

.section--dark a:hover {
  opacity: 0.8;
}

.section--dark .btn {
  background: var(--sky);
  color: var(--night);
}

.section--dark .btn:hover {
  opacity: 0.9;
}

.section--dark .btn.btn--outline {
  background: transparent;
  color: var(--sky);
  border-color: rgba(242, 246, 247, 0.32);
}

.section--dark .btn.btn--outline:hover {
  border-color: var(--sky);
  color: var(--sky);
}

/* Op de nachtgrond dragen de PAC-kleuren hun opgetilde waarde. Dat is waarom er
   twee per pijler zijn: geen van de drie haalt 4,5:1 op zowel het bleke vel als
   hier. */

/* --- Site Banner --- */
.site-banner {
  background: var(--bg);
  color: var(--accent);
  font-size: 0.85rem;
  padding: 0.6em 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.site-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.site-banner__text {
  color: var(--accent);
}

.site-banner__text strong {
  color: var(--text);
}

.site-banner__link {
  color: var(--accent);
  font-weight: 600;
}

.site-banner__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Typography ---
 *
 * Lato in plaats van Inter, en Lato zet krapper: de koppen staan daarom op 700
 * in plaats van 600 en de tracking is ruimer (-0.02em waar -0.03em stond).
 * Dezelfde maten als in de studio, zodat een kop op beide sites hetzelfde
 * gewicht heeft in het oog. */
h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 2.5vw, 1.25rem); letter-spacing: -0.015em; }

p { margin-bottom: var(--space-sm); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

em { font-style: italic; }

/* Inline code en protocolnamen in de mono van het huis. Ze was hier een lijst
   van vier fallbacks die per machine iets anders opleverde; nu staat er één
   letter, dezelfde als in de eyebrows en de nav. */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* De eyebrow. Ze was een kapitaal-gezette sans met wijde spatiëring; ze is nu
   de mono met een haarlijn erboven, precies zoals in de studio. Dat streepje
   doet het echte werk: het zet een sectie af zonder een vlak of een lijn over
   de volle breedte, en het is het detail waaraan je de twee sites naast elkaar
   herkent. */
.label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
  display: block;
}

/* De haarlijn hoort bij de eyebrow die een sectie OPENT, niet bij elke label
   in een kaart of een kolom. Directe kinderen van .container zijn precies de
   openers. */
.container > .label {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-bottom: var(--space-md);
}


.section-intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 680px;
  margin-bottom: var(--space-lg);
  line-height: 1.7;
  /* Uitgevuld zetten trekt rivieren door een kolom van 680px zonder afbreking,
     en Lato heeft bredere spaties dan Inter, dus het werd zichtbaarder. */
  text-align: left;
}

.section-intro a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}

.section-intro a:hover {
  text-decoration-color: var(--accent);
}

.section--dark .section-intro a {
  color: var(--sky);
  text-decoration-color: rgba(242, 246, 247, 0.35);
}

.section--dark .section-intro a:hover {
  text-decoration-color: var(--accent-lift);
}

/* --- Nav ---
 *
 * Het woordmerk krijgt een regel eronder, en dat is de belangrijkste wijziging
 * op deze pagina. Op abovebeyond.ai staat daar "digital studio" in een
 * cursieve schreef; hier staat wie dit maakt. Twee sites die naar elkaar
 * verwijzen maar allebei anoniem beginnen laten de bezoeker raden of het
 * dezelfde mensen zijn. Nu staat het antwoord boven de vouw, op elke pagina.
 *
 * De links zijn mono geworden. Dat is niet decoratie: het is het enige plekje
 * waar de twee sites hun navigatie identiek zetten, en het is wat de nav van
 * de inhoud onderscheidt zonder een balk of een schaduw. */
.nav {
  padding: var(--space-md) 0;
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nav__brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Het hele merk staat boven het mobiele overlay-menu, niet alleen het woord.
     Stond de z-index op .nav__logo, dan bleef de naam staan en verdween de
     regel eronder: precies het stuk dat vertelt wiens site dit is. */
  z-index: 201;
}

.nav__logo {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* De regel onder het woordmerk: cursieve schreef, klein, gedempt. Dezelfde
   plek en dezelfde behandeling als "digital studio" bij de studio. */
.nav__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.nav__tag a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}

.nav__tag a:hover {
  text-decoration-color: var(--accent);
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0.65;
  transition: opacity 0.2s;
  /* Raakvlakken onder de 24px op een klein scherm zijn geen doelen. */
  display: inline-block;
  padding-block: 0.35rem;
}

.nav__link:hover {
  opacity: 1;
}

.nav__links {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.nav__link--active {
  opacity: 1;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 0.15rem;
}

.nav__lang {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-left: 0.5rem;
  padding-left: var(--space-sm);
  border-left: 1px solid var(--border);
}

.nav__lang-current {
  color: var(--text);
}

.nav__lang-sep {
  color: var(--text-muted);
  opacity: 0.4;
}

.nav__lang-link {
  color: var(--text);
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav__lang-link:hover {
  opacity: 1;
}

/* Hamburger button - hidden on desktop */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  flex-direction: column;
  gap: 5px;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}

.nav__toggle--open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__toggle--open span:nth-child(2) {
  opacity: 0;
}
.nav__toggle--open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 639px) {
  .nav__toggle {
    display: flex;
    z-index: 201;
  }

  .nav__links {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    background: var(--bg);
    z-index: 200;
    padding-bottom: 15vh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .nav__links--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Het overlay-menu is geen navigatiebalk maar een pagina op zich: daar leest
     de mono op 1.35rem als een terminal en niet als een menu. */
  .nav__links .nav__link {
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 400;
    opacity: 0.65;
    padding: 0.5rem 0;
    border-bottom: none;
  }

  .nav__links .nav__link--active {
    opacity: 1;
    font-weight: 700;
  }

  .nav__lang {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    font-size: 0.9rem;
  }

  .nav {
    position: relative;
  }

  /* De regel onder het woordmerk verdwijnt niet op mobiel: ze is te kort om in
     de weg te staan en te belangrijk om weg te laten. */
  .nav__tag {
    font-size: 0.78rem;
  }
}

.nav__byline {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.nav__byline:hover {
  color: var(--text);
}

/* --- Accent utility --- */
.accent { color: var(--accent); }

/* --- Questions --- */
.questions {
  padding: var(--space-xl) 0;
  background: var(--bg-elevated);
}

.questions__intro {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.questions__viewport {
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 20%, black 42%, black 58%, rgba(0,0,0,0.15) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 20%, black 42%, black 58%, rgba(0,0,0,0.15) 80%, transparent 100%);
}

.questions__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.questions__item {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  padding: var(--space-md) var(--space-md);
  border-left: 2px solid var(--accent);
  flex-shrink: 0;
  text-align: center;
  border-left: none;
}

.questions__toggle {
  display: block;
  margin: var(--space-sm) auto 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.questions__toggle:hover {
  color: var(--text);
}

.questions__viewport.is-expanded {
  -webkit-mask-image: none;
  mask-image: none;
  height: auto !important;
}

.questions__viewport.is-expanded .questions__list {
  transform: none !important;
  transition: none !important;
}

.questions__viewport.is-expanded .questions__item {
  text-align: left;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  padding-left: 1.2em;
  position: relative;
}

.questions__viewport.is-expanded .questions__item::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* --- Hero --- */
.hero {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
#hero-particles.ready {
  opacity: 1;
}

/* De badge was een pil met een kader eromheen. Er staat nergens anders in dit
   systeem een pil, en een kader om twee woorden is een knop die niets doet.
   Wat overblijft is de mono met een haarlijn erboven: dezelfde vorm als de
   eyebrow, want het is dezelfde soort regel. */
.hero__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--text-muted);
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 0.9rem 0 0;
  border-radius: 0;
  margin-bottom: var(--space-lg);
}

.hero .container {
  position: relative;
  z-index: 1;
}

/* De kop stond in een bewegend verloop van elf stops over de volle regel, in
   drie kleuren, zestien seconden per cyclus. Dat is precies wat de studio over
   dit onderwerp opschreef: overal een verloop is nergens een verloop. Het
   verloop blijft bestaan en verhuist naar één gemarkeerd woord (.grad
   hieronder); de rest van de kop staat in inkt en is dus ook gewoon te lezen
   als background-clip niet aankomt. */
.hero h1 {
  max-width: 860px;
  margin: 0 auto var(--space-lg);
  color: var(--text);
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

/* Het verloop van het merk, op woorden die het verdienen: cyaan naar blauw,
   dezelfde twee stops als in de studio. Fallbackkleur eerst, want clip-op-tekst
   is een extra en geen voorwaarde om te lezen. */
.grad {
  color: var(--accent);
  background: linear-gradient(105deg, #22d3ee, #1a4fb4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section--dark .grad {
  color: var(--accent-lift);
  background: linear-gradient(105deg, #7de9f7, #6d9bff);
  -webkit-background-clip: text;
  background-clip: text;
}


.hero__subtitle {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.7;
}

.hero__subtitle .highlight {
  color: var(--text);
  font-weight: 600;
}

.hero__target {
  max-width: 700px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}

.hero__target strong {
  color: var(--text);
}

/* --- Tension --- */
.tension {
  padding: var(--space-xl) 0;
}

.tension {
  padding: var(--space-xl) 0;
}

/* --- Stats --- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
  .stats-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.stat {
  padding: var(--space-md);
  border-left: 2px solid var(--accent);
}

.stat__number {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--space-xs);
}



.stat__text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-xs);
}

.stat__source {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.stat__source:hover {
  color: var(--text);
}

.stats-summary {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 640px;
  margin: var(--space-lg) auto 0;
  text-align: center;
}

/* --- Timeline --- */
.timeline {
  padding: var(--space-xl) 0;
  overflow-x: auto;
}

.timeline__sentiment {
  position: relative;
  height: 150px;
  margin-bottom: var(--space-sm);
}

.timeline__curve {
  width: 100%;
  height: 100%;
}

.timeline__y-label {
  position: absolute;
  top: 50%;
  left: -1.5rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateX(50%);
}

.timeline__track {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.timeline__track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
}

.timeline__track::after {
  content: '';
  position: absolute;
  top: 3px;
  right: -1px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--border);
  transform: translateY(-2px);
}

.timeline__point {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
  padding: 0 var(--space-sm);
}

.timeline__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.timeline__date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}

.timeline__point--now .timeline__date {
  color: var(--accent);
}

.timeline__point--now .timeline__marker {
  width: 10px;
  height: 10px;
  background: var(--accent);
}

.timeline__label {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.timeline__point--now .timeline__label {
  color: var(--accent);
  font-weight: 600;
}

.timeline__legend {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.timeline__legend-item {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.timeline__legend-item::before {
  content: '';
  width: 20px;
  height: 2px;
  border-top: 2px dashed;
}

.timeline__legend-item--up::before {
  border-color: #5a82a8;
}

.timeline__legend-item--down::before {
  border-color: #c4847e;
  opacity: 0.6;
}

/* --- Venn --- */
.framework__top {
  margin-bottom: var(--space-lg);
}

.venn {
  display: flex;
  justify-content: center;
}

.venn__svg {
  width: 200px;
  height: auto;
}

@media (min-width: 640px) {
  .framework__top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-lg);
    align-items: start;
  }

  .venn {
    margin-top: -1rem;
  }

  .venn__svg {
    width: 440px;
  }
}

/* --- Framework --- */
.framework .section-intro {
  max-width: 680px;
}

.framework h2 {
  margin-bottom: var(--space-sm);
}

.framework__closing {
  margin-top: var(--space-lg);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}


.framework .btn {
  margin-top: var(--space-md);
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* De kaart staat op papierwit en niet op de paginagrond. Ze had exact de kleur
   van het vel eronder en werd dus alleen door haar kader een kaart; nu tilt ze
   op, zoals in de studio. --card is bewust geen zuiver wit: elk ander vlak hier
   draagt een spoor van het blauw, en een ongetint vlak ernaast leest als het
   ene ding dat niemand gekozen heeft. */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: var(--space-md);
}

.card h3 {
  margin-bottom: var(--space-xs);
}

.card h3 .letter {
  color: var(--accent);
  margin-right: 0.15em;
}

.card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Op de nachtgrond is papierwit een gat. Daar is de kaart de opgetilde grond,
   dezelfde als de sectie maar een stap lichter. */

/* PAC pillar accents. De randen dragen de heldere waarde, de LETTER op bleek
   papier de diepe: amber haalt op dit vel 1,9:1 en dat is een kleur die je
   ziet en een woord dat je niet leest. */
.card--potential { border-left: 3px solid rgba(37,99,235,0.5); }
.card--accountability { border-left: 3px solid rgba(251,191,36,0.6); }
.card--control { border-left: 3px solid rgba(74,222,128,0.6); }

.card--potential h3 .letter { color: var(--potential-deep); }
.card--accountability h3 .letter { color: var(--accountability-deep); }
.card--control h3 .letter { color: var(--control-deep); }

/* Offering card accents */
.card--offering-framework { border-top: 3px solid var(--border); }
.card--offering-tools { border-top: 3px solid var(--border); }
.card--offering-programme { border-top: 3px solid rgba(251,191,36,0.4); }
.card--offering-workshop { border-top: 3px solid rgba(147,51,234,0.4); }
.card--offering-consultancy { border-top: 3px solid rgba(74,222,128,0.4); }

.card__tier {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

/* --- Profiler --- */
.profiler h2 {
  margin-bottom: var(--space-sm);
}

.profiler__showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.profiler__preview {
  order: -1;
}

@media (min-width: 640px) {
  .profiler__showcase {
    flex-direction: row;
    align-items: flex-start;
  }

  .profiler__preview {
    order: 0;
  }
}

.profiler__text {
  flex: 1;
  min-width: 0;
}

.profiler__features {
  list-style: none;
  margin-bottom: var(--space-lg);
}

.profiler__features li {
  font-size: 0.92rem;
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  padding-left: 1.2em;
  position: relative;
  line-height: 1.6;
}

.profiler__features li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.profiler__features li strong {
  color: var(--text);
}

.profiler__preview {
  display: block;
  flex: 1.4;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.profiler__preview:hover {
  border-color: var(--accent);
}

.profiler__preview img {
  width: 100%;
  height: auto;
  display: block;
}

.profiler__bridge {
  margin-top: var(--space-lg);
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- Instructor --- */
.instructor__card {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.instructor__photo {
  width: 240px;
  height: 300px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  image-rendering: smooth;
}

.instructor__text {
  flex: 1;
  min-width: 0;
  max-width: 640px;
}

.instructor__name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.2em;
}

.instructor__subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: var(--space-sm);
}

.instructor__bio p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-sm);
  /* Uitgevuld zonder afbreking trekt rivieren, en Lato heeft bredere spaties
     dan Inter: wat met de oude letter net kon, kan met deze niet meer. */
  text-align: left;
}

.instructor__bio strong {
  color: var(--text);
}

.instructor__bio a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.instructor__bio a:hover {
  color: var(--accent);
}

@media (max-width: 639px) {
  .instructor__card {
    flex-direction: column;
  }
}

.credentials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
  .credentials-grid { grid-template-columns: 1fr 1fr; }
}

.credentials-grid li {
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 1.2em;
  position: relative;
}

.credentials-grid li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* --- Programme / Schedule --- */
.programme h2 {
  margin-bottom: var(--space-sm);
}

.schedule {
}

.schedule-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border);
}

.schedule-row:last-child {
  border-bottom: 1px solid var(--border);
}

@media (min-width: 640px) {
  .schedule-row {
    grid-template-columns: 4.5rem 5.5rem 10rem 1fr;
    align-items: baseline;
    gap: var(--space-md);
  }
}

.schedule-week {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.schedule-date {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
}

.schedule-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.schedule-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.schedule-stakeholders {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (min-width: 640px) {
  .schedule-stakeholders {
    grid-column: 4;
  }
}

.schedule-note {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.schedule-note--before {
  margin-bottom: var(--space-lg);
}

.schedule-note--after {
  margin-top: var(--space-md);
}

/* --- Curriculum --- */
.curriculum h2 {
  margin-bottom: var(--space-sm);
}

.curriculum__accordion {
  display: flex;
  flex-direction: column;
}

.curriculum__session {
  border-top: 1px solid var(--border);
}

.curriculum__session:last-child {
  border-bottom: 1px solid var(--border);
}

.curriculum__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.curriculum__header::-webkit-details-marker {
  display: none;
}

.curriculum__header::marker {
  content: '';
}

.curriculum__pillar {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 5.5rem;
}

.curriculum__pillar .letter {
  color: var(--accent);
  margin-right: 0.15em;
}

.curriculum__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.curriculum__chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  position: relative;
}

.curriculum__chevron::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 0.2s ease;
}

.curriculum__session[open] .curriculum__chevron::before {
  transform: translate(-50%, -35%) rotate(-135deg);
}

.curriculum__body {
  padding: 0 0 var(--space-md);
}

.curriculum__body ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .curriculum__body ul { grid-template-columns: 1fr 1fr; }
}

.curriculum__body li {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  padding-left: 1.2em;
  position: relative;
  line-height: 1.6;
}

.curriculum__body li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.curriculum__body li strong {
  color: var(--text);
  font-weight: 600;
}

/* --- Included --- */
.included h2 {
  margin-bottom: var(--space-sm);
}

.included-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

@media (min-width: 640px) {
  .included-grid { grid-template-columns: 1fr 1fr; }
}

.included-grid li {
  list-style: none;
  font-size: 0.92rem;
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  padding-left: 1.6em;
  position: relative;
}

.included-grid li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.included-grid li strong {
  color: var(--text);
}

/* --- Fit --- */
.fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .fit { grid-template-columns: 1fr 1fr; }
}

.fit__col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-md);
}

.fit__col h3 {
  margin-bottom: var(--space-md);
  font-size: 1.15rem;
}

.fit__col ul {
  list-style: none;
}

.fit__col ul li {
  font-size: 0.92rem;
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  padding-left: 1.4em;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.fit__col ul li:last-child {
  border-bottom: none;
}

.fit__col.yes li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.fit__col.no li::before {
  content: "\00d7";
  position: absolute;
  left: 0;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 1.1em;
}

/* De statline: één mono-regel onderaan een sectie met de verwijzing die erbij
 * hoort. Rechtstreeks uit de studio overgenomen, en met opzet dezelfde vorm:
 * het is de regel waarmee beide sites naar elkaar wijzen, dus ze hoort er aan
 * beide kanten hetzelfde uit te zien. Ze scrollt in plaats van te breken,
 * want een afgebroken verwijzing leest als twee. */
.statline {
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  overflow-x: auto;
  white-space: nowrap;
}

.statline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* --- CTA ---
 *
 * De lede onder een CTA-kop stond als inline-stijl op --text-muted. Op een
 * nachtgrond is dat de gedempte kleur van het BLEKE vel, dus las de zin daar op
 * ongeveer 2:1: zichtbaar als vlek, niet als woorden. Een klasse kan wél
 * meebewegen met de grond waarop ze staat. */
.cta__lede {
  max-width: 32rem;
  margin: 0 auto var(--space-lg);
  color: var(--text-muted);
}


.enroll {
  text-align: center;
}

.enroll .container {
  max-width: 640px;
}

.enroll h2 {
  margin-bottom: var(--space-md);
}

.enroll__details {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.enroll__price {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3em;
  letter-spacing: -0.02em;
}

.enroll__vat {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.enroll__note {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-md);
}

.enroll__custom {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-md);
}

.enroll__custom a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.enroll__custom a:hover {
  color: var(--accent);
}

.enroll__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) auto 0;
  max-width: 160px;
}

/* Enroll dark overrides */
.enroll.section--dark {
  position: relative;
  overflow: hidden;
}

.enroll.section--dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #60a5fa 25%, #fbbf24 50%, #4ade80 75%, transparent);
  opacity: 0.7;
}

.enroll.section--dark .enroll__details {
  color: rgba(242, 246, 247, 0.65);
}

.enroll.section--dark .enroll__price {
  color: var(--sky);
  font-size: 2.8rem;
}

.enroll.section--dark .enroll__vat {
  color: var(--haze);
}

.enroll.section--dark .enroll__note {
  color: var(--haze);
}

.enroll.section--dark .btn {
  font-size: 1rem;
  padding: 1em 3.5em;
  box-shadow: 0 0 40px rgba(242, 246, 247, 0.08);
}

.enroll.section--dark .enroll__custom {
  color: var(--haze);
}

.enroll.section--dark .enroll__custom a {
  color: rgba(242, 246, 247, 0.65);
}

.enroll.section--dark .enroll__divider {
  border-top-color: rgba(242, 246, 247, 0.1);
}

.enroll.section--dark .enroll__alt {
  color: var(--haze);
}

.enroll.section--dark .enroll__alt a {
  color: rgba(242, 246, 247, 0.6);
}

.notify {
  text-align: center;
  padding: var(--space-md) 0 var(--space-xl);
}

.notify__intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.notify__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
}

.notify__input {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.6em 0.9em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 200px;
}

.notify__input:focus {
  border-color: var(--accent);
}

@media (max-width: 639px) {
  .notify__form {
    flex-direction: column;
  }

  .notify__input {
    width: 100%;
  }

  .notify__form .btn {
    width: 100%;
  }
}


.btn.btn--outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.9em 2.2em;
}

.btn.btn--outline:hover {
  color: var(--text);
  border-color: var(--text);
}

/* De knop is de mono, zoals de nav. Ze was een sans op 600 met -0.01em, en
   die leest als een kop in het klein; de mono leest als een handeling. De hoek
   gaat van 4px naar 2px: minder rond is minder app en meer instrument. */
.btn {
  display: inline-block;
  background: var(--night);
  color: var(--sky);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.9em 2.2em;
  border: none;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.15s;
  letter-spacing: 0;
  cursor: pointer;
}

.btn--light {
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  padding: 1em 3em;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn:hover {
  opacity: 0.85;
}


/* --- Footer --- */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer__brand {
  max-width: 300px;
}

.footer__logo {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  display: block;
  margin-bottom: var(--space-xs);
}

.footer__tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* De huisregel. Mono, zoals de statline in de studio: klein, feitelijk, en
   herkenbaar als hetzelfde soort regel op beide sites. */
.footer__house {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
}

.footer__house a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.footer__col a {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer__col a:hover {
  color: var(--text);
}

.footer__bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-md) 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}

.footer__bottom a {
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer__bottom a:hover {
  color: var(--text);
}

.footer__sep {
  margin: 0 0.4em;
}

/* Footer dark overrides */
.footer.section--dark {
  border-top: none;
}

.footer.section--dark .footer__tagline,
.footer.section--dark .footer__col a,
.footer.section--dark .footer__bottom,
.footer.section--dark .footer__bottom a {
  color: var(--haze);
}

.footer.section--dark .footer__house {
  color: var(--haze);
}

.footer.section--dark .footer__house a {
  color: var(--sky);
  text-decoration-color: rgba(242, 246, 247, 0.4);
}

.footer.section--dark .footer__col a:hover,
.footer.section--dark .footer__bottom a:hover {
  color: var(--sky);
}

.footer.section--dark .footer__heading {
  color: var(--sky);
}

.footer.section--dark .accent {
  color: inherit;
}

.footer.section--dark .footer__bottom {
  border-top-color: rgba(242, 246, 247, 0.15);
}

/* --- Legal Pages --- */
.legal {
  padding: var(--space-xxl) 0 var(--space-xl);
}

.legal h1 {
  margin-bottom: var(--space-lg);
}

.legal__content {
  max-width: 700px;
}

.legal__content h2 {
  font-size: 1.1rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.legal__content p,
.legal__content li {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal__content ul {
  padding-left: 1.2em;
  margin-bottom: var(--space-sm);
}

.legal__content a {
  color: var(--text);
  text-decoration: underline;
}

.legal__content a:hover {
  color: var(--text-muted);
}

.legal__content em {
  font-size: 0.85rem;
}

/* --- Thank You --- */
.thank-you {
  padding: var(--space-xxl) 0 var(--space-xl);
  text-align: center;
}

.thank-you h1 {
  margin-bottom: var(--space-sm);
}

.thank-you__subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 540px;
  margin: 0 auto var(--space-xl);
}

.thank-you__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  text-align: left;
}

@media (min-width: 640px) {
  .thank-you__steps { grid-template-columns: repeat(3, 1fr); }
}

.thank-you__step {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--space-md);
}

.thank-you__step-number {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border-radius: 50%;
  margin-bottom: var(--space-xs);
}

.thank-you__step h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}

.thank-you__step p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.thank-you__details {
  max-width: 480px;
  margin: 0 auto var(--space-lg);
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--space-md);
}

.thank-you__details p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.thank-you__details p:last-child {
  margin-bottom: 0;
}

.thank-you__details strong {
  color: var(--text);
}

/* --- Responsive spacing --- */
@media (max-width: 639px) {
  section {
    padding: var(--space-lg) 0;
  }
  .hero {
    padding: var(--space-xl) 0 var(--space-lg);
  }
  .container {
    padding: 0 var(--space-sm);
  }
  .timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .timeline .container {
    min-width: 520px;
  }
  .timeline__label {
    font-size: 0.75rem;
  }
  #intro-viz {
    display: none;
  }
}

/* ==========================================================================
   Framework Page
   ========================================================================== */

/* --- Framework Hero --- */
.framework-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-md) 0 var(--space-xl);
}

.framework-hero .container {
  position: relative;
  z-index: 1;
}

.framework-hero h1 {
  margin-bottom: var(--space-xs);
}

.framework-hero__subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
}

.framework-hero__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .framework-hero__layout {
    flex-direction: row;
    align-items: flex-start;
  }
}

.framework-hero__visual {
  flex-shrink: 0;
  width: 440px;
  aspect-ratio: 11 / 10;
  display: flex;
  justify-content: flex-start;
  margin-left: -20px;
}

.framework-hero__visual canvas {
  width: 100% !important;
  height: 100% !important;
}

.framework-hero__visual img {
  width: 100%;
  height: auto;
}

@media (max-width: 639px) {
  .framework-hero__visual {
    width: 180px;
    margin: 0 auto;
  }
}

.framework-hero__text {
  flex: 1;
  min-width: 0;
}

.framework-hero__intro {
  color: var(--text-muted);
  font-size: 0.935rem;
  line-height: 1.7;
  /* Uitgevuld zonder afbreking trekt rivieren, en Lato heeft bredere spaties
     dan Inter: wat met de oude letter net kon, kan met deze niet meer. */
  text-align: left;
}

/* --- Framework Hero: Lead + Pillar Rotator --- */
.framework-hero__lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.pillar-rotator {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pillar-rotator__item {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, opacity 0.4s;
}

.pillar-rotator--has-active .pillar-rotator__item:not(.pillar-rotator__item--active) {
  opacity: 0.35;
}

.pillar-rotator__item:hover {
  background: rgba(0,0,0,0.02);
}

.pillar-rotator__item--active {
  border-left-color: var(--pillar-color, var(--accent));
  background: rgba(0,0,0,0.03);
}

/* Gevuld badge. Welke letterkleur draagt hangt af van de tint en niet van een
   voorkeur: wit op amber haalt 1,6:1, inkt op amber 9,6:1; op het blauw is het
   precies andersom (wit 5,4:1, inkt 2,9:1). Vandaar --pillar-on: de kleur die
   OP dit vlak leesbaar is, per pijler gezet naast de kleur van het vlak zelf. */
.pillar-rotator__item--active .pillar-rotator__letter {
  background: var(--pillar-color);
  color: var(--pillar-on, var(--sky));
}

.pillar-rotator__item:nth-child(1) { --pillar-on: var(--sky); }
.pillar-rotator__item:nth-child(2) { --pillar-on: var(--ink); }
.pillar-rotator__item:nth-child(3) { --pillar-on: var(--ink); }

.pillar-rotator__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pillar-rotator__letter {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  /* De letter wordt GELEZEN, de rand wordt gezien. Amber haalt op dit bleke vel
     1,9:1: dat is een kleur die je ziet en een woord dat je niet leest. Dus
     draagt de rand de heldere waarde en de letter de diepe. Op de nachtgrond
     wisselen die van plaats, en dat gebeurt vanzelf: --*-deep is daar
     herdefinieerd naar de heldere waarde. */
  color: var(--pillar-ink, var(--pillar-color));
  background: transparent;
  border: 2px solid var(--pillar-color);
  transition: background 0.3s, color 0.3s;
}

.pillar-rotator__name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--text);
}

.pillar-rotator__oneliner {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.pillar-rotator__detail {
  margin-top: 0.5rem;
  padding: 0 0 0 2.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.pillar-rotator__item--integrated {
  border-left-color: var(--pillar-color, var(--accent));
  opacity: 0.6;
}

.pillar-rotator__closing {
  margin-top: var(--space-md);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  cursor: pointer;
}

/* Pillar border color via CSS custom property on the item */
.pillar-rotator__item:nth-child(1) { --pillar-color: var(--potential); --pillar-ink: var(--potential-deep); }
.pillar-rotator__item:nth-child(2) { --pillar-color: var(--accountability); --pillar-ink: var(--accountability-deep); }
.pillar-rotator__item:nth-child(3) { --pillar-color: var(--control); --pillar-ink: var(--control-deep); }

/* --- Highlight span (purple background) --- */
.fw-highlight {
  background: linear-gradient(120deg, rgba(196,181,253,0.2) 0%, rgba(196,181,253,0.33) 100%);
  border-radius: 3px;
  padding: 1px 5px;
  margin: 0 -2px;
}

/* --- Table of contents --- */
.fw-toc {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.fw-toc__label {
  font-weight: 600;
}

.fw-toc a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}

.fw-toc a:hover {
  color: var(--text);
}

/* --- Pillars --- */
.fw-pillars {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.fw-pillar {
  border-left: 2px solid var(--border);
  padding: var(--space-md) var(--space-md);
  border-radius: 0 4px 4px 0;
  background: rgba(0,0,0,0.015);
}

.fw-pillar--potential { border-color: rgba(96,165,250,0.6); }
.fw-pillar--accountability { border-color: rgba(251,191,36,0.6); }
.fw-pillar--control { border-color: rgba(74,222,128,0.6); }

.fw-pillar__title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.fw-pillar__subtitle {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.fw-pillar__body {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: var(--space-xs);
}

.fw-pillar__stakeholders {
  font-size: 0.82rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: var(--space-xs);
}

/* --- Interdependent --- */
/* --- Callouts (colored left border) --- */
.fw-callouts {
  display: grid;
  gap: var(--space-sm);
}

.fw-callout {
  border-left: 2px solid var(--border);
  padding-left: var(--space-md);
}

.fw-callout p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.fw-callout--potential { border-color: rgba(96,165,250,0.6); }
.fw-callout--accountability { border-color: rgba(251,191,36,0.6); }
.fw-callout--control { border-color: rgba(74,222,128,0.6); }

/* --- Inside Each Pillar accordion --- */
.fw-accordion {
  display: flex;
  flex-direction: column;
}

.fw-pillar-detail {
  border-left: 3px solid var(--pillar-color, var(--border));
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
}

.fw-pillar-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  margin: 0 calc(-1 * var(--space-md));
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 6px;
  background: rgba(0,0,0,0.025);
  transition: background 0.15s;
}
.fw-pillar-detail__header:hover {
  background: rgba(0,0,0,0.055);
}

.fw-pillar-detail__header::-webkit-details-marker {
  display: none;
}

.fw-pillar-detail__header::marker {
  content: '';
}

.fw-pillar-detail__letter {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pillar-ink, var(--pillar-color));
  flex-shrink: 0;
  width: 2.2rem;
  text-align: center;
}

.fw-pillar-detail__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.fw-pillar-detail__chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  position: relative;
}

.fw-pillar-detail__chevron::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 0.2s ease;
}

.fw-pillar-detail[open] .fw-pillar-detail__chevron::before {
  transform: translate(-50%, -35%) rotate(-135deg);
}

.fw-pillar-detail__body {
  padding: 0 0 var(--space-md);
}

.fw-pillar-detail__body ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .fw-pillar-detail__body ul { grid-template-columns: 1fr 1fr; }
}

.fw-pillar-detail__body li {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  padding-left: 1.2em;
  position: relative;
  line-height: 1.6;
}

.fw-pillar-detail__body li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.fw-pillar-detail__body li strong {
  color: var(--text);
  font-weight: 600;
}

.fw-legend {
  margin-top: 0;
  border-left: 3px solid var(--border);
  padding-left: var(--space-md);
}

.fw-legend__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.fw-legend__header::-webkit-details-marker { display: none; }
.fw-legend__header::marker { content: ''; }

.fw-legend__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.fw-legend__sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  flex: 1;
}

.fw-legend__sub a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--border);
}

.fw-legend__sub a:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

.fw-legend__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
}

@media (min-width: 640px) {
  .fw-legend__body { grid-template-columns: 1fr 1fr 1fr; }
}

.fw-legend__dim h4 {
  font-size: 0.8rem !important;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.fw-legend__dim p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.3rem;
}

.fw-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0;
  margin-top: 0.3rem;
}

.fw-scale > span {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  /* De opacity van 0,75 bovenop --text-muted bracht deze schaal op 3,5:1. Een
     tweede demping op een kleur die al gedempt is telt op, en dit is een label
     dat gelezen hoort te worden. */
  color: var(--text-muted);
  white-space: nowrap;
}

.fw-scale > span::after {
  content: " → ";
  opacity: 0.6;
}

.fw-scale > span:last-child::after {
  content: none;
}

/* --- Questions --- */
.fw-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.fw-question-group__title {
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.fw-question-list {
  display: flex;
  flex-direction: column;
}

.fw-question {
  border-top: 1px solid var(--border);
}

.fw-question:last-child {
  border-bottom: 1px solid var(--border);
}

.fw-question summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.95rem;
  padding: var(--space-sm) 0;
  padding-left: 1.2em;
  position: relative;
  color: var(--text-muted);
  transition: color 0.2s;
}

.fw-question summary:hover {
  color: var(--text);
}

.fw-question summary::-webkit-details-marker { display: none; }
.fw-question summary::marker { content: ''; }

.fw-question summary::before {
  content: '+';
  position: absolute;
  left: 0;
  opacity: 0.4;
  font-weight: 400;
}

.fw-question[open] summary::before {
  content: '\2212';
}

.fw-question p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 0 0 var(--space-sm) 1.2em;
}

.fw-question a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s;
}

.fw-question a:hover {
  color: var(--text);
}

/* --- Question Preview --- */
.fw-question-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (min-width: 640px) {
  .fw-question-preview { grid-template-columns: 1fr 1fr 1fr; }
}

.fw-question-preview__pillar {
  display: flex;
  gap: var(--space-sm);
}

.fw-question-preview__letter {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* --font-heading bestaat niet en heeft nooit bestaan: dit erfde stilzwijgend
     de bodyletter. Nu staat er wat er bedoeld werd. */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--pillar-ink, var(--pillar-color));
  border: 1.5px solid var(--pillar-color);
  border-radius: 3px;
  margin-top: 0.15rem;
}

.fw-question-preview__pillar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.fw-question-preview__pillar li {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.fw-question-preview__link {
  font-size: 0.95rem;
}

.fw-question-preview__link a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s;
}

.fw-question-preview__link a:hover {
  text-decoration-color: var(--accent);
}

/* --- Iterative --- */
.fw-iterative {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.fw-iterative__closing {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 720px;
}

.fw-iterative__closing a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.2s;
}

.fw-iterative__closing a:hover {
  color: var(--text);
}

/* --- Framework CTA --- */
.fw-cta {
  text-align: center;
  padding: var(--space-xl) 0;
}

.fw-cta .container {
  max-width: 640px;
}

.fw-cta__text {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.fw-cta__secondary {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-md);
}

.fw-cta__secondary a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.fw-cta__secondary a:hover {
  color: var(--accent);
}

/* Framework CTA dark overrides */
.fw-cta.section--dark .fw-cta__text {
  color: rgba(242, 246, 247, 0.7);
}

.fw-cta.section--dark .fw-cta__secondary {
  color: rgba(242, 246, 247, 0.6);
}

.fw-cta.section--dark .fw-cta__secondary a {
  color: var(--sky);
}

.fw-cta.section--dark .fw-cta__secondary a:hover {
  color: rgba(242, 246, 247, 0.8);
}

/* ==========================================================================
   Programme Page
   ========================================================================== */

.programme-hero {
  padding: var(--space-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.programme-shimmer {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  overflow: hidden;
  filter: blur(60px);
  opacity: 1;
}

.programme-shimmer__a,
.programme-shimmer__b,
.programme-shimmer__c {
  position: absolute;
  border-radius: 50%;
}

.programme-shimmer__a {
  width: 50%;
  height: 150%;
  top: -40%;
  left: -5%;
  background: radial-gradient(circle, rgba(20,35,59,0.18) 0%, rgba(109,155,255,0.08) 40%, transparent 65%);
  animation: shimmer-a 8s ease-in-out infinite;
}

.programme-shimmer__b {
  width: 45%;
  height: 140%;
  top: -30%;
  right: -5%;
  background: radial-gradient(circle, rgba(109,155,255,0.15) 0%, rgba(147,51,234,0.06) 40%, transparent 65%);
  animation: shimmer-b 6s ease-in-out infinite;
}

.programme-shimmer__c {
  width: 40%;
  height: 130%;
  bottom: -30%;
  left: 30%;
  background: radial-gradient(circle, rgba(20,35,59,0.12) 0%, rgba(251,191,36,0.05) 40%, transparent 65%);
  animation: shimmer-c 10s ease-in-out infinite;
}

@keyframes hero-gradient {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

@keyframes shimmer-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(25%, 15%) scale(1.1); }
  66%      { transform: translate(8%, -10%) scale(0.95); }
}

@keyframes shimmer-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-20%, 12%) scale(1.05); }
  70%      { transform: translate(-8%, -8%) scale(1.1); }
}

@keyframes shimmer-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(15%, -15%) scale(1.08); }
}

.programme-hero .container {
  position: relative;
  z-index: 1;
}

.programme-hero h1 {
  max-width: 860px;
  margin: 0 auto var(--space-md);
}

.programme-hero__audience {
  display: block;
  font-size: 0.45em;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.3em;
}

.programme-hero__subtitle {
  max-width: 640px;
  margin: 0 auto var(--space-md);
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1.7;
}

.programme-hero__target {
  max-width: 700px;
  margin: 0 auto var(--space-lg);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* --- Quick Facts --- */
.quick-facts {
  padding: var(--space-lg) 0;
}

.quick-facts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .quick-facts__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.quick-facts__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-sm) var(--space-md);
  border-left: 1px solid var(--border);
}

.quick-facts__item:first-child {
  border-left: none;
}

@media (max-width: 639px) {
  .quick-facts__item {
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm) 0;
  }
  .quick-facts__item:last-child {
    border-bottom: none;
  }
}

.quick-facts__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.quick-facts__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.quick-facts__note {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* --- Programme Spotlight (homepage) --- */
.programme-spotlight {
  text-align: center;
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

.programme-spotlight .container {
  position: relative;
  z-index: 1;
}

.programme-spotlight .section-intro {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.programme-spotlight h2 {
  margin-bottom: var(--space-sm);
}

.programme-spotlight__details {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.programme-spotlight__sep {
  margin: 0 0.4em;
}

/* ==========================================================================
   Offerings Section
   ========================================================================== */

.offerings h2 {
  margin-bottom: var(--space-md);
}

.offerings .card-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 899px) {
  .offerings .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .offerings .card-grid { grid-template-columns: 1fr; }
}

.offerings__link {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.offerings__link:hover {
  opacity: 0.7;
}

/* ==========================================================================
   Blog
   ========================================================================== */

/* --- Blog Index --- */
.blog-index {
  padding: var(--space-xl) 0;
}

.blog-index h1 {
  margin-bottom: var(--space-xs);
}

.blog-list {
  display: flex;
  flex-direction: column;
}

.blog-list__item {
  border-top: 1px solid var(--border);
}

.blog-list__item:last-child {
  border-bottom: 1px solid var(--border);
}

.blog-list__link {
  display: block;
  padding: var(--space-md) 0;
  transition: background 0.15s;
}

.blog-list__link:hover .blog-list__title {
  color: var(--accent);
}

.blog-list__date {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.blog-list__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0.2rem 0 0.3rem;
  transition: color 0.2s;
}

.blog-list__summary {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 640px;
}

.blog-list__empty {
  padding: var(--space-lg) 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- Blog Post --- */
.blog-post {
  padding: var(--space-xl) 0;
}

.blog-post__header {
  margin-bottom: var(--space-xl);
}

.blog-post__back {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
  margin-bottom: var(--space-md);
}

.blog-post__back:hover {
  color: var(--text);
}

.blog-post__date {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-xs);
}

.blog-post__header h1 {
  margin-bottom: var(--space-sm);
}

.blog-post__summary {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 640px;
}

.blog-post__content {
  max-width: 700px;
}

.blog-post__content p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.blog-post__content h2 {
  font-size: 1.2rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.blog-post__content h3 {
  font-size: 1.05rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.blog-post__content a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-post__content a:hover {
  color: var(--accent);
}

.blog-post__content ul,
.blog-post__content ol {
  padding-left: 1.4em;
  margin-bottom: var(--space-md);
}

.blog-post__content li {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 0.3rem;
}

.blog-post__content blockquote {
  border-left: 2px solid var(--border);
  padding-left: var(--space-md);
  margin: var(--space-md) 0;
}

.blog-post__content blockquote p {
  font-style: italic;
}

.blog-post__content strong {
  color: var(--text);
}

/* --- Consultancy --- */
.consult-hero {
  padding: var(--space-xl) 0 var(--space-lg);
}

.consult-hero h1 {
  max-width: 800px;
  margin-bottom: var(--space-sm);
}

.consult-how h2,
.consult-engage h2,
.consult-typical h2 {
  margin-bottom: var(--space-sm);
}

.consult-engage__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 640px) {
  .consult-engage__grid { grid-template-columns: 1fr 1fr; }
}

.consult-engage__item {
  border-left: 3px solid var(--border);
  padding-left: var(--space-md);
}

.consult-engage__item--screening { border-left-color: rgba(74,222,128,0.4); }
.consult-engage__item--workshop { border-left-color: rgba(147,51,234,0.4); }
.consult-engage__item--programme { border-left-color: rgba(251,191,36,0.4); }

.consult-engage__item h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}

.consult-engage__item p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.consult-cta {
  text-align: center;
}

.consult-cta h2 {
  margin-bottom: var(--space-sm);
}

.consult-cta__intro {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 580px;
  margin: 0 auto var(--space-md);
}

.consult-cta__speaking {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: var(--space-md);
}

/* Consultancy CTA dark overrides */
.consult-cta.section--dark .consult-cta__intro,
.consult-cta.section--dark .consult-cta__speaking {
  color: rgba(242, 246, 247, 0.7);
}

.consult-engage__detail {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.consult-engage__detail a {
  color: var(--accent);
  font-weight: 500;
}

.workshop-cta__alt {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: var(--space-md);
}

.workshop-cta__alt a {
  color: var(--accent);
  font-weight: 500;
}

/* --- Workshop --- */
.workshop-hero {
  padding: var(--space-xl) 0 var(--space-lg);
}

.workshop-hero h1 {
  max-width: 640px;
  margin-bottom: var(--space-sm);
}

.workshop-what h2,
.workshop-format h2,
.workshop-included h2 {
  margin-bottom: var(--space-sm);
}


/* --- Values --- */
.values-hero {
  padding: var(--space-xl) 0 var(--space-lg);
}

.values-hero h1 {
  max-width: 640px;
  margin-bottom: var(--space-sm);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}

.values-card {
  border-left: 3px solid var(--border);
  padding-left: var(--space-md);
}

.values-card__number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--border);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.values-card h3 {
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}

.values-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.values-card { border-left-color: rgba(26,79,180,0.3); }
/* Het cijfer stond op 25% van het accent: 1,5:1, en dus een vorm en geen
   getal. De studio meet haar stapnummers expliciet na (6,6 tot 9,4); dit is
   dezelfde rol, dus dezelfde eis. */
.values-card__number { color: rgba(26,79,180,0.55); }

/* --- About --- */
.about-hero {
  padding: var(--space-xl) 0 var(--space-lg);
}

.about-hero h1 {
  max-width: 640px;
  margin-bottom: var(--space-sm);
}

.about-mission h2 {
  margin-bottom: var(--space-md);
}

.about-mission__body {
  max-width: 680px;
  margin-top: var(--space-md);
}

.about-mission__body p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  /* Uitgevuld zonder afbreking trekt rivieren, en Lato heeft bredere spaties
     dan Inter: wat met de oude letter net kon, kan met deze niet meer. */
  text-align: left;
}

.about-cta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 899px) {
  .about-cta__grid { grid-template-columns: 1fr; }
}

.about-cta__item {
  border-top: 3px solid var(--border);
  padding-top: var(--space-md);
}

.about-cta__item:nth-child(1) { border-top-color: rgba(74,222,128,0.4); }
.about-cta__item:nth-child(2) { border-top-color: rgba(251,191,36,0.4); }
.about-cta__item:nth-child(3) { border-top-color: var(--border); }

.about-cta__item h3 {
  margin-bottom: var(--space-xs);
}

.about-cta__item p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}


/* --- Testimonials --- */
.testimonials {
  text-align: center;
  padding: var(--space-xl) 0;
}

.testimonial {
  max-width: 600px;
  margin: var(--space-md) auto 0;
  border-left: none;
  padding: 0;
}

.testimonial p {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.testimonial cite {
  font-size: 0.85rem;
  font-style: normal;
  color: var(--text-muted);
}

/* --- Consultancy Typical Engagement --- */
.consult-typical__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (max-width: 639px) {
  .consult-typical__grid { grid-template-columns: 1fr; }
}

.consult-typical__item {
  border-left: 2px solid var(--border);
  padding-left: var(--space-md);
}

.consult-typical__item strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.consult-typical__item p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* --- Framework CTA Buttons --- */
.fw-cta__buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Fit Regional Note --- */
.fit__regional {
  margin-top: var(--space-lg);
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 680px;
}

/* --- Enroll Alt Link --- */
.enroll__alt {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: var(--space-md);
  text-align: center;
}

.enroll__alt a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.enroll__alt a:hover {
  color: var(--accent);
}

/* --- Skip to Content --- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 1000;
  padding: 0.5em 1em;
  background: var(--text);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
}

.skip-to-content:focus {
  top: var(--space-xs);
}

/* --- Focus Visible --- */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:focus-visible {
  outline-offset: 3px;
}

.notify__input:focus,
.notify__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* --- GDPR Consent --- */
.notify__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  flex-basis: 100%;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
}

.notify__consent input[type="checkbox"] {
  margin-top: 0.15em;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.notify__consent a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notify__consent a:hover {
  color: var(--text);
}

/* --- Homepage Credentials Strip --- */
.credentials-strip-section {
  padding: 0;
}

.credentials-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-md) 0 var(--space-lg);
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.credentials-strip li {
  list-style: none;
}

@media (max-width: 639px) {
  .credentials-strip {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }
}

/* --- Enroll Refund Note --- */
.enroll__refund {
  font-size: 0.82rem;
  color: var(--haze);
  margin-top: var(--space-xs);
}

/* ── Large screens ──────────────────────────────────────────── */

@media (min-width: 1400px) {
  .hero h1 {
    font-size: 3.6rem;
    max-width: 1000px;
  }
  .hero__subtitle {
    font-size: 1.35rem;
    max-width: 740px;
  }
}

@media (min-width: 1800px) {
  .hero h1 {
    font-size: 4.2rem;
    max-width: 1100px;
  }
  .hero__subtitle {
    font-size: 1.5rem;
    max-width: 820px;
  }
}

/* Crosswalk: the 19 questions against the rules a compliance person knows */
.fw-crosswalk { overflow-x: auto; margin-top: 1.5rem; }
.fw-crosswalk table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.fw-crosswalk th, .fw-crosswalk td { text-align: left; padding: 0.45rem 0.75rem; border-top: 1px solid var(--border, #d9dee3); vertical-align: top; }
.fw-crosswalk th { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 500; font-size: 0.8rem; color: var(--text-muted, #5c6a78); border-top: 0; }
.fw-crosswalk td:first-child { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8rem; }
.fw-crosswalk td:first-child a { text-decoration: none; }
.fw-crosswalk__note { margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted, #5c6a78); }

/* Before the screening: bring the map the profiler makes */
.screening-prep { font-size: 0.9rem; color: var(--text-muted, #5c6a78); margin-top: 0.75rem; }
.screening-prep code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85em; }