/* ============================================================
   obedwebdesign.be — kleursysteem overgenomen van een geëxtraheerd
   design-token-systeem (dylanbrouwer.design), lay-out/spacing/radius
   idem, FONTS BEWUST BEHOUDEN (Hanken/Inter/Plex Mono/Instrument —
   ABC Gravity + Die Grotesk B zijn betaalde fonts, niet gebruikt).
   Licht canvas (paper/fog/wit) met twee donkere "onyx"-bookends
   (hero + cta + footer). Ember-orange = de ENIGE accentkleur.
   Nul libraries; alles zelf gehost.
   ============================================================ */

/* ---- Fonts (zelf gehost) ---- */
@font-face {
  font-family: "Hanken";
  src: url("assets/fonts/hanken-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("assets/fonts/plexmono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("assets/fonts/instrument-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("assets/fonts/instrument-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Kleurpalet (token-systeem) ---- */
:root {
  --onyx: #161616;
  --graphite: #3c3a3e;
  --stone: #7b7a7c;
  --ash: #a2a2a2;
  --silver-mist: #c9c7cc;
  /* Donkere grijzen voor lichte secties. Stone (3.8:1) en ash (2.4:1) haalden
     op papier/fog de WCAG-norm van 4.5:1 niet; op onyx blijven ze wel staan. */
  --slate: #5c5b5f;
  --pewter: #6d6c70;
  /* Warme in plaats van neutrale grijzen: leest rustiger en minder klinisch
     dan hard wit. Helderheid blijft gelijk, dus contrast blijft binnen norm. */
  --fog: #f2f1eb;
  --paper: #f7f6f2;
  --pure-white: #fdfdfb;
  --ember: #ff6436;

  /* contextuele vars: default = licht (canvas). .onyx-secties draaien dit om. */
  --bg: var(--paper);
  --card: var(--pure-white);
  --fg: var(--graphite);
  --fg-dim: var(--slate);
  --fg-mute: var(--pewter);
  /* Ember als tékst haalt op licht maar 2.8:1. Vullingen, randen en de
     merkpunt blijven wel het felle --ember gebruiken. */
  --ember-ink: #c2410c;
  --line: rgba(60, 58, 62, 0.16);

  /* spacing-schaal (6px-eenheid) */
  --s6: 0.375rem; --s12: 0.75rem; --s18: 1.125rem; --s24: 1.5rem;
  --s48: 3rem; --s60: 3.75rem; --s72: 4.5rem; --s96: 6rem; --s120: 7.5rem;

  --r-xl: 14.4px;
  --r-full: 9999px;
  --marge: clamp(1.25rem, 6vw, 6rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Donkere bookend-secties: hero, cta, footer */
.onyx {
  --bg: var(--onyx);
  --card: #1f1f1f;
  --fg: #ffffff;
  --fg-dim: var(--silver-mist);
  --fg-mute: var(--ash);
  --ember-ink: var(--ember);
  --line: rgba(255, 255, 255, 0.14);
  background: var(--bg);
  color: var(--fg);
  position: relative;
  isolation: isolate;
}

/* Filmkorrel over de donkere secties: geeft diepte aan grote egale vlakken.
   Inline SVG-ruis, dus geen extra bestand en geen netwerkverzoek. */
.onyx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Ruwe feTurbulence is veel sterker dan een kant-en-klare korrel-PNG.
     Boven ~0.08 wordt het televisieruis in plaats van textuur. */
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.06rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }

/* display — monument-scale, met gradient-fill (token: "display-fade-gradient") */
.display {
  font-family: "Hanken", "Arial Black", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.015em;
  background: linear-gradient(92deg, #ffffff 0%, var(--silver-mist) 58%, var(--ash) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* mono-labels (eyebrows) */
.label {
  font-family: "Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 var(--s24);
  display: flex; align-items: center; gap: var(--s12);
}
.label::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--ember); flex: none;
}

/* Sectienummering als een tijdschrift-kopregel: rechts uitgelijnd in het
   bestaande label, dus geen extra element in de HTML. */
main { counter-reset: sectie; }
.label { counter-increment: sectie; }
.label::after {
  content: counter(sectie, decimal-leading-zero);
  margin-left: auto;
  flex: none;
  color: var(--fg-mute);
  letter-spacing: 0.14em;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--ember); color: var(--onyx); padding: var(--s12) var(--s24); font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---- Vaste header ---- */
.kop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s24) var(--marge);
  background: rgba(22, 22, 22, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.brand {
  font-family: "Hanken", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: 0.06em; text-decoration: none; color: #ffffff;
}
.brand__dot { color: var(--ember); }
.kop__nav { display: flex; gap: var(--s24); align-items: center; }
.kop__nav a {
  font-family: "Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; text-decoration: none; color: var(--silver-mist);
  transition: color 0.2s;
}
.kop__nav a:hover { color: var(--ember); }

/* ---- Hero (onyx) ---- */
.hero { position: relative; padding: clamp(9rem, 22vh, 14rem) var(--marge) var(--s96); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(to bottom, transparent, var(--onyx));
  pointer-events: none;
}
.hero h1 { font-size: clamp(2.55rem, 8.6vw, 7.8rem); max-width: 14ch; }
.hero__lede {
  max-width: 44ch; color: var(--silver-mist);
  font-family: "Instrument", Georgia, serif;
  font-size: clamp(1.25rem, 1.15rem + 0.55vw, 1.55rem);
  line-height: 1.5;
  margin: var(--s24) 0 0;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s48); }

/* ---- Hero-beeld: de secties van een pagina, opgetild ---- */
/* Tekst blijft boven het beeld; .hero::after dekt de onderkant al af. */
.hero > *:not(.hero__art) { position: relative; z-index: 1; }
.hero__art {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -5vw;
  /* 32vw houdt het beeld rechts van de kop (max-width 14ch) op elke breedte
     boven 900px, en houdt het oppervlak kleiner dan de h1 — die blijft LCP. */
  width: clamp(19rem, 32vw, 40rem);
  transform: translateY(-50%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero__art img,
.hero__art video {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  /* Links uitvloeien zodat het beeld de kop nooit beconcurreert. */
  -webkit-mask-image: radial-gradient(118% 96% at 76% 50%, #000 44%, transparent 80%);
  mask-image: radial-gradient(118% 96% at 76% 50%, #000 44%, transparent 80%);
  animation: hero-art-drift 15s var(--ease) infinite alternate;
}
@keyframes hero-art-drift {
  from { transform: translate3d(0, -0.55rem, 0); }
  to { transform: translate3d(0, 0.55rem, 0); }
}

.knop {
  display: inline-block; text-decoration: none;
  font-family: "Plex Mono", monospace; font-size: 0.78rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: var(--s18) var(--s24);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--fg);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.35s var(--ease);
}
.knop:hover { border-color: var(--ember); color: var(--ember-ink); transform: translateY(-2px); }
.knop--vol { background: var(--ember); color: var(--onyx); border-color: var(--ember); font-weight: 600; }
.knop--vol:hover { background: #ff7d55; color: var(--onyx); border-color: #ff7d55; }

/* ---- Bewijs-strip ---- */
.bewijs {
  position: relative; z-index: 1;
  margin: 0; padding: var(--s24) var(--marge);
  background: var(--onyx);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: "Plex Mono", monospace;
  display: flex; flex-wrap: wrap; gap: var(--s12) var(--s48);
  font-size: 0.78rem; color: var(--silver-mist);
}
.bewijs strong { color: #ffffff; font-weight: 400; }
.bewijs__kop {
  flex-basis: 100%; font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ash); display: flex; align-items: center; gap: var(--s12);
}
.bewijs__kop::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--ember); flex: none;
  animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- Secties (licht canvas) ---- */
.sectie { padding: var(--s120) var(--marge) 0; }
.sectie--compact { padding-top: var(--s72); }
.sectie--wash { background: var(--fog); margin-top: var(--s120); padding-top: var(--s120); padding-bottom: 1px; }

/* ---- Werk-intro (overgang: geen klikbare demo's, concept-demo's in aanbouw) ---- */
.werk-intro { max-width: 760px; }
.werk-intro p {
  font-family: "Instrument", Georgia, serif;
  font-size: clamp(1.3rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.5;
  color: var(--fg-dim); margin: 0 0 1.2rem;
}
.werk-intro strong { color: var(--fg); font-family: "Instrument", serif; font-style: italic; font-weight: 400; }

/* ---- Case-rijen: paneel met kaart-oppervlak ---- */
.rijen {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 0 var(--s24); overflow: hidden;
}
.rij {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto auto;
  gap: var(--s24); align-items: center;
  padding: var(--s24) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  margin: 0 calc(var(--s24) * -1); padding-left: var(--s24); padding-right: var(--s24);
  border-radius: var(--r-xl);
  transition: background 0.25s, transform 0.3s var(--ease);
}
.rij:last-child { border-bottom: none; }
.rij:hover { background: var(--fog); }
.rij--soon { opacity: 0.5; pointer-events: none; }
.rij--soon .rij__naam { color: var(--fg-dim); }
.rij__nr { font-family: "Plex Mono", monospace; font-size: 0.75rem; color: var(--fg-mute); }
.rij__naam {
  font-family: "Hanken", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.35rem, 3.6vw, 2.6rem); line-height: 1; color: var(--fg);
  transition: color 0.2s;
}
.rij__meta {
  text-align: right;
  font-family: "Plex Mono", monospace; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim);
  line-height: 1.7;
}
.ster {
  display: inline-block; letter-spacing: 0.08em; font-family: "Inter", sans-serif;
  background: linear-gradient(90deg, var(--ember) var(--pct, 100%), var(--line) var(--pct, 100%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rij__pijl {
  font-size: 1.5rem; color: var(--fg-mute);
  transition: transform 0.3s var(--ease), color 0.2s;
}
.rij:hover .rij__pijl { transform: translateX(6px); color: var(--ember-ink); }
.rijen__noot {
  color: var(--fg-dim); margin-top: var(--s24); max-width: 52ch;
  font-family: "Instrument", Georgia, serif; font-style: italic;
  font-size: 1.2rem; line-height: 1.55;
}

/* ---- Case highlight ---- */
.case {
  margin-top: var(--s48);
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--s48);
  padding: var(--s48) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case__label {
  font-family: "Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.case__body h3 {
  font-family: "Hanken", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.8vw, 4.2rem);
  line-height: 0.95;
  color: var(--fg);
  max-width: 13ch;
}
.case__body > p {
  margin-top: var(--s18);
  max-width: 58ch;
  color: var(--fg-dim);
  font-family: "Instrument", Georgia, serif;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.55;
}
.case__punten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
  margin: var(--s48) 0 0;
}
.case__punten div {
  border-top: 1px solid var(--line);
  padding-top: var(--s12);
}
.case__punten dt {
  font-family: "Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.case__punten dd {
  margin: var(--s6) 0 0;
  color: var(--fg-dim);
  line-height: 1.5;
}
.case__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12);
  margin-top: var(--s48);
}
.knop--donker {
  background: var(--onyx);
  border-color: var(--onyx);
  color: #ffffff;
}
.knop--donker:hover {
  background: var(--graphite);
  border-color: var(--graphite);
  color: #ffffff;
}
.knop--tekst {
  border-color: transparent;
  color: var(--fg-dim);
  padding-left: 0;
  padding-right: 0;
}

/* ---- Demo-hulp ---- */
.demo-help {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s48) 0;
}
.demo-help__intro {
  max-width: 64ch;
  color: var(--fg-dim);
  font-family: "Instrument", Georgia, serif;
  font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.55rem);
  line-height: 1.55;
}
.demo-help__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s24);
  margin-top: var(--s48);
}
.demo-help__grid div {
  border-top: 1px solid var(--line);
  padding-top: var(--s18);
}
.demo-help__grid h3 {
  font-family: "Hanken", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.08;
  color: var(--fg);
}
.demo-help__grid p {
  margin-top: var(--s12);
  color: var(--fg-dim);
  line-height: 1.55;
}
.demo-help__cta {
  margin-top: var(--s48);
}

/* ---- Lokale regio ---- */
.regio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
  gap: var(--s48);
  align-items: start;
  padding: var(--s24) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.regio-grid__intro {
  max-width: 58ch;
  color: var(--fg-dim);
  font-family: "Instrument", Georgia, serif;
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  line-height: 1.55;
}
.regio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
}
.regio-tags span {
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: var(--s6) var(--s12);
  font-family: "Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--pure-white);
}

/* ---- Aanpak (genummerde stappen als rijen, op fog-wash) ---- */
.stap {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--s24);
  padding: var(--s24) 0; border-bottom: 1px solid var(--line);
}
.stappen { border-top: 1px solid var(--line); }
.stap:last-child { border-bottom: none; }
.stap__nr { font-family: "Plex Mono", monospace; font-size: 0.75rem; color: var(--fg-mute); padding-top: 0.4rem; }
.stap h3 {
  font-family: "Hanken", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 1.25rem; color: var(--fg); margin-bottom: var(--s12);
}
.stap p {
  color: var(--fg-dim); margin: 0; max-width: 52ch;
  font-family: "Instrument", Georgia, serif;
  font-size: 1.2rem; line-height: 1.5;
}
.stappen__noot {
  color: var(--fg-dim); margin-top: var(--s24); padding-bottom: var(--s24);
  font-family: "Instrument", Georgia, serif; font-style: italic; font-size: 1.2rem;
}

/* ---- Diensten (rijen met titel/lijst) ---- */
.aanbod-kop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s24); align-items: end;
  margin-bottom: var(--s24);
}
.aanbod-kop p {
  max-width: 58ch; margin: 0; color: var(--fg-dim);
  font-family: "Instrument", Georgia, serif; font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.62rem); line-height: 1.48;
}
.keuzehulp {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); background: var(--card); margin-bottom: var(--s48);
}
.keuzehulp div { padding: var(--s24); border-right: 1px solid var(--line); }
.keuzehulp div:last-child { border-right: none; }
.keuzehulp strong {
  display: block; font-family: "Plex Mono", monospace; font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg);
  margin-bottom: var(--s12);
}
.keuzehulp span { color: var(--fg-dim); font-size: 0.95rem; line-height: 1.55; }
.prijs {
  display: grid; grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr) minmax(14rem, 0.48fr);
  gap: var(--s24); padding: var(--s24) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.prijzen { border-top: 1px solid var(--line); }
.prijs:last-child { border-bottom: none; }
.prijs--uitgelicht { background: linear-gradient(90deg, rgba(255, 100, 54, 0.08), transparent 42%); }
.prijs h3 {
  font-family: "Hanken", sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 1.3rem; color: var(--fg); margin-bottom: var(--s12);
}
.prijs__label {
  display: inline-block; font-family: "Plex Mono", monospace; font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-ink);
}
.prijs ul { margin: 0; padding: 0; list-style: none; color: var(--fg-dim); font-size: 0.95rem; }
.prijs li { margin-bottom: var(--s6); }
.prijs li::before { content: "- "; color: var(--ember); }
.prijs__noot {
  color: var(--fg-mute); margin: 0;
  font-family: "Instrument", Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.5;
}

/* Dienstenpagina: prijs en doelgroep boven de opsomming. */
.prijs__prijs {
  margin: var(--s12) 0 0;
  font-family: "Plex Mono", monospace;
  font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--fg-dim);
}
.prijs__prijs strong {
  display: block;
  font-family: "Hanken", sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  letter-spacing: 0; line-height: 1.1;
  color: var(--fg);
}
.prijs__voor {
  margin: var(--s12) 0 0;
  color: var(--fg-dim); font-size: 0.98rem; line-height: 1.55;
}
.prijs-slot {
  margin-top: var(--s48); padding: var(--s24); border: 1px solid var(--line);
  background: var(--fg); color: var(--pure-white);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s24); align-items: center;
}
.prijs-slot p { margin: 0; color: var(--silver-mist); max-width: 58ch; }
.prijs-slot strong { color: var(--pure-white); }

/* ---- FAQ ---- */
.faq {
  border-top: 1px solid var(--line);
}
.faq__item {
  display: grid;
  grid-template-columns: minmax(13rem, 0.55fr) minmax(0, 1fr);
  gap: var(--s24);
  padding: var(--s24) 0;
  border-bottom: 1px solid var(--line);
}
.faq__item h3 {
  font-family: "Hanken", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.15rem;
  line-height: 1.05;
  color: var(--fg);
}
.faq__item p {
  color: var(--fg-dim);
  font-family: "Instrument", Georgia, serif;
  font-size: 1.16rem;
  line-height: 1.55;
  max-width: 58ch;
}

/* ---- Contactflow ---- */
.contactflow {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s48) 0;
}
.contactflow__intro {
  max-width: 54ch;
  color: var(--fg-dim);
  font-family: "Instrument", Georgia, serif;
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  line-height: 1.55;
}
.contactflow__list {
  list-style: none;
  margin: var(--s48) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.contactflow__list li {
  padding: var(--s18) 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
}
.contactflow__list strong {
  color: var(--fg);
  font-family: "Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contactflow__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s18);
  margin-top: var(--s48);
}
.contactflow__cta span {
  color: var(--fg-mute);
  font-family: "Instrument", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
}

/* ---- CTA-band (onyx) ---- */
.cta {
  margin-top: var(--s120);
  padding: var(--s96) var(--marge);
  text-align: center;
}
.cta h2 { font-size: clamp(2rem, 6.5vw, 4.6rem); max-width: 16ch; margin: 0 auto var(--s24); }
.cta__alt { margin-top: var(--s24); font-family: "Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver-mist); }
.cta__alt a { color: #ffffff; text-decoration: none; border-bottom: 1px solid var(--line); }
.cta__alt a:hover { color: var(--ember); border-color: var(--ember); }
.cta__noot {
  color: var(--ash); margin-top: var(--s24);
  font-family: "Instrument", Georgia, serif; font-style: italic; font-size: 1.1rem;
}

/* ---- Over ---- */
.over { padding: var(--s72) var(--marge) 0; max-width: 940px; }
.over p {
  color: var(--fg-dim);
  font-family: "Instrument", Georgia, serif;
  font-size: 1.25rem; line-height: 1.55;
}
.over strong { color: var(--fg); font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.95em; }

/* ---- Footer (onyx) ---- */
.voet {
  margin-top: var(--s72);
  padding: var(--s24) var(--marge) var(--s24);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s18);
  font-family: "Plex Mono", monospace; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash);
}
/* Sluit de pagina eindigt op een donkere sectie (homepage: de CTA), laat de
   footer er dan tegenaan sluiten — anders staat er een lichte strook papier
   tussen twee onyx-blokken. Blogpagina's eindigen licht en houden hun marge. */
main:has(> section.onyx:last-child) + .voet { margin-top: 0; }
.voet a { color: var(--silver-mist); text-decoration: none; }
.voet a:hover { color: var(--ember); }
.voet__links { display: flex; gap: var(--s24); flex-wrap: wrap; }

/* ---- Reveal ---- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Onder 900px vult de kop de volle breedte — dan zou het beeld de tekst hinderen. */
@media (max-width: 900px) {
  .hero__art { display: none; }
}

/* ---- Mobiel ---- */
@media (max-width: 720px) {
  .kop__nav a:not(.kop__contact) { display: none; }
  .rijen { padding: 0 var(--s18); }
  .rij { grid-template-columns: 2.2rem 1fr auto; margin: 0 calc(var(--s18) * -1); padding-left: var(--s18); padding-right: var(--s18); }
  .rij__meta { display: none; }
  .case, .case__punten { grid-template-columns: 1fr; gap: var(--s18); }
  .demo-help__grid { grid-template-columns: 1fr; gap: var(--s18); }
  .regio-grid, .faq__item, .aanbod-kop, .prijs, .prijs-slot { grid-template-columns: 1fr; gap: var(--s12); }
  .keuzehulp { grid-template-columns: 1fr; }
  .keuzehulp div { border-right: none; border-bottom: 1px solid var(--line); }
  .keuzehulp div:last-child { border-bottom: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .knop, .rij, .rij__pijl { transition: none; }
  .bewijs__kop::before { animation: none; }
  .hero__art img, .hero__art video { animation: none; }
}