/* =========================================================================
   COBRAS ARCHITECTS — designsysteem
   Enige bron voor tokens, typeschaal, spacing en componenten.
   Afgeleid van site/index.html (goedgekeurde basis) en DESIGN.md.

   REGELS VOOR BOUWERS
   - Geen nieuwe kleuren. Geen tweede accent. Geen border-radius behalve .brand__mark.
   - Geen schaduwen, geen gradiënten, geen serif, geen italic.
   - Geen inline styles voor kleur, type of spacing: gebruik de klassen hieronder.
   - Nieuwe component nodig? Voeg hem hier toe, niet in een pagina.
   - Breakpoints: sm 640px · md 768px · lg 1024px · xl 1280px.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Kleur */
  --black: #000000;
  --white: #FFFFFF;
  --off-white: #F8F8F8;
  --light-grey: #F1F1F2;
  --purple: #A22EFF;

  /* Afgeleide vlakken — alleen deze varianten gebruiken */
  --line-white: rgba(255, 255, 255, 0.25);
  --line-white-soft: rgba(255, 255, 255, 0.30);
  --line-white-strong: rgba(255, 255, 255, 0.70);
  --line-black: rgba(0, 0, 0, 0.20);
  --text-on-black: rgba(255, 255, 255, 0.75);
  --text-on-black-quiet: rgba(255, 255, 255, 0.60);
  --text-on-black-faint: rgba(255, 255, 255, 0.55);
  --text-on-black-ghost: rgba(255, 255, 255, 0.50);
  --text-on-light: rgba(0, 0, 0, 0.65);
  --scrim: rgba(0, 0, 0, 0.60);
  --scrim-strong: rgba(0, 0, 0, 0.65);

  /* Typografie */
  --font-sans: Gilroy, Helvetica, Arial, sans-serif;
  --fs-h1: 3.5rem;          /* 56px  → 4.5rem vanaf sm */
  --fs-h1-lg: 4.5rem;       /* 72px */
  --fs-h2: 2.5rem;          /* 40px  → 3.5rem vanaf sm */
  --fs-h2-lg: 3.5rem;       /* 56px */
  --fs-h3: 1.25rem;         /* 20px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-body: 1rem;          /* 16px */
  --fs-body-sm: 0.875rem;   /* 14px */
  --fs-label: 0.75rem;      /* 12px */

  --lh-h1: 1.2;
  --lh-h2: 1.08;
  --lh-h3: 1.2;
  --lh-body-lg: 1.55;
  --lh-body: 1.5;

  --tr-h1: -0.06em;
  --tr-h2: -0.05em;
  --tr-h3: -0.03em;
  --tr-label: 0.15em;
  --tr-nav: 0.13em;
  --tr-btn: 0.11em;
  --tr-tag: 0.12em;

  /* Spacing — 8px-basis, geen tussenwaarden verzinnen */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;
  --sp-128: 128px;

  /* Layout */
  --max-width: 100rem;      /* 1600px */
  --gutter: var(--sp-20);   /* 20 → 32 (sm) → 48 (lg) */
  --section-y: var(--sp-64);/* 64 → 96 (lg) */
  --header-h: 5.5rem;
  --radius: 0;
  --hairline: 1px;

  /* Maatlijnen voor leesbare tekstkolommen */
  --measure-hero: 48rem;
  --measure-lede: 39rem;
  --measure-body: 34rem;
  --measure-panel: 29rem;
  --measure-narrow: 20rem;
  --measure-xs: 15rem;

  --transition: color 150ms linear, background-color 150ms linear,
                border-color 150ms linear;
}

@media (min-width: 640px) {
  :root { --gutter: var(--sp-32); }
}
@media (min-width: 1024px) {
  :root { --gutter: var(--sp-48); --section-y: var(--sp-96); }
}

/* -------------------------------------------------------------------------
   2. BASIS
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--black);
  padding: var(--sp-12) var(--sp-16);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
  background: var(--black);
}
.section--light  { background: var(--off-white); color: var(--black); }
.section--flush  { padding: 0; }                       /* full-bleed splitsecties */
.section--tight  { padding-block: var(--sp-48); }
.section--hairline-top { border-top: var(--hairline) solid var(--line-white); }
.section--light.section--hairline-top { border-top-color: var(--line-black); }

/* Twee kolommen, volle breedte, geen gutter — voor beeld/tekst-splits */
.split { display: grid; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } }

.split__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 32rem;
  padding: var(--sp-24);
  border-top: var(--hairline) solid var(--line-white);
}
@media (min-width: 640px) { .split__panel { padding: var(--sp-32); } }
@media (min-width: 1024px) {
  .split__panel {
    padding: var(--sp-48);
    border-top: 0;
    border-left: var(--hairline) solid var(--line-white);
  }
}

/* -------------------------------------------------------------------------
   4. TYPEschaal

   Nederlandse samenstellingen worden lang ("vergunningsvoorwaarde",
   "patiëntenflow"). Op 375px is de kolom 335px breed en past zo'n woord niet
   meer op één regel bij 40 of 56px. `overflow-wrap: break-word` grijpt ALLEEN
   in wanneer één woord op zichzelf te breed is; de bestaande koppen op
   site/index.html renderen er identiek mee. Niet vervangen door `hyphens`:
   dat verandert ook koppen die vandaag wél passen.
   ------------------------------------------------------------------------- */
.h1, .h2, .h3 { overflow-wrap: break-word; }

.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: 900;
}
@media (min-width: 640px) { .h1 { font-size: var(--fs-h1-lg); } }

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: 900;
}
@media (min-width: 640px) { .h2 { font-size: var(--fs-h2-lg); } }
.h2--compact { font-size: var(--fs-h2); }
@media (min-width: 640px) { .h2--compact { font-size: var(--fs-h2); } }

.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: 700;
}

/* Signatuurpatroon: lopende zin in wit, sleutelwoord in paars.

   CONTRASTREGEL — #A22EFF haalt 4,37:1 op zwart en 4,26:1 op --light-grey.
   Dat is genoeg voor GROTE tekst (WCAG 1.4.3: 3:1 vanaf 18,66px bold of
   24px), maar te weinig voor gewone tekst (4,5:1). Paars blijft daarom
   staan in de grote koppen — het handelsmerk — en erft elders gewoon de
   tekstkleur. `.mark` behoudt zijn betekenis via het kopgewicht (900).
   Zie DESIGN.md: "Do not use purple for body text." */
.mark { color: inherit; }
.h1 .mark,
.h2 .mark,
.quote__text .mark { color: var(--purple); }

.lede {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text-on-black);
}
@media (min-width: 640px) { .lede { font-size: var(--fs-body-lg); } }
.section--light .lede { color: var(--text-on-light); }

.body    { font-size: var(--fs-body); line-height: var(--lh-body); }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.78; color: var(--text-on-black); }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.72; color: var(--text-on-black-quiet); }
.section--light .body-lg,
.section--light .body-sm { color: var(--text-on-light); }

.label {
  font-size: var(--fs-label);
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
}
/* Het accentlabel staat op 12px/700. Paarse letters halen daar 4,37:1 en
   zakken dus door AA. De tekst wordt wit (21:1) en het accent verhuist naar
   een paars streepje ervoor: een zuiver decoratief teken, dat met 4,37:1
   ruim boven de 3:1 van WCAG 1.4.11 blijft. Dezelfde idioom als
   .scope-list__item::before. Geen tweede accentkleur, SPEC §1 blijft heel. */
.label--accent { color: var(--white); }
.label--accent::before {
  content: "";
  display: inline-block;
  width: var(--sp-8);
  height: 2px;
  margin-right: var(--sp-8);
  background: var(--purple);
  vertical-align: 0.25em;
}
.section--light .label--accent { color: var(--black); }
.label--quiet  { color: var(--text-on-black-faint); letter-spacing: 0.14em; }
.label--index  { text-transform: none; letter-spacing: var(--tr-tag); color: var(--text-on-black); }
.section--light .label--index { color: var(--text-on-light); }

.text-quiet { color: var(--text-on-black-quiet); }
.text-faint { color: var(--text-on-black-faint); }

/* Maatlijnen */
.measure-hero   { max-width: var(--measure-hero); }
.measure-lede   { max-width: var(--measure-lede); }
.measure-body   { max-width: var(--measure-body); }
.measure-panel  { max-width: var(--measure-panel); }
.measure-narrow { max-width: var(--measure-narrow); }
.measure-xs     { max-width: var(--measure-xs); }

/* -------------------------------------------------------------------------
   5. KNOPPEN EN LINKS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-16) var(--sp-24);
  border: var(--hairline) solid var(--white);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  cursor: pointer;
  transition: var(--transition);
}
.btn:hover, .btn:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: var(--white);
}

.btn--primary { background: var(--white); color: var(--black); }
.btn--primary:hover, .btn--primary:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: var(--white);
}

.btn--compact { min-height: 44px; padding: var(--sp-12) var(--sp-16); }

.section--light .btn { border-color: var(--black); color: var(--black); }
/* Zonder eigen achtergrond stond hier witte tekst op off-white: 1,09:1.
   De hoverstaat vult nu wél, net als op zwart. Wit op paars = 4,80:1. */
.section--light .btn:hover,
.section--light .btn:focus-visible {
  border-color: var(--purple);
  background: var(--purple);
  color: var(--white);
}
.section--light .btn--primary { background: var(--black); color: var(--white); }
.section--light .btn--primary:hover,
.section--light .btn--primary:focus-visible { background: var(--purple); color: var(--white); }

/* Secundaire link: witte tekst met onderlijn, hover paars. */
.link-underline {
  display: inline-block;
  padding-bottom: var(--sp-4);
  border-bottom: var(--hairline) solid var(--white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  transition: var(--transition);
}
/* 12px paars = 4,37:1 en zakt door AA. De onderlijn — een niet-tekstueel
   element, ondergrens 3:1 — draagt het paars, de letters blijven wit. */
.link-underline:hover, .link-underline:focus-visible {
  border-color: var(--purple);
  color: var(--white);
}
.section--light .link-underline:hover,
.section--light .link-underline:focus-visible { color: var(--black); }
/* De grote variant staat op 20-24px in weight 700 en telt als grote tekst;
   daar volstaat 3:1 en mag het paars wél op de letters. */
.link-underline--lg:hover, .link-underline--lg:focus-visible { color: var(--purple); }
.link-underline--lg {
  padding-bottom: var(--sp-8);
  font-size: var(--fs-h3);
  text-transform: none;
  letter-spacing: var(--tr-h3);
}
@media (min-width: 640px) { .link-underline--lg { font-size: 1.5rem; } }
.section--light .link-underline { border-bottom-color: var(--black); }

.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-20);
}
@media (min-width: 640px) { .actions { flex-direction: row; align-items: center; } }

/* -------------------------------------------------------------------------
   6. HEADER, MERKTEKEN EN NAVIGATIE
   ------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 30;
  border-bottom: var(--hairline) solid var(--line-white);
  background: var(--black);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
  min-height: var(--header-h);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { display: flex; align-items: center; gap: var(--sp-12); flex-shrink: 0; }
.brand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border: var(--hairline) solid var(--white);
  border-radius: 9999px;          /* enige ronde vorm in het systeem */
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: -0.08em;
  text-transform: lowercase;
}
.brand__labels {
  display: flex;
  flex-direction: column;
  padding-left: var(--sp-12);
  border-left: var(--hairline) solid var(--line-white-soft);
  font-size: var(--fs-label);
  line-height: var(--sp-16);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.brand__labels--short { display: flex; }
.brand__labels--full  { display: none; }
@media (min-width: 640px) {
  .brand__labels--short { display: none; }
  .brand__labels--full  { display: flex; }
}

.site-header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-16);
  flex-shrink: 0;
}
/* De kop-CTA verschijnt pas als het hoofdmenu verschijnt. Onder lg staat hij
   onderaan het uitgeklapte mobiele menu — anders botst hij met het merkteken. */
.site-header__cta { display: none; }
@media (min-width: 1024px) { .site-header__cta { display: inline-flex; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .nav__list { display: flex; align-items: center; gap: var(--sp-28); }
}
/* Navigatie staat op 12px/700. Paarse letters halen 4,37:1 en zakken door AA,
   ook in hover- en actieve staat — WCAG geldt in élke staat. Het paars zit
   daarom in een onderlijn van 2px (niet-tekstueel, ondergrens 3:1); de letters
   blijven wit. De affordance blijft even duidelijk zichtbaar. */
.nav__link {
  display: inline-block;
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid transparent;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-nav);
  transition: var(--transition);
}
.nav__link:hover, .nav__link:focus-visible { border-bottom-color: var(--purple); }
.nav__link[aria-current="page"] { border-bottom-color: var(--purple); }

/* Expertises-uitklap — hover en toetsenbord, zonder JavaScript. */
.nav__item { position: relative; }
.nav__item--menu > .nav__link::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.6em;
  border-right: var(--hairline) solid currentColor;
  border-bottom: var(--hairline) solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}
.nav__submenu {
  position: absolute;
  top: 100%;
  left: calc(var(--sp-24) * -1);
  min-width: 20rem;
  padding: var(--sp-8) 0;
  border: var(--hairline) solid var(--line-white);
  background: var(--black);
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms linear, visibility 120ms linear;
}
.nav__item--menu:hover .nav__submenu,
.nav__item--menu:focus-within .nav__submenu { visibility: visible; opacity: 1; }
.nav__submenu-link {
  display: block;
  padding: var(--sp-12) var(--sp-24);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  transition: var(--transition);
}
.nav__submenu-link:hover, .nav__submenu-link:focus-visible {
  box-shadow: inset 2px 0 0 var(--purple);
}

/* Mobiele navigatie — checkbox, geen JavaScript. Verborgen vanaf lg. */
.nav-toggle-state { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: var(--sp-12) var(--sp-16);
  border: var(--hairline) solid var(--white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  cursor: pointer;
  transition: var(--transition);
}
.nav-toggle:hover { border-color: var(--purple); }
.nav-mobile {
  display: none;
  border-top: var(--hairline) solid var(--line-white);
  background: var(--black);
  padding: var(--sp-16) var(--gutter) var(--sp-32);
}
.nav-toggle-state:checked ~ .nav-mobile { display: block; }
.nav-toggle-state:focus-visible + .site-header .nav-toggle { outline: 2px solid var(--purple); outline-offset: 2px; }
.nav-mobile__link {
  display: flex;
  align-items: center;
  min-height: 44px;          /* duimmaat; 12px padding gaf 42px */
  padding: var(--sp-12) 0;
  border-bottom: var(--hairline) solid var(--line-white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-nav);
}
.nav-mobile__link--sub { padding-left: var(--sp-16); color: var(--text-on-black); }
.nav-mobile__cta { margin-top: var(--sp-24); display: inline-flex; }
.nav-mobile__link:hover, .nav-mobile__link:focus-visible { border-bottom-color: var(--purple); }
.nav-mobile__link[aria-current="page"] { border-bottom-color: var(--purple); }
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-toggle-state:checked ~ .nav-mobile { display: none; }
}

/* -------------------------------------------------------------------------
   7. SECTIEKOP
   ------------------------------------------------------------------------- */
.section-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-20);
  padding-bottom: var(--sp-32);
  border-bottom: var(--hairline) solid var(--line-white);
}
@media (min-width: 640px) { .section-head { flex-direction: row; align-items: flex-end; } }
.section--light .section-head { border-bottom-color: var(--line-black); }
.section-head--plain { border-bottom: 0; padding-bottom: 0; }
.section-head__title { margin-top: var(--sp-16); }
.section-head__aside {
  max-width: var(--measure-narrow);
  font-size: var(--fs-body-sm);
  line-height: 1.72;
  color: var(--text-on-black-quiet);
}
.section--light .section-head__aside { color: var(--text-on-light); }

/* -------------------------------------------------------------------------
   8. KAARTRASTER
   ------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  border-top: var(--hairline) solid var(--line-white);
  border-left: var(--hairline) solid var(--line-white);
}
@media (min-width: 768px)  { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section--light .card-grid { border-color: var(--line-black); }

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 18rem;
  padding: var(--sp-24);
  border-right: var(--hairline) solid var(--line-white);
  border-bottom: var(--hairline) solid var(--line-white);
  transition: var(--transition);
}
@media (min-width: 640px) { .card { padding: var(--sp-32); } }
.section--light .card { border-color: var(--line-black); }

.card__index {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-tag);
  color: var(--text-on-black);
}
.section--light .card__index { color: var(--text-on-light); }
.card__title {
  max-width: 16rem;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: 700;
  transition: var(--transition);
}
.card__body { margin-top: var(--sp-12); font-size: var(--fs-body-sm); line-height: 1.72; color: var(--text-on-black-quiet); }
.card__cta {
  display: block;
  margin-top: var(--sp-24);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  transition: var(--transition);
}

/* Volledige kaart klikbaar: gebruik <a class="card card--link">. */
.card--link:hover, .card--link:focus-visible { background: var(--white); }
.card--link:hover .card__title,
.card--link:focus-visible .card__title { color: var(--black); }
.card--link:hover .card__body,
.card--link:focus-visible .card__body { color: var(--text-on-light); }
.card--link:hover .card__cta,
.card--link:focus-visible .card__cta { color: var(--purple); }   /* 4,80:1 op wit */
/* De kaart wordt wit bij hover; een index in --text-on-black zou verdwijnen. */
.card--link:hover .card__index,
.card--link:focus-visible .card__index { color: var(--text-on-light); }

/* -------------------------------------------------------------------------
   9. HERO
   ------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--black); }
.hero__grid {
  display: grid;
  min-height: calc(100vh - var(--header-h));
  max-width: var(--max-width);
  margin-inline: auto;
}
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.06fr 0.94fr; } }

.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-56) var(--gutter);
}
@media (min-width: 640px)  { .hero__content { padding-block: var(--sp-80); } }
@media (min-width: 1024px) { .hero__content { padding-block: var(--sp-96); } }

.hero__title { margin-top: var(--sp-32); }
.hero__lede  { margin-top: var(--sp-32); }
.hero__actions { margin-top: var(--sp-40); }

.hero__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-20);
  margin-top: var(--sp-64);
  padding-top: var(--sp-20);
  border-top: var(--hairline) solid var(--line-white);
}

.hero__meta-note {
  max-width: var(--measure-xs);
  font-size: var(--fs-label);
  line-height: var(--sp-20);
  color: var(--text-on-black-faint);
}

/* Lange persona-kop boven de vouw.
   SPEC schrijft sommige hero-koppen woordelijk voor; die zijn langer dan de
   kop op de homepage en duwen bij een venster van 720px hoog de lede en de
   CTA onder de vouw. `.hero--dense` lost dat op ZONDER nieuwe waarden: de
   kopgrootte interpoleert met de vensterhoogte binnen de bestaande schaal
   (--fs-h2 als ondergrens, --fs-h1-lg als bovengrens) en de verticale ruimte
   zakt één stap in de 8px-reeks. Op een hoog venster is het resultaat
   identiek aan site/index.html. Alleen opzetten op pagina's met zo'n kop. */
@media (min-width: 1024px) {
  .hero--dense .hero__title { font-size: clamp(var(--fs-h2), 6.1vh, var(--fs-h1-lg)); }
}
@media (min-width: 1024px) and (max-height: 900px) {
  .hero--dense .hero__content { padding-block: var(--sp-40); }
  .hero--dense .hero__title { margin-top: var(--sp-24); }
  .hero--dense .hero__lede  { margin-top: var(--sp-24); }
  .hero--dense .hero__actions { margin-top: var(--sp-32); }
  .hero--dense .hero__meta { margin-top: var(--sp-32); }
}

.hero__media {
  position: relative;
  min-height: 30rem;
  overflow: hidden;
  border-top: var(--hairline) solid var(--line-white);
}
@media (min-width: 1024px) {
  .hero__media {
    min-height: 0;
    border-top: 0;
    border-left: var(--hairline) solid var(--line-white);
  }
}

/* Beelddragende hero (BAR-BEELD.md punt 2).
   Het projectbeeld vult de volle paginabreedte in plaats van een halve kolom,
   zodat het eerste projectbeeld op 1440 px ruim boven de 1.000 px komt in
   plaats van 676 px. De kop staat erop, op een zwarte verloopsluier die links
   dekkend genoeg is voor witte tekst op AA-niveau. Alleen zwart, wit en het
   bestaande accent — geen nieuwe kleur (DESIGN.md). */
.hero--beeld .hero__grid { position: relative; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .hero--beeld .hero__grid { grid-template-columns: 1fr; } }
.hero--beeld .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 0;
  border: 0;
}
.hero--beeld .hero__content { position: relative; z-index: 2; }
@media (min-width: 1024px) {
  .hero--beeld .hero__content { max-width: 48rem; }
}
.hero__sluier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.82) 45%, rgba(0,0,0,0.9));
}
@media (min-width: 1024px) {
  .hero__sluier {
    background:
      linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.93) 46%, rgba(0,0,0,0.6) 62%, rgba(0,0,0,0.14) 82%, rgba(0,0,0,0.08) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 42%, rgba(0,0,0,0.35));
  }
}
@media (min-width: 1024px) {
  .hero--beeld .media__overlay--between { justify-content: flex-end; }
}

/* -------------------------------------------------------------------------
   10. BEELD MET OVERLAY
   ------------------------------------------------------------------------- */
.media { position: relative; overflow: hidden; min-height: 32rem; }
.media--hoog { min-height: 50rem; }
.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media__scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 33.333%;
  background: var(--scrim);
}
.media__scrim--strong { background: var(--scrim-strong); }
.media__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--gutter);
}
.media__overlay--between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-20);
}
.media__caption {
  max-width: 17rem;
  font-size: var(--fs-label);
  line-height: var(--sp-20);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tag);
}
.media__tag {
  flex-shrink: 0;
  padding: var(--sp-8) var(--sp-12);
  border: var(--hairline) solid var(--line-white-strong);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.media__title { margin-top: var(--sp-12); }

/* -------------------------------------------------------------------------
   10b. BEELDBAND — het beeld draagt de pagina, niet de alinea
   Volle breedte, harde hoeken, bijschrift als zichtbare regel eronder.
   Een band is altijd breder dan 480 px; de duo splitst pas vanaf 1024 px,
   zodat elke helft op desktop minstens 620 px haalt.
   ------------------------------------------------------------------------- */
.band { margin: 0; display: block; }
.band__frame { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.band__frame--hero { aspect-ratio: 3 / 2; }
.band__frame--duo  { aspect-ratio: 3 / 2; }
.band__frame--groot  { aspect-ratio: 3 / 2; }   /* volle breedte, beeld draagt de sectie */
.band__frame--staand { aspect-ratio: 2 / 3; }   /* staand paar, halve breedte */
.band__frame--breed  { aspect-ratio: 21 / 9; }  /* liggende band die een tekstreeks breekt */
.band__frame--vol    { aspect-ratio: 3 / 2; }   /* volle breedte, beeld draagt het blok */
.band__frame--duo-hoog { aspect-ratio: 4 / 5; } /* staand paar, halve breedte, beeld domineert */
.band__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--gutter);
}
.band__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-24);
  padding: var(--sp-16) var(--gutter);
  border-top: var(--hairline) solid var(--line-white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tag);
}
.band__source {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-on-black-quiet);
}
.section--light .band__caption { border-top-color: var(--line-black); }
.section--light .band__source { color: var(--text-on-light); }

.bandduo { display: grid; gap: var(--hairline); background: var(--line-white); }
@media (min-width: 1024px) { .bandduo { grid-template-columns: 1fr 1fr; } }

/* Tekstblok binnen een flush-sectie: de band blijft volle breedte, de tekst niet. */
.band__body {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--sp-48) var(--gutter);
}
@media (min-width: 1024px) { .band__body { padding: var(--sp-40) var(--gutter); } }

/* -------------------------------------------------------------------------
   11. PROCESRASTER (Werkwijze / Aanpak)
   ------------------------------------------------------------------------- */
.process {
  display: grid;
  gap: var(--sp-48);
  max-width: var(--max-width);
  margin-inline: auto;
}
@media (min-width: 1024px) { .process { grid-template-columns: 0.9fr 1.1fr; } }

.process-grid {
  display: grid;
  gap: var(--hairline);
  border: var(--hairline) solid var(--line-black);
  background: var(--line-black);
}
@media (min-width: 640px) { .process-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .process-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.process-item { padding: var(--sp-24); background: var(--light-grey); }
.process-item--alt { background: var(--white); }
.process-item__index {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-tag);
  color: var(--text-on-light);
}
.process-item__title { margin-top: var(--sp-56); }
.process-item__body {
  margin-top: var(--sp-12);
  font-size: var(--fs-body-sm);
  line-height: 1.72;
  color: var(--text-on-light);
}

/* -------------------------------------------------------------------------
   12. LIJSTEN — probleemherkenning en stappen
   ------------------------------------------------------------------------- */
.problem-list { display: grid; gap: var(--hairline); background: var(--line-white); }
@media (min-width: 768px)  { .problem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.problem-list__item {
  position: relative;
  padding: var(--sp-24) var(--sp-24) var(--sp-24) var(--sp-48);
  background: var(--black);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-on-black);
}
/* Was een paars kastlijntje als TEKST: 4,37:1 op 16px, dus onder AA, en een
   schermlezer las het mee voor. Nu hetzelfde streepje als .scope-list__item —
   een leeg ::before, dus zuiver decoratief (1.4.11, 4,37:1 ≥ 3:1). */
.problem-list__item::before {
  content: "";
  position: absolute;
  left: var(--sp-24);
  top: calc(var(--sp-24) + 0.75em);
  width: var(--sp-8);
  height: var(--hairline);
  background: var(--purple);
}

.steps { display: grid; gap: var(--hairline); background: var(--line-white); }
.steps__item { display: grid; gap: var(--sp-8); padding: var(--sp-24) 0; background: var(--black); }
@media (min-width: 768px) {
  .steps__item { grid-template-columns: 4rem 16rem 1fr; gap: var(--sp-24); align-items: baseline; }
}
.steps__index {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-tag);
  color: var(--text-on-black);
}
.section--light .steps__index { color: var(--text-on-light); }
.steps__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--tr-h3); }
.steps__body { font-size: var(--fs-body-sm); line-height: 1.72; color: var(--text-on-black-quiet); }

/* Inbegrepen / niet inbegrepen — prijsmodel vast_pakket_plus_tm */
.scope-list { display: grid; gap: var(--sp-12); }
.scope-list__item {
  padding-left: var(--sp-20);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-on-black);
  position: relative;
}
.scope-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: var(--sp-8);
  height: var(--hairline);
  background: var(--purple);
}

/* -------------------------------------------------------------------------
   13. FAQ
   ------------------------------------------------------------------------- */
.faq { border-top: var(--hairline) solid var(--line-white); }
.faq__item { border-bottom: var(--hairline) solid var(--line-white); padding: var(--sp-24) 0; }
.faq__question {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: 700;
}
.faq__answer {
  margin-top: var(--sp-12);
  max-width: var(--measure-hero);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-on-black);
}
.section--light .faq,
.section--light .faq__item { border-color: var(--line-black); }
.section--light .faq__answer { color: var(--text-on-light); }

/* -------------------------------------------------------------------------
   14. FORMULIER — één component, velden gedreven door vertical_slug
   ------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-24); max-width: 44rem; }
.form__row { display: grid; gap: var(--sp-24); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__field { display: grid; gap: var(--sp-8); }
.form__label {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  color: var(--text-on-black-quiet);
}
.form__input,
.form__select,
.form__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-12) var(--sp-16);
  border: var(--hairline) solid var(--line-white);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: var(--transition);
}
.form__textarea { min-height: 8rem; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus { border-color: var(--purple); }
.form__select { appearance: none; }
.form__select option { background: var(--black); color: var(--white); }
/* Ja/nee-velden staan in een fieldset; de browserstandaard heeft hier een eigen
   rand en inspringing die niet in dit systeem past. */
fieldset.form__field { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
fieldset.form__field > legend { padding: 0; }
.form__choices { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); }
/* Ja/nee is een verplicht veld en werd op de telefoon met de duim aangetikt.
   Het label was 21px hoog; de raakzone loopt nu over de volle 44px, zonder dat
   er iets zichtbaar verandert. Geen kader, geen vlak, alleen ruimte. */
.form__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding-right: var(--sp-8);
  cursor: pointer;
  font-size: var(--fs-body-sm);
}
/* Het verplicht-teken is betekenisdragende tekst op 12-14px: wit, geen paars. */
.form__label .mark, .form__hint .mark { color: var(--white); }
.form__hint { font-size: var(--fs-body-sm); color: var(--text-on-black-faint); }
.form__actions { margin-top: var(--sp-8); }

/* Verplicht of optioneel — bij ELK veld leesbaar, niet alleen bij de verplichte.
   Een sterretje alleen dwingt de bezoeker om de legende te onthouden. */
.form__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-on-black-faint);
}

/* Toestemmingsvakje. Geen fieldset en geen extra <button>: de veldsets en de
   vier CTA's worden met nth-of-type geselecteerd, dus een broer/zus van dat
   type erbij zou de ingangslogica van data/verticals.json stukmaken. */
.form__consent {
  display: grid;
  gap: var(--sp-8);
  padding-top: var(--sp-24);
  border-top: var(--hairline) solid var(--line-white);
}
.form__consent-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
  min-height: 44px;
  cursor: pointer;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-on-black);
}
.form__consent-label input { margin-top: var(--sp-4); width: 20px; height: 20px; }

/* Foutmeldingen. Kleur is nooit het enige signaal: er staat het woord "Fout"
   in de melding zelf, de rand van het veld wordt vol wit in plaats van 25%,
   en het veld krijgt aria-invalid. Zwart-wit-schermen en kleurenblinden zien
   exact hetzelfde verschil. */
.form__fout {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--white);
}
.form__fout[hidden] { display: none; }
.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"] {
  border-color: var(--white);
  border-width: 2px;
}
.form__fouten {
  padding: var(--sp-16);
  border: 2px solid var(--white);
  font-size: var(--fs-body-sm);
}
.form__fouten[hidden] { display: none; }
.form__fouten-titel {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
}
.form__fouten ul { margin: var(--sp-8) 0 0; padding-left: var(--sp-20); }
.form__fouten a { color: var(--white); }

/* Privacynoot onder het formulier. Zelfde maatlijn als de body, kleiner corps. */
.form__privacy {
  max-width: 44rem;
  margin-top: var(--sp-40);
  padding-top: var(--sp-24);
  border-top: var(--hairline) solid var(--line-white);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  /* Geen --text-on-black-faint hier: dit is verplichte informatie, geen bijschrift. */
  color: var(--text-on-black);
}
.form__privacy dl { display: grid; gap: var(--sp-12); margin-top: var(--sp-16); }
@media (min-width: 640px) {
  .form__privacy dl { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sp-12) var(--sp-24); }
}
.form__privacy dt {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--text-on-black-quiet);
}
.form__privacy dd { margin: 0; }

/* -------------------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  border-top: var(--hairline) solid var(--line-white);
  background: var(--black);
  color: var(--white);
  padding-block: var(--section-y);
  padding-inline: var(--gutter);
}
.site-footer__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-48);
  margin-top: var(--sp-20);
}
@media (min-width: 1024px) { .site-footer__head { flex-direction: row; align-items: flex-end; } }
.site-footer__email { margin-top: var(--sp-32); }
.site-footer__meta {
  padding-left: var(--sp-20);
  border-left: var(--hairline) solid var(--line-white);
  font-size: var(--fs-body-sm);
  line-height: 1.95;
  color: var(--text-on-black-quiet);
}
.site-footer__meta strong { display: block; font-weight: 700; color: var(--white); }
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-top: var(--sp-64);
  padding-top: var(--sp-20);
  border-top: var(--hairline) solid var(--line-white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tag);
  color: var(--text-on-black-ghost);
}
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; align-items: center; } }
/* Vijf links naast elkaar passen niet op 375px: de rij duwde elke pagina van de
   site 97px breed en gaf horizontaal schuiven op de telefoon. Ze breken nu af.
   Op 640px en breder past de rij weer op één lijn en verandert er niets. */
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); }
.site-footer__links a { transition: var(--transition); }
.site-footer__links a { border-bottom: 2px solid transparent; padding-bottom: var(--sp-4); }
.site-footer__links a:hover,
.site-footer__links a:focus-visible { color: var(--white); border-bottom-color: var(--purple); }

/* -------------------------------------------------------------------------
   16. KRUIMELPAD
   ------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  color: var(--text-on-black-faint);
}
.breadcrumb a { transition: var(--transition); }
.breadcrumb a { border-bottom: 2px solid transparent; }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--white); border-bottom-color: var(--purple); }
.breadcrumb li + li::before { content: "/ "; }

/* -------------------------------------------------------------------------
   17. SPACING-UTILITIES — alleen deze, geen losse marges verzinnen
   ------------------------------------------------------------------------- */
.u-mt-8   { margin-top: var(--sp-8); }
.u-mt-12  { margin-top: var(--sp-12); }
.u-mt-16  { margin-top: var(--sp-16); }
.u-mt-24  { margin-top: var(--sp-24); }
.u-mt-32  { margin-top: var(--sp-32); }
.u-mt-40  { margin-top: var(--sp-40); }
.u-mt-48  { margin-top: var(--sp-48); }
.u-mt-64  { margin-top: var(--sp-64); }
.u-mt-96  { margin-top: var(--sp-96); }
.u-hairline-top    { border-top: var(--hairline) solid var(--line-white); padding-top: var(--sp-24); }
.u-hairline-bottom { border-bottom: var(--hairline) solid var(--line-white); padding-bottom: var(--sp-24); }
.u-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-24);
}
@media (min-width: 640px) {
  .u-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   18. CITAAT
   Eén citaat per pagina, met naam en functie. Geen italic, geen aanhalings-
   teken als grafisch element — alleen typegewicht en een hairline.
   ------------------------------------------------------------------------- */
.quote { max-width: var(--measure-hero); }
.quote__text {
  font-size: var(--fs-h3);
  line-height: 1.45;
  letter-spacing: var(--tr-h3);
  font-weight: 700;
}
@media (min-width: 640px) { .quote__text { font-size: 1.5rem; } }
.quote__attrib {
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: var(--hairline) solid var(--line-white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tag);
  color: var(--text-on-black-faint);
}
.section--light .quote__attrib {
  border-top-color: var(--line-black);
  color: var(--text-on-light);
}

/* -------------------------------------------------------------------------
   19. PLACEHOLDER-BEELD
   Beeld dat nog gegenereerd moet worden (Asset-status `placeholder`).
   Verplicht: class="placeholder-asset" + data-prompt met de beeldbeschrijving.
   De gestippelde outline maakt zichtbaar dat dit nog geen definitief beeld is.
   ------------------------------------------------------------------------- */
.placeholder-asset {
  background: var(--black);
  outline: var(--hairline) dashed var(--line-white);
  outline-offset: calc(var(--hairline) * -1);
}

/* -------------------------------------------------------------------------
   20. LICHTE VARIANTEN — aanvullingen op bestaande componenten
   ------------------------------------------------------------------------- */
.section--light .scope-list__item { color: var(--text-on-light); }
/* .card__body staat standaard op --text-on-black-quiet (60% wit). In een lichte
   sectie gaf dat 1,04:1 — de tekst was er wel, maar onleesbaar. Zelfde correctie
   als .steps__body en .body-sm hierboven. */
.section--light .card__body { color: var(--text-on-light); }
.section--light .steps { background: var(--line-black); }
.section--light .steps__item { background: var(--off-white); }
.section--light .steps__body { color: var(--text-on-light); }

/* -------------------------------------------------------------------------
   21. VERTICAL-SCHAKELAAR — vier ingangen, één formuliercomponent

   Eén <form>. Welke veldset en welke CTA zichtbaar zijn, wordt bepaald door
   het gekozen Vertical-record (ARCHITECTURE §2, SPEC §10-§11).

   Werkt volledig zonder JavaScript en zonder :has(): de keuze zit in een
   radiogroep die vóór de opties en het formulier staat, de zichtbaarheid in
   een gewone `~`-combinator. Generiek gehouden via :nth-of-type, dus
   herbruikbaar voor elke schakelaar met N ingangen.

   Vereiste volgorde binnen .switch:
     1. de N radio's .switch__state
     2. .switch__options met N labels .switch__option (zelfde volgorde)
     3. .switch__form met N veldsets .form__set en N knoppen .form__cta
   ------------------------------------------------------------------------- */
.switch { display: grid; }

.switch__state {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.switch__option {
  --optie-vlak: transparent;
  --optie-tekst: var(--white);
  --optie-body: var(--text-on-black-quiet);
  --optie-cta: var(--white);
  --optie-index: var(--text-on-black);
  cursor: pointer;
  background: var(--optie-vlak);
  color: var(--optie-tekst);
}
.switch__option .card__title { display: block; color: var(--optie-tekst); }
.switch__option .card__body  { display: block; color: var(--optie-body); }
.switch__option .card__cta   { color: var(--optie-cta); }
.switch__option .card__index { color: var(--optie-index); }

/* Lichte sectie: de tokens hierboven zijn voor een zwarte achtergrond. Op
   --off-white gaf wit-op-off-white 1,04:1 en waren de niet-gekozen kaarten
   onzichtbaar. Zelfde correctie als §20. Staat vóór de gekozen toestand,
   zodat de gekozen kaart (wit vlak, zwarte tekst) blijft winnen. */
.section--light .switch__option {
  --optie-tekst: var(--black);
  --optie-body: var(--text-on-light);
  --optie-cta: var(--purple);
  --optie-index: var(--text-on-light);
}
.section--light .switch__option:hover { box-shadow: inset 0 0 0 1px var(--black); }

/* Hover is uitdrukkelijk zwakker dan de gekozen toestand: geen witte vlek,
   alleen een dunne lijn, zodat een aanwijsbare kaart nooit gekozen lijkt.
   Staat vóór de gekozen toestand, zodat hover de gekozen kaart niet leegt. */
.switch__option:hover {
  --optie-vlak: transparent;
  box-shadow: inset 0 0 0 1px var(--white);
}

.switch__option.is-actief,
.switch__state:nth-of-type(1):checked ~ .switch__options .switch__option:nth-of-type(1),
.switch__state:nth-of-type(2):checked ~ .switch__options .switch__option:nth-of-type(2),
.switch__state:nth-of-type(3):checked ~ .switch__options .switch__option:nth-of-type(3),
.switch__state:nth-of-type(4):checked ~ .switch__options .switch__option:nth-of-type(4) {
  --optie-vlak: var(--white);
  --optie-tekst: var(--black);
  --optie-body: var(--text-on-light);
  --optie-cta: var(--purple);           /* 4,80:1 op wit */
  --optie-index: var(--text-on-light);
}

/* Diepe link zonder JavaScript. Een link als /contact/?vertical=slug#slug laat
   de browser naar de juiste ingangskaart springen; het `id` op dat label is de
   slug. Met JavaScript zet het script diezelfde kaart op `.is-actief` en is dit
   dubbelop. Zonder JavaScript is dit het enige signaal dat de bezoeker op de
   juiste kaart is geland — hij ziet welke kaart hij moet aanklikken in plaats
   van vier gelijke kaarten. De veldset zelf wordt hier bewust niet omgeschakeld:
   `:target` blijft in de URL staan nadat de bezoeker een andere ingang kiest, en
   dan zou de tekening en het formulier uit elkaar lopen. */
.switch__option:target {
  box-shadow: inset 3px 0 0 var(--purple), inset 0 0 0 1px var(--white);
}

/* De radio zelf is onzichtbaar; de focusring hoort dus op het label. */
.switch__state:nth-of-type(1):focus-visible ~ .switch__options .switch__option:nth-of-type(1),
.switch__state:nth-of-type(2):focus-visible ~ .switch__options .switch__option:nth-of-type(2),
.switch__state:nth-of-type(3):focus-visible ~ .switch__options .switch__option:nth-of-type(3),
.switch__state:nth-of-type(4):focus-visible ~ .switch__options .switch__option:nth-of-type(4) {
  outline: 2px solid var(--purple);
  outline-offset: -3px;
}

.switch__form { margin-top: var(--sp-48); }

/* Alles verborgen, behalve wat bij de gekozen ingang hoort. */
.form__set {
  display: none;
  gap: var(--sp-24);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.form__cta { display: none; }
.form__set[hidden], .form__cta[hidden] { display: none; }

.switch__state:nth-of-type(1):checked ~ .switch__form .form__set:nth-of-type(1),
.switch__state:nth-of-type(2):checked ~ .switch__form .form__set:nth-of-type(2),
.switch__state:nth-of-type(3):checked ~ .switch__form .form__set:nth-of-type(3),
.switch__state:nth-of-type(4):checked ~ .switch__form .form__set:nth-of-type(4) {
  display: grid;
}
.switch__state:nth-of-type(1):checked ~ .switch__form .form__cta:nth-of-type(1),
.switch__state:nth-of-type(2):checked ~ .switch__form .form__cta:nth-of-type(2),
.switch__state:nth-of-type(3):checked ~ .switch__form .form__cta:nth-of-type(3),
.switch__state:nth-of-type(4):checked ~ .switch__form .form__cta:nth-of-type(4) {
  display: inline-flex;
}

/* Radiogroep binnen één veld (jaNee): geen kader, geen inspringing. */
.form__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.form__field > .form__label { padding: 0; }

/* -------------------------------------------------------------------------
   22. FIGUUR — eigen tekening met bijschrift en legende

   Voor tekeningen die wij zelf maken: plattegrondprincipes, zoneringen,
   doorsneden. Inline SVG, dus geen extra request en geen laadtijd.

   Tekening staat op zwart. Kleuren komen uitsluitend uit de tokens:
   wit en de witte haarlijnvarianten voor bouwkundige lijnen, --light-grey
   voor toestelvolumes, en --purple voor precies één ding: de route van de
   patiënt. Geen tweede accent, geen afronding.

   Op smalle schermen scrolt de tekening horizontaal in haar eigen kader —
   de pagina zelf schuift nooit mee. De legende eronder is gewone tekst en
   draagt dezelfde informatie voor wie de tekening niet ziet.
   ------------------------------------------------------------------------- */
.figure { margin: 0; }
.figure__canvas {
  overflow-x: auto;
  border: var(--hairline) solid var(--line-white);
  padding: var(--sp-16);
}
@media (min-width: 640px) { .figure__canvas { padding: var(--sp-24); } }
.figure__canvas:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.figure__caption { margin-top: var(--sp-24); }
.figure__note { margin-top: var(--sp-8); max-width: var(--measure-hero); }

.legend {
  display: grid;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
  padding-top: var(--sp-24);
  border-top: var(--hairline) solid var(--line-white);
}
@media (min-width: 768px) { .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-32); } }

.legend__item {
  position: relative;
  padding-left: var(--sp-32);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-on-black-quiet);
}
.legend__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--sp-20);
}
.legend__item--route::before  { height: 3px; background: var(--purple); }
.legend__item--staff::before  { height: 0; border-top: 2px dashed var(--line-white-strong); }
.legend__item--shield::before { height: 4px; background: var(--white); }
.legend__item--access::before { height: 8px; background: var(--line-white); }
.legend__item--zone::before   { height: 0; border-top: 2px dotted var(--line-white-strong); }
.legend__item--machine::before{ height: 10px; background: var(--light-grey); }

/* ---- de tekening zelf -------------------------------------------------- */
/* Let op: typografie staat op .plan zelf, niet op `.plan text`. In SVG erven
   font en fill door, en een elementselector met klasse (.plan text = 0,1,1)
   wint van de losse tekstklassen hieronder (0,1,0). Zo geërfd houden
   .plan__notitie en de andere klassen hun eigen grootte. */
.plan {
  display: block;
  width: 100%;
  min-width: 64rem;          /* onder deze breedte wordt de tekst onleesbaar */
  height: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--white);
}
/* 12px op zwart: paars zou 4,37:1 geven. De route in de tekening blijft paars
   (lijnwerk, 1.4.11), de kop wordt wit. */
.plan__kop      { font-size: 12px; letter-spacing: var(--tr-label); fill: var(--white); }
.plan__ruimte   { font-size: 12px; letter-spacing: 0.08em; fill: var(--text-on-black); }
.plan__notitie  { font-size: 11px; font-weight: 400; letter-spacing: 0.02em; fill: var(--text-on-black-faint); }
.plan__maat     { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; fill: var(--white); }
.plan__toestel-label { font-size: 12px; letter-spacing: 0.1em; fill: var(--black); }

.plan__wand     { fill: none; stroke: var(--line-white-strong); stroke-width: 1.5; }
.plan__wand--buiten { stroke: var(--white); stroke-width: 2.5; }
.plan__wand--lood   { stroke: var(--white); stroke-width: 5; }
.plan__arcering { fill: url(#plan-arcering); stroke: none; }
.plan__deur     { fill: var(--black); stroke: none; }
.plan__toestel  { fill: var(--light-grey); stroke: none; }
.plan__boring   { fill: var(--black); stroke: none; }
.plan__glas     { stroke: var(--white); stroke-width: 1.5; stroke-dasharray: none; }

.plan__route      { fill: none; stroke: var(--purple); stroke-width: 3; stroke-linejoin: miter; stroke-linecap: square; }
.plan__route-punt { fill: var(--purple); stroke: none; }
.plan__staf       { fill: none; stroke: var(--line-white-strong); stroke-width: 1.5; stroke-dasharray: 7 6; }
.plan__staf-punt  { fill: var(--line-white-strong); stroke: none; }
.plan__inbreng    { fill: none; stroke: var(--line-white); stroke-width: 9; stroke-linecap: butt; }
.plan__zone       { fill: none; stroke: var(--line-white-strong); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.plan__maatlijn   { stroke: var(--white); stroke-width: 1; }
.plan__vloer      { fill: url(#plan-arcering); stroke: var(--white); stroke-width: 1.5; }
.plan__quench     { fill: none; stroke: var(--white); stroke-width: 2; }
.plan__arcering-lijn { stroke: var(--line-white); stroke-width: 1; }

/* -------------------------------------------------------------------------
   23. PROJECTFILTER — twee assen, zonder JavaScript

   Gebruikt op /projecten/. Twee radiogroepen (vertical en projecttype) staan als
   directe kinderen van .filter, vóór alle secties. Elke groep verbergt wat niet
   past; samen geven ze de doorsnede. De keuze van de vertical stuurt ook het
   routeblok en de CTA onderaan, zodat de filter een echte router is en niet
   alleen een galerijknop. Alles werkt met toetsenbord en met JavaScript uit.
   ------------------------------------------------------------------------- */
.filter { display: block; }

.filter__state {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.filter__groep { border: 0; margin: 0; padding: 0; min-width: 0; }
.filter__groep + .filter__groep { margin-top: var(--sp-24); }
.filter__legend {
  padding: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--text-on-black-faint);
}
.filter__opties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}
.filter__chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--sp-20);
  border: var(--hairline) solid var(--line-white);
  background: transparent;
  color: var(--white);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  cursor: pointer;
  transition: var(--transition);
}
.filter__chip:hover { border-color: var(--white); }
.filter__telling { margin-left: var(--sp-8); color: var(--text-on-black-quiet); }

.filter__leeg { display: none; }
.filter__uitleg { margin-top: var(--sp-16); }

/* Actieve chip */
#pf-v-alle:checked          ~ * label[for="pf-v-alle"],
#pf-v-woningbouw:checked    ~ * label[for="pf-v-woningbouw"],
#pf-v-medisch:checked       ~ * label[for="pf-v-medisch"],
#pf-v-kantoren:checked      ~ * label[for="pf-v-kantoren"],
#pf-v-grootschalig:checked  ~ * label[for="pf-v-grootschalig"],
#pf-v-retail:checked        ~ * label[for="pf-v-retail"],
#pf-t-alle:checked          ~ * label[for="pf-t-alle"],
#pf-t-nieuwbouw:checked     ~ * label[for="pf-t-nieuwbouw"],
#pf-t-renovatie:checked     ~ * label[for="pf-t-renovatie"],
#pf-t-herbestemming:checked ~ * label[for="pf-t-herbestemming"],
#pf-t-interieur:checked     ~ * label[for="pf-t-interieur"],
#pf-t-onbekend:checked      ~ * label[for="pf-t-onbekend"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
#pf-v-alle:checked          ~ * label[for="pf-v-alle"] .filter__telling,
#pf-v-woningbouw:checked    ~ * label[for="pf-v-woningbouw"] .filter__telling,
#pf-v-medisch:checked       ~ * label[for="pf-v-medisch"] .filter__telling,
#pf-v-kantoren:checked      ~ * label[for="pf-v-kantoren"] .filter__telling,
#pf-v-grootschalig:checked  ~ * label[for="pf-v-grootschalig"] .filter__telling,
#pf-v-retail:checked        ~ * label[for="pf-v-retail"] .filter__telling,
#pf-t-alle:checked          ~ * label[for="pf-t-alle"] .filter__telling,
#pf-t-nieuwbouw:checked     ~ * label[for="pf-t-nieuwbouw"] .filter__telling,
#pf-t-renovatie:checked     ~ * label[for="pf-t-renovatie"] .filter__telling,
#pf-t-herbestemming:checked ~ * label[for="pf-t-herbestemming"] .filter__telling,
#pf-t-interieur:checked     ~ * label[for="pf-t-interieur"] .filter__telling,
#pf-t-onbekend:checked      ~ * label[for="pf-t-onbekend"] .filter__telling {
  color: var(--text-on-light);
}

/* De radio is onzichtbaar; de focusring hoort op het label. */
#pf-v-alle:focus-visible          ~ * label[for="pf-v-alle"],
#pf-v-woningbouw:focus-visible    ~ * label[for="pf-v-woningbouw"],
#pf-v-medisch:focus-visible       ~ * label[for="pf-v-medisch"],
#pf-v-kantoren:focus-visible      ~ * label[for="pf-v-kantoren"],
#pf-v-grootschalig:focus-visible  ~ * label[for="pf-v-grootschalig"],
#pf-v-retail:focus-visible        ~ * label[for="pf-v-retail"],
#pf-t-alle:focus-visible          ~ * label[for="pf-t-alle"],
#pf-t-nieuwbouw:focus-visible     ~ * label[for="pf-t-nieuwbouw"],
#pf-t-renovatie:focus-visible     ~ * label[for="pf-t-renovatie"],
#pf-t-herbestemming:focus-visible ~ * label[for="pf-t-herbestemming"],
#pf-t-interieur:focus-visible     ~ * label[for="pf-t-interieur"],
#pf-t-onbekend:focus-visible      ~ * label[for="pf-t-onbekend"] {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* As 1 — vertical */
#pf-v-woningbouw:checked   ~ * .projectkaart:not([data-vertical="woningbouw-renovatie"]),
#pf-v-medisch:checked      ~ * .projectkaart:not([data-vertical="medische-praktijken"]),
#pf-v-kantoren:checked     ~ * .projectkaart:not([data-vertical="kantoren-bedrijfsgebouwen"]),
#pf-v-grootschalig:checked ~ * .projectkaart:not([data-vertical="grootschalige-projecten"]),
#pf-v-retail:checked       ~ * .projectkaart:not([data-vertical="retail-horeca"]),
/* As 2 — projecttype */
#pf-t-nieuwbouw:checked     ~ * .projectkaart:not([data-type="nieuwbouw"]),
#pf-t-renovatie:checked     ~ * .projectkaart:not([data-type="renovatie"]),
#pf-t-herbestemming:checked ~ * .projectkaart:not([data-type="herbestemming"]),
#pf-t-interieur:checked     ~ * .projectkaart:not([data-type="interieur"]),
#pf-t-onbekend:checked      ~ * .projectkaart:not([data-type="onbekend"]) {
  display: none;
}

/* De zeven combinaties die geen enkel project opleveren, benoemen we in plaats van
   de bezoeker naar een lege rij te laten kijken. */
#pf-v-medisch:checked ~ #pf-t-nieuwbouw:checked ~ * .filter__leeg,
#pf-v-medisch:checked ~ #pf-t-renovatie:checked ~ * .filter__leeg,
#pf-v-medisch:checked ~ #pf-t-herbestemming:checked ~ * .filter__leeg,
#pf-v-medisch:checked ~ #pf-t-interieur:checked ~ * .filter__leeg,
#pf-v-retail:checked  ~ #pf-t-nieuwbouw:checked ~ * .filter__leeg,
#pf-v-retail:checked  ~ #pf-t-herbestemming:checked ~ * .filter__leeg,
#pf-v-retail:checked  ~ #pf-t-onbekend:checked ~ * .filter__leeg {
  display: block;
}

/* Routeblok: de gekozen vertical bepaalt welk vervolg en welke CTA getoond wordt. */
.router__panel { display: none; }
.router__panel--alle { display: block; }
#pf-v-woningbouw:checked   ~ * .router__panel--alle,
#pf-v-medisch:checked      ~ * .router__panel--alle,
#pf-v-kantoren:checked     ~ * .router__panel--alle,
#pf-v-grootschalig:checked ~ * .router__panel--alle,
#pf-v-retail:checked       ~ * .router__panel--alle { display: none; }
#pf-v-woningbouw:checked   ~ * .router__panel[data-vertical="woningbouw-renovatie"],
#pf-v-medisch:checked      ~ * .router__panel[data-vertical="medische-praktijken"],
#pf-v-kantoren:checked     ~ * .router__panel[data-vertical="kantoren-bedrijfsgebouwen"],
#pf-v-grootschalig:checked ~ * .router__panel[data-vertical="grootschalige-projecten"],
#pf-v-retail:checked       ~ * .router__panel[data-vertical="retail-horeca"] { display: block; }

/* Uitgewerkte case binnen een projectkaart — open/dicht zonder JavaScript. */
.uitgewerkt { margin-top: var(--sp-16); border-top: var(--hairline) solid var(--line-white); }
.uitgewerkt__knop {
  padding: var(--sp-12) 0;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  color: var(--white);
  cursor: pointer;
}
.uitgewerkt__knop:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.uitgewerkt__body { padding-bottom: var(--sp-16); }
.uitgewerkt__figuur { margin: 0 0 var(--sp-16); }
.uitgewerkt__figuur img { display: block; width: 100%; height: auto; }

/* ---- Werkversie-balk en wettelijke gegevens ---------------------------- */
/* De balk verdwijnt bij oplevering, samen met de noindex in _partials/head.html. */

.werkversie {
  background: var(--purple);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 0.75rem 1.5rem;
  text-align: center;
}

.werkversie strong { text-transform: uppercase; letter-spacing: 0.12em; }

.site-footer__legal {
  border-top: 1px solid var(--border-white);
  margin-top: 3rem;
  padding-top: 2rem;
}

.site-footer__legal-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 62ch;
}

.site-footer__legal-list a { color: #fff; }

.te-bevestigen {
  background: none;
  color: #fff;
  border-bottom: 1px dashed var(--purple);
  padding-bottom: 1px;
}

/* Op lichte secties was dit wit op off-white: onleesbaar. De onderbroken
   paarse lijn blijft het merkteken, de tekst neemt de kleur van de sectie. */
.section--light .te-bevestigen { color: var(--black); }


/* ---- Wettelijke gegevens: rustig raster i.p.v. losse regels ------------ */
.site-footer__legal-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 3rem;
  max-width: none;
}
@media (min-width: 640px)  { .site-footer__legal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__legal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-footer__legal-list li { break-inside: avoid; }

/* ---- Terug naar boven --------------------------------------------------- */
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid var(--purple);
  padding-bottom: 2px;
}
.to-top::before { content: "\2191"; }

/* -------------------------------------------------------------------------
   18. PAGINABALK — kruimelpad + sectienavigatie

   Eén balk, gegenereerd door build.mjs, op elke pagina met meer dan drie
   secties. Hij plakt aan de bovenrand zodra de header wegscrollt, zodat het
   kruimelpad altijd zichtbaar blijft.

   Stapeling: de werkversie-balk en .site-header staan in de normale flow en
   scrollen weg; de paginabalk staat op z-index 40, één stap boven de header
   (30), zodat de header eronder door schuift in plaats van erover.

   Geen scroll-hijacking, geen laadanimatie, geen inhoud die pas na scrollen
   verschijnt. Navigeren werkt volledig zonder JavaScript.
   ------------------------------------------------------------------------- */

:root { --pagebar-h: 3.25rem; }

/* Ankersprongen mogen niet onder de balk landen. */
html { scroll-padding-top: calc(var(--pagebar-h) + var(--sp-24)); }

.pagebar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--black);
  border-bottom: var(--hairline) solid var(--line-white);
}

.pagebar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-16) var(--sp-32);
  min-height: var(--pagebar-h);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pagebar__crumbs { min-width: 0; flex-shrink: 1; }
.pagebar .breadcrumb { flex-wrap: nowrap; overflow: hidden; }
.pagebar .breadcrumb li { white-space: nowrap; }
/* Op smalle schermen blijft alleen de huidige pagina staan. */
@media (max-width: 639px) {
  .pagebar .breadcrumb li:not([aria-current]):not(:first-child) { display: none; }
  .pagebar .breadcrumb li[aria-current] { overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Sectienavigatie ---------------------------------------------------- */
.secnav-wrap { margin-left: auto; min-width: 0; }
.secnav-state { position: absolute; opacity: 0; width: 0; height: 0; }

.secnav {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  min-width: 0;
}

.secnav__now {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin: 0;
  min-width: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
}
.secnav__now-label { color: var(--text-on-black-ghost); }
.secnav__now-title {
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De streepjes: één per sectie, altijd zichtbaar op desktop, zodat u ziet
   waar u bent zonder iets open te klappen. */
.secnav__ticks {
  display: none;
  align-items: center;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.secnav__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.75rem;
  border-bottom: 2px solid var(--line-white);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-on-black-ghost);
  transition: var(--transition);
}
.secnav__tick:hover,
.secnav__tick:focus-visible { color: var(--white); border-bottom-color: var(--purple); }
.secnav__tick[aria-current] { color: var(--white); border-bottom-color: var(--purple); }

.secnav__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-12);
  border: var(--hairline) solid var(--line-white);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.secnav__toggle:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.secnav-state:focus-visible ~ .secnav .secnav__toggle { outline: 2px solid var(--purple); outline-offset: 2px; }
.secnav__toggle-close { display: none; }
.secnav-state:checked ~ .secnav .secnav__toggle-open  { display: none; }
.secnav-state:checked ~ .secnav .secnav__toggle-close { display: inline; }

/* ---- Uitklappaneel ------------------------------------------------------ */
.secnav__panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  background: var(--black);
  border-bottom: var(--hairline) solid var(--line-white);
  max-height: calc(100vh - var(--pagebar-h));
  overflow-y: auto;
}
.secnav-state:checked ~ .secnav__panel { display: block; }

.secnav__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--sp-16) var(--gutter) var(--sp-24);
}
@media (min-width: 640px)  { .secnav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-32); } }
@media (min-width: 1024px) { .secnav__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .secnav__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.secnav__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-12);
  min-height: 44px;
  padding-block: var(--sp-8);
  border-bottom: var(--hairline) solid var(--line-white);
  color: var(--text-on-black);
  font-size: var(--fs-body-sm);
  line-height: 1.35;
  transition: var(--transition);
}
.secnav__link:hover,
.secnav__link:focus-visible { color: var(--white); border-bottom-color: var(--purple); }
.secnav__link[aria-current] { color: var(--white); border-bottom-color: var(--purple); }
.secnav__num {
  flex-shrink: 0;
  width: 1.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-on-black-ghost);
}
.secnav__link:hover .secnav__num,
.secnav__link[aria-current] .secnav__num { color: var(--purple); }

/* Op mobiel is de inhoudsopgave ingeklapt: alleen waar-u-bent en de knop.
   Vanaf lg staan de streepjes erbij en verdwijnt het woord "Op deze pagina"
   niet meer. */
@media (max-width: 479px) {
  .secnav__now { display: none; }
}
@media (max-width: 1023px) {
  .secnav__now-label { display: none; }
}
@media (min-width: 1024px) {
  .secnav__ticks { display: flex; }
  .secnav__now-title { max-width: 18rem; }
}
@media (min-width: 1280px) {
  :root { --pagebar-h: 3.5rem; }
}

/* ---- Terugweg onderaan elke sectie -------------------------------------- */
.sec-back { margin-top: var(--sp-40); }
.sec-back__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  color: var(--text-on-black-ghost);
  border-bottom: var(--hairline) solid transparent;
  transition: var(--transition);
}
.sec-back__link::before { content: "\2191"; }
.sec-back__link:hover,
.sec-back__link:focus-visible { color: var(--white); border-bottom-color: var(--purple); }

.section--light .sec-back__link { color: var(--text-on-light); }
.section--light .sec-back__link:hover,
.section--light .sec-back__link:focus-visible { color: var(--black); border-bottom-color: var(--purple); }

/* Full-bleed secties hebben geen eigen gutter; de terugweg krijgt die zelf. */
.section--flush .sec-back { margin-top: 0; padding: var(--sp-24) var(--gutter); }
.hero .sec-back { display: none; }

/* ---- Terug naar boven, netter -------------------------------------------- */
.to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 44px;
  margin-top: var(--sp-40);
  padding: 0 var(--sp-16);
  border: var(--hairline) solid var(--line-white);
  border-bottom-width: var(--hairline);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  color: var(--white);
  transition: var(--transition);
}
.to-top::before { content: none; }
.to-top__arrow {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  translate: 0 2px;
}
.to-top:hover,
.to-top:focus-visible { background: var(--white); border-color: var(--white); color: var(--black); }

/* Compacte projectindex — projecten zonder eigen foto, dicht op elkaar.
   Referentie AIDarchitecten: ~132 px paginahoogte per project. */
.projectindex { border-top: var(--hairline) solid var(--line-white); }
.projectindex__rij {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-16);
  border-bottom: var(--hairline) solid var(--line-white);
}
@media (min-width: 900px) {
  .projectindex__rij {
    grid-template-columns: 16rem minmax(0, 1fr) 14rem;
    gap: var(--sp-24);
    align-items: baseline;
  }
}
.projectindex__naam { font-size: var(--fs-body); font-weight: 700; }
.projectindex__regel { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-on-black-quiet); }
.projectindex__meta {
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tag);
  color: var(--text-on-black-quiet);
}

/* -------------------------------------------------------------------------
   26. BEELDBAND EN PROJECTRASTER
   Voor pagina's waar het beeld de pagina draagt en niet de alinea.
   Regels uit BAR-BEELD.md die hier in CSS staan, niet in een pagina:
   - een beeldband is altijd volle breedte van haar sectie (`.section--flush`);
   - een raster heeft op desktop hoogstens twee kolommen, zodat elk projectbeeld
     op een venster van 1440 px breder rendert dan 480 px;
   - elk projectbeeld heeft een zichtbaar bijschrift met projectnaam en bron.
   Geen radius, geen schaduw, geen tweede accent: alleen haarlijnen en scrim.
   ------------------------------------------------------------------------- */
.beeldband { position: relative; margin: 0; }

.beeldband__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.beeldband__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Openingsbeeld: vult het scherm onder de kop, maar nooit hoger dan 52rem. */
.beeldband--opening .beeldband__frame {
  aspect-ratio: auto;
  height: calc(100vh - var(--header-h));
  min-height: 30rem;
  max-height: 52rem;
}

.beeldband__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--gutter);
}
.beeldband__overlay > * { max-width: var(--measure-hero); }
.beeldband__overlay .lede { color: var(--white); }

/* Bijschrift: buiten het beeld, altijd leesbaar, altijd met bron. */
.beeldband__bijschrift,
.rasterbeeld__bijschrift {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-20);
  padding: var(--sp-16) var(--gutter);
  border-top: var(--hairline) solid var(--line-white);
  font-size: var(--fs-label);
  line-height: var(--sp-20);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-tag);
  color: var(--text-on-black-quiet);
}
.beeldband__bijschrift b,
.rasterbeeld__bijschrift b { font-weight: 700; color: var(--white); }
.beeldband__bron,
.rasterbeeld__bron { font-weight: 400; letter-spacing: var(--tr-tag); }

/* Het label van een sfeerbeeld staat zichtbaar in het bijschrift, nooit in
   een commentaar, en nooit naast een projectnaam. */
.beeldband__bijschrift--illustratie { color: var(--white); }

.rasterbeeld {
  display: grid;
  gap: var(--hairline);
  background: var(--line-white);
  border-block: var(--hairline) solid var(--line-white);
}
@media (min-width: 1024px) { .rasterbeeld { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rasterbeeld__item { margin: 0; background: var(--black); }
.rasterbeeld__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.rasterbeeld__frame img { width: 100%; height: 100%; object-fit: cover; }
.rasterbeeld__bijschrift { border-top: 0; }

/* Tekstblok binnen een rasterbeeld-tegel: projectnaam, één regel, bron, link.
   Hoort bij §26. Geen radius, geen schaduw; hover keert de tegel om zoals .card. */
.rasterbeeld__tekst { padding: var(--sp-24); }
@media (min-width: 640px) { .rasterbeeld__tekst { padding: var(--sp-32) var(--gutter); } }
.rasterbeeld__naam {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 900;
  letter-spacing: var(--tr-h3);
}
.rasterbeeld__regel { margin-top: var(--sp-8); font-size: var(--fs-body-sm); line-height: 1.72; color: var(--text-on-black-quiet); }
.rasterbeeld__cta {
  display: inline-block;
  margin-top: var(--sp-16);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
}

/* Vlakke scrim over een openingsbeeld, zodat de kop erop leesbaar blijft.
   Vlak, geen verloop — conform DESIGN.md. */
.beeldband__scrim { position: absolute; inset: 0; z-index: 1; background: var(--scrim); }
/* Beeld dat gewoon in de tekstkolom staat, op ware breedte. */
.vlakbeeld { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   28. OVERLOOPCORRECTIES — gemeten op 390 x 844 (CONTROLE-BEELD.md)
   Drie echte overlopen, geen van alle zichtbaar in de markup. Alleen
   min-width/track-correcties; geen nieuwe kleur, maat of radius.
   ------------------------------------------------------------------------- */

/* a) Rastertegel was 375 px breed in een track van 350 px: grid-items krijgen
      standaard min-width:auto en het bijschrift heeft een brede min-content. */
.rasterbeeld { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .rasterbeeld { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rasterbeeld__item { min-width: 0; }
.rasterbeeld__bijschrift { min-width: 0; }
.rasterbeeld__bron { overflow-wrap: anywhere; }

/* b) De hero-kolom werd op mobiel 437 px breed en werd door overflow:hidden
      rechts afgesneden — de kop viel deels buiten beeld. */
.hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.06fr 0.94fr; } }
@media (min-width: 1024px) { .hero--beeld .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.hero--beeld .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero__content, .hero__media { min-width: 0; }
.hero__meta { flex-wrap: wrap; }
.hero__actions { flex-wrap: wrap; }
.hero__title, .hero__lede { overflow-wrap: anywhere; }

/* c) De knop van de sectienavigatie duwde de paginabalk 35 px open. De
      kruimel krimpt nu, de knop houdt zijn maat en blijft raakbaar. */
.pagebar__crumbs { flex: 1 1 auto; }
.secnav-wrap { flex: 0 0 auto; }
.secnav { flex-wrap: nowrap; }
.secnav__toggle { flex: 0 0 auto; }
@media (max-width: 639px) { .secnav__now { display: none; } }

/* -------------------------------------------------------------------------
   29. FAQ-ACCORDEON
   Elk antwoord staat er nog volledig; het staat alleen niet meer allemaal
   tegelijk uitgeklapt. Zo blijft een FAQ-pagina met 33.000 px onder de
   24.000 px zonder dat er één zin verdwijnt. Werkt zonder JavaScript.
   Geen radius, geen schaduw, geen tweede accent — alleen de haarlijn en +/−.
   ------------------------------------------------------------------------- */
details.faq__item { padding: 0; }
.faq__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-20);
  padding: var(--sp-24) 0;
  cursor: pointer;
  list-style: none;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: var(--fs-h3);
  font-weight: 900;
  line-height: 1;
  color: var(--purple);
}
details[open] > .faq__summary::after { content: "\2212"; }
.faq__summary:hover .faq__question { color: var(--purple); }
.faq__summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.faq__summary .faq__question { margin: 0; }
.faq__body { padding-bottom: var(--sp-24); }
.faq__body > *:first-child { margin-top: 0; }

/* Volle-breedte beeldband op een lange kennispagina: 21:9 in plaats van 16:9.
   Het beeld blijft 1440 px breed op desktop (ruim boven de 480 px-ondergrens)
   maar kost 617 px hoogte in plaats van 810 px. Dat is wat lange FAQ- en
   kennispagina's binnen de 24.000 px houdt zonder één zin te schrappen. */
.beeldband:not(.beeldband--opening) .beeldband__frame { aspect-ratio: 21 / 9; }
@media (max-width: 639px) { .beeldband:not(.beeldband--opening) .beeldband__frame { aspect-ratio: 3 / 2; } }

/* Stappenlijst: de toelichting per stap klapt open. Nummer en titel blijven
   altijd zichtbaar, zodat de volgorde in één blik leesbaar blijft. */
.steps__detail { margin-top: var(--sp-8); }
.steps__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-20);
  cursor: pointer;
  list-style: none;
}
.steps__summary::-webkit-details-marker { display: none; }
.steps__summary::after { content: "+"; flex: 0 0 auto; font-size: var(--fs-h3); font-weight: 900; line-height: 1; color: var(--purple); }
details[open] > .steps__summary::after { content: "\2212"; }
.steps__summary:hover .steps__title { color: var(--purple); }
.steps__summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.steps__detail .steps__body { padding-top: var(--sp-16); }

/* ---- Cookiebanner (Artes GDPR-module) ---------------------------------- */
/* Vast onderaan, over de inhoud, zodat hij niet te missen is. Geen animatie,
   geen overlay die de pagina blokkeert: de bezoeker mag lezen zonder eerst
   te kiezen — dat is toegestaan zolang er niets laadt voor de keuze er is. */

.cc {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--black);
  border-top: 2px solid var(--purple);
}
.cc[hidden] { display: none; }

.cc__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--sp-32) var(--gutter);
  display: grid;
  gap: var(--sp-24);
}
@media (min-width: 1024px) {
  .cc__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-48); }
  .cc__paneel { grid-column: 1 / -1; }
}

.cc__titel { font-size: var(--fs-h3); font-weight: 900; letter-spacing: -0.02em; }
.cc__tekst p { margin-top: var(--sp-12); max-width: 68ch; color: var(--text-on-black); }
.cc__signaal { border-left: 2px solid var(--purple); padding-left: var(--sp-16); }

.cc__acties { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

.cc__paneel { border-top: var(--hairline) solid var(--line-white); padding-top: var(--sp-24); }
.cc__lijst { list-style: none; margin: 0 0 var(--sp-24); padding: 0; display: grid; gap: var(--sp-16); }
@media (min-width: 768px) { .cc__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-40); } }

.cc__optie { display: flex; gap: var(--sp-12); align-items: start; cursor: pointer; }
.cc__optie input { margin-top: 0.3em; accent-color: var(--purple); width: 1.05rem; height: 1.05rem; }
.cc__optie input:disabled { opacity: 0.55; cursor: default; }
.cc__optie span { max-width: 46ch; }

.cc__optie input:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* De banner mag de voetregel niet permanent afdekken. */
.site-footer { padding-bottom: var(--sp-96); }

/* -------------------------------------------------------------------------
   26. DATATABEL — cookie-inventaris op /cookiebeleid/
   Eén component, scherpe hoeken, hairlines. Scrollt horizontaal op smal
   scherm in plaats van de pagina mee te sleuren.
   ------------------------------------------------------------------------- */
.dtab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtab {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  text-align: left;
}
.dtab caption {
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  padding-bottom: var(--sp-12);
  color: var(--text-on-black-faint);
}
.dtab th, .dtab td {
  border-bottom: var(--hairline) solid var(--line-white);
  padding: var(--sp-12) var(--sp-16) var(--sp-12) 0;
  vertical-align: top;
  color: var(--text-on-black);
}
.dtab thead th {
  border-bottom-color: var(--line-white-strong);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--white);
  white-space: nowrap;
}
.dtab tbody th { font-weight: 700; color: var(--white); }
.dtab code { font-family: var(--font-sans); font-weight: 700; color: var(--white); }
.section--light .dtab caption { color: var(--text-on-light); }
.section--light .dtab th,
.section--light .dtab td { border-bottom-color: var(--line-black); color: var(--text-on-light); }
.section--light .dtab thead th,
.section--light .dtab tbody th,
.section--light .dtab code { color: var(--black); }
.section--light .dtab thead th { border-bottom-color: var(--black); }