/* ══════════════════════════════════════════════════════════════
   WFS — Witlam Firesafety Support
   Shared Styles v3 — art direction "Werkveld"

   Uitgangspunten:
   - Eén letterfamilie (IBM Plex Sans/Mono). Geen schreefletter.
   - Antraciet is een vlak, geen darkmode.
   - Rood is signaal: actieve navigatie, één CTA per pagina, de marker.
   - Geen ronding, geen verloop, geen glow. Vlakken en haarlijnen.
   - Beeld draagt de pagina; tot de foto's er zijn vult een
     technische tekening hetzelfde slot (.beeld).
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Signaal */
  --red: #E01414;
  --red-dark: #B50F0F;
  --red-light: #FBF0F0;

  /* Antraciet als vlak */
  --charcoal-dark: #16191E;
  --charcoal-mid: #1F242A;
  --charcoal: #2B3138;

  /* Neutralen — licht koel afgestemd, niet grijs uit de doos */
  --ink: #16191E;
  --muted: #646B73;
  --muted-soft: #8B929A;
  --border: #E3E5E8;
  --border-soft: #EFF0F2;
  --light-grey: #F2F3F4;
  --bg: #FAFAFB;
  --white: #ffffff;
  --cream: #FAFAFB;

  /* Type */
  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* Ritme */
  --hairline: 1px solid var(--border);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--red); color: #fff; }

/* ── TYPOGRAFIE ─────────────────────────────────────────────
   Eén familie, drie gewichten. Schaal doet het werk dat
   elders decoratie doet.                                     */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); margin-bottom: 1rem; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.015em; }
h4 { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }

p { color: var(--muted); line-height: 1.72; }

.lead {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 62ch;
  line-height: 1.72;
}

/* Rode marker — het enige decoratieve element in het systeem */
.merk {
  display: block;
  width: 26px;
  height: 4px;
  background: var(--red);
  margin-bottom: 1.25rem;
}

/* Eyebrow is nu een rustig technisch label, geen rood streepje */
.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: .9rem;
  display: block;
}

/* Metadata-regel: jaar / plaats / discipline */
.meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

/* ── LAYOUT ── */
.container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.container-smal { max-width: 900px; }

section { padding: 6.5rem 0; }
.section-bg { background: var(--light-grey); }
.section-cream { background: var(--bg); }
.section-lijn { border-top: var(--hairline); }

/* Diagonale clip hoort niet bij deze richting: uitgeschakeld,
   klassen blijven bestaan zodat bestaande pagina's niet breken. */
.clip-bottom, .clip-top {
  clip-path: none;
  padding-bottom: 6.5rem;
  padding-top: 6.5rem;
  margin-top: 0;
}

/* ── KNOPPEN ─────────────────────────────────────────────────
   Recht, vlak, geen schaduw. Eén rode per pagina.            */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.9rem;
  border-radius: 0;
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }

.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--light-grey); }

.btn-ghost { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); }

.btn-sm { padding: .6rem 1.15rem; font-size: .78rem; }

/* Tekstlink met onderstreping in rood — de secundaire actie */
.link-red {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid var(--red);
  padding-bottom: 3px;
  transition: color .15s;
}
.link-red:hover { color: var(--red); }
.link-red:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ── NAVIGATIE ───────────────────────────────────────────────
   Antraciet vlak. Logo links, navigatie rechts, geen knop.   */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  height: 78px;
  background: var(--charcoal-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}
nav.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.09); }

.nav-brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand img { height: 46px !important; width: auto; }
.nav-brand-name { display: flex; flex-direction: column; line-height: 1.2; }
.nav-brand-name strong {
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.018em;
}
.nav-brand-name span {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 400;
  color: rgba(255,255,255,.4);
  letter-spacing: .11em;
  text-transform: uppercase;
}
@media(max-width:900px){ .nav-brand-name { display: none; } }

.nav-links { display: flex; list-style: none; gap: 2rem; }
.nav-links a {
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255,255,255,.62);
  transition: color .15s;
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* De losse nav-knop verdwijnt uit de balk: contact staat in de rij */
.nav-cta {
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
  transition: color .15s;
}
.nav-cta:hover { color: var(--red); }

/* ── BEELDSLOT ───────────────────────────────────────────────
   Het hart van deze richting. Zolang er geen foto in zit,
   toont het slot een technische tekening. Zodra er een
   <img> in staat, dekt die de tekening volledig af.
   Toevoegen van een foto vergt dus geen CSS-wijziging.        */
.beeld {
  position: relative;
  overflow: hidden;
  background: var(--charcoal-dark);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.beeld > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Twee lagen: onderaan donker zodat tekst leest, en van links naar
   rechts oplopend zodat de tekening rechts zichtbaar blijft en niet
   achter de kop doorloopt. */
.beeld-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10,12,15,.94) 0%,
      rgba(10,12,15,.88) 34%,
      rgba(10,12,15,.55) 62%,
      rgba(10,12,15,.42) 100%),
    linear-gradient(0deg,
      rgba(10,12,15,.80) 0%,
      rgba(10,12,15,.42) 45%,
      rgba(10,12,15,.28) 75%,
      rgba(10,12,15,.45) 100%);
}
.beeld-inhoud { position: relative; z-index: 2; }

/* Tekeningen per scène. Vervangen door een foto = <img> erin zetten. */
.beeld[data-scene="centrale"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1200' height='560' fill='%231E232A'/%3E%3Cg stroke='%23272D35' stroke-width='1.5'%3E%3Cpath d='M0 90h1200M0 200h1200M0 310h1200M0 420h1200M0 530h1200'/%3E%3C/g%3E%3Crect x='0' y='28' width='1200' height='22' fill='%23262C34'/%3E%3Cg stroke='%231A1F25' stroke-width='2'%3E%3Cpath d='M80 28v22M220 28v22M360 28v22M500 28v22M640 28v22M780 28v22M920 28v22M1060 28v22'/%3E%3C/g%3E%3Crect x='360' y='110' width='480' height='360' fill='%232A3038' stroke='%233A424C' stroke-width='3'/%3E%3Crect x='392' y='146' width='416' height='132' fill='%2312161B' stroke='%233A424C' stroke-width='2'/%3E%3Crect x='412' y='170' width='240' height='11' fill='%233E4750'/%3E%3Crect x='412' y='196' width='172' height='11' fill='%233E4750'/%3E%3Crect x='412' y='222' width='300' height='11' fill='%232F373F'/%3E%3Crect x='412' y='248' width='128' height='11' fill='%232F373F'/%3E%3Ccircle cx='756' cy='176' r='10' fill='%23E01414'/%3E%3Ccircle cx='756' cy='212' r='10' fill='%233E4750'/%3E%3Ccircle cx='756' cy='248' r='10' fill='%233E4750'/%3E%3Cg fill='%23333A43'%3E%3Crect x='400' y='308' width='68' height='40'/%3E%3Crect x='484' y='308' width='68' height='40'/%3E%3Crect x='568' y='308' width='68' height='40'/%3E%3Crect x='652' y='308' width='68' height='40'/%3E%3Crect x='400' y='364' width='68' height='40'/%3E%3Crect x='484' y='364' width='68' height='40'/%3E%3Crect x='568' y='364' width='68' height='40'/%3E%3Crect x='652' y='364' width='68' height='40'/%3E%3C/g%3E%3Crect x='736' y='364' width='72' height='40' fill='%235A222A'/%3E%3Cg stroke='%23272D35' stroke-width='2' fill='none'%3E%3Ccircle cx='168' cy='150' r='26'/%3E%3Ccircle cx='168' cy='150' r='9'/%3E%3Ccircle cx='1032' cy='150' r='26'/%3E%3Ccircle cx='1032' cy='150' r='9'/%3E%3C/g%3E%3C/svg%3E");
}
.beeld[data-scene="gebouw"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1200' height='560' fill='%23232830'/%3E%3Crect y='430' width='1200' height='130' fill='%231C2027'/%3E%3Cg fill='%232E343D'%3E%3Crect x='60' y='170' width='230' height='260'/%3E%3Crect x='330' y='90' width='300' height='340'/%3E%3Crect x='670' y='210' width='190' height='220'/%3E%3Crect x='900' y='140' width='240' height='290'/%3E%3C/g%3E%3Cg fill='%233C434E'%3E%3Crect x='92' y='202' width='38' height='46'/%3E%3Crect x='150' y='202' width='38' height='46'/%3E%3Crect x='208' y='202' width='38' height='46'/%3E%3Crect x='92' y='276' width='38' height='46'/%3E%3Crect x='150' y='276' width='38' height='46'/%3E%3Crect x='208' y='276' width='38' height='46'/%3E%3Crect x='92' y='350' width='38' height='46'/%3E%3Crect x='150' y='350' width='38' height='46'/%3E%3Crect x='362' y='124' width='44' height='52'/%3E%3Crect x='430' y='124' width='44' height='52'/%3E%3Crect x='498' y='124' width='44' height='52'/%3E%3Crect x='566' y='124' width='44' height='52'/%3E%3Crect x='362' y='206' width='44' height='52'/%3E%3Crect x='430' y='206' width='44' height='52'/%3E%3Crect x='498' y='206' width='44' height='52'/%3E%3Crect x='362' y='288' width='44' height='52'/%3E%3Crect x='430' y='288' width='44' height='52'/%3E%3Crect x='566' y='288' width='44' height='52'/%3E%3Crect x='700' y='242' width='36' height='44'/%3E%3Crect x='756' y='242' width='36' height='44'/%3E%3Crect x='812' y='242' width='36' height='44'/%3E%3Crect x='700' y='312' width='36' height='44'/%3E%3Crect x='756' y='312' width='36' height='44'/%3E%3Crect x='932' y='174' width='42' height='50'/%3E%3Crect x='996' y='174' width='42' height='50'/%3E%3Crect x='1060' y='174' width='42' height='50'/%3E%3Crect x='932' y='252' width='42' height='50'/%3E%3Crect x='996' y='252' width='42' height='50'/%3E%3Crect x='1060' y='252' width='42' height='50'/%3E%3Crect x='932' y='330' width='42' height='50'/%3E%3Crect x='1060' y='330' width='42' height='50'/%3E%3C/g%3E%3C/svg%3E");
}
.beeld[data-scene="plafond"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1200' height='560' fill='%2321262D'/%3E%3Cg stroke='%232A3038' stroke-width='2'%3E%3Cpath d='M0 70h1200M0 210h1200M0 350h1200M0 490h1200M150 0v560M400 0v560M650 0v560M900 0v560M1150 0v560'/%3E%3C/g%3E%3Cg fill='%23272D35'%3E%3Crect x='158' y='78' width='234' height='124'/%3E%3Crect x='658' y='218' width='234' height='124'/%3E%3Crect x='408' y='358' width='234' height='124'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='400' cy='210' r='22' fill='%232E353E'/%3E%3Ccircle cx='400' cy='210' r='11' fill='%23191D23'/%3E%3Ccircle cx='400' cy='210' r='4' fill='%23E01414'/%3E%3Ccircle cx='400' cy='210' r='54' fill='none' stroke='%23E01414' stroke-opacity='.28' stroke-width='2' stroke-dasharray='7 9'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='900' cy='350' r='22' fill='%232E353E'/%3E%3Ccircle cx='900' cy='350' r='11' fill='%23191D23'/%3E%3Ccircle cx='900' cy='350' r='4' fill='%236E767F'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='650' cy='70' r='22' fill='%232E353E'/%3E%3Ccircle cx='650' cy='70' r='11' fill='%23191D23'/%3E%3Ccircle cx='650' cy='70' r='4' fill='%236E767F'/%3E%3C/g%3E%3Crect x='0' y='0' width='1200' height='16' fill='%231B1F25'/%3E%3C/svg%3E");
}
.beeld[data-scene="tekening"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1200' height='560' fill='%2316191E'/%3E%3Cg stroke='rgba(255,255,255,0.05)' stroke-width='1'%3E%3Cpath d='M0 40h1200M0 80h1200M0 120h1200M0 160h1200M0 200h1200M0 240h1200M0 280h1200M0 320h1200M0 360h1200M0 400h1200M0 440h1200M0 480h1200M0 520h1200'/%3E%3Cpath d='M40 0v560M80 0v560M120 0v560M160 0v560M200 0v560M240 0v560M280 0v560M320 0v560M360 0v560M400 0v560M440 0v560M480 0v560M520 0v560M560 0v560M600 0v560M640 0v560M680 0v560M720 0v560M760 0v560M800 0v560M840 0v560M880 0v560M920 0v560M960 0v560M1000 0v560M1040 0v560M1080 0v560M1120 0v560M1160 0v560'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,0.34)' stroke-width='2.5' fill='none'%3E%3Cpath d='M160 120h880v320H160z'/%3E%3Cpath d='M160 280h360M600 280h440M520 120v160M600 280v160M840 280v160'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,0.18)' stroke-width='1.5'%3E%3Cpath d='M160 88h880M160 80v16M1040 80v16'/%3E%3C/g%3E%3Ctext x='600' y='74' font-family='monospace' font-size='16' fill='rgba(255,255,255,0.35)' text-anchor='middle'%3E42.800%3C/text%3E%3Cg fill='%23E01414'%3E%3Ccircle cx='280' cy='200' r='7'/%3E%3Ccircle cx='400' cy='200' r='7'/%3E%3Ccircle cx='700' cy='200' r='7'/%3E%3Ccircle cx='900' cy='200' r='7'/%3E%3Ccircle cx='280' cy='360' r='7'/%3E%3Ccircle cx='720' cy='360' r='7'/%3E%3Ccircle cx='940' cy='360' r='7'/%3E%3C/g%3E%3Cg stroke='%23E01414' stroke-opacity='.3' stroke-width='1.5' fill='none'%3E%3Ccircle cx='280' cy='200' r='34'/%3E%3Ccircle cx='700' cy='200' r='34'/%3E%3Ccircle cx='940' cy='360' r='34'/%3E%3C/g%3E%3Ctext x='300' y='452' font-family='monospace' font-size='14' fill='rgba(255,255,255,0.28)'%3EZONE 01 %E2%80%94 OPTISCH%3C/text%3E%3Ctext x='700' y='452' font-family='monospace' font-size='14' fill='rgba(255,255,255,0.28)'%3EZONE 04%3C/text%3E%3C/svg%3E");
}

/* Beeldband over de volle breedte */
.beeld-band {
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}
/* De container is hier een flex-item en zou anders krimpen tot zijn inhoud */
.beeld-band .container { width: 100%; padding-top: 4rem; padding-bottom: 3.5rem; }
.beeld-band h2, .beeld-band h3 { color: #fff; }
.beeld-band p { color: rgba(255,255,255,.7); }
.beeld-band .eyebrow { color: rgba(255,255,255,.45); }

/* ── HERO (homepage) ── */
.hero-b {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
}
.hero-b .container { width: 100%; padding-bottom: 4.5rem; padding-top: 7rem; position: relative; z-index: 2; }
.hero-b h1 {
  color: #fff;
  max-width: 17ch;
  margin-bottom: 1.4rem;
}
.hero-b .lead { color: rgba(255,255,255,.72); max-width: 52ch; margin-bottom: 2.2rem; }
.hero-b-acties { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.hero-b .link-red { color: #fff; }
.hero-b .link-red:hover { color: rgba(255,255,255,.7); }

/* Cijferrail onder de hero */
.hero-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
  position: relative;
  z-index: 2;
}
.hero-rail > div {
  padding: 1.6rem 0 1.7rem;
  border-right: 1px solid rgba(255,255,255,.12);
  padding-right: 1.5rem;
}
.hero-rail > div:last-child { border-right: none; }
.hero-rail b {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: .3rem;
}
.hero-rail span {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  line-height: 1.5;
  display: block;
}

/* ── PROJECTEN / CASES ───────────────────────────────────────
   Geen kaarten met schaduw: cellen in een raster, gescheiden
   door haarlijnen. Het beeld is de kop van de cel.           */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  border-top: var(--hairline);
  border-left: var(--hairline);
}
.case {
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: background .2s ease;
}
.case:hover { background: var(--bg); }
.case:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.case-thumb {
  height: 210px;
  position: relative;
  overflow: hidden;
}
.case-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,12,15,.12);
  transition: background .25s ease;
}
.case:hover .case-thumb::after { background: rgba(10,12,15,0); }
.case-in { padding: 1.6rem 1.7rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.case-in .meta { margin-bottom: .8rem; }
.case-in h3 { margin-bottom: .55rem; color: var(--ink); }
.case-in p { font-size: .88rem; margin-bottom: 1.2rem; }
.case-lees {
  margin-top: auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.case-lees::after {
  content: '';
  width: 16px; height: 1px;
  background: var(--red);
  transition: width .2s ease;
}
.case:hover .case-lees::after { width: 28px; }

/* ── TEKSTBAND ───────────────────────────────────────────────
   Asymmetrisch: kop links smal, tekst rechts breed.          */
.tekstband {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 4.5rem;
  align-items: start;
}
.tekstband > div:first-child { position: relative; }
.tekstband h2 { margin-bottom: 0; }

/* Genummerde disciplinerij zonder doosjes */
.disc-rij { border-top: var(--hairline); }
.disc {
  display: grid;
  grid-template-columns: 68px 1fr 1.5fr;
  gap: 2.5rem;
  padding: 2.1rem 0;
  border-bottom: var(--hairline);
  align-items: baseline;
}
.disc-nr {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--red);
  letter-spacing: .08em;
}
.disc h3 { margin: 0; }
.disc p { font-size: .9rem; margin: 0; }
.disc-link {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
  white-space: nowrap;
  /* Vierde kind in een grid van drie kolommen: zonder deze plaatsing valt
     de link op rij 2 in de nummerkolom, los onder het volgnummer. */
  grid-column: 3;
  justify-self: start;
  margin-top: .9rem;
}
.disc-link:hover { color: var(--red); }

/* ── KAART (blijft bestaan voor de 40 andere pagina's) ─────── */
.card {
  background: #fff;
  border: var(--hairline);
  border-radius: 0;
  padding: 1.9rem;
  transition: border-color .2s ease;
  position: relative;
}
.card:hover { border-color: var(--ink); }
.card h3 { margin-bottom: .55rem; }
.card p { font-size: .9rem; }

/* ── CHECKLIST ── */
.checklist { list-style: none; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .9rem;
  color: var(--ink);
  margin-bottom: .75rem;
  line-height: 1.6;
}
.checklist li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  background: var(--red);
  margin-top: .55em;
  flex-shrink: 0;
}

/* ── CIJFERS ── */
.stat-num {
  font-size: 2.6rem;
  font-weight: 700;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-top: .5rem;
  line-height: 1.5;
}

/* ── CTA-BAND ── */
.cta-band {
  background: var(--charcoal-dark);
  padding: 6.5rem 0;
  position: relative;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: .9rem; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,.6); margin-bottom: 2.5rem; max-width: 54ch; }
.cta-band .merk { background: var(--red); }

/* ── FOTO-PLACEHOLDER BAND (bestaande pagina's) ── */
.foto-band {
  width: 100%;
  height: 340px;
  background: var(--charcoal-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 340' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1200' height='340' fill='%2316191E'/%3E%3Cg stroke='rgba(255,255,255,0.05)' stroke-width='1'%3E%3Cpath d='M0 40h1200M0 80h1200M0 120h1200M0 160h1200M0 200h1200M0 240h1200M0 280h1200M0 320h1200'/%3E%3Cpath d='M40 0v340M80 0v340M120 0v340M160 0v340M200 0v340M240 0v340M280 0v340M320 0v340M360 0v340M400 0v340M440 0v340M480 0v340M520 0v340M560 0v340M600 0v340M640 0v340M680 0v340M720 0v340M760 0v340M800 0v340M840 0v340M880 0v340M920 0v340M960 0v340M1000 0v340M1040 0v340M1080 0v340M1120 0v340M1160 0v340'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,0.3)' stroke-width='2' fill='none'%3E%3Cpath d='M200 80h800v180H200z'/%3E%3Cpath d='M200 170h320M600 170h400M520 80v90M600 170v90'/%3E%3C/g%3E%3Cg fill='%23E01414'%3E%3Ccircle cx='300' cy='125' r='6'/%3E%3Ccircle cx='420' cy='125' r='6'/%3E%3Ccircle cx='700' cy='125' r='6'/%3E%3Ccircle cx='900' cy='125' r='6'/%3E%3Ccircle cx='300' cy='215' r='6'/%3E%3Ccircle cx='800' cy='215' r='6'/%3E%3C/g%3E%3Cg stroke='%23E01414' stroke-opacity='.28' stroke-width='1.5' fill='none'%3E%3Ccircle cx='300' cy='125' r='30'/%3E%3Ccircle cx='700' cy='125' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  position: relative;
}
.foto-band-inner { display: none; }

/* ── FOOTER ── */
footer {
  background: var(--charcoal-dark);
  color: rgba(255,255,255,.6);
  padding: 5rem 0 0;
  position: relative;
  border-top: 4px solid var(--red);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 4rem;
  padding-bottom: 3.5rem;
  align-items: start;
}
.footer-brand { margin-bottom: 1.5rem; display: flex; align-items: center; gap: .9rem; }
.footer-brand img { height: 54px !important; width: auto; }
.footer-brand-name { display: flex; flex-direction: column; line-height: 1.25; }
.footer-brand-name strong { font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.footer-brand-name span {
  font-family: var(--mono);
  font-size: .62rem; font-weight: 400;
  color: rgba(255,255,255,.38);
  letter-spacing: .1em; text-transform: uppercase;
}
.footer-tagline { max-width: 34ch; line-height: 1.75; font-size: .88rem; }
.footer-contact { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.footer-contact a, .footer-contact span {
  display: flex; align-items: center; gap: .65rem;
  font-size: .85rem; color: rgba(255,255,255,.55);
}
.footer-contact svg {
  width: 14px; height: 14px;
  stroke: var(--red); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
footer p { color: rgba(255,255,255,.5); font-size: .875rem; }
footer a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .15s; }
footer a:hover { color: #fff; }
.footer-col h4 {
  color: #fff;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  margin-bottom: 1.3rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .65rem; }
.footer-links a { font-size: .85rem; display: inline-block; }
.footer-links a::before { content: none; }
.footer-juridisch { display: flex; gap: 1.5rem; }
.footer-bottom a { color: rgba(255,255,255,.42); text-decoration: none; transition: color .15s; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 1.5rem 0;
  font-size: .78rem;
  color: rgba(255,255,255,.32);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── SCROLL REVEAL ───────────────────────────────────────────
   Bewust ingetogen: 16px, geen schaal, geen vertraagde cascade
   langer dan een halve seconde.                               */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-16px); transition: opacity .55s ease, transform .55s ease; }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal-right.visible { opacity: 1; transform: none; }

.stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.stagger.visible > * { opacity: 1; transform: none; transition-delay: .3s; }
.stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { transition-delay: .06s; }
.stagger.visible > *:nth-child(3) { transition-delay: .12s; }
.stagger.visible > *:nth-child(4) { transition-delay: .18s; }
.stagger.visible > *:nth-child(5) { transition-delay: .24s; }
.stagger.visible > *:nth-child(6) { transition-delay: .30s; }
.stagger.visible > *:nth-child(7) { transition-delay: .36s; }
.stagger.visible > *:nth-child(8) { transition-delay: .42s; }
.stagger.visible > *:nth-child(9) { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-right, .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── STAPPEN ── */
.steps { display: flex; flex-direction: column; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 2.1rem 0;
  border-bottom: var(--hairline);
}
.step:first-child { border-top: var(--hairline); }
.step-num {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--red);
  letter-spacing: .08em;
  opacity: 1;
  width: auto;
  line-height: 1.9;
}
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.step-actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

/* ── PAGINAHERO (subpagina's) ────────────────────────────────
   Antraciet vlak met de technische tekening als grond.       */
.page-hero {
  background: var(--charcoal-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 480' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1400' height='480' fill='%2316191E'/%3E%3Cg stroke='rgba(255,255,255,0.045)' stroke-width='1'%3E%3Cpath d='M0 48h1400M0 96h1400M0 144h1400M0 192h1400M0 240h1400M0 288h1400M0 336h1400M0 384h1400M0 432h1400'/%3E%3Cpath d='M48 0v480M96 0v480M144 0v480M192 0v480M240 0v480M288 0v480M336 0v480M384 0v480M432 0v480M480 0v480M528 0v480M576 0v480M624 0v480M672 0v480M720 0v480M768 0v480M816 0v480M864 0v480M912 0v480M960 0v480M1008 0v480M1056 0v480M1104 0v480M1152 0v480M1200 0v480M1248 0v480M1296 0v480M1344 0v480'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,0.13)' stroke-width='2' fill='none'%3E%3Cpath d='M840 110h480v290H840z'/%3E%3Cpath d='M840 250h180M1080 250h240M1020 110v140M1080 250v150'/%3E%3C/g%3E%3Cg fill='rgba(224,20,20,0.5)'%3E%3Ccircle cx='920' cy='180' r='6'/%3E%3Ccircle cx='1180' cy='180' r='6'/%3E%3Ccircle cx='920' cy='330' r='6'/%3E%3Ccircle cx='1240' cy='330' r='6'/%3E%3C/g%3E%3Cg stroke='rgba(224,20,20,0.18)' stroke-width='1.5' fill='none'%3E%3Ccircle cx='920' cy='180' r='32'/%3E%3Ccircle cx='1180' cy='180' r='32'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: right center;
  padding: 6rem 0 5.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before { content: none; }
.page-hero-orb { display: none; }
.page-hero .eyebrow { color: rgba(255,255,255,.45); }
.page-hero h1 { color: #fff; margin-bottom: 1.25rem; max-width: 18ch; }
.page-hero h1 em { font-style: normal; color: rgba(255,255,255,.45); }
.page-hero .lead { color: rgba(255,255,255,.68); max-width: 56ch; }
.page-hero-btns { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 2.2rem; align-items: center; }
.page-hero .link-red { color: #fff; }
.page-hero .link-red:hover { color: rgba(255,255,255,.7); }

/* ── DONKERE SECTIE ── */
.section-dark {
  background: var(--charcoal-dark);
  color: #fff;
  position: relative;
}
.section-dark::before { content: none; }
.section-dark .eyebrow { color: rgba(255,255,255,.42); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p, .section-dark .lead { color: rgba(255,255,255,.6); }
.section-dark .container { position: relative; z-index: 1; }
.section-dark .stat-num { color: #fff; }
.section-dark .stat-label { color: rgba(255,255,255,.45); }
.section-dark .checklist li { color: rgba(255,255,255,.8); }
.section-dark .disc-rij, .section-dark .disc,
.section-dark .steps .step { border-color: rgba(255,255,255,.12); }
.section-dark .disc-link { color: #fff; }

/* ── DONKERE KAART ── */
.dark-card {
  background: transparent;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 0;
  padding: 1.9rem;
  transition: border-color .2s ease;
  position: relative;
}
.dark-card::after { content: none; }
.dark-card:hover { border-color: rgba(255,255,255,.4); }
.dark-card h3 { color: #fff; margin-bottom: .7rem; }
.dark-card p { color: rgba(255,255,255,.55); font-size: .89rem; }

/* ── DETAILPAGINA'S ── */
.back-link-hero {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color .15s;
}
.back-link-hero:hover { color: #fff; }

.detail-quote {
  font-family: var(--sans);
  font-style: normal;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.02em;
  color: var(--ink);
  border-left: 3px solid var(--red);
  padding: .4rem 0 .4rem 2rem;
  margin: 2.75rem 0;
  border-radius: 0;
  background: transparent;
}
.detail-quote-dark { background: transparent; color: rgba(255,255,255,.92); border-left-color: var(--red); }

.detail-img-full {
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: var(--charcoal-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='1200' height='400' fill='%2316191E'/%3E%3Cg stroke='rgba(255,255,255,0.05)' stroke-width='1'%3E%3Cpath d='M0 50h1200M0 100h1200M0 150h1200M0 200h1200M0 250h1200M0 300h1200M0 350h1200'/%3E%3Cpath d='M50 0v400M100 0v400M150 0v400M200 0v400M250 0v400M300 0v400M350 0v400M400 0v400M450 0v400M500 0v400M550 0v400M600 0v400M650 0v400M700 0v400M750 0v400M800 0v400M850 0v400M900 0v400M950 0v400M1000 0v400M1050 0v400M1100 0v400M1150 0v400'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,0.26)' stroke-width='2' fill='none'%3E%3Cpath d='M180 90h840v220H180z'/%3E%3Cpath d='M180 200h300M580 200h440M480 90v110M580 200v110'/%3E%3C/g%3E%3Cg fill='%23E01414'%3E%3Ccircle cx='280' cy='145' r='6'/%3E%3Ccircle cx='400' cy='145' r='6'/%3E%3Ccircle cx='700' cy='145' r='6'/%3E%3Ccircle cx='900' cy='145' r='6'/%3E%3Ccircle cx='300' cy='255' r='6'/%3E%3Ccircle cx='820' cy='255' r='6'/%3E%3C/g%3E%3Cg stroke='%23E01414' stroke-opacity='.26' stroke-width='1.5' fill='none'%3E%3Ccircle cx='280' cy='145' r='30'/%3E%3Ccircle cx='700' cy='145' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  position: relative;
  display: block;
  font-size: 0;
}
.detail-img-full::before, .detail-img-full::after { content: none; }
.detail-img-full > * { display: none; }

.for-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 2rem;
  border-top: var(--hairline);
  border-left: var(--hairline);
}
/* Kolomaantal als klasse in plaats van inline in de HTML. Een inline stijl
   wint het namelijk van de mediaquery hieronder, waardoor deze rasters op
   mobiel in twee of drie kolommen bleven staan en de pagina zijwaarts scrolde. */
.for-who-grid.kolommen-2 { grid-template-columns: repeat(2, 1fr); }
.for-who-grid.kolommen-3 { grid-template-columns: repeat(3, 1fr); }

.for-who-grid > * {
  border-right: var(--hairline);
  border-bottom: var(--hairline);
  border-top: none;
  border-left: none;
}

/* ── HAMBURGER ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 0;
  transition: background .2s;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,.09); }
.nav-hamburger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nav-hamburger span {
  display: block; height: 2px;
  background: #fff;
  transition: transform .3s ease, opacity .2s;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBIEL MENU ── */
.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 78px 0 0 0;
  background: var(--charcoal-dark);
  z-index: 99;
  flex-direction: column;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.nav-mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.nav-mobile-links { list-style: none; display: flex; flex-direction: column; margin-bottom: 2rem; }
.nav-mobile-links li { border-bottom: 1px solid rgba(255,255,255,.11); }
.nav-mobile-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0;
  font-size: 1.02rem; font-weight: 500;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  transition: color .15s;
}
.nav-mobile-links a::after {
  content: ''; width: 16px; height: 1px; background: var(--red);
  opacity: 0; transition: opacity .15s;
}
.nav-mobile-links a:hover { color: #fff; }
.nav-mobile-links a:hover::after { opacity: 1; }
.nav-mobile-cta {
  display: block;
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 1rem;
  border-radius: 0;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: background .18s;
}
.nav-mobile-cta:hover { background: var(--red-dark); }

/* ── RESPONSIEF ── */
@media (max-width: 1350px) { .nav-links { gap: 1.5rem; } }
@media (max-width: 1150px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-menu { display: flex; }
}
@media (max-width: 980px) {
  .tekstband { grid-template-columns: 1fr; gap: 1.75rem; }
  .disc { grid-template-columns: 44px 1fr; gap: .75rem 1.25rem; }
  /* Twee kolommen: kop, tekst en link horen alle drie in de tweede,
     naast het volgnummer. Zonder dit belandt de omschrijving in de
     kolom van 44px en breekt hij af op één woord per regel. */
  .disc h3, .disc p, .disc-link { grid-column: 2; }
  .disc-link { justify-self: start; margin-top: .4rem; }
  .hero-rail { grid-template-columns: 1fr 1fr; }
  .hero-rail > div:nth-child(2) { border-right: none; }
  .hero-rail > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 768px) {
  nav { padding: 0 1.25rem; }
  .container { padding: 0 1.25rem; }
  section { padding: 4.25rem 0; }
  .clip-bottom, .clip-top { padding-top: 4.25rem; padding-bottom: 4.25rem; }
  .hero-b { min-height: 520px; }
  .hero-b .container { padding-top: 5rem; padding-bottom: 3rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; gap: .6rem; text-align: center; }
  .footer-juridisch { justify-content: center; }
  .for-who-grid,
  .for-who-grid.kolommen-2,
  .for-who-grid.kolommen-3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: .6rem; }
  .case-thumb { height: 180px; }
  .beeld-band { min-height: 320px; }
}