/* ============================================================
   EGMB Management & Consultancy — DESIGN-V4-LEVEND
   ------------------------------------------------------------
   Variant op design-v4-visueel. Zelfde opbouw, teksten, routes en
   verborgen secties; alleen diepte, interactie en zeer rustige
   beweging zijn toegevoegd. Uitgangspunt: een technische tekening
   die langzaam tot leven komt. Alle beweging is transform- of
   opacity-gebaseerd (geen layout-herberekening), er zijn geen
   externe animatiebibliotheken, en bij `prefers-reduced-motion`
   staat alles stil en direct zichtbaar.

   Overgenomen van v4-visueel:
   Uitsluitend een visuele herziening van design-v3-deelbaar.
   De HTML, teksten, links, paginastructuur, categorieën,
   projectdata en verborgen/zichtbare secties zijn ONGEWIJZIGD
   overgenomen — alle klassenamen hieronder zijn exact dezelfde
   als in v3-deelbaar, zodat er niets aan de opbouw hoefde te
   veranderen.

   Visuele signatuur: "technisch tekenwerk". Fijne lijnrasters,
   maatlijnen met tekens, kavel- en contourpatronen — afgeleid
   van bestek- en kaarttekeningen, niet van bouwplaatsbeelden.
   Alle beeldvlakken zijn zo opgebouwd dat een echte, goedgekeurde
   foto er later in kan zonder enige layoutwijziging.
   ============================================================ */

/* ── 1. TOKENS ── */
:root {
  /* Warme neutralen */
  --paper: #faf7f3;
  --paper-2: #f3efe8;
  --white: #ffffff;
  --line: #e4ded5;
  --line-strong: #cfc7bb;

  /* Inkt */
  --ink: #14181a;
  --ink-2: #3f4649;
  --muted: #6d7275;
  --night: #101416;
  --night-2: #0b0e10;

  /* Petrol (Civil / huismerk) */
  --petrol: #0f5c73;
  --petrol-deep: #0a3a49;
  --petrol-ink: #072b36;
  --petrol-bright: #2f93b0;
  --petrol-light: #8ed3e5;
  --petrol-soft: #e8f2f4;

  /* Lila (Talent & Event) */
  --lilac: #5b3a8a;
  --lilac-deep: #3d2560;
  --lilac-light: #c3a9ea;

  /* Actieve accentkleur per divisie */
  --accent: var(--petrol);
  --accent-deep: var(--petrol-deep);
  --accent-bright: var(--petrol-bright);
  --accent-light: var(--petrol-light);
  --accent-soft: var(--petrol-soft);

  /* Typografie */
  --fs-display: clamp(2.45rem, 1.55rem + 3.8vw, 4.3rem);
  --fs-h1: clamp(2.05rem, 1.5rem + 2.4vw, 3.2rem);
  --fs-h2: clamp(1.7rem, 1.35rem + 1.55vw, 2.5rem);
  --fs-h3: clamp(1.12rem, 1.04rem + 0.42vw, 1.42rem);
  /* Lopende tekst is in design-v13 circa 6 tot 7 procent verkleind, met
     een ondergrens van 15px op desktop en mobiel. Koppen, navigatie,
     labels en knoppen zijn niet meegeschaald. */
  --fs-lead: clamp(0.95rem, 0.9rem + 0.28vw, 1.1rem);
  --fs-body: 0.9375rem;
  --fs-small: 0.83rem;
  --fs-label: 0.72rem;

  /* Ritme */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(4rem, 2.6rem + 5.2vw, 7.5rem);
  --nav-h: 76px;
  --maxw: 1240px;
  --maxw-text: 62ch;

  /* Beweging */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-reveal: 0.72s;
  --dur-hover: 0.32s;
  --rise: 12px;

  /* Vorm */
  --radius: 4px;
}

body[data-division="civil"] {
  --accent: var(--petrol);
  --accent-deep: var(--petrol-deep);
  --accent-bright: var(--petrol-bright);
  --accent-light: var(--petrol-light);
  --accent-soft: var(--petrol-soft);
}

body[data-division="talent-event"] {
  --accent: var(--lilac);
  --accent-deep: var(--lilac-deep);
  --accent-bright: #8257c4;
  --accent-light: var(--lilac-light);
  --accent-soft: #f1ecf8;
}

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

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

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Montserrat weegt optisch zwaarder dan Inter. Koppen staan daarom op
   600 in plaats van 700; formaat, regelval en witruimte blijven gelijk.
   Alleen de grote hero-koppen houden 700, anders vallen ze weg. */
h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.85rem 1.4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 3. SECTIERITME + "TEKENBLAD"-SIGNATUUR ──
   Elke inhoudelijke sectie opent als een tekenblad: een haarlijn
   over de volle breedte met een korte petrol-maatstreep bij de
   marge. Subtiel, herhaalbaar, en typerend voor civieltechnisch
   tekenwerk zonder letterlijke bouwbeelden. */
section {
  position: relative;
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

#over, #diensten, #expertise, #projecten {
  border-top: 1px solid var(--line);
}

#over::before, #diensten::before,
#expertise::before, #projecten::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--gutter);
  width: 64px;
  height: 3px;
  background: var(--accent);
}

#diensten, #expertise { background: var(--white); }

/* Verticale maatlijn onder de maatstreep: groeit rustig mee zodra
   de sectie in beeld komt. Eén lijn per sectie, verder niets. */
#over::after, #diensten::after,
#expertise::after, #projecten::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: 1px;
  height: clamp(40px, 6vw, 72px);
  background: linear-gradient(to bottom, var(--accent), transparent);
  opacity: 0.55;
  transform-origin: top;
}

/* ── 3b. SCROLL-REVEAL ──
   Alleen actief als JS draait en de bezoeker geen verminderde
   beweging heeft ingesteld: `html.js-motion` wordt dan gezet. Zonder
   die klasse staat alles meteen zichtbaar, dus de pagina werkt ook
   volledig zonder JavaScript. */
html.js-motion #over::before, html.js-motion #diensten::before,
html.js-motion #expertise::before,
html.js-motion #projecten::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s var(--ease) 0.05s;
}
html.js-motion section.is-in::before { transform: scaleX(1); }

html.js-motion #over::after, html.js-motion #diensten::after,
html.js-motion #expertise::after,
html.js-motion #projecten::after {
  transform: scaleY(0);
  transition: transform 0.85s var(--ease) 0.2s;
}
html.js-motion section.is-in::after { transform: scaleY(1); }

/* Sectiekop en inhoud komen rustig op: 12 pixels, geen zijwaartse
   beweging, geen schaal. */
html.js-motion section .section-label,
html.js-motion section .section-title,
html.js-motion section .section-intro,
html.js-motion section .over-body,
html.js-motion section .contact-intro,
html.js-motion section .contact-btn,
html.js-motion section .detail-back,
html.js-motion .category-card,
html.js-motion .division-feature-card,
html.js-motion .project-full-card,
html.js-motion .stat-item,
html.js-motion .contact-person,
html.js-motion .dienst-row {
  opacity: 0;
  transform: translate3d(0, var(--rise), 0);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}

html.js-motion section.is-in .section-label,
html.js-motion section.is-in .section-title,
html.js-motion section.is-in .section-intro,
html.js-motion section.is-in .over-body,
html.js-motion section.is-in .contact-intro,
html.js-motion section.is-in .contact-btn,
html.js-motion section.is-in .detail-back,
html.js-motion section.is-in .category-card,
html.js-motion section.is-in .division-feature-card,
html.js-motion section.is-in .project-full-card,
html.js-motion section.is-in .stat-item,
html.js-motion section.is-in .contact-person,
html.js-motion section.is-in .dienst-row {
  opacity: 1;
  transform: none;
}

/* Kleine, vaste trapjes in plaats van willekeurige vertraging. */
html.js-motion section .section-title { transition-delay: 0.06s; }
html.js-motion section .section-intro,
html.js-motion section .over-body { transition-delay: 0.12s; }
html.js-motion section .contact-btn { transition-delay: 0.18s; }

html.js-motion .category-card:nth-child(1),
html.js-motion .division-feature-card:nth-child(1),
html.js-motion .project-full-card:nth-child(1),
html.js-motion .stat-item:nth-child(1),
html.js-motion .dienst-row:nth-child(1) { transition-delay: 0.1s; }
html.js-motion .category-card:nth-child(2),
html.js-motion .division-feature-card:nth-child(2),
html.js-motion .project-full-card:nth-child(2),
html.js-motion .stat-item:nth-child(2),
html.js-motion .dienst-row:nth-child(2) { transition-delay: 0.17s; }
html.js-motion .category-card:nth-child(3),
html.js-motion .project-full-card:nth-child(3),
html.js-motion .stat-item:nth-child(3),
html.js-motion .dienst-row:nth-child(3) { transition-delay: 0.24s; }
html.js-motion .category-card:nth-child(4),
html.js-motion .project-full-card:nth-child(4),
html.js-motion .dienst-row:nth-child(4) { transition-delay: 0.31s; }
html.js-motion .project-full-card:nth-child(n + 5) { transition-delay: 0.36s; }

/* ── 4. NAVIGATIE ──
   Bewust `body > nav`: de categoriepagina's bevatten een tweede nav-element
   (het Zie ook-blok). Een kale `nav`-selector zou dat blok bovenaan
   vastzetten. */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nav-h);
  padding: 0.85rem var(--gutter);
  background: rgba(250, 247, 243, 0.88);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}

/* Zodra er gescrold is, krijgt de balk een haarfijne schaduw. Verder
   verandert er niets: geen krimpende balk, geen verspringend logo. */
html.is-scrolled body > nav {
  background: rgba(250, 247, 243, 0.94);
  box-shadow: 0 1px 0 rgba(20, 24, 26, 0.06), 0 10px 24px rgba(20, 24, 26, 0.05);
}

/* ── HEADER BOVEN EEN DONKERE OF FOTOGRAFISCHE HERO ────────────────
   Zolang de hero in beeld is, loopt de balk er doorzichtig overheen
   in een donkere aubergine-zwarte tint met alleen een fijne onderrand.
   Zodra de onderrand van de hero de balk raakt, gaat hij vloeiend over
   naar de bestaande papierkleur met donkere tekst. Hoogte, opbouw en
   logo blijven daarbij exact gelijk, dus er verspringt niets.
   De klasse `boven-hero` wordt door motion.js gezet. Zonder JavaScript
   blijft de lichte balk staan: overal leesbaar. */
html.boven-hero body > nav {
  background: rgba(14, 10, 22, 0.42);
  backdrop-filter: blur(12px) saturate(1.05);
  border-bottom-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

html.boven-hero .nav-logo-text,
html.boven-hero .nav-links a,
html.boven-hero .nav-toggle {
  color: #fff;
}

html.boven-hero .nav-logo-text span,
html.boven-hero body[data-division] .nav-logo-text span {
  color: rgba(255, 255, 255, 0.78);
}

html.boven-hero .nav-links a::after { background: #fff; }
html.boven-hero .nav-toggle span,
html.boven-hero .nav-toggle span::before,
html.boven-hero .nav-toggle span::after { background: #fff; }
html.boven-hero .nav-toggle { border-color: rgba(255, 255, 255, 0.35); }
html.boven-hero .division-switch {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
html.boven-hero .division-switch:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
html.boven-hero .taalwissel-actief { color: #fff; }
html.boven-hero .taalwissel-streep { color: rgba(255, 255, 255, 0.4); }
html.boven-hero .taalwissel-link { color: rgba(255, 255, 255, 0.74); }
html.boven-hero .taalwissel-link:hover,
html.boven-hero .taalwissel-link:focus-visible { color: #fff; }

html.boven-hero body > nav :focus-visible { outline-color: #fff; }

/* Het merkbeeld is een transparante PNG met lichte en donkere delen.
   Op de donkere balk krijgt het een minimale lichte halo, zodat het
   niet wegvalt, zonder dat er een vlak of kader omheen komt. */
html.boven-hero .nav-logo img {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.55));
}

/* Op smalle schermen is het open menu een vlak op zichzelf; daar
   blijft de tekst donker op papierkleur. */
/* Staat het mobiele menu open, dan wordt de hele balk gewoon licht:
   het uitgeklapte paneel is papierkleur, en een half donkere balk
   erboven zou raar staan. Browsers zonder :has() houden de donkere
   balk met het lichte paneel eronder; ook dat blijft leesbaar. */
@media (max-width: 1150px) {
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) {
    background: rgba(250, 247, 243, 0.98);
    border-bottom-color: var(--line);
  }
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) .nav-logo-text { color: var(--ink); }
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) .nav-logo-text span { color: var(--muted); }
  html.boven-hero body[data-division] > nav:has(.nav-right[data-open="true"]) .nav-logo-text span { color: var(--accent); }
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) .nav-toggle { border-color: var(--line-strong); }
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) .nav-toggle span,
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) .nav-toggle span::before,
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) .nav-toggle span::after { background: var(--ink); }
  html.boven-hero body > nav:has(.nav-right[data-open="true"]) .nav-logo img { filter: none; }

  html.boven-hero .nav-right[data-open="true"] .nav-links a,
  html.boven-hero .nav-right[data-open="true"] .division-switch {
    color: var(--ink-2);
  }
  html.boven-hero .nav-right[data-open="true"] .taalwissel-actief { color: var(--ink); }
  html.boven-hero .nav-right[data-open="true"] .taalwissel-streep { color: var(--line-strong); }
  html.boven-hero .nav-right[data-open="true"] .taalwissel-link { color: var(--muted); }
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}

.nav-logo img {
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  flex: none;
}

/* Het Talent-logo heeft een eigen ronde vorm in het bestand zelf.
   Daar hoort geen kader of vlak omheen. */
.footer-logo[src*="talent"] {
  width: 60px;
  height: 60px;
}

.nav-logo-text {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.nav-logo-text span {
  display: block;
  font-size: 0.645rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.18rem;
}

body[data-division] .nav-logo-text span { color: var(--accent); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── TAALWISSELAAR ──
   Compact en rechts in de navigatie: NL | EN. De actieve taal is gewone
   tekst en dus niet klikbaar, de andere taal is een link naar exact
   dezelfde pagina in die taal. Geen vlaggen, geen uitklapmenu, geen
   automatische taalkeuze. */
.taalwissel {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.taalwissel-actief { color: var(--ink); }
.taalwissel-streep { color: var(--line-strong); }
.taalwissel-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.taalwissel-link:hover,
.taalwissel-link:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

.nav-links a {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right 0.28s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }

.division-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.division-switch:hover {
  background: var(--accent);
  color: #fff;
}

.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  font: inherit;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav-toggle span { top: 50%; margin-top: -0.75px; }
.nav-toggle span::before { content: ""; top: -6px; left: 0; transform: none; }
.nav-toggle span::after { content: ""; top: 6px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ── 5. LABELS EN KOPPEN ── */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.section-title {
  max-width: 18ch;
  font-size: var(--fs-h2);
  margin-bottom: 1.4rem;
}
.section-title--sm { font-size: var(--fs-h3); }

/* De persoonlijke sectie op beide divisiepagina's heeft de naamregel als
   kop. Die is langer dan een gewone sectietitel, dus een ruimere
   regelbreedte; grootte, gewicht en marge blijven gelijk. */
.section-title--naam { max-width: 30ch; }

.section-intro {
  max-width: var(--maxw-text);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 3rem;
}

/* ── 6. HERO — TEKST (homepage en Talent & Event) ──
   Let op: bewust `#hero:not(.hero-photo)`. De Civil-hero draagt
   hetzelfde id maar is een fotohero; een losse #hero-regel zou die
   door hogere specificiteit overschrijven. */
#hero:not(.hero-photo) {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
  background: var(--paper);
  overflow: hidden;
}

/* Technisch raster, heel licht — geeft het lege bovenvlak textuur
   zonder te concurreren met de typografie. */
#hero:not(.hero-photo)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(15, 92, 115, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(15, 92, 115, 0.055) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  -webkit-mask-image: radial-gradient(90% 80% at 82% 20%, #000 0%, transparent 72%);
  mask-image: radial-gradient(90% 80% at 82% 20%, #000 0%, transparent 72%);
}

#hero:not(.hero-photo) > * { position: relative; z-index: 1; }

/* HERO-ACHTERGROND: LIJNENLANDSCHAP
   De bestaande rasterlaag (::after hierboven) blijft het grondvlak en
   schuift heel langzaam op. Daar bovenop staat een SVG-lijnenveld in de
   rechterhelft: fijne raster- en maatlijnen in petrol voor de civiele
   techniek, zachte gebogen ritmelijnen in aubergine voor talent en
   events, over elkaar heen, plus twee dunne lichtlijnen die langzaam een
   route door het veld afleggen. Alles staat rechts van de hero-tekst en
   vervaagt naar links toe, zodat de tekst vrij en contrastrijk blijft.
   Elke cyclus duurt 34 tot 50 seconden. Bij prefers-reduced-motion staat
   alles stil in een compleet eindbeeld; op smalle schermen is het veld
   zwakker en staat het eveneens stil. */

#hero:not(.hero-photo)::after {
  z-index: 0;
}

#hero:not(.hero-photo) > .hero-lijnen {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  min-width: 460px;
  overflow: hidden;
  pointer-events: none;
}

.hero-lijnen svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Het veld vervaagt naar alle randen toe, en vooral naar links, zodat het
   nergens hard afsnijdt en de hero-tekst volledig vrij blijft. */
.hero-lijnen {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, transparent 36%, rgba(0, 0, 0, 0.42) 56%, #000 78%),
    linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, transparent 36%, rgba(0, 0, 0, 0.42) 56%, #000 78%),
    linear-gradient(180deg, transparent 0, #000 13%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Rust in het stilstaande eindbeeld: de lichtlijnen staan halverwege hun
   route, niet op het beginpunt. Zo is ook zonder beweging het veld af. */
.hl-licht--route {
  stroke-dasharray: 150 850;
  stroke-dashoffset: -430;
}

.hl-licht--golf {
  stroke-dasharray: 96 904;
  stroke-dashoffset: 250;
}

@media (prefers-reduced-motion: no-preference) {
  #hero:not(.hero-photo)::after {
    animation:
      heroRasterSchuift 15s linear infinite,
      heroRasterAdemt 14s ease-in-out infinite alternate;
  }

  .hl-raster { animation: hlRasterSchuift 14s linear infinite; }
  .hl-raster-fijn { animation: hlAdemt 13s ease-in-out infinite alternate; }
  .hl-maat { animation: hlAdemtZacht 16s ease-in-out infinite alternate; }

  .hl-golf--1 { animation: hlDrijft1 13s ease-in-out infinite alternate; }
  .hl-golf--2 { animation: hlDrijft2 17s ease-in-out infinite alternate; }
  .hl-golf--3 { animation: hlDrijft3 15s ease-in-out infinite alternate; }
  .hl-golf--4 { animation: hlDrijft2 12s ease-in-out infinite alternate; }

  .hl-licht--route { animation: hlRouteLoopt 11s linear infinite; }
  .hl-licht--golf { animation: hlGolfLoopt 13s linear infinite; }
}

/* Het raster schuift precies een patrooncel op, dus naadloos rond. */
@keyframes hlRasterSchuift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-48px, -48px, 0); }
}

@keyframes hlAdemt {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

@keyframes hlAdemtZacht {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

@keyframes hlDrijft1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-16px, 10px, 0); }
}

@keyframes hlDrijft2 {
  from { transform: translate3d(0, 6px, 0); }
  to   { transform: translate3d(14px, -8px, 0); }
}

@keyframes hlDrijft3 {
  from { transform: translate3d(8px, -4px, 0); }
  to   { transform: translate3d(-12px, 8px, 0); }
}

/* pathLength staat op 1000, dus een streep legt in een cyclus precies de
   hele route af en komt er aan de andere kant weer in: geen knipper. */
@keyframes hlRouteLoopt {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes hlGolfLoopt {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes heroRasterSchuift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 96px 96px, 96px 96px; }
}

@keyframes heroRasterAdemt {
  from { opacity: 0.78; }
  to   { opacity: 1; }
}

/* ── DIVISIEKAARTEN MET FOTO ────────────────────────────────────────
   Zelfde kaart, zelfde afmeting, zelfde link. Alleen het beeldvlak is
   nu een echte foto in plaats van een kleurvlak. Over de foto ligt
   alleen een heel dunne waas in de divisiekleur: geen raster, geen
   binnenkader en geen effect dat de foto onecht maakt. De kaarttekst
   staat eronder op het witte vlak en wordt dus niet door de foto
   geraakt. Beide foto's hebben exact dezelfde beeldhoogte. */
.division-feature-media--foto {
  background-color: var(--night);
  overflow: hidden;
}

/* De foto zit in een eigen beeldlaag, net als bij de categoriekaarten op
   de Civil-projectpagina's. Daardoor kan alleen het beeld rustig
   inzoomen bij hover, terwijl de kaart, de kleurregel en het tekstvlak
   stil blijven staan. */
.division-feature-media--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--kaartfoto);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
.division-feature-card:hover .division-feature-media--foto::before,
.division-feature-card:focus-visible .division-feature-media--foto::before {
  transform: scale(1.045);
}

.division-feature-media--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0;
  pointer-events: none;
}

/* Civil: alleen een heel dunne petrol-zweem, zodat hout, water, zand en
   groen hun eigen kleur houden en de foto als echt civiel werk leest. */
.division-feature-card--civil .division-feature-media--foto::after {
  background-image:
    linear-gradient(150deg, rgba(15, 92, 115, 0.07) 0%, rgba(7, 43, 54, 0.04) 55%, rgba(7, 43, 54, 0.12) 100%);
}

/* Talent & Event: dezelfde opbouw, iets voller in aubergine, maar licht
   genoeg om het podiumlicht en de lasers als echte foto te laten lezen. */
.division-feature-card--talent-event .division-feature-media--foto::after {
  background-image:
    linear-gradient(150deg, rgba(91, 58, 138, 0.1) 0%, rgba(47, 28, 77, 0.08) 55%, rgba(31, 18, 52, 0.2) 100%);
}

/* Dunne kleurregel tussen beeld en kaarttekst, per divisie. Dit is de
   enige lijn over of rond de foto; verder geen kaders of rasters. */
.division-feature-card--civil .division-feature-media--foto {
  border-bottom: 2px solid var(--petrol);
}
.division-feature-card--talent-event .division-feature-media--foto {
  border-bottom: 2px solid var(--lilac);
}

/* ── TALENT & EVENT: LICHTE CONTACTSECTIE ───────────────────────────
   Het ritme van de pagina wordt donkere hero, lichte contactsectie,
   donkere footer. Alleen de kleuren veranderen; tekst, knop, gegevens
   en opbouw blijven exact gelijk. Aubergine is hier de accentkleur. */
/* ── TALENT & EVENT: DONKER CONTACTBLOK ─────────────────────────────
   Hetzelfde donkere blok als op de homepage en de Civil-pagina:
   dezelfde basis (--night), dezelfde tekstkleuren, dezelfde
   typografische hiërarchie en hetzelfde fijne raster. De aubergine
   komt alleen terug in details: de gloed rechtsboven, het sectielabel,
   de lijn boven het contactblok, de knop bij hover en de links. Geen
   apart paars vlak dus. De footer staat op --night-2 en blijft daarmee
   duidelijk donkerder dan het contactblok. */
/* Op de lichte aubergine hoverknop leest een diepe aubergine beter dan
   het petrol-donker van de andere twee pagina's. */
body[data-division="talent-event"] #contact .contact-btn:hover { color: var(--lilac-deep); }

body[data-division="talent-event"] #contact::after {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(70% 90% at 88% 6%, rgba(91, 58, 138, 0.58) 0%, transparent 64%);
}

/* ── HERO MET FOTO (homepage en Talent & Event) ─────────────────────
   Dezelfde hero-opbouw, dezelfde typografie, dezelfde hoogte. Nieuw is
   alleen de achtergrond: een foto met daarover een rustige donkere
   verlooplaag die naar links toe zwaarder wordt, precies waar de tekst
   staat. De foto is puur decoratief; de boodschap staat in de tekst.
   Op smalle schermen komt een eigen, staande uitsnede in beeld. */

#hero.hero-foto {
  position: relative;
  background-color: var(--night);
  background-blend-mode: normal;
  background-image: var(--herofoto);
  background-size: cover;
  background-position: center 46%;
  overflow: hidden;
}

/* Let op: `#hero:not(.hero-photo) > *` zet elk direct kind op
   position: relative met z-index 1. Deze twee regels moeten dus even
   specifiek zijn (id + klasse) en erna staan, anders gaat de sluier
   meedoen in de tekststroom in plaats van eroverheen te liggen. */
#hero.hero-foto > .hero-foto-sluier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#hero.hero-foto > .hero-foto-inhoud,
#hero.hero-foto > .hero-label,
#hero.hero-foto > .hero-title,
#hero.hero-foto > .hero-sub,
#hero.hero-foto > .hero-ctas {
  position: relative;
  z-index: 4;
}

/* Homepage: donkerblauwzwart, met de petrol van het huismerk erin. */
#hero.hero-foto--home > .hero-foto-sluier {
  background-image:
    /* 1. Alleen achter het tekstvlak links een zacht, diep verloop. */
    linear-gradient(96deg, rgba(5, 22, 29, 0.93) 0%, rgba(5, 22, 29, 0.88) 26%, rgba(5, 22, 29, 0.6) 48%, rgba(5, 22, 29, 0.14) 66%, rgba(5, 22, 29, 0.04) 100%),
    /* 2. Warme, lichte demping over de rest: de bouwplaats en de
          tekeningen blijven rechts en onderin duidelijk zichtbaar. */
    linear-gradient(to top, rgba(8, 26, 33, 0.46) 0%, rgba(10, 28, 35, 0.16) 42%, rgba(12, 30, 38, 0.28) 100%),
    /* 3. Lichte petrol-waas: net genoeg om het beeld in de huisstijl te
          trekken, niet zo veel dat het warme zand koud wordt. */
    linear-gradient(120deg, rgba(10, 58, 73, 0.2) 0%, rgba(7, 43, 54, 0.08) 100%);
}

/* Talent & Event: dezelfde opbouw, in aubergine naar zwart. */
#hero.hero-foto--talent > .hero-foto-sluier {
  background-image:
    radial-gradient(62% 58% at 14% 34%, rgba(14, 6, 24, 0.55) 0%, transparent 72%),
    linear-gradient(100deg, rgba(16, 7, 27, 0.96) 0%, rgba(20, 9, 33, 0.94) 42%, rgba(24, 11, 39, 0.78) 72%, rgba(28, 13, 45, 0.64) 100%),
    linear-gradient(to top, rgba(10, 4, 17, 0.62) 0%, transparent 50%);
}

.hero-foto-inhoud {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
}

/* Tekstkleuren: dezelfde schaal en spacing, alleen omgezet naar de
   lichte variant die de Civil-fotohero al gebruikt. */
#hero.hero-foto .hero-label { color: var(--petrol-light); }
#hero.hero-foto--talent .hero-label { color: var(--lilac-light); }

/* De Talent-hero gebruikt dezelfde componentfamilie als de Civil-hero:
   .hero-photo voor de sectie, .hero-photo-content voor het tekstvlak en
   .hero-photo-title voor de H1. Daardoor zijn de minimumhoogte, het
   raster, de uitlijning, de boven- en onderruimte, de labelmaat en de
   typeschaal gelijk. De Talent-titel is inhoudelijk langer en breekt dus
   over meer regels af; hij is bewust niet verkleind. */
#hero.hero-foto .hero-title { color: #fff; }
#hero.hero-foto .hero-title em { color: var(--petrol-light); }
#hero.hero-foto .hero-sub { color: rgba(255, 255, 255, 0.9); }

#hero.hero-foto .hero-cta {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
#hero.hero-foto .hero-cta:hover {
  background: var(--petrol-light);
  border-color: var(--petrol-light);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}
#hero.hero-foto .hero-cta-secondary { color: #fff; }
#hero.hero-foto .hero-cta-secondary::before { background: rgba(255, 255, 255, 0.38); }
#hero.hero-foto .hero-cta-secondary::after { background: #fff; }
#hero.hero-foto .hero-cta-secondary:hover {
  color: var(--petrol-light);
  border-color: var(--petrol-light);
}
#hero.hero-foto :focus-visible { outline-color: #fff; }

/* Het bestaande rasterlaagje van de teksthero wordt licht in plaats van
   petrol, zodat het op de donkere foto zichtbaar blijft. Dezelfde maat,
   hetzelfde masker, dezelfde beweging. */
#hero.hero-foto::after {
  z-index: 2;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

/* Talent & Event heeft geen lijnenveld; daar is het raster overbodig. */
#hero.hero-foto--talent::after { display: none; }

/* Het lijnenveld van de homepage ligt boven de foto. De lijnen krijgen
   de lichte varianten van dezelfde twee kleuren, zodat de geometrie,
   de dikte en de beweging exact hetzelfde blijven. */
#hero.hero-foto--home > .hero-lijnen {
  --petrol: var(--petrol-light);
  --lilac: var(--lilac-light);
  --paper: rgba(3, 17, 23, 0.6);
  position: absolute;
  z-index: 3;
  opacity: 0.95;
}

/* Smalle schermen: eigen, staande uitsnede en een zwaarder tekstvlak. */
@media (max-width: 760px) {
  #hero.hero-foto {
    background-image: var(--herofoto-mobiel, var(--herofoto));
    background-position: center 40%;
  }

  #hero.hero-foto--home > .hero-foto-sluier {
    background-image:
      linear-gradient(180deg, rgba(5, 22, 29, 0.7) 0%, rgba(5, 22, 29, 0.86) 40%, rgba(5, 22, 29, 0.9) 100%),
      linear-gradient(120deg, rgba(10, 58, 73, 0.3) 0%, rgba(7, 43, 54, 0.18) 100%);
  }

  #hero.hero-foto--talent > .hero-foto-sluier {
    background-image:
      linear-gradient(180deg, rgba(14, 6, 24, 0.8) 0%, rgba(20, 9, 32, 0.88) 44%, rgba(24, 11, 38, 0.92) 100%);
  }
}

/* Smalle schermen: het veld blijft als rustig achtergrondaccent staan,
   zwakker en zonder beweging. */
@media (max-width: 760px) {
  /* Geen ruimte naast de tekst op een telefoon, dus het veld zakt naar de
     onderste rechterhoek en blijft daar een rustig, zwak accent. De tekst
     blijft vrij van lijnen. */
  #hero:not(.hero-photo) > .hero-lijnen {
    width: 100%;
    min-width: 0;
    top: 50%;
    opacity: 0.34;
    -webkit-mask-image: radial-gradient(92% 104% at 88% 76%, #000 0%, rgba(0, 0, 0, 0.5) 44%, transparent 74%);
    mask-image: radial-gradient(92% 104% at 88% 76%, #000 0%, rgba(0, 0, 0, 0.5) 44%, transparent 74%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  /* Eigen, bewuste uitsnede voor de divisiekaarten op smalle schermen. */
  .division-feature-media--foto::before {
    background-image: var(--kaartfoto-mobiel, var(--kaartfoto));
  }

  .hl-raster,
  .hl-raster-fijn,
  .hl-maat,
  .hl-golf,
  .hl-licht,
  html.js-motion .hero-photo-overlay--solid,
  html.js-motion .hero-photo-overlay--solid::before,
  html.js-motion .tl-raster,
  html.js-motion .tl-baan,
  html.js-motion #hero.hero-foto > .hero-foto-lijnen {
    animation: none !important;
  }

  /* Ook de bestaande rasterlaag van de hero staat op telefoons stil, zodat
     de mobiele hero rustig en leesbaar blijft. Op desktop beweegt die
     gewoon door. */
  #hero:not(.hero-photo)::after {
    animation: none !important;
  }
}

/* Over-sectie op de homepage: de drie blokken rechts zijn vervallen, dus
   e'e'n kolom. De Civil-variant met portret houdt het tweekolomsraster. */
.over-grid--enkel {
  display: block;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.hero-title {
  max-width: 15ch;
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: 1.6rem;
}
.hero-title em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  max-width: 54ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 2.4rem;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.hero-cta {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition:
    background var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease),
    transform var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease);
}
.hero-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 92, 115, 0.28);
}
.hero-cta:active { transform: translateY(0); }

.hero-cta-secondary {
  position: relative;
  display: inline-block;
  padding: 1rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.hero-cta-secondary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.hero-cta-secondary:hover::after,
.hero-cta-secondary:focus-visible::after { transform: scaleX(1); }
.hero-cta-secondary:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── 7. HERO — CIVIL (fotoklaar) ──
   De sectie draagt straks de foto (background-image), de overlay
   draagt de scrim én het lijnwerk. Een foto toevoegen vraagt dus
   geen enkele structuur- of layoutwijziging. */
.hero-photo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 74vh, 720px);
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) var(--gutter) clamp(3rem, 6vw, 5rem);
  background-color: var(--petrol-deep);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero-photo--solid {
  background-image: var(--herofoto,
    radial-gradient(120% 95% at 78% 12%, rgba(47, 147, 176, 0.5) 0%, transparent 62%),
    linear-gradient(158deg, #0e5468 0%, #072b36 100%));
}

/* Met een echte herofoto mag de sluier iets zwaarder, zodat de titel
   overal leesbaar blijft. */
.hero-photo[style*="herofoto"] .hero-photo-overlay--solid {
  background-image:
    linear-gradient(100deg, rgba(4, 22, 29, 0.86) 0%, rgba(4, 22, 29, 0.6) 46%, rgba(4, 22, 29, 0.32) 100%);
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(5, 25, 32, 0.78) 0%, rgba(5, 25, 32, 0.42) 52%, rgba(5, 25, 32, 0.2) 100%);
}

/* Lijnwerk-laag: fijn raster + grover modulair raster, uitgefade
   naar links zodat de tekst altijd rustig blijft liggen. */
/* De scrim blijft op de overlay zelf; het rasterwerk zit in een
   eigen laag eronder (::before) zodat het kan bewegen zonder de
   leesbaarheid van de tekst te raken. Komt er later een foto in de
   heroachtergrond, dan schuift dit raster daar net zo overheen. */
.hero-photo-overlay--solid {
  background-image:
    linear-gradient(105deg, rgba(5, 25, 32, 0.8) 0%, rgba(5, 25, 32, 0.4) 52%, rgba(5, 25, 32, 0.16) 100%);
}

.hero-photo-overlay--solid::before {
  content: "";
  position: absolute;
  top: -144px;
  right: -144px;
  bottom: -144px;
  left: -144px;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 144px 144px, 144px 144px, 36px 36px, 36px 36px;
  will-change: transform;
}

/* Eén raster-tegel per 44 seconden: nauwelijks waarneembaar als
   beweging, wel genoeg om de hero te laten "ademen". De loop is
   precies één tegel, dus er is geen zichtbare sprong. */
html.js-motion .hero-photo-overlay--solid::before {
  animation: raster-drift 16s linear infinite;
}

@keyframes raster-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(144px, 144px, 0); }
}

/* Heel traag lichtverloop in het petrolvlak, als wisselend daglicht
   over een tekening. Alleen opacity, dus goedkoop om te renderen. */

html.js-motion .hero-photo-overlay--solid {
  animation: hero-adem 14s ease-in-out infinite alternate;
}

@keyframes hero-adem {
  from { opacity: 1; }
  to   { opacity: 0.88; }
}

/* ── TALENT & EVENT: RUSTIG LIJNVELD OVER DE FOTO ───────────────────
   De Talent-hero had als enige geen beweging. Dit veld sluit aan op de
   bewegende taal van de homepage en de Civil-hero, maar kopieert die
   niet: een traag schuivend raster in aubergine en twee lange banen die
   er nog langzamer doorheen lopen. De laag ligt tussen de sluier en de
   tekst, is naar links uitgefade zodat de kop rustig blijft liggen, en
   houdt de foto zichtbaar. Alleen transform, opacity en
   stroke-dashoffset, dus goedkoop om te renderen. */
#hero.hero-foto > .hero-foto-lijnen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, 0.35) 34%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0, 0, 0, 0.35) 34%, #000 62%);
}
.hero-foto-lijnen svg { width: 100%; height: 100%; display: block; }

.tl-raster { will-change: transform; }
.tl-baan {
  stroke-dasharray: 150 850;
  stroke-dashoffset: 1000;
}

html.js-motion .tl-raster { animation: tlRasterSchuift 26s linear infinite; }
html.js-motion .tl-baan--1 { animation: tlBaanLoopt 17s linear infinite; }
html.js-motion .tl-baan--2 { animation: tlBaanLoopt 21s linear infinite; }
html.js-motion #hero.hero-foto > .hero-foto-lijnen {
  animation: tlVeldAdemt 19s ease-in-out infinite alternate;
}

@keyframes tlRasterSchuift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(64px, 64px, 0); }
}
@keyframes tlBaanLoopt {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes tlVeldAdemt {
  from { opacity: 0.38; }
  to   { opacity: 0.6; }
}

/* Besteksblad-kader: één haarlijn binnen de hero. Werkt straks net
   zo goed over een foto als over het effen petrolvlak. */
.hero-photo-overlay::after {
  content: "";
  position: absolute;
  top: calc(var(--nav-h) + 20px);
  right: clamp(14px, 1.8vw, 26px);
  bottom: clamp(14px, 1.8vw, 26px);
  left: clamp(14px, 1.8vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}



.hero-photo-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
}

.hero-photo-content .hero-label {
  color: var(--petrol-light);
}

.hero-photo-title {
  max-width: 14ch;
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.03;
  color: #fff;
  margin-bottom: 1.35rem;
}

.hero-photo-content .hero-sub {
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2.5rem;
}

.hero-photo-content .hero-cta {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.hero-photo-content .hero-cta:hover {
  background: var(--petrol-light);
  border-color: var(--petrol-light);
  color: var(--petrol-ink);
}

.hero-photo-content .hero-cta-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-photo-content .hero-cta-secondary:hover {
  color: var(--petrol-light);
  border-color: var(--petrol-light);
}

.hero-photo :focus-visible {
  outline-color: #fff;
}

/* ── 8. OVER-SECTIE ── */
#over { background: var(--paper-2); }

.over-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  max-width: var(--maxw);
}

.over-body {
  max-width: var(--maxw-text);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-2);
}

.over-body p:last-child { margin-bottom: 0; }

/* De slotzin van de persoonlijke sectie verwijst naar de contactsectie.
   Bewust een tekstlink in de lopende tekst, geen extra knop of sectie. */
.over-contactlink {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-hover) var(--ease);
}
.over-contactlink:hover {
  color: var(--accent-deep);
}

.over-stats {
  display: grid;
  gap: 1.5rem;
  padding-left: clamp(0rem, 2vw, 2rem);
}

.stat-item {
  padding: 1.35rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.stat-num {
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.stat-label {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

/* ── 9. DIENSTEN (nu verborgen; klaar voor publicatie) ── */
.diensten-rows {
  display: grid;
  gap: 1px;
  max-width: var(--maxw);
  background: var(--line);
  border: 1px solid var(--line);
}

.dienst-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--white);
}

/* Talent & Event levert de diensten zonder korte tag aan. Dezelfde rij,
   dezelfde hairline-opbouw, alleen zonder de linkerkolom. */
.dienst-row--zonder-tag { grid-template-columns: 1fr; }

.dienst-row-tag {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.dienst-row-title {
  font-size: var(--fs-h3);
  margin-bottom: 0.7rem;
}

.dienst-row-body {
  max-width: var(--maxw-text);
  font-weight: 300;
  color: var(--ink-2);
}

.dienst-row-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.dienst-row-fact {
  display: block;
  max-width: 36ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}
.dienst-row-fact strong {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

/* ── 10. EXPERTISE-RASTER ── */
.expertise-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.5rem;
  max-width: var(--maxw);
}

/* ── 11. HOMEPAGE — DIVISIEKAARTEN ── */
.divisions-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: var(--maxw);
}

.division-feature-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 24, 26, 0.04), 0 8px 18px rgba(20, 24, 26, 0.05);
  transition:
    transform var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}
/* De kaart zelf beweegt niet: alleen de foto zoomt. Rand en schaduw
   veranderen wel, zodat de kaart nog steeds reageert. */
.division-feature-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 4px rgba(20, 24, 26, 0.06), 0 26px 48px rgba(20, 24, 26, 0.13);
}

.division-feature-accent-bar { height: 3px; }
.division-feature-card--civil .division-feature-accent-bar { background: var(--petrol); }
.division-feature-card--talent-event .division-feature-accent-bar { background: var(--lilac); }

.division-feature-media {
  position: relative;
  aspect-ratio: 11 / 5;
  background-color: var(--petrol-deep);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}

/* Lijnwerk per divisie: Civil krijgt een kavelraster, Talent & Event
   een concentrisch patroon. Beide gedempt, zodat een echte foto er
   later overheen kan zonder dat de kaartopbouw verandert. */
.division-feature-card--civil .division-feature-media--solid {
  background-color: var(--petrol-deep);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(95% 85% at 76% 18%, rgba(47, 147, 176, 0.55) 0%, transparent 64%),
    linear-gradient(155deg, #0e5468 0%, #072b36 100%);
  background-size: 78px 78px, 78px 78px, 19.5px 19.5px, 19.5px 19.5px, auto, auto;
}

.division-feature-card--talent-event .division-feature-media--solid {
  background-color: var(--lilac-deep);
  background-image:
    repeating-radial-gradient(circle at 76% 116%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 26px),
    radial-gradient(90% 80% at 22% 12%, rgba(163, 128, 220, 0.5) 0%, transparent 62%),
    linear-gradient(155deg, #5b3a8a 0%, #2f1c4d 100%);
}

.division-feature-media:not(.division-feature-media--foto)::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transition: inset var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.division-feature-card:hover .division-feature-media:not(.division-feature-media--foto)::after {
  inset: 10px;
  border-color: rgba(255, 255, 255, 0.3);
}

.division-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
}

.division-feature-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.division-feature-card--civil .division-feature-label { color: var(--petrol); }
.division-feature-card--talent-event .division-feature-label { color: var(--lilac); }

.division-feature-title {
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0.7rem 0 0.8rem;
}

.division-feature-desc {
  max-width: 42ch;
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1.5rem;
}

.division-feature-link {
  position: relative;
  margin-top: auto;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 0.3rem;
  transition: color var(--dur-hover) var(--ease);
}
.division-feature-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.division-feature-card:hover .division-feature-link::before,
.division-feature-card:focus-visible .division-feature-link::before { transform: scaleX(1); }
.division-feature-card:hover .division-feature-link { color: var(--accent); }

.division-feature-link::after {
  content: " →";
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease);
}
.division-feature-card:hover .division-feature-link::after { transform: translateX(5px); }

/* ── 12. PROJECTEN — CATEGORIEKAARTEN ──
   Vier gelijkwaardige kaarten: exact dezelfde maatvoering, opbouw
   en nadruk. Alleen het lijnmotief in het beeldvlak verschilt, zodat
   het geen vier identieke kleurvlakken zijn. Elk beeldvlak heeft een
   vaste verhouding: een echte categoriefoto vervangt straks alleen
   het motief, niet de layout. */
#projecten { background: var(--paper); }

.category-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  max-width: var(--maxw);
}

.category-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 24, 26, 0.04), 0 8px 18px rgba(20, 24, 26, 0.05);
  transition:
    transform var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease);
}
.category-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: 0 2px 4px rgba(20, 24, 26, 0.06), 0 26px 48px rgba(20, 24, 26, 0.14);
}

.category-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--petrol-deep);
  overflow: hidden;
}

/* Beeldlaag apart van de kaart: het lijnmotief (en straks de echte
   categoriefoto) zit in ::before. Daardoor kan het beeld rustig
   inzoomen bij hover terwijl het kader en de kaartranden stil
   blijven staan. Een foto toevoegen = background-image op deze laag. */
.category-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--kaartfoto);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
.category-card:hover .category-card-media::before,
.category-card:focus-visible .category-card-media::before {
  transform: scale(1.045);
}

/* Gedeelde kaderlaag voor alle vier de kaarten. */
.category-card-media::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: inset var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.category-card:hover .category-card-media::after,
.category-card:focus-visible .category-card-media::after {
  inset: 10px;
  border-color: rgba(255, 255, 255, 0.38);
}

/* 1. Bouw- en woonrijp maken — kavelraster */
.category-card--bouw-en-woonrijp .category-card-media {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.085) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px),
    radial-gradient(105% 95% at 78% 10%, rgba(59, 168, 199, 0.55) 0%, transparent 64%),
    linear-gradient(155deg, #10607690 0%, #072b36 100%),
    linear-gradient(#0b4256, #0b4256);
  background-size: 76px 76px, 76px 76px, 19px 19px, 19px 19px, auto, auto, auto;
}

/* 2. Herinrichtingen — diagonale arcering met ontwerpboog */
.category-card--herinrichtingen .category-card-media {
  background-image:
    repeating-linear-gradient(48deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 16px),
    radial-gradient(150% 130% at -12% 112%, transparent 57.2%, rgba(255, 255, 255, 0.42) 57.5%, rgba(255, 255, 255, 0.42) 58.3%, transparent 58.6%),
    radial-gradient(150% 130% at -12% 112%, transparent 71.2%, rgba(255, 255, 255, 0.22) 71.5%, rgba(255, 255, 255, 0.22) 72.1%, transparent 72.4%),
    radial-gradient(105% 95% at 82% 8%, rgba(59, 168, 199, 0.5) 0%, transparent 62%),
    linear-gradient(155deg, #10607690 0%, #072b36 100%),
    linear-gradient(#0b4256, #0b4256);
}

/* 3. Groot onderhoud riolering en wegen — tracé met asmarkering */
.category-card--groot-onderhoud .category-card-media {
  background-image:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.62) 0 28px, transparent 28px 56px),
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 26px),
    radial-gradient(105% 95% at 78% 10%, rgba(59, 168, 199, 0.5) 0%, transparent 62%),
    linear-gradient(155deg, #10607690 0%, #072b36 100%),
    linear-gradient(#0b4256, #0b4256);
  background-size: 100% 2px, 100% 1px, 100% 1px, 100% 100%, auto, auto, auto;
  background-position: 0 58%, 0 38%, 0 78%, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
}

/* 4. Waterbouwkundige projecten — concentrische waterlijnen */
.category-card--waterbouw .category-card-media {
  background-image:
    repeating-radial-gradient(circle at 80% 118%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 30px),
    radial-gradient(105% 95% at 24% 10%, rgba(59, 168, 199, 0.48) 0%, transparent 62%),
    linear-gradient(155deg, #10607690 0%, #072b36 100%),
    linear-gradient(#0b4256, #0b4256);
}

.category-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
}

.category-card-title {
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin-bottom: 0.55rem;
}

.category-card-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.category-card-count::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* De onderstreping is een eigen laag, zodat hij bij hover rustig
   van links naar rechts opnieuw wordt "getrokken" in plaats van
   alleen van kleur te wisselen. */
.category-card-cta {
  position: relative;
  margin-top: auto;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.4rem;
  transition: color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.category-card-cta::before,
.category-card-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
}
.category-card-cta::before { background: var(--line-strong); }
.category-card-cta::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.category-card:hover .category-card-cta {
  color: var(--accent);
  transform: translateX(2px);
}
.category-card:hover .category-card-cta::after,
.category-card:focus-visible .category-card-cta::after { transform: scaleX(1); }

/* ── 13. CATEGORIEPAGINA'S — PROJECTEN ── */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 2.25rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease, gap 0.2s ease;
}
.detail-back::before { content: "←"; }
.detail-back:hover { color: var(--accent); gap: 0.7rem; }

.project-full-list {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  max-width: 940px;
}

.project-full-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 2.6vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20, 24, 26, 0.03);
  transition:
    border-color var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease),
    transform var(--dur-hover) var(--ease);
}
.project-full-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 3px;
  height: 46px;
  background: var(--accent);
}
.project-full-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 16px 34px rgba(20, 24, 26, 0.09);
  transform: translateY(-2px);
}

/* De petrol-maatstreep links op de kaart groeit iets mee. */
.project-full-card::before { transition: height var(--dur-hover) var(--ease); }
.project-full-card:hover::before { height: 62px; }

/* Periode als projectreferentie boven de titel — visueel vooraan,
   zoals een bladnummer op een tekening. De HTML-volgorde blijft
   ongewijzigd; alleen de weergave verschuift. */
.project-full-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.project-full-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.project-full-period {
  order: -1;
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--petrol);
  white-space: nowrap;
}

.project-full-body {
  max-width: 72ch;
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-2);
}

/* ── 13c. CIVIL-TEKSTRONDE — nieuwe tekstelementen ──
   Toegevoegd omdat deze tekstblokken in v4 nog niet bestonden. Bewust binnen
   de bestaande tokens: geen nieuwe kleuren, geen ander lettertype, zelfde
   ritme en dezelfde reveal-timing als de rest van de pagina. */

/* Naamregel onder de herotitel. */
.hero-naam {
  max-width: 44ch;
  margin: -0.4rem 0 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

/* Korte accenten naast de over-tekst: dezelfde kaartjes als de kengetallen op
   de homepage, maar zonder cijfer. */
.over-stats--accenten .stat-item { padding: 1.1rem 1.35rem; }
.over-stats--accenten .stat-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

/* Expertise: drie invalshoeken als rustige kaarten op het papiervlak. */
.expertise-kaart {
  padding: 1.5rem 1.6rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.expertise-kaart-titel {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.expertise-kaart-tekst {
  font-size: 0.93rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Korte categorietekst op de projectkaarten. */
.category-card-desc {
  max-width: 42ch;
  margin: 0 0 1.35rem;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
}
.category-card-count { margin-bottom: 1rem; }

/* De reveals gelden ook voor de nieuwe blokken. */
html.js-motion .expertise-kaart {
  opacity: 0;
  transform: translate3d(0, var(--rise), 0);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
html.js-motion section.is-in .expertise-kaart {
  opacity: 1;
  transform: none;
}
html.js-motion .expertise-kaart:nth-child(1) { transition-delay: 0.1s; }
html.js-motion .expertise-kaart:nth-child(2) { transition-delay: 0.17s; }
html.js-motion .expertise-kaart:nth-child(3) { transition-delay: 0.24s; }

/* ── 13d. PORTRET BIJ OVER MATHIEU ──
   Staande 4:5-uitsnede rechts van de tekst, op mobiel eronder. Geen ronde
   uitsnede, geen losgeknipt figuur: de foto blijft zoals hij is. */
.over-portret {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.over-portret img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* De bovenzijde van het portret ligt gelijk met de eerste alinea, niet met
   het sectielabel of de kop. Daarvoor staan label en kop in een eigen rij
   boven de tekstkolom; het portret begint in de tweede rij. Op mobiel valt
   het raster terug naar een kolom en staat de foto onder de tekst. */
.over-grid--portret {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  /* De kolomruimte blijft zoals hij was; de rijruimte is gelijk aan de
     oude marge onder de sectietitel, zodat er tussen kop en eerste
     alinea niets verandert. */
  column-gap: clamp(2.5rem, 5vw, 5rem);
  row-gap: 1.4rem;
}
.over-grid--portret > .over-kop     { grid-column: 1; grid-row: 1; }
.over-grid--portret > .over-body    { grid-column: 1; grid-row: 2; }
.over-grid--portret > .over-portret { grid-column: 2; grid-row: 2; align-self: start; }

/* ── 13e. CATEGORIEPAGINA — TWEE KOLOMMEN MET BEELD ──
   Desktop: projectteksten links, foto rechtsboven met daaronder het Zie
   ook-blok. Mobiel: foto onder de categorietitel, Zie ook onder de teksten. */
.categorie-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "kop" "foto" "lijst" "zieook";
  gap: clamp(1.75rem, 3vw, 2.5rem);
  max-width: var(--maxw);
}

main > section:first-child:not([class*="hero"]) {
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
}

.categorie-kop { grid-area: kop; }
.categorie-foto { grid-area: foto; }
.project-full-list { grid-area: lijst; }
.zie-ook { grid-area: zieook; }

.categorie-foto {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.categorie-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.zie-ook {
  align-self: start;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}

.zie-ook-kop {
  margin: 0 0 0.9rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.zie-ook ul { list-style: none; margin: 0; padding: 0; }
.zie-ook li + li { border-top: 1px solid var(--line); }

.zie-ook a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
.zie-ook a::after {
  content: "→";
  flex: none;
  color: var(--accent);
  transition: transform var(--dur-hover) var(--ease);
}
.zie-ook a:hover { color: var(--accent); }
.zie-ook a:hover::after { transform: translateX(3px); }

@media (min-width: 901px) {
  .categorie-layout {
    grid-template-columns: minmax(0, 1fr) clamp(260px, 28%, 370px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "kop   foto"
      "lijst foto"
      "lijst zieook";
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 1.75rem;
    align-items: start;
  }
  .project-full-list { max-width: none; }
}

/* ── 13f. ZACHT AFGERONDE HOEKEN ──
   De kaarten hadden scherpe hoeken; het portret vraagt om subtiel afgeronde
   hoeken, en dan horen de overige kaarten hetzelfde te doen. Eén waarde voor
   de hele site, klein genoeg om rustig te blijven. */
.category-card,
.division-feature-card,
.project-full-card,
.stat-item,
.expertise-kaart,
.hero-cta,
.contact-btn { border-radius: var(--radius); }
.category-card-media, .division-feature-media { border-radius: 0; }

/* ── 14. CONTACT — DONKERE ZONE ──
   Alle tekstkleuren hier zijn gekozen op minimaal 4.5:1 contrast
   met de achtergrond; labels en kleine teksten zitten ruim boven
   die grens (ca. 7:1 en hoger). */
#contact {
  position: relative;
  background: var(--night);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}
#contact::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(70% 90% at 88% 6%, rgba(15, 92, 115, 0.55) 0%, transparent 64%);
  background-size: 112px 112px, 112px 112px, auto;
}
#contact > * { position: relative; z-index: 1; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  max-width: var(--maxw);
}

/* Homepage: daar staan twee contactpersonen naast elkaar in de rechter
   kolom. Op brede schermen krijgt die kolom iets meer ruimte, zodat het
   langste e-mailadres op één regel past. De twee personen houden binnen
   die kolom exact dezelfde breedte; onder 1150 pixels valt alles terug
   op de bestaande verdeling en mag een adres gewoon afbreken. */
@media (min-width: 1151px) {
  body:not([data-division]) #contact .contact-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}

#contact .section-label { color: var(--accent-light); }
#contact .section-title { color: #fff; }

.contact-intro {
  max-width: 46ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 2.25rem;
}

.contact-btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.contact-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--petrol-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.contact-btn:active { transform: translateY(0); }

.contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
}
.contact-details--single { grid-template-columns: 1fr; max-width: 34rem; }

.contact-person {
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

/* Enige contactpersoon op de pagina: iets meer nadruk, zodat het
   blok niet als losse kolom aanvoelt. */
.contact-person--primary {
  border-top-color: var(--accent-light);
  border-top-width: 2px;
}

.contact-person-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  margin-bottom: 1.25rem;
}

.contact-item { margin-bottom: 1rem; }
.contact-item:last-child { margin-bottom: 0; }

.contact-item-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9fa8ab;
  margin-bottom: 0.25rem;
}

.contact-item-value {
  font-size: 0.97rem;
  color: #fff;
}
.contact-item-value a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-item-value a:hover {
  color: var(--accent-light);
  border-color: var(--accent-light);
}

#contact :focus-visible { outline-color: #fff; }

/* ── 15. FOOTER ── */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 2.25rem var(--gutter);
  background: var(--night-2);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* De logobestanden zijn zelf transparant. Geen tegel, geen vlak,
   geen padding, geen rand en geen schaduw eromheen: de merkbeelden
   staan rechtstreeks op de ondergrond. */
.footer-logo {
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  flex: none;
}

.footer-copy,
.footer-kvk {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: #a9b0b2;
}
.footer-kvk { max-width: 60ch; }

footer :focus-visible { outline-color: #fff; }

/* ── 16. MOBIEL EN TABLET ── */
@media (max-width: 1080px) {
  .over-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .over-grid--portret { grid-template-rows: auto auto auto; row-gap: clamp(2rem, 5vw, 3rem); }
  .over-grid--portret > .over-kop { margin-bottom: -0.6rem; }
  .over-grid--portret > .over-kop,
  .over-grid--portret > .over-body,
  .over-grid--portret > .over-portret { grid-column: 1; grid-row: auto; }
  .over-stats { padding-left: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* Tussenmaten: iets strakkere letterafstand en tussenruimte in de navigatie,
   zodat de zes ankerlinks ook tussen 1150 en 1400 pixels op één regel blijven
   staan in plaats van te wikkelen. */
@media (min-width: 1151px) and (max-width: 1400px) {
  .nav-links { gap: 1.05rem; flex-wrap: nowrap; }
  .nav-links a { font-size: 0.73rem; letter-spacing: 0.07em; white-space: nowrap; }
  .nav-right { gap: 1.25rem; }
  .division-switch { font-size: 0.68rem; padding: 0.55rem 0.9rem; letter-spacing: 0.06em; }
}

/* Navigatie: met zes ankerlinks naast de divisieknop past de balk pas vanaf
   ongeveer 1150 pixels op één regel. Daaronder het mobiele menu, zodat de
   links niet over twee regels gaan lopen. De rest van de layout wisselt pas
   op 900 pixels; die breekpunten staan daarom los van elkaar. */
@media (max-width: 1150px) {
  .nav-toggle { display: block; }

  .nav-right {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .nav-right[data-open="true"] { display: flex; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
  }
  .nav-links a::after { display: none; }

  /* In het uitgeklapte menu staat de taalwisselaar bovenaan. */
  .taalwissel {
    order: -1;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.8rem;
  }

  .division-switch {
    margin-top: 1.25rem;
    justify-content: center;
    padding: 0.9rem 1.1rem;
  }

}

@media (max-width: 900px) {
  :root { --nav-h: 66px; }

  .divisions-feature-grid,
  .category-card-grid { grid-template-columns: 1fr; }

  .dienst-row { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Mobiel: kortere afstand, kortere duur, geen rasterdrift. Scrollen
   op een telefoon moet vooral soepel blijven. */
@media (max-width: 620px) {
  :root { --rise: 8px; --dur-reveal: 0.55s; }
  html.js-motion .hero-photo-overlay--solid::before { animation: none; }
  html.js-motion .hero-photo-overlay--solid { animation: none; }

  /* Compacter mobiel ritme: kortere beeldvlakken en minder
     verticale lucht, zodat vier categoriekaarten onder elkaar niet
     als een eindeloze, repetitieve reeks aanvoelen. */
  .category-card-media { aspect-ratio: 21 / 9; }
  .category-card-media::after { inset: 10px; }
  .division-feature-media { aspect-ratio: 4 / 3; }

  .category-card-count { margin-bottom: 1.1rem; }

  /* De maatlijn is op 390px te druk naast de tekst; het kader en
     het hoekteken dragen de signatuur daar alleen. */
  .hero-photo { min-height: 0; }

  .section-title { max-width: 22ch; }

  .hero-ctas { gap: 1.1rem 1.75rem; }
  .hero-cta, .contact-btn { width: 100%; text-align: center; }
  .hero-cta-secondary { padding: 0.35rem 0; }

  .contact-details { grid-template-columns: 1fr; }

  footer { flex-direction: column; align-items: flex-start; gap: 1.1rem; }

  .project-full-header { gap: 0.45rem; }
}

/* Aanraakschermen kennen geen hover; de zware hovertransities zijn
   daar dus overbodig. */
@media (hover: none) {
  .category-card:hover,
  .division-feature-card:hover,
  .project-full-card:hover,
  .hero-cta:hover,
  .contact-btn:hover { transform: none; box-shadow: 0 1px 2px rgba(20, 24, 26, 0.04), 0 8px 18px rgba(20, 24, 26, 0.05); }
  .category-card:hover .category-card-media::before { transform: none; }
  .division-feature-card:hover .division-feature-media--foto::before { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .category-card:hover,
  .division-feature-card:hover,
  .project-full-card:hover,
  .hero-cta:hover,
  .contact-btn:hover { transform: none; }
  .category-card:hover .category-card-media::before { transform: none; }
  .division-feature-card:hover .division-feature-media--foto::before,
  .division-feature-card:focus-visible .division-feature-media--foto::before {
    transform: none;
    transition: none;
  }

  /* Niets blijft onzichtbaar wachten op een reveal die niet komt. */
  html.js-motion section .section-label,
  html.js-motion section .section-title,
  html.js-motion section .section-intro,
  html.js-motion section .over-body,
  html.js-motion section .contact-intro,
  html.js-motion section .contact-btn,
  html.js-motion section .detail-back,
  html.js-motion .category-card,
  html.js-motion .division-feature-card,
  html.js-motion .project-full-card,
  html.js-motion .stat-item,
  html.js-motion .contact-person,
  html.js-motion .dienst-row,
    html.js-motion .expertise-kaart {
    opacity: 1 !important;
    transform: none !important;
  }
  html.js-motion #over::before, html.js-motion #diensten::before,
  html.js-motion #expertise::before,
  html.js-motion #projecten::before { transform: scaleX(1) !important; }
  html.js-motion #over::after, html.js-motion #diensten::after,
  html.js-motion #expertise::after,
  html.js-motion #projecten::after { transform: scaleY(1) !important; }
}