/* =========================================================
   Prevenzo — homepage
   Eén stylesheet, geen externe afhankelijkheden.

   Tokens en componentwaarden komen één-op-één uit het Prevenzo
   design system (_ds/prevenzo-design-system). Verander hier niets
   zonder het daar ook aan te passen.
   ========================================================= */

/* ---------- Poppins, zelf gehost ----------
   Poppins is een SUBSTITUUT voor het echte Prevenzo-wordmarkfont;
   er zijn geen fontbestanden aangeleverd. Komt het echte font er,
   vervang dan alleen deze @font-face-regels.
   Latin-subset (U+0000-00FF e.d.) — dekt Nederlands volledig. */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/poppins-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/poppins-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   1. Tokens
   ========================================================= */

:root {
  /* ---- Merk: het logoverloop, gesampled uit de PNG ---- */
  --brand-teal: #82c9c6;
  --brand-lime: #abc908;
  --brand-gradient: linear-gradient(158deg, #82c9c6 0%, #9ac96f 52%, #abc908 100%);
  --brand-gradient-soft: linear-gradient(158deg, #eaf7f6 0%, #f4f9e4 100%);

  /* ---- Teal-schaal ---- */
  --teal-50: #f1faf9;  --teal-100: #ddf2f1; --teal-200: #bfe6e4; --teal-300: #a0d9d7;
  --teal-400: #82c9c6; --teal-500: #5fb4b0; --teal-600: #429692; --teal-700: #2e7370;
  --teal-800: #205250; --teal-900: #14332f;

  /* ---- Lime-schaal ---- */
  --lime-50: #f8fae7;  --lime-100: #eef5c5; --lime-200: #dcec92; --lime-300: #c7df4e;
  --lime-400: #abc908; --lime-500: #94af06; --lime-600: #798f05; --lime-700: #5c6d06;
  --lime-800: #414d06; --lime-900: #2a3204;

  /* ---- Ink: koele, teal-getinte neutralen. Geen zwart, geen grijs. ---- */
  --ink-900: #0e2027; --ink-800: #17323b; --ink-700: #27454f; --ink-600: #4a6670;
  --ink-500: #6b838b; --ink-400: #93a7ad; --ink-300: #c0cdd1; --ink-200: #dce5e7;
  --ink-100: #edf2f3; --ink-50: #f6f9fa;  --white: #ffffff;

  /* ---- Status ---- */
  --status-success: #94af06; --status-success-bg: #f8fae7;
  --status-info: #429692;    --status-info-bg: #f1faf9;
  --status-warning: #c98a1a; --status-warning-bg: #fdf5e7;
  --status-danger: #c4462f;  --status-danger-bg: #fdf0ed;

  /* ---- Semantische aliassen ---- */
  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-on-brand: var(--ink-900);
  --text-link: var(--teal-700);
  --text-link-hover: var(--ink-900);

  --surface-page: var(--white);
  --surface-subtle: var(--ink-50);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--ink-900);
  --surface-brand: var(--brand-gradient);
  --surface-brand-tint: var(--teal-50);
  --surface-accent-tint: var(--lime-50);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand: var(--teal-400);
  --border-focus: var(--teal-600);

  --action-primary: var(--lime-400);
  --action-primary-hover: var(--lime-500);
  --action-primary-active: var(--lime-600);
  --action-primary-text: var(--ink-900);
  --action-secondary: var(--ink-900);
  --action-secondary-hover: var(--ink-800);
  --action-secondary-text: var(--white);

  /* ---- Typografie ---- */
  --font-fallback-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Poppins", var(--font-fallback-sans);
  --font-body: "Poppins", var(--font-fallback-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-display-xl: clamp(2.75rem, 5.2vw, 4.25rem);
  --fs-display-l:  clamp(2.25rem, 4vw, 3.25rem);
  --fs-display-m:  clamp(1.875rem, 3vw, 2.5rem);
  --fs-heading-l: 1.75rem;
  --fs-heading-m: 1.375rem;
  --fs-heading-s: 1.125rem;
  --fs-body-l: 1.125rem;
  --fs-body-m: 1rem;
  --fs-body-s: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.05; --lh-heading: 1.18; --lh-snug: 1.4; --lh-body: 1.65;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --ls-display: -0.02em; --ls-heading: -0.01em; --ls-body: 0; --ls-eyebrow: 0.14em;
  --measure-prose: 64ch; --measure-lead: 52ch;

  /* ---- Ruimte ---- */
  --space-0: 0;    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px;
  --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 128px;

  --gutter: 24px;
  --section-y: clamp(64px, 8vw, 120px);
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1440px;

  /* De homepage zet zelf 1280px als maat — breder dan --container-max,
     zoals in het ontwerp. */
  --page-max: 1280px;
  --page-pad: clamp(20px, 4vw, 40px);

  /* ---- Radius en schaduw ---- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --radius-xl: 28px; --radius-2xl: 40px; --radius-pill: 999px;
  /* het logoschild: vierkant boven, diep afgerond onder */
  --radius-shield: 8px 8px 120px 120px;

  --shadow-xs: 0 1px 2px rgba(14, 32, 39, .06);
  --shadow-sm: 0 2px 6px rgba(14, 32, 39, .06), 0 1px 2px rgba(14, 32, 39, .04);
  --shadow-md: 0 8px 24px -6px rgba(14, 32, 39, .12), 0 2px 6px rgba(14, 32, 39, .05);
  --shadow-lg: 0 24px 56px -16px rgba(14, 32, 39, .18), 0 4px 12px rgba(14, 32, 39, .06);
  --shadow-brand: 0 18px 40px -14px rgba(66, 150, 146, .45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);
  --ring-focus: 0 0 0 3px rgba(130, 201, 198, .55);

  /* ---- Beweging ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms;
  --dur-slow: 420ms;   --dur-reveal: 700ms;
  --transition-control:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms;
    --dur-slow: 0ms; --dur-reveal: 0ms;
  }
}

/* =========================================================
   2. Basis
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px; /* sticky header */
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

/* Moet ná niets anders komen: een eigen display-regel (bijvoorbeeld
   .form-status { display: flex }) wint anders van het hidden-attribuut,
   en dan staat een verborgen element alsnog in beeld. */
[hidden] { display: none !important; }

a {
  color: var(--teal-700);
  text-decoration: none;
  transition: var(--transition-control);
}
a:hover { color: var(--ink-900); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-900); color: var(--white);
  padding: 14px 20px; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 0; }

/* De volledige merknaam nooit afbreken over twee regels */
[data-nowrap] { white-space: nowrap; }

/* Het eindpunt als merkelement: de punt in accentkleur */
.dot-lime { color: var(--lime-500); }
.dot-lime-400 { color: var(--lime-400); }

/* =========================================================
   3. Layout
   ========================================================= */

.wrap { max-width: var(--page-max); margin-inline: auto; }

.section { padding: clamp(64px, 8vw, 120px) var(--page-pad); }
.section--white  { background: var(--white); }
.section--subtle { background: var(--surface-subtle); }
.section--ink    { background: var(--ink-900); color: var(--ink-200); }
.section--tint   { background: var(--brand-gradient-soft); }
/* Lichtblauw: het lichtste teal uit de schaal. Gebruikt voor klantverhalen. */
.section--blue   { background: var(--teal-50); }

/* Twee kolommen die onder de opgegeven minimumbreedte naar één vallen */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* =========================================================
   4. Iconen (inline Lucide-sprite, staat in elke HTML-pagina)
   ========================================================= */

.ico {
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* =========================================================
   5. Componenten
   ========================================================= */

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-700);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--brand-gradient);
}
/* De hero gebruikt een dikkere regel en iets meer ruimte */
.eyebrow--hero { gap: 10px; }
.eyebrow--hero::before { height: 3px; }
.eyebrow--inverse { color: var(--brand-teal); }

/* Kicker: het kleine label binnen donkere panelen en tijdlijnstappen */
.kicker {
  margin: 0;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-teal);
}
.kicker--teal { color: var(--teal-700); letter-spacing: .1em; }

/* ---------- Sectiekop ---------- */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  text-align: left;
}
.section-heading > h2,
.section-heading > h3 {
  margin: 0;
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}
.section-heading__lead {
  margin: 0;
  font-size: var(--fs-body-l);
  color: var(--text-muted);
  max-width: var(--measure-lead);
}
.section-heading--inverse > h2 { color: var(--white); }
.section-heading--inverse .section-heading__lead { color: var(--ink-200); }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-control);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--sm { min-height: 36px; padding: 8px 16px; font-size: var(--fs-body-s); gap: var(--space-2); }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: var(--fs-body-l); gap: var(--space-3); }

.btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-text);
}
.btn--primary:hover:not(:disabled) {
  background: var(--action-primary-hover);
  color: var(--action-primary-text);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--action-secondary);
  color: var(--action-secondary-text);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--action-secondary-hover);
  color: var(--action-secondary-text);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--border-strong);
}
.btn--outline:hover:not(:disabled) {
  background: var(--teal-50);
  border-color: var(--teal-400);
  color: var(--ink-900);
}

.btn--ghost { background: transparent; color: var(--ink-800); }
.btn--ghost:hover:not(:disabled) { background: var(--ink-100); color: var(--ink-800); }

.btn--inverse { background: var(--white); color: var(--ink-900); }
.btn--inverse:hover:not(:disabled) { background: var(--teal-50); color: var(--ink-900); }

.btn--block { display: flex; width: 100%; }

/* De pijl schuift 3px mee op hover */
.btn .ico-trail { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover:not(:disabled) .ico-trail { transform: translateX(3px); }

/* Tekstlink met pijl */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
}
.link-arrow .ico-trail { transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .ico-trail { transform: translateX(4px); }

/* ---------- Kaart ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  overflow: hidden;
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
a.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  color: var(--text-body);
}
.card__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--teal-50);
  color: var(--teal-700);
  margin-bottom: var(--space-2);
}
/* De eyebrow van een kaart heeft géén verlooplijntje — anders dan die
   van een sectiekop. Zo staat het in het Card-component. */
.card__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-700);
}
.card__title {
  margin: 0;
  font-size: var(--fs-heading-s);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.card__body { font-size: 17px; line-height: var(--lh-body); }
.card__more {
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--teal-700);
}
.card__more .ico-trail { transition: transform var(--dur-fast) var(--ease-out); }
a.card:hover .card__more .ico-trail { transform: translateX(4px); }

/* ---------- Kerncijfer ---------- */
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: 1;
  color: var(--text-heading);
}
.stat__label { font-size: var(--fs-body-s); color: var(--text-muted); }

/* ---------- Schildkader ---------- */
.shield {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-shield);
  background: var(--brand-gradient);
}

/* ---------- Citaat ---------- */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-8);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.testimonial > .ico { color: var(--teal-300); }
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  text-wrap: pretty;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.testimonial figcaption::before {
  content: "";
  width: 34px; height: 3px;
  border-radius: 3px;
  background: var(--brand-gradient);
  flex: none;
}
.testimonial__who { display: flex; flex-direction: column; }
.testimonial__who strong {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.testimonial__who span { font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- Formuliervelden ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--ink-800);
}
.field > label .req { color: var(--status-danger); }
.field__control { position: relative; display: flex; align-items: center; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition-control);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.field select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.field__chevron {
  position: absolute;
  right: 14px;
  pointer-events: none;
  color: var(--ink-500);
}
.field__help:empty { display: none; }
.field__help {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
/* Foutstaat */
.field.is-invalid input,
.field.is-invalid select { border-color: var(--status-danger); }
.field.is-invalid .field__help { color: var(--status-danger); }

/* Velden op een donker paneel */
.form--dark .field > label { color: var(--white); }
.form--dark .field > label .req { color: var(--lime-300); }
.form--dark .field__help { color: var(--ink-300); }
.form--dark .field.is-invalid .field__help { color: #f6b2a5; }

/* =========================================================
   6. Header
   ========================================================= */

/* DE GESCROLDE TOESTAND IS DE STANDAARD, EN DAT IS MET OPZET.
   De ruimere kop hieronder wordt door main.js aangezet met .is-top zodra
   blijkt dat de pagina bovenaan staat. Komt dat script niet aan, dan is de
   header wat hij altijd was: leesbaar, met zijn eigen witte vlak. Andersom —
   transparant als standaard — zou zonder JavaScript een menu opleveren dat
   over de tekst heen valt zodra je scrolt. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* Bovenaan de pagina: geen eigen vlak, geen lijn. De header staat dan op het
   wit van de banner eronder, zodat er geen streep dwars door de bovenkant
   loopt. Let op: de gloed van de hero begint pas ONDER de header — die zit in
   .hero__glow en dat element kan niet buiten zijn eigen sectie komen. Op de
   homepage is de bovenrand daarom wit en niet lichtteal. */
.site-header.is-top {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Staat het mobiele menu open, dan is transparant geen optie: dan valt de
   uitgeklapte lijst over de pagina. */
.site-header.is-menu-open {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--border-subtle);
}

.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px clamp(16px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  transition: padding var(--dur-base) var(--ease-out);
}
.site-header.is-top .site-header__inner { padding-top: 22px; padding-bottom: 22px; }

.brand { display: flex; align-items: center; flex: none; }
/* HOE GROOT HET LOGO MAG WORDEN, LIGT VAST BIJ 60px.
   logo-prevenzo-donker.png is 417x120. Op een scherm met dubbele
   pixeldichtheid heeft een logo van 60px hoog al 120 echte pixels nodig — dat
   is precies wat er in het bestand zit. Groter dan 60 wordt dus zichtbaar
   zachter aan de randen. Wil je verder omhoog, dan is er eerst een grotere
   PNG of een SVG nodig; dan kan het zo mee. */
.brand img {
  height: 40px;
  width: auto;
  transition: height var(--dur-base) var(--ease-out);
}
.site-header.is-top .brand img { height: 56px; }

/* Op een smal scherm staat het logo naast de twee ronde knoppen en is er
   geen menu om ruimte tegen af te wegen; daar blijft het wat bescheidener. */
@media (max-width: 1079px) {
  .brand img { height: 34px; }
  .site-header.is-top .brand img { height: 44px; }
}

.nav-desk {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  font-size: 16px;
  font-weight: var(--fw-medium);
  flex: none;
}
.nav-desk a { color: var(--ink-800); white-space: nowrap; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  flex: none;
}
.header-actions .link-xpert { font-size: 15px; font-weight: var(--fw-medium); color: var(--ink-600); white-space: nowrap; }
.header-actions .link-phone {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* De onderstreping van 2px in het merkverloop */
.navlink { position: relative; padding: 6px 0; }
.navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.navlink:hover::after,
.navlink:focus-visible::after { transform: scaleX(1); }

.header-compact { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: none; /* pas zichtbaar onder 1080px */
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink-900);
  cursor: pointer;
  transition: var(--transition-control);
}
.icon-btn:hover { background: var(--teal-50); border-color: var(--teal-400); color: var(--ink-900); }

.nav-mobile {
  border-top: 1px solid var(--border-subtle);
  background: var(--white);
}
.nav-mobile nav {
  padding: 12px clamp(16px, 4vw, 32px) 24px;
  display: flex;
  flex-direction: column;
}
.nav-mobile a {
  color: var(--ink-800);
  font-size: 18px;
  font-weight: var(--fw-medium);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.nav-mobile a.link-xpert {
  color: var(--ink-600);
  font-size: 17px;
  border-bottom: 0;
}
.nav-mobile .btn { margin-top: 16px; }

@media (max-width: 1079px) {
  .nav-desk, .header-actions { display: none !important; }
  .icon-btn { display: inline-flex; }
}
@media (min-width: 1080px) {
  .header-compact { display: none; }
}

/* =========================================================
   7. Hero
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
/* De enige toegestane gloed op de pagina */
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 88% -10%, rgba(130, 201, 198, .35), transparent 60%);
  pointer-events: none;
}

/* ---------- De gloed achter de header door, alleen op de homepage ----------

   Het probleem: .hero__glow zit IN de hero, en die sectie staat op
   overflow:hidden. De gloed kan dus niet omhoog, en daardoor is de bovenste
   strook van het scherm wit terwijl de banner eronder lichtteal is. Met een
   doorzichtige header zie je die overgang als een naad.

   De oplossing hier is dezelfde gloed, maar dan op de PAGINA in plaats van in
   de sectie. Hij begint bovenaan het scherm, loopt achter de doorzichtige
   header door en gaat naadloos over in de hero. De hero zelf wordt daarvoor
   doorzichtig en zijn eigen gloed-element uitgezet.

   WAAROM ALLEEN DE HOMEPAGE. Op elke andere pagina staat onder de header
   eerst het kruimelpad: een witte balk. Daar sluit een doorzichtige header al
   naadloos op aan, dus daar valt niets te winnen — en het zou betekenen dat
   de gloed over de kruimelpadtekst heen komt te liggen. Vandaar de klasse op
   <body> in index.html en niet een regel voor de hele site. */
body.home {
  background-image: radial-gradient(120% 640px at 88% -80px, rgba(130, 201, 198, .35), transparent 60%);
  background-repeat: no-repeat;
}
body.home .hero { background: transparent; }
body.home .hero__glow { display: none; }

/* ---------- En hetzelfde op de binnenpagina's ----------

   Daar zit het kruimelpad tussen de header en de hero. Toen dat nog een witte
   balk met een lijn eronder was, las het als een tweede header. Die balk is
   weggehaald, maar daarmee kwam het probleem er een laag onder terug: een
   losse regel in een witte strook, met vlak eronder de rand waar de tint van
   de hero begint. Zwevend in plaats van ergens bij horend.

   Dezelfde ingreep als op de homepage lost dat op: de gloed op de pagina in
   plaats van in de hero. Dan loopt de tint van de bovenkant van het scherm,
   achter de doorzichtige header en achter het kruimelpad door, de hero in.
   Eén band, geen enkele naad — en het kruimelpad hoort zichtbaar bij de kop
   eronder in plaats van bij niets.

   De klasse komt uit layout() in tools/lib.mjs en staat er op elke pagina met
   een .page-hero of een .article__head — dat laatste is de kop van een artikel
   op /kennis/, die precies hetzelfde is opgebouwd en dus hetzelfde probleem
   had. De homepage doet niet mee: die heeft .home met zijn eigen gloed. */
body.binnenpagina {
  background-image: radial-gradient(120% 560px at 88% -60px, rgba(130, 201, 198, .35), transparent 60%);
  background-repeat: no-repeat;
}
body.binnenpagina .page-hero,
body.binnenpagina .article__head { background: transparent; }
body.binnenpagina .page-hero > .hero__glow,
body.binnenpagina .article__head .hero__glow { display: none; }
.hero__inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 84px) var(--page-pad) clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero h1 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 68px);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-900);
  text-wrap: balance;
}
.hero__tagline {
  margin: 20px 0 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--teal-700);
  text-wrap: balance;
}
.hero__lead {
  margin: 18px 0 0;
  max-width: 48ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-600);
}
.hero__points {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: var(--fw-medium);
  color: var(--ink-800);
}
.hero__points .ico { color: var(--lime-600); }
.hero__cta {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero__media {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 440px;
}
.hero__media .shield { width: 100%; box-shadow: var(--shadow-brand); }
.hero__media .shield img {
  width: 100%;
  height: clamp(340px, 48vw, 480px);
  object-fit: cover;
  object-position: center;
}
/* De capsule over de rand van de foto — geen scrim, zoals het merk voorschrijft */
.hero__stats {
  margin: -28px 0 0 0;
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px;
  display: flex;
  gap: 32px;
  width: max-content;
  max-width: 100%;
}

/* =========================================================
   8. Vertrouwensstrook
   ========================================================= */

.trust {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 28px var(--page-pad);
}
.trust__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  justify-content: space-between;
}
.trust__label {
  margin: 0;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}
.trust__logos img {
  /* De klantlogo-bestanden zijn 828x422 met witruimte eromheen ingebakken.
     Met object-fit: contain past het logo in dit vak, en bij die verhouding
     is een vak van 44 hoog te laag: het logo wordt dan nog geen 90 breed. */
  width: 160px; height: 64px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.trust__logos img:hover { filter: none; opacity: 1; }

/* Het DNV-keurmerk. Het formaat wijkt af van de klantlogo's — het merk is
   vierkant (300x300), de logo's zijn liggend — maar het gedrag niet: grijs en
   ingetogen, kleur bij hover. Anders springt het eruit als het enige gekleurde
   ding in een rij grijze merken, en dat leest als een advertentie in plaats
   van als een keurmerk. */
.trust__keurmerk {
  width: 76px;
  height: 76px;
  object-fit: contain;
  flex: none;
  filter: grayscale(1);
  opacity: .6;
  transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.trust__keurmerk:hover { filter: none; opacity: 1; }

/* Nog niet aangeleverd — bewust zichtbaar als lege plek, niet verzonnen */
.slot {
  display: grid;
  place-items: center;
  width: 140px; height: 44px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xs);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-400);
  padding: 4px;
}
/* .slot--dnv stond hier ook. Weg: het DNV-keurmerk is er inmiddels en staat
   als .trust__keurmerk in de vertrouwensstrook. */
.slot--case { width: 150px; height: 48px; }
/* De lege plek waar een video komt: even groot als de speler die er straks
   staat, zodat de pagina niet verspringt als het bestand er is. */
.slot--video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  border-radius: var(--radius-xl);
  padding: 24px;
}
.slot--video code {
  font-family: var(--font-mono);
  font-size: .9em;
  color: var(--ink-600);
}

/* =========================================================
   9. Het verschil
   ========================================================= */

.verschil__photo {
  width: 100%;
  height: clamp(360px, 46vw, 520px);
  object-fit: cover;
  border-radius: var(--radius-xl);
}
.verschil h2 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-900);
  text-wrap: balance;
}
.verschil blockquote {
  margin: 24px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--teal-400);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: var(--fw-light);
  line-height: 1.4;
  color: var(--ink-800);
}
.verschil__note { margin: 12px 0 0; font-size: 16px; color: var(--ink-500); }
.verschil__list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.verschil__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.verschil__list .ico { color: var(--teal-700); margin-top: 4px; }
.verschil__list p { margin: 0; font-size: 18px; color: var(--ink-800); }
.verschil__list strong { color: var(--ink-900); font-weight: var(--fw-semibold); }

/* =========================================================
   10. Doelgroepkiezer
   ========================================================= */

.segments__tabs {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.seg-tab {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-800);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: var(--transition-control);
}
.seg-tab:hover { border-color: var(--teal-400); background: var(--teal-50); }
.seg-tab[aria-selected="true"] {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: var(--white);
}
.segments__panel {
  margin-top: 24px;
  background: var(--ink-900);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 52px);
  color: var(--ink-200);
}
.segments__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.segments__problem {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--fw-light);
  line-height: 1.35;
  color: var(--white);
}
.segments__cta { margin-top: 28px; }
.segments__facts { display: flex; flex-direction: column; gap: 20px; }
.segments__approach { margin: 8px 0 0; font-size: 18px; line-height: 1.6; }
.segments__divider { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.segments__service { margin: 8px 0 0; font-size: 18px; font-weight: var(--fw-semibold); color: var(--white); }
.segments__service-note { margin: 6px 0 0; font-size: 17px; color: var(--ink-300); }

/* =========================================================
   11. Tijdlijn
   ========================================================= */

.timeline-root { margin-top: 56px; }
.timeline { position: relative; }
.timeline__track { position: absolute; background: var(--ink-800); border-radius: 3px; }
.timeline__fill  { position: absolute; background: var(--brand-gradient); border-radius: 3px; }

.timeline__dot {
  display: block;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 3px solid var(--brand-teal);
}
.timeline__title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-semibold);
  color: var(--white);
}
.timeline__body { margin: 8px 0 0; font-size: 17px; color: var(--ink-300); }
.timeline__note {
  margin: clamp(40px, 5vw, 64px) 0 0;
  font-size: 18px;
  color: var(--ink-300);
  max-width: 60ch;
}

@media (min-width: 900px) {
  .timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    padding-top: 44px;
  }
  .timeline__track { left: 0; right: 0; top: 9px; height: 3px; }
  .timeline__fill {
    left: 0; top: 9px; height: 3px; width: 0;
    transition: width 1.1s var(--ease-out);
  }
  .timeline.is-on .timeline__fill { width: 100%; }
  .timeline__step { position: relative; }
  .timeline__step .timeline__dot { position: absolute; top: -44px; left: 0; }
  .timeline__step:nth-child(even) { transform: translateY(26px); }
}

@media (max-width: 899px) {
  .timeline {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-left: 34px;
  }
  .timeline__track { left: 9px; top: 0; bottom: 0; width: 3px; }
  .timeline__fill {
    left: 9px; top: 0; width: 3px; height: 0;
    transition: height 1.1s var(--ease-out);
  }
  .timeline.is-on .timeline__fill { height: 100%; }
  .timeline__step { position: relative; }
  .timeline__step .timeline__dot { position: absolute; left: -34px; top: 2px; }
}

/* =========================================================
   12. Diensten
   ========================================================= */

.tiles {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
/* Het uitgelichte blok beslaat twee kolommen */
.tile-feature {
  grid-column: span 2;
  min-width: min(100%, 300px);
  background: var(--ink-900);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  color: var(--ink-200);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tile-feature__rule {
  width: 36px; height: 3px;
  border-radius: 2px;
  background: var(--brand-gradient);
}
.tile-feature h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  color: var(--white);
}
.tile-feature p { margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.6; }
.tile-feature p.tile-feature__outcome { font-size: 17px; color: var(--brand-teal); font-weight: var(--fw-semibold); }
.tile-feature .link-arrow { margin-top: 8px; font-size: 17px; color: var(--white); }
.tile-feature .link-arrow:hover { color: var(--brand-teal); }

.also {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
}
.also > span { font-size: 16px; color: var(--ink-500); }
.also a { font-size: 16px; font-weight: var(--fw-medium); }

/* =========================================================
   13. Verzuimcheck
   ========================================================= */

.check__intro { margin: 20px 0 0; max-width: 50ch; font-size: 19px; line-height: 1.6; color: var(--ink-700); }
.check__method {
  margin-top: 26px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-width: 52ch;
}
.check__method h3 { margin: 0; font-size: 16px; font-weight: var(--fw-semibold); color: var(--ink-900); font-family: var(--font-body); letter-spacing: 0; line-height: var(--lh-body); }
.check__method p { margin: 8px 0 0; font-size: 16px; color: var(--ink-600); }

.check__card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 36px);
}

/* ── De verzuimcheck op de homepage ─────────────────────────────────────
   Dezelfde velden en dezelfde uitkomst als op /verzuimcheck/, maar zonder de
   tweede stap: tekst links, de rekenmachine rechts. Op een telefoon vallen ze
   onder elkaar, met de tekst eerst -- eerst weten waaróm je iets invult. */
.check-home__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.check-home__lead {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-700);
}

.check-home__wrap .checklist { margin-top: 20px; }

.check-home__kaart {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 3vw, 32px);
}

/* Na de uitkomst: doorklikken naar een gesprek, of naar de uitgebreide check.
   De knop eerst -- dat is waar het blok voor staat. */
.check-home__verder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.check__progress {
  height: 4px;
  border-radius: 2px;
  background: var(--ink-100);
  overflow: hidden;
}
.check__progress span {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--brand-gradient);
  width: 50%;
  transition: width .3s var(--ease-out);
}
.check__step {
  margin: 14px 0 20px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.check__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 16px;
}
.check__submit { margin-top: 20px; }

.check__result {
  margin-top: 22px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  color: var(--ink-300);
}
.check__amount {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  color: var(--white);
}
.check__days { margin: 8px 0 0; font-size: 17px; }
.check__saving {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 17px;
}
.check__saving strong { color: var(--lime-300); }

.check__more {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}
.check__more > p:first-child { margin: 0 0 16px; font-size: 18px; color: var(--ink-700); }
.check__more-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 16px;
}
.check__more .check__submit { margin-top: 18px; }
.check__privacy { margin: 14px 0 0; font-size: 15px; color: var(--ink-500); }

/* Bevestiging na versturen */
.form-status {
  margin: 14px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 17px;
  font-weight: var(--fw-semibold);
  color: var(--lime-700);
}
.form-status .ico { margin-top: 4px; }
.form--dark .form-status { color: var(--lime-300); margin: 16px 0 0; }

/* =========================================================
   14. Klantverhalen
   ========================================================= */

.cases {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}
.case-feature {
  grid-column: span 2;
  min-width: min(100%, 300px);
  /* Wit en niet grijs: de sectie eronder is lichtblauw, en op die achtergrond
     moet de kaart oplichten in plaats van erin te zakken. */
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.case-feature__quote {
  margin: 0;
  font-family: var(--font-display);
  /* Stond op clamp(22px, 2.6vw, 30px). Dat werkt bij een quote van twee
     regels; deze is negentig woorden en dan wordt het blok een muur die de
     rest van de pagina wegduwt. */
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--ink-900);
  max-width: 62ch;
}
/* Het logo boven het uitgelichte verhaal. Niet grijs zoals in de
   vertrouwensstrook: hier is de klant het onderwerp en niet een rijtje. */
.case-feature__logo {
  width: 150px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
}

/* Wie het gezegd heeft. De naam ontbreekt nog, dus die staat als zichtbare
   lege plek naast de organisatie. */
.case-feature__who {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: var(--fs-body-m);
  color: var(--text-muted);
}
.case-feature__who strong {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}
.case-feature__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}
.case-feature__cols p:last-child { margin: 8px 0 0; font-size: 17px; color: var(--ink-600); }
.case-feature > a { font-weight: var(--fw-semibold); font-size: 17px; }
.cases__quotes { display: flex; flex-direction: column; gap: 24px; }

/* =========================================================
   15. Kennis
   ========================================================= */

.kennis__head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}
.kennis__head .section-heading { max-width: 60%; }
.kennis__head > a { font-weight: var(--fw-semibold); font-size: 17px; }
.kennis__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
.kennis-feature {
  grid-column: span 2;
  min-width: min(100%, 280px);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  /* De ruimte zit op .kennis-feature__tekst en niet hier: zo loopt de foto
     tot aan de rand, en houdt de tekst ernaast dezelfde marge als voorheen. */
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: inherit;
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
/* Mét foto wordt het twee kolommen: beeld links, tekst rechts. Zonder foto
   blijft het één kolom en verandert er niets aan de oude vorm. */
.kennis-feature--foto { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.kennis-feature__tekst {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 4vw, 40px);
}
.kennis-feature:hover {
  color: inherit;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
/* Op /kennis/ is de kaarttitel een h2 (kop van een lijstitem), op de
   homepage een h3 (subkop binnen een sectie). Zelfde vorm. */
.kennis-feature h2,
.kennis-feature h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--ink-900);
}
.kennis-feature p { margin: 0; max-width: 52ch; font-size: 18px; color: var(--ink-600); }
.kennis-feature .link-arrow { color: var(--teal-700); margin-top: auto; padding-top: 4px; }

/* ---------- Kennis: de foto's ---------- */

/* Elke foto op deze site die in een kader met een vaste verhouding zit.
   Hij vult dat kader helemaal en wordt bijgesneden, nooit uitgerekt — zo mag
   een redacteur aanleveren wat hij heeft. Deze klasse is ook het teken voor
   tools/check.mjs dat width en height in het HTML mogen ontbreken: de ruimte
   wordt hier vrijgehouden en niet daar. */
.media-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kennis-card__media,
.kennis-feature__media {
  overflow: hidden;
  background: var(--surface-sunken);
}
/* Geen foto? Dan een vlak in de merkkleuren met een icoon. Bewust niet
   niets: zonder vaste hoogte wordt de ene kaart hoger dan de andere en valt
   het rooster uit elkaar. */
.kennis-card__media--leeg,
.kennis-feature__media--leeg {
  display: grid;
  place-items: center;
  background: var(--brand-gradient-soft);
  color: var(--teal-600);
}

.kennis-feature__media { min-height: 260px; }

/* De kaart heeft padding, de foto hoort tot de rand te lopen. Vandaar de
   negatieve marge; .card staat op overflow:hidden, dus de ronding blijft. */
.kennis-card__media {
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) 0;
  aspect-ratio: 16 / 9;
  /* De kaart is een flexkolom; zonder dit mag de browser de hoogte die uit
     de verhouding volgt alsnog indrukken. */
  flex: none;
}
a.card:hover .media-fill,
.kennis-feature:hover .media-fill { transform: scale(1.03); }
.media-fill { transition: transform var(--dur-slow) var(--ease-out); }

/* Leestijd en "bijgewerkt" onder de samenvatting. */
.kennis-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.kennis-meta .ico { color: var(--ink-400); flex: none; }
.kennis-feature .kennis-meta { margin-top: 0; padding-top: 0; }
.kennis-card .card__more { padding-top: var(--space-3); margin-top: 0; }

/* ---------- Kennis: het filter ---------- */

/* Staat op hidden in het HTML en wordt door main.js zichtbaar gemaakt.
   Zonder JavaScript staan alle artikelen er gewoon; knoppen die niets doen
   zijn erger dan geen knoppen. */
.kennis-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 32px;
}
.kennis-filter__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--text-body);
  font: inherit;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-control);
}
.filter-chip:hover { border-color: var(--border-brand); color: var(--text-heading); }
.filter-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.filter-chip[aria-checked="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
}
.filter-chip__n {
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.filter-chip[aria-checked="true"] .filter-chip__n { color: rgba(255, 255, 255, .65); }
.kennis-filter__uitkomst { margin: 0; font-size: var(--fs-body-s); color: var(--text-muted); }

/* Het filter verbergt kaarten met het hidden-attribuut. Dat werkt hier zonder
   extra regel: de basis heeft [hidden] { display: none !important } en die
   wint van de display:flex van .card. */
.kennis__leeg { margin-top: 32px; }

@media (max-width: 860px) {
  .kennis-feature--foto { grid-template-columns: minmax(0, 1fr); }
  .kennis-feature__media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 700px) {
  .kennis__head .section-heading { max-width: 100%; }
}

/* =========================================================
   16. Slot-CTA
   ========================================================= */

.cta { padding: clamp(64px, 8vw, 110px) var(--page-pad); }
.cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
}
.cta__lead { margin: 20px 0 0; max-width: 50ch; font-size: 19px; line-height: 1.6; }
.cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: var(--fw-semibold);
  color: var(--white);
}
.cta__phone:hover { color: var(--brand-teal); }
.cta__phone .ico { color: var(--brand-teal); }
.cta__mail { margin: 12px 0 0; font-size: 17px; color: var(--ink-400); }
.cta__mail a { color: var(--brand-teal); }
.cta__mail a:hover { color: var(--white); }

.cta__panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 36px);
}
.cta__panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--fw-semibold);
  color: var(--white);
}
.cta__panel > p { margin: 10px 0 22px; font-size: 17px; }
.cta__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 16px;
}
.cta__single { margin-top: 16px; }
.cta__when { margin: 20px 0 0; padding: 0; border: 0; }
.cta__when legend { padding: 0; font-size: 15px; font-weight: var(--fw-semibold); color: var(--white); }
.cta__daypart {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chip-radio {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: var(--transition-control);
}
.chip-radio:hover { border-color: rgba(255, 255, 255, .6); }
.chip-radio[aria-checked="true"] {
  border-color: transparent;
  background: var(--white);
  color: var(--ink-900);
}
.cta__submit { margin-top: 22px; }
.cta__privacy { margin: 16px 0 0; font-size: 15px; color: var(--ink-400); }

/* =========================================================
   17. Footer
   ========================================================= */

.site-footer {
  background: var(--ink-900);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: clamp(48px, 6vw, 72px) var(--page-pad) 32px;
  color: var(--ink-400);
}
.site-footer__grid {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 36px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-brand img { height: 36px; width: auto; }
.footer-brand p { margin: 0; font-size: 16px; line-height: 1.6; }
.footer-brand .link-phone { font-size: 18px; font-weight: var(--fw-semibold); color: var(--white); }
.footer-brand .link-phone:hover { color: var(--brand-teal); }
.footer-brand .link-mail { font-size: 16px; color: var(--brand-teal); }
.footer-brand .link-mail:hover { color: var(--white); }

.site-footer nav,
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-head {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer nav a { color: var(--ink-300); font-size: 16px; }
.site-footer nav a:hover { color: var(--white); }
.footer-col p { margin: 0; font-size: 16px; color: var(--ink-300); }
.footer-col .link-xpert { margin-top: 8px; color: var(--brand-teal); font-size: 16px; font-weight: var(--fw-semibold); }
.footer-col .link-xpert:hover { color: var(--white); }

.site-footer__bottom {
  max-width: var(--page-max);
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-footer__legal a { color: var(--ink-400); }
.site-footer__legal a:hover { color: var(--white); }

/* =========================================================
   18. Scroll-reveal
   ========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   19. Foutpagina
   ========================================================= */

.error-page {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(48px, 8vw, 96px) var(--page-pad);
  position: relative;
  overflow: hidden;
}
.error-page > .wrap { position: relative; max-width: var(--container-narrow); }
.error-code {
  margin: 16px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(72px, 16vw, 160px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  line-height: .95;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-page h1 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  color: var(--ink-900);
}
/* :not(.error-code) — anders overrulet deze regel de maat van het cijfer,
   want een klasse + elementtype weegt zwaarder dan een klasse alleen. */
.error-page p:not(.error-code) { font-size: 19px; color: var(--ink-600); max-width: 46ch; margin-inline: auto; }
.error-page .eyebrow { justify-content: center; }
.error-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
/* De 404 wijst nu door naar de vier hoofdingangen. */
.error-links {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  text-align: left;
}


/* =========================================================
   20. Subpagina's
   Alles hieronder hoort bij de pagina's onder /diensten, /voor-wie,
   /kennis, /over-ons, /contact en de juridische pagina's. Tokens en
   maatvoering komen uit hetzelfde design system als de homepage; er
   staan hier geen nieuwe kleuren of nieuwe schaduwen.
   ========================================================= */

/* ---------- Uitklapmenu in de header ---------- */

.has-sub { position: relative; }

.navlink--sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-800);
  cursor: pointer;
  white-space: nowrap;
}
.navlink__chev { transition: transform var(--dur-fast) var(--ease-out); }
.navlink--sub[aria-expanded="true"] .navlink__chev { transform: rotate(180deg); }
.navlink[aria-current="page"]::after,
.navlink--sub[aria-current="true"]::after { transform: scaleX(1); }

.subnav {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  z-index: 70;
  min-width: 296px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* Onzichtbare brug, zodat de muis van de knop naar het menu kan zonder
   dat het menu tussendoor dichtklapt. */
.subnav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.subnav a {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  transition: var(--transition-control);
}
.subnav a:hover,
.subnav a:focus-visible { background: var(--teal-50); color: var(--ink-900); }
.subnav a[aria-current="page"] { background: var(--lime-50); color: var(--ink-900); }
.subnav a:first-child {
  margin-bottom: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}

/* Mobiel: hetzelfde menu als accordeon */
.nav-mobile__group { border-bottom: 1px solid var(--border-subtle); }
.nav-mobile__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--ink-800);
  cursor: pointer;
  list-style: none;
}
.nav-mobile__group summary::-webkit-details-marker { display: none; }
.nav-mobile__group summary .ico { transition: transform var(--dur-fast) var(--ease-out); }
.nav-mobile__group[open] summary .ico { transform: rotate(180deg); }
.nav-mobile__sub { display: flex; flex-direction: column; padding: 0 0 8px 14px; }
.nav-mobile__sub a { font-size: 16px; padding: 11px 0; border-bottom: 0; color: var(--ink-600); }
.nav-mobile a[aria-current="page"] { color: var(--teal-700); font-weight: var(--fw-semibold); }

/* ---------- Kruimelpad ---------- */

/* HET KRUIMELPAD STOND SCHEEF, EN DAT WAS EEN FOUT EN GEEN SMAAK.
   De <ol> heeft de klasse .wrap, en die zet max-width plus margin-inline:auto
   — precies zoals de header en de hero. Maar de regel hieronder komt later in
   dit bestand en zette margin: 0. Gevolg: het kruimelpad hield zijn maximum
   van 1280 maar plakte links tegen het venster, terwijl alles eromheen
   gecentreerd stond. Op een scherm van 1700 breed scheelde dat ruim 200
   pixels naar links. Vandaar margin: 0 auto.

   En het stond in een eigen witte balk met een lijn eronder. Onder een witte
   header las dat als een tweede header: een strook die op de homepage niet
   bestaat en op elke andere pagina wel. Nu is het een regel boven de titel in
   plaats van een balk — geen vlak, geen lijn, kleiner en rustiger. */
.crumbs { background: transparent; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 auto;
  /* Geen ruimte onderaan: de hero eronder brengt zijn eigen bovenmarge mee. */
  padding: 30px var(--page-pad) 0;
  list-style: none;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
/* HET KRUIMELPAD HOORT BIJ DE KOP ERONDER, NIET BIJ DE HEADER ERBOVEN.
   Zo stond het: 38px onder de header en 110px boven de titel. Daarmee plakte
   het aan de navigatie en zweefde het los van de pagina die het beschrijft —
   en dat is wat er nog steeds niet lekker aan was, ook nadat de witte balk en
   de lijn eronder al weg waren.

   De verhouding is nu omgedraaid: ruimte bóven het kruimelpad, weinig eronder.
   Het leest daarmee als de eerste regel van de kop in plaats van als een
   losstaand regeltje. Alleen als er echt een kruimelpad staat, vandaar de
   aangrenzende selector; een hero zonder kruimelpad houdt zijn eigen ruimte.

   Let op de tweede regel: op een artikelpagina is .article__head geen buur van
   het kruimelpad maar een kind van <article>. Met .crumbs + .article__head
   raak je dus niets — dat was precies de fout die deze regel eerst maakte. */
.crumbs + .page-hero,
.crumbs + .article > .article__head { padding-top: clamp(18px, 2.2vw, 30px); }

.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs a { color: var(--ink-600); }
.crumbs a:hover { color: var(--ink-900); }
.crumb__sep { color: var(--ink-300); }
.crumbs [aria-current="page"] { color: var(--ink-900); font-weight: var(--fw-medium); }

/* ---------- Pagina-hero ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding: clamp(44px, 6vw, 80px) var(--page-pad) clamp(48px, 6vw, 84px);
}
.page-hero__inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
}
.page-hero h1 {
  margin: 18px 0 0;
  font-size: var(--fs-display-l);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  max-width: 20ch;
}
.page-hero .hero__tagline { margin-top: 16px; }
.page-hero .hero__lead { margin-top: 14px; }
.page-hero .hero__points { margin-top: 26px; }
.page-hero .hero__cta { margin-top: 32px; }

/* Twee kolommen: tekst links, formulier of kaart rechts */
.page-hero__inner--form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.page-hero__inner--form h1 { max-width: 16ch; }

/* Tekst links, foto rechts. Hetzelfde raster als hierboven, maar verticaal
   gecentreerd: naast een formulier hoort de tekst bovenaan te beginnen, naast
   een foto niet — dan staat de kop los boven het beeld te zweven.

   De kolom valt onder 320 px terug naar één, en dan komt de foto ónder de
   tekst. Dat is met opzet: op een telefoon leest de bezoeker eerst waar de
   pagina over gaat. */
.page-hero__inner--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.page-hero__inner--split h1 { max-width: 18ch; }
.page-hero__media {
  justify-self: center;
  width: 100%;
  max-width: 520px;
}
.page-hero__media img {
  width: 100%;
  height: clamp(260px, 32vw, 400px);
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* De juridische pagina's houden hun tekstkolom smal, maar de kolom blijft
   uitlijnen met de rest van de site — dus niet de container versmallen. */
.page-hero--legal .page-hero__inner--legal > div { max-width: var(--container-narrow); }
.page-hero--legal h1 { max-width: 22ch; }

/* ---------- Foto over de volle breedte ----------
   Staat nu op /over-ons/ boven het team. De hoogte is vast (object-fit: cover)
   omdat de strook anders bij elke schermbreedte een andere hoogte krijgt en de
   pagina eronder mee op en neer schuift. */

.photo-band { margin: 0; }
.photo-band img {
  display: block;
  width: 100%;
  height: clamp(240px, 30vw, 420px);
  object-fit: cover;
  border-radius: var(--radius-xl);
}
/* Binnen een bestaande sectie, dus met ruimte naar wat eronder komt. */
.photo-band--inline { margin-bottom: clamp(28px, 4vw, 44px); }

/* ---------- Bedrijfsvideo ----------
   aspect-ratio houdt de plek vrij voordat de poster geladen is, zodat de
   pagina niet opspringt. De donkere achtergrond is wat je ziet in het gaatje
   tussen poster en eerste frame. */

.video { margin: 0; }
.video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink-900);
  border-radius: var(--radius-xl);
}

.hero__aside {
  margin: 22px 0 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 56ch;
}
.hero__aside a { color: var(--teal-700); font-weight: var(--fw-medium); }
.hero__aside a:hover { color: var(--ink-900); }

/* ---------- Rasters ---------- */

.grid-2, .grid-3, .grid-4 {
  margin-top: 44px;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.section-heading + .grid-2,
.section-heading + .grid-3,
.section-heading + .grid-4 { margin-top: 44px; }

/* Een kaart die geen link is, gedraagt zich verder hetzelfde */
.card--static { cursor: default; }

/* ---------- Pijlers (op de donkere en de lichte sectie) ---------- */

.pillar { display: flex; flex-direction: column; gap: 12px; }
.pillar__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: rgba(130, 201, 198, .16);
  color: var(--brand-teal);
}
.pillar h2, .pillar h3 {
  margin: 0;
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--white);
}
.pillar p { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--ink-300); }

.pillar--light .pillar__plate { background: var(--teal-50); color: var(--teal-700); }
.pillar--light h2, .pillar--light h3 { color: var(--text-heading); }
.pillar--light p { color: var(--text-body); }

/* ---------- Vinklijst ---------- */

.checklist {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-snug);
  color: var(--text-body);
}
.checklist .ico { margin-top: 3px; color: var(--lime-500); }
.section--ink .checklist li { color: var(--ink-200); }
.section--ink .checklist .ico { color: var(--brand-lime); }

/* ---------- Notitieblok ---------- */

.note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 32px 0 0;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface-brand-tint);
  border: 1px solid var(--teal-100);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: var(--measure-prose);
}
.note .ico { margin-top: 2px; color: var(--teal-600); }
.note--verify { background: var(--status-warning-bg); border-color: #f0dcb4; }
.note--verify .ico { color: var(--status-warning); }

/* Zichtbare lege plek: inhoud die nog aangeleverd moet worden */
.slot--legal {
  display: block;
  max-width: var(--measure-prose);
  padding: 16px 20px;
  height: auto;
  font-size: var(--fs-body-m);
  text-align: left;
}

/* ---------- Genummerde lijst ---------- */

.numbered {
  counter-reset: stap;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
  max-width: var(--measure-prose);
}
.numbered li {
  counter-increment: stap;
  position: relative;
  padding-left: 46px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.numbered li::before {
  content: counter(stap);
  position: absolute;
  left: 0; top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--lime-50);
  border: 1px solid var(--lime-200);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--lime-700);
}

/* ---------- Stappen ---------- */

.steps {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.steps li {
  display: flex;
  gap: 18px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}
.steps__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient);
  color: var(--ink-900);
  font-weight: var(--fw-bold);
}
.steps h3 {
  margin: 0 0 6px;
  font-size: var(--fs-heading-s);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.steps p { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); }

/* ---------- Veelgestelde vragen ---------- */

.faq {
  margin-top: 44px;
  max-width: 900px;
  border-top: 1px solid var(--border-subtle);
}
.faq details { border-bottom: 1px solid var(--border-subtle); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-size: var(--fs-heading-s);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-700); }
.faq__chev { color: var(--ink-400); transition: transform var(--dur-fast) var(--ease-out); }
.faq details[open] .faq__chev { transform: rotate(180deg); }
.faq__body { padding: 0 4px 24px; max-width: var(--measure-prose); }
.faq__body p { margin: 0 0 12px; font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- Specialisten ---------- */

.spec-list { margin-top: 44px; display: grid; gap: clamp(16px, 2vw, 24px); }
.spec {
  display: flex;
  gap: 22px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.spec__plate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--teal-50);
  color: var(--teal-700);
}
.spec h3 {
  margin: 0 0 10px;
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}
.spec p { margin: 0 0 10px; font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); max-width: 70ch; }
.spec__outcome { margin-bottom: 0 !important; font-weight: var(--fw-medium); color: var(--teal-700) !important; }

/* ---------- CTA-balk binnen de pagina ---------- */

.section--slim { padding-top: clamp(40px, 4vw, 56px); padding-bottom: clamp(40px, 4vw, 56px); }
.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--page-max);
  margin: 0 auto;
}
.inline-cta p {
  margin: 0;
  font-size: var(--fs-body-l);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  max-width: 62ch;
}
.inline-cta a:not(.btn) { color: var(--teal-700); font-weight: var(--fw-medium); }

/* ---------- Pillenlijst ---------- */

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pill-list span {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
}

/* ---------- Doelgroepkaart ---------- */

.segment-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3vw, 36px);
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.segment-card:hover {
  border-color: var(--teal-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.segment-card h2 {
  margin: 0;
  font-size: var(--fs-heading-l);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}
.segment-card p { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); }
.segment-card__quote {
  padding-left: 18px;
  border-left: 3px solid var(--teal-200);
  font-size: var(--fs-body-l) !important;
  font-style: italic;
  color: var(--ink-800) !important;
}
.segment-card .card__more { margin-top: auto; padding-top: 8px; }

/* ---------- Contact ---------- */

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.contact-card:hover {
  border-color: var(--teal-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.contact-card h2 {
  margin: 4px 0 0;
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.contact-card__value {
  margin: 0 !important;
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-semibold);
  color: var(--teal-700) !important;
}
.contact-card p { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); }

.location {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}
.location h3 {
  margin: 0;
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.location address {
  font-style: normal;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* ---------- Team ---------- */

.team {
  margin-top: 44px;
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 18px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  text-align: center;
}
/* Het portret. Rond kader met een vaste verhouding, de foto vult het en wordt
   bijgesneden — dezelfde aanpak als de foto's op /kennis/, zie .media-fill.
   Groter dan de initialenplaat hieronder: een gezicht van 64px is een vlekje,
   en dat is precies wat je hier níet wilt. */
.person__foto {
  width: 96px;
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-pill);
  border: 1px solid var(--teal-100);
  background: var(--brand-gradient-soft);
}

/* De terugval voor wie nog geen portret heeft. */
.person__plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-pill);
  background: var(--brand-gradient-soft);
  border: 1px solid var(--teal-100);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  color: var(--teal-700);
}
.person__name { margin: 0; font-size: var(--fs-body-m); font-weight: var(--fw-semibold); color: var(--text-heading); }
.person__role { margin: 0; font-size: var(--fs-body-s); color: var(--text-muted); }

/* ---------- Kernwaarden ---------- */

.values { display: grid; gap: 18px; }
.value {
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}
.value p:last-child {
  margin: 10px 0 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* ---------- Bewijsblok ---------- */

.split--proof { align-items: start; }
.proof__note { margin: 28px 0 0; }
.proof__quote { display: grid; gap: 20px; }
.cases__quotes--wide {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* ---------- Archieflijst ---------- */

.archief {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
  max-width: 940px;
}
.archief li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.archief__title { font-size: var(--fs-body-m); color: var(--ink-700); }
.archief__date { font-size: var(--fs-body-s); color: var(--text-muted); white-space: nowrap; }

/* ---------- Lopende tekst ---------- */

.prose { max-width: var(--measure-prose); }

/* ---------- Tekstsectie in twee kolommen ----------

   HET PROBLEEM. Een tekstsectie was één kolom van 64 tekens breed, links in
   een vak van 1280. Die 64 tekens zijn goed — langere regels lezen slechter —
   maar er bleef rechts zo'n 580 pixels leeg, en dat las als een pagina die
   nog niet af was. Op tien pagina's, twintig secties.

   DE OPLOSSING. Kop links, tekst rechts. De regellengte blijft kort, en de
   breedte wordt echt gebruikt in plaats van verdeeld.

   WAAROM DIT ZONDER EEN AANPASSING IN DE HTML KAN. Elk van die twintig
   blokken heeft precies één h2 en één eyebrow; de blokken die dat niet hebben
   — een artikel op /kennis/ en de juridische pagina's — dragen allemaal al
   een eigen modifier. Vandaar :not(): die twee soorten blijven één kolom, en
   dat hoort ook, want daar volgen tien koppen na elkaar.

   De rijen van de kop staan vast op 1 en 2. Dat mag omdat er altijd een
   eyebrow is; zou die ontbreken, dan bleef rij 1 leeg en zweefde de kop.
   Verdwijnt de eyebrow ooit ergens, laat dan ook deze regel meelopen. */
@media (min-width: 1000px) {
  .prose:not(.prose--article):not(.prose--legal) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
  .prose:not(.prose--article):not(.prose--legal) > .eyebrow { grid-column: 1; grid-row: 1; }
  .prose:not(.prose--article):not(.prose--legal) > h2 { grid-column: 1; grid-row: 2; }
  .prose:not(.prose--article):not(.prose--legal) > *:not(.eyebrow):not(h2) { grid-column: 2; }
}
.prose > h2 {
  margin: 0 0 18px;
  font-size: var(--fs-display-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}
.prose .eyebrow + h2 { margin-top: 14px; }
.prose > h3 {
  margin: 38px 0 12px;
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}
.prose > p {
  margin: 0 0 18px;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.prose > p:last-child { margin-bottom: 0; }

/* Een bronvermelding onder een cijfer. Klein en rustig: hij moet te vinden
   zijn, niet om aandacht vragen. De dubbele selector is nodig omdat
   .prose > p (0,1,1) anders wint van .bron alleen. */
.prose .bron,
.bron {
  margin: 20px 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.prose a { color: var(--teal-700); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink-900); }
.prose a.btn, .prose a.link-arrow { text-decoration: none; }
.prose .checklist + h3, .prose .numbered + h3, .prose .note + h2 { margin-top: 38px; }
.prose strong { font-weight: var(--fw-semibold); color: var(--ink-900); }
.prose--legal { max-width: 74ch; }
.prose--legal > h2 { margin-top: 46px; font-size: var(--fs-heading-l); }
.prose--legal > h2:first-of-type { margin-top: 0; }

/* ---------- Artikel ---------- */

.article__head {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding: clamp(44px, 6vw, 76px) var(--page-pad) clamp(32px, 4vw, 48px);
}
.article__head-inner { position: relative; max-width: var(--page-max); margin: 0 auto; }
.article__head h1 {
  margin: 18px 0 0;
  font-size: var(--fs-display-l);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  max-width: 22ch;
}
.article__head .hero__lead { margin-top: 16px; }
.article__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 0;
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}
.article__meta .ico { color: var(--ink-400); }

/* De foto tussen de kop en de tekst. Even breed als de tekst eronder, zodat
   het artikel één kolom blijft en niet halverwege uit zijn kader loopt. */
.article__foto {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.article__foto img {
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.article__body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) var(--page-pad) clamp(64px, 8vw, 104px);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .article__body { grid-template-columns: minmax(0, 1fr) 320px; }
  .article__aside { position: sticky; top: 104px; }
}
.prose--article > h2 { margin-top: 46px; font-size: var(--fs-heading-l); }
.prose--article > h2:first-child { margin-top: 0; }

.article__aside { display: grid; gap: 20px; }
.aside-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 26px;
  border-radius: var(--radius-xl);
  background: var(--surface-brand-tint);
  border: 1px solid var(--teal-100);
}
.aside-card p { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body); color: var(--text-body); }
.aside-card .btn { width: 100%; }
.aside-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}
.aside-card--quiet { background: var(--surface-subtle); border-color: var(--border-subtle); }
.aside-card--quiet .link-arrow { color: var(--teal-700); font-size: var(--fs-body-m); text-align: left; }

/* ---------- Formulieren op subpagina's ---------- */

.form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.check__card .field + .field,
.check__card .form-grid + .field { margin-top: 16px; }
.download__label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.download__title {
  margin: 0 0 20px;
  font-size: var(--fs-heading-l);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}
.check__card .form-status { margin-top: 16px; }

.price-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--lime-50);
  border: 1px solid var(--lime-200);
  font-size: var(--fs-body-l);
  color: var(--ink-800);
}
.price-tag .ico { color: var(--lime-600); }
.price-tag strong { font-size: var(--fs-heading-m); font-weight: var(--fw-semibold); color: var(--ink-900); }

/* ---------- Footer: extra kolom en LinkedIn ---------- */

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-body-m);
  color: var(--ink-300);
}
.footer-social:hover { color: var(--white); }
.footer-col p + p { margin-top: 12px; }

@media (min-width: 1100px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
}

/* ---------- Kleine schermen ---------- */

@media (max-width: 760px) {
  .page-hero h1, .article__head h1 { max-width: 100%; }
  .spec { flex-direction: column; gap: 16px; }
  .inline-cta .btn { width: 100%; justify-content: center; }
}

/* Een afbeelding in een artikel. De redacteur zet hem via /admin/ in de tekst;
   markdown.mjs maakt er dit van. */
.prose__img {
  width: 100%;
  height: auto;
  margin: 8px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

/* ---------- Honeypot ----------
   Het veld hp_bedrijf in elk formulier. Bewust GEEN display:none: dat slaan
   veel bots juist over, en dan werkt de val niet. Buiten beeld dus, zonder
   tabstop (tabindex="-1") en zonder plek in de a11y-boom (aria-hidden op de
   omhulling) — een mens komt er nooit bij. Zie api/formulier.php. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   21. Toegankelijkheid en print
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .timeline__fill { transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .site-header, .hero__glow, .nav-mobile, .check__card, .cta__panel { display: none !important; }
  body { background: #fff; color: #000; }
  .section--ink, .cta, .site-footer { background: #fff !important; color: #000 !important; }
  .section--ink h2, .cta h2, .timeline__title { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a { color: #000 !important; }
}