/* THE REAL MAG. — Design System
   Primary palette: white base, anthracite ink, burnished copper accent.
   Type: Montserrat (300/400/500/600/700).
   ----------------------------------------------------------------- */

:root {
  /* Brand colors */
  --wit: #ffffff;
  --lichtgrijs: #e6e5e2;
  --grijs-2: #d4d2cd;
  --grijs-3: #8a8884;
  --antraciet: #232021;
  --zwart: #000000;
  --koper: #a07050;
  --koper-licht: #c69072;
  --koper-donker: #7a5238;

  /* Semantic tokens */
  --bg: var(--wit);
  --bg-soft: #fafaf8;
  --bg-warm: #f6f3ef;
  --bg-dark: var(--antraciet);
  --ink: var(--antraciet);
  --ink-muted: #57555a;
  --ink-faint: #8a8884;
  --line: rgba(35, 32, 33, 0.08);
  --line-strong: rgba(35, 32, 33, 0.16);
  --accent: var(--koper);
  --accent-hover: var(--koper-donker);
  --on-dark: var(--wit);

  /* Layout tokens */
  --max-breedte: 1320px;
  --max-breedte-smal: 880px;
  --nav-hoogte: 76px;
  --zijmarge: clamp(20px, 5vw, 56px);
  /* Design system: scherp/vlak — radius 2px, géén ronde pillen (brand_reference.html) */
  --radius-1: 2px;
  --radius-2: 2px;
  --radius-3: 2px;
  --radius-pill: 2px;

  /* Spacing scale */
  --ruimte-0: 0;
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;
  --ruimte-8: 64px;
  --ruimte-9: 96px;
  --ruimte-10: 128px;
  --ruimte-11: 160px;
  --ruimte-12: 192px;

  /* Type scale (fluid) */
  --t-eyebrow: clamp(11px, 0.8vw, 13px);
  --t-body: clamp(15px, 1.1vw, 17px);
  --t-lead: clamp(18px, 1.3vw, 22px);
  --t-h6: clamp(16px, 1.2vw, 18px);
  --t-h5: clamp(20px, 1.6vw, 24px);
  --t-h4: clamp(24px, 2vw, 32px);
  --t-h3: clamp(32px, 3vw, 44px);
  --t-h2: clamp(38px, 4.2vw, 58px);
  --t-h1: clamp(48px, 7vw, 104px);
  --t-display: clamp(64px, 10vw, 160px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --dur-4: 1200ms;

  /* Shadow */
  /* Design system: géén schaduwen — vlak, separatie via 1px borders */
  --schaduw-1: none;
  --schaduw-2: none;
  --schaduw-3: none;
  --schaduw-koper: none;
}

/* Dark theme block — used on .surface-dark */
.surface-dark {
  --bg: var(--antraciet);
  --bg-soft: #2a2728;
  --bg-warm: #2e2a2b;
  --ink: var(--wit);
  --ink-muted: rgba(255,255,255,0.72);
  --ink-faint: rgba(255,255,255,0.5);
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  color: var(--wit);
  background: var(--antraciet);
}

/* -----------------------------------------------------------------
   Reset
----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Geen prefers-reduced-motion-uitzondering: animaties draaien altijd, ook als Windows 'animatie-effecten' uit staat (besluit Christian 05-08-2026). */

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--koper); color: var(--wit); }

/* -----------------------------------------------------------------
   Typography
----------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--ruimte-5);
  color: var(--ink);
}
/* GEEN overflow-wrap: break-word op koppen. Dat hakt een woord middenin af
   zonder koppelteken ("Automatisere / n"), en dat hoort niet op een website.
   hyphens: auto is geen oplossing: deze browsers hebben geen Nederlandse
   afbreekpatronen, dus dat doet niets. De echte fix is dat het woord past --
   zie de kopmaten hieronder -- gecombineerd met min-width: 0 op rasterkinderen,
   zodat een kop de kolom nooit oprekt. */
h1 { font-size: var(--t-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h5 { font-size: var(--t-h5); font-weight: 600; }
h6 { font-size: var(--t-h6); font-weight: 600; }

p { margin: 0 0 var(--ruimte-4); color: var(--ink-muted); }
p.lead { font-size: var(--t-lead); color: var(--ink); font-weight: 300; line-height: 1.55; max-width: 56ch; }
p strong, .strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 var(--ruimte-4);
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-3);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.eyebrow.center::before { display: none; }
/* Claim-familie in een label: "The Real ..." houdt de koperkleur, de omschrijving
   erachter valt terug. currentColor + opacity, zodat het op elke achtergrond klopt. */
.eyebrow .eyebrow-sub { opacity: 0.62; font-weight: 500; }

.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
}


/* -----------------------------------------------------------------
   Layout
----------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-breedte);
  margin-inline: auto;
  padding-inline: var(--zijmarge);
}
.container-narrow { max-width: var(--max-breedte-smal); }

section { padding-block: clamp(64px, 9vw, 144px); position: relative; }
section.tight { padding-block: clamp(48px, 6vw, 96px); }
section.flush-top { padding-top: 0; }
section.flush-bottom { padding-bottom: 0; }

.grid { display: grid; gap: var(--ruimte-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Secties wisselen op desktop links/rechts af. Gestapeld hoort de kop altijd
     eerst, anders opent de sectie met een beeld zonder context. */
  .grid-2 > .media-first { order: 2; }
}

.stack > * + * { margin-top: var(--ruimte-5); }

/* Lijsten zijn geen blokken. `.stack` geeft 24 px, en dat is alinea-afstand; op een lijst van
   eenregelige items maakt dat het blok onnodig hoog en valt het uit elkaar. Vandaar een eigen
   klasse voor de contactblokken (29-08-2026). De prijslijst op /diensten/ heeft helemaal geen
   marge nodig: die rijen dragen hun eigen border-top en padding, en met een marge ertussen
   zweven de scheidingslijnen los. */
.contactlijst { list-style: none; padding: 0; }
.contactlijst > * + * { margin-top: var(--ruimte-2); }

/* Raster- en flexkinderen krimpen standaard niet onder hun langste woord
   (min-width: auto). Eén lang samengesteld woord in een kop rekte de kolom
   daardoor tot 451px op een scherm van 375, waarna je de hele pagina zijwaarts
   kon slepen. min-width: 0 laat de tekst gewoon afbreken. */
.grid > *, .section-head > * { min-width: 0; }

/* Brede tabellen (privacyverklaring) krijgen op een telefoon hun eigen
   horizontale scrollgebied, in plaats van de hele pagina mee te trekken. */
@media (max-width: 720px) {
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Icoonvakje in kaarten. Stond eerder alleen inline in ai-content.html en
   tid.html; de configuratorpagina gebruikte hem zonder definitie, waardoor de
   inline SVG's opbliezen tot de containerbreedte. */
.card-ic {
  width: 46px; height: 46px; flex-shrink: 0;
  border: 1px solid var(--line-strong, #D4D4D0);
  border-radius: var(--radius-2, 2px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-bottom: var(--ruimte-4);
}
/* Vangnet: ook zonder de regel hierboven blijft het icoon klein. */
.card-ic svg { width: 22px; height: 22px; flex: 0 0 auto; }


/* Mobiele carrousel (.m-swipe) + de bijbehorende veeg-hint.
   .swipe-hint staat standaard uit: zonder deze regel schaalt de inline SVG
   (alleen viewBox, geen width/height) mee met de containerbreedte. */
.swipe-hint { display: none; }
@media (max-width: 640px) {
  .m-swipe {
    display: flex; grid-template-columns: none; flex-wrap: nowrap; gap: var(--ruimte-4);
    overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--zijmarge, 24px); -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--zijmarge, 24px)); padding-inline: var(--zijmarge, 24px);
    padding-bottom: var(--ruimte-4); scrollbar-width: none;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { flex: 0 0 80%; scroll-snap-align: start; min-width: 0; }
  .m-swipe > .reveal { opacity: 1; transform: none; }
  .swipe-hint {
    display: flex; align-items: center; gap: var(--ruimte-2);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600; color: var(--ink-faint);
    margin: calc(-1 * var(--ruimte-4)) 0 var(--ruimte-5);
  }
  .swipe-hint svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); }
}

.surface-soft { background: var(--bg-soft); }
.surface-warm { background: var(--bg-warm); }
.surface-dark { background: var(--antraciet); }

/* -----------------------------------------------------------------
   Buttons
----------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--wit);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-3);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--schaduw-koper); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--wit); --btn-bd: var(--ink); box-shadow: none; }

.surface-dark .btn-ghost { --btn-fg: var(--wit); --btn-bd: rgba(255,255,255,0.3); }
.surface-dark .btn-ghost:hover { --btn-bg: var(--wit); --btn-fg: var(--antraciet); --btn-bd: var(--wit); }

.btn-large { padding: 18px 36px; font-size: 15px; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 2px;
}
.btn-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.btn-link:hover::after { transform: scaleX(0); transform-origin: left; }
.btn-link svg { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }

/* -----------------------------------------------------------------
   Navigation
----------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  transition: background var(--dur-2) var(--ease), backdrop-filter var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
  border-top: 3px solid var(--accent); /* koperen accentlijn bovenaan — zoals op de factuur */
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-hoogte);
  /* Met space-between alleen raakten het logo, het menu en de knop elkaar zodra de rij vol
     stond. Deze gap houdt er altijd lucht tussen. (02-09-2026) */
  gap: var(--ruimte-6);
}
/* flex-shrink: 0 op het merk, en niet alleen op het beeld. Zonder dit is het logo een
   flex-item dat mag krimpen zodra de menubalk krap wordt, en dat gebeurde: op 1440 px was
   het logo 65 px breed in plaats van 130, op 800 px zelfs 9,5 px. Het viel niet op omdat de
   cases-generator zijn eigen nav had met width="150" op het beeld; die vaste maat verborg
   het probleem op de enige pagina waar iemand ernaar keek. (02-09-2026) */
.nav-brand { display: flex; align-items: center; gap: var(--ruimte-4); flex: 0 0 auto; }
.nav-brand img { height: 30px; width: 130px; flex: none; transition: transform var(--dur-2) var(--ease); }
.nav-brand:hover img { transform: scale(1.04); }
.nav-tagline {
  display: none; /* clean lockup zoals op de factuur — geen tagline-blok + streepje naast het logo */
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  padding-left: var(--ruimte-4);
  border-left: 1px solid var(--line-strong);
  line-height: 1.2;
  max-width: 16ch;
}
.site-header.is-scrolled .nav-tagline { color: var(--ink-muted); }
@media (max-width: 720px) {
  .nav-tagline { display: none; }
}

.nav-list {
  display: flex;
  align-items: center;
  /* Was ruimte-6 (32px). Met acht menu-items past de rij daarmee niet meer op 1440 px: hij
     liep over en duwde het logo in elkaar. Gemeten op 1440 px: met 20 px hier en ruimte-6
     tussen de drie groepen past hij in beide talen, met 90 px over in het Engels (dat de
     langste labels heeft: Knowledge base). Geen token, want 20 px zit tussen ruimte-4 en
     ruimte-5 in en dat is precies wat het hier nodig heeft.
     Stand 06-10-2026: zeven items (Diensten, 3D Configurator, Inspirator, AI op locatie, Cases,
     Kennisbank, Over ons), Contact staat op de desktop alleen als knop. Gemeten met deze gap: de
     lijst is 689 px breed in het Nederlands en 675 px in het Engels; op 1341 px blijft 67 px
     over tussen de lijst en de knop, op 1440 px 116 px. Komt er een item bij, meet dan opnieuw. */
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Zonder dit krimpen de menu-items zodra de nav krap wordt en breekt de tekst
   binnen een item af, zodat "AI op locatie" onder elkaar komt te staan. */
.nav-list li { flex: 0 0 auto; }
.nav-list a {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 8px 0;
  position: relative;
}
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.nav-list a:hover::after,
.nav-list a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-list a:hover { color: var(--accent); }

/* Dropdown — desktop */
.nav-list .has-dropdown { position: relative; }
.nav-list .has-dropdown > a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 6px;
  vertical-align: middle;
  transition: transform var(--dur-2) var(--ease);
}
.nav-list .has-dropdown:hover > a::before,
.nav-list .has-dropdown:focus-within > a::before,
.nav-list .has-dropdown.is-open > a::before { transform: rotate(225deg) translate(-2px, -2px); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--wit);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: var(--ruimte-3) 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  box-shadow: none; /* DS: vlak — 1px border + wit vlak geven de separatie */
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2), transform var(--dur-2) var(--ease);
}
/* .is-open: zet main.js op aanraakschermen, waar :hover niet bestaat (sectie 2b) */
.nav-list .has-dropdown:hover .nav-dropdown,
.nav-list .has-dropdown:focus-within .nav-dropdown,
.nav-list .has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: block;
  padding: var(--ruimte-3) var(--ruimte-5);
  white-space: nowrap;
  font-size: 14px;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--bg-soft); color: var(--accent); }
.nav-dropdown-divider {
  height: 1px;
  background: var(--line);
  margin: var(--ruimte-2) var(--ruimte-5);
  list-style: none;
  padding: 0;
}
.nav-mobile-sublist .nav-dropdown-divider { display: none; }

.nav-cta { display: flex; align-items: center; gap: var(--ruimte-3); }

.nav-lang {
  display: inline-flex;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.nav-lang button,
.nav-lang a {
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-lang button.is-active,
.nav-lang a.is-active { background: var(--ink); color: var(--wit); }

/* De knop in de header houdt één maat, afgestemd op de langste variant
   ("Start een project"). Anders verspringt de hele header bij het wisselen van
   taal of op een pagina met een andere call-to-action. */
.site-header .nav-cta .btn { min-width: 220px; }
@media (max-width: 1100px) {
  .site-header .nav-cta .btn { min-width: 0; }
}

.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  border-radius: var(--radius-1);
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: var(--nav-hoogte) 0 0 0;
  background: var(--wit);
  z-index: 70;
  padding: var(--ruimte-7) var(--zijmarge) var(--ruimte-9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  /* visibility hoort erbij, anders blijven de links in gesloten stand bereikbaar
     voor de tabtoets en voor een schermlezer. De vertraging is de duur van de
     dichtschuif-animatie, zodat die nog wel te zien is. */
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-3);
  /* Het paneel MOET zelf kunnen scrollen. De menu-items (acht tot 06-10-2026, nu negen) plus
     het contactblok vragen in de compacte zetting 557px, en de hoogte van het paneel is de
     vensterhoogte min de balk. Onder
     circa 640px vensterhoogte viel het contactblok daardoor buiten beeld zonder enige
     manier om erbij te komen, want body.nav-open zet juist de paginascroll uit.
     Gemeten op 375x560 en 375x414 op 3 sep 2026. overscroll-behavior houdt de scroll
     binnen het paneel, zodat de pagina eronder niet meebeweegt. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease), visibility 0s linear 0s;
}
.nav-mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-5);
}
.nav-mobile-list a {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: block;
}
.nav-mobile-list a:hover { color: var(--accent); }
.nav-mobile-sublist {
  list-style: none;
  padding: var(--ruimte-3) 0 var(--ruimte-2) var(--ruimte-5);
  margin: var(--ruimte-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
}
.nav-mobile-sublist a {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-muted);
}
.nav-mobile-sublist a:hover { color: var(--accent); }
.nav-mobile-footer { display: flex; flex-direction: column; gap: var(--ruimte-4); color: var(--ink-muted); font-size: 14px; }
.nav-mobile-footer a { color: var(--ink); font-weight: 500; }

/* Een korte telefoon, en elke telefoon in landschap, heeft niet genoeg hoogte voor de
   ruime zetting van het mobiele menu. Compacter zetten scheelt genoeg om de items
   plus het contactblok wel te laten staan; boven 700px blijft de ruime zetting staan.
   Gemeten 3 sep 2026 met acht items: op 360x640 en 375x560 past alles hierna zonder te
   scrollen, op 375x414 blijft het contactblok bereikbaar via de scroll van het paneel.
   Opnieuw gemeten 06-10-2026 met negen items (Inspirator erbij):
   360x640 en 375x667 passen zonder scrollen; op 375x560 en 375x414 scrolt het paneel en is het
   contactblok na de scroll bereikbaar; op 390x844 scrolt het paneel 24px, maar dat is alleen de
   onderste opvulling: het contactblok staat al helemaal in beeld. */
@media (max-height: 700px) {
  .nav-mobile { padding-top: var(--ruimte-5); padding-bottom: var(--ruimte-6); }
  .nav-mobile-list { gap: var(--ruimte-3); }
  .nav-mobile-list a { font-size: clamp(22px, 5vw, 28px); }
}

body.nav-open { overflow: hidden; }

/* Boven het omslagpunt bestaat het mobiele paneel niet, wat de klassen ook zeggen.
   js/main.js sluit het al via een matchMedia-luisteraar, maar dat is een gebeurtenis en
   die kan uitblijven: in het geautomatiseerde browservenster komt er geen resize- of
   change-gebeurtenis aan terwijl de mediaquery wel omslaat (gemeten met een eigen
   proef-luisteraar op 3 sep 2026, nul gebeurtenissen bij 1400 -> 1200 -> 1500). Bleef het
   paneel dan openstaan, dan lag er een wit vlak over de hele pagina zonder knop om het te
   sluiten, met de paginascroll uit. Deze twee regels maken dat onmogelijk, ongeacht JS.
   Het getal hoort bij de max-width hieronder; wijzig ze samen. */
@media (min-width: 1341px) {
  .nav-mobile,
  .nav-mobile.is-open { display: none; }
  body.nav-open { overflow: visible; }
}

/* Stond op 960px, maar daar paste de desktop-nav niet en brak de tekst binnen een
   menu-item af ("AI op locatie" onder elkaar). Met zes menu-items meette de balk
   circa 1070px inclusief logo en knop, dus ging het omslagpunt naar 1120px.

   OP 1340px GEZET op verzoek van Christian, 3 sep 2026. Passen is niet hetzelfde als
   goed staan: met acht items paste de balk op 1121px technisch nog wel op een regel,
   maar dan staat de rij tegen het logo en de knop aan zonder rustruimte. Onder 1340px
   neemt het mobiele menu dus over. Komt er een item bij of af, meet dan opnieuw, en
   meet dan ook de hoogte van het mobiele paneel na.
   Stand 06-10-2026: zeven items plus de knop; op 1341px blijft 67px over (NL en EN).

   LET OP: de matchMedia-sluiter in js/main.js hoort bij dit getal (daar 1341px). Wijzig
   je hier iets, wijzig dat mee, anders blijft het paneel openstaan boven het omslagpunt. */
@media (max-width: 1340px) {
  .nav-list, .nav-cta .btn { display: none; }
  .nav-burger { display: block; }
}

/* -----------------------------------------------------------------
   Hero
----------------------------------------------------------------- */

.hero {
  position: relative;
  /* expliciet 0: de video loopt door tot achter de header, zodat er geen balk
     boven de animatie staat. Zonder deze regel pakt de generieke section-regel
     (padding-block: clamp(64px, 9vw, 144px)) het over. */
  padding-top: 0;
  padding-bottom: var(--ruimte-6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* warm, net als .page-intro; zichtbaar onder de video, niet erboven. */
  background: var(--bg-warm);
}
.hero-media {
  position: relative;
  width: 100%;
  /* de header hapt geen hoogte meer weg, dus die tellen we erbij op */
  height: calc(56vh + var(--nav-hoogte));
  z-index: 0;
  overflow: hidden;
}
/* Zachte lichtsluier achter de transparante header. Zonder deze laag staat het
   donkere menu op de donkerste frames van de video en valt het weg. Een verloop
   in plaats van een vlak, zodat het geen tweede balk wordt. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--nav-hoogte) + 24px);
  /* Licht van boven naar niets. Stond eerder op 92% over 132px: dat dekte de
     video vrijwel volledig af en las precies als de balk die hier weg moest.
     Nu net genoeg om het donkere menu te laten staan op een licht beeld. */
  background: linear-gradient(to bottom, rgba(246, 243, 239, 0.42) 0%,
                              rgba(246, 243, 239, 0.16) 60%, rgba(246, 243, 239, 0) 100%);
  z-index: 3;
  pointer-events: none;
}
.hero-media video,
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
}
.hero-mark { display: none; }
.hero-mark img { width: 100%; height: auto; }

.hero-inner { position: relative; z-index: 2; margin-top: var(--ruimte-7); text-align: center; }
.hero-inner h1,
.hero-inner .lead { margin-left: auto; margin-right: auto; }
.hero-inner .eyebrow { justify-content: center; }
.hero-inner .eyebrow::before { display: none; }
.hero-inner .hero-actions { justify-content: center; }
.hero-inner .hero-actions .btn { padding: 14px 30px; font-size: 14px; }
#two-worlds { padding-top: var(--ruimte-6); }
.hero .eyebrow, .hero h1, .hero p.lead { text-shadow: 0 1px 3px rgba(255,255,255,0.6), 0 0 2px rgba(255,255,255,0.45); }
.hero h1 {
  font-size: clamp(48px, 8.5vw, 132px);
  letter-spacing: -0.035em;
  line-height: 1.1;
  max-width: 18ch;
  margin-bottom: var(--ruimte-5);
}
.hero h1 .accent { color: var(--accent); }
.mega-cta h2 .accent { color: var(--koper-licht); }
.page-intro h1 .accent { color: var(--accent); }
.service-title .accent { color: var(--accent); }
/* .it was alleen gedefinieerd voor de hero, de mega-cta en de page-intro. In een gewone
   sectiekop deed de klasse dus niets, terwijl hij daar wel gebruikt werd (het machinekamer-blok
   en het blok #waarom op de homepage). Deze basisregel geldt overal; de twee regels verderop
   houden hun eigen kleur. (29-08-2026)

   02-09-2026, besluit Christian: de SCHREEF gaat eruit. Cormorant Garamond stond nergens in
   het design system, niet in brandbook.md en niet in design-tokens.css, en kwam ook nergens
   terug op briefpapier, offertes of presentaties. Er lag dus geen regel onder wanneer hij wel
   en niet verscheen, en dat leverde ruis op in plaats van een accent. Wat .it nog doet is het
   accent in koper zetten, in Montserrat. Cursief is er bewust NIET voor in de plaats gekomen:
   Montserrat wordt zonder cursieve snede geladen, dus dat zou de browser namaak-cursief laten
   tekenen. Wil je later toch een schreef, doe dat dan als uitbreiding van het design system,
   met de letterkeuze, de gewichten en de posities erbij. */
.it { color: var(--accent); }
.hero p.lead { max-width: 56ch; margin-bottom: var(--ruimte-7); }
.hero-actions { display: flex; gap: var(--ruimte-4); flex-wrap: wrap; }
/* Lage/korte viewports: hero met de inhoud laten meegroeien i.p.v. de tekst afsnijden */
@media (max-height: 880px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-hoogte) + var(--ruimte-7)); padding-bottom: var(--ruimte-8); }
  .hero-meta { position: static; margin-top: var(--ruimte-6); padding: 0; }
}

.hero-meta {
  display: none;
  position: absolute;
  left: var(--zijmarge);
  right: var(--zijmarge);
  bottom: var(--ruimte-6);
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--ruimte-6);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  z-index: 2;
}
.hero-meta .scroll {
  display: inline-flex; align-items: center; gap: var(--ruimte-3);
}
.hero-meta .scroll-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.hero-meta .scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: scrollHint 2.2s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 760px) {
  .hero-meta { display: none; }
  .hero { padding-bottom: var(--ruimte-8); }
}

/* -----------------------------------------------------------------
   Section Headers
----------------------------------------------------------------- */

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--ruimte-8);
  margin-bottom: var(--ruimte-9);
  align-items: end;
}
.section-head h2 { margin: 0; }
.section-head .lead { margin: 0; }
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: var(--ruimte-5); margin-bottom: var(--ruimte-7); }
}

/* -----------------------------------------------------------------
   Two Worlds
----------------------------------------------------------------- */

.two-worlds {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.world {
  padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 80px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--ruimte-6);
}
.world-dark {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(160,112,80,0.18), rgba(160,112,80,0) 60%),
    linear-gradient(160deg, #2a2728 0%, #1a1819 100%);
  color: var(--wit);
}
.world-light { background: var(--bg-warm); color: var(--ink); }
.world .eyebrow { color: var(--accent); }
.world-dark .eyebrow { color: var(--koper-licht); }
.world h3 {
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--ruimte-5);
  max-width: 14ch;
}
.world-dark h3 { color: var(--wit); }
.world ul { list-style: none; padding: 0; margin: 0 0 var(--ruimte-5); }
.world ul li {
  border-top: 1px solid var(--line-strong);
  padding: var(--ruimte-4) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ruimte-4);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
}
.world-dark ul li { border-color: rgba(255,255,255,0.12); }
.world ul li:last-child { border-bottom: 1px solid var(--line-strong); }
.world-dark ul li:last-child { border-bottom-color: rgba(255,255,255,0.12); }
.world ul li small { font-weight: 400; opacity: 0.7; font-size: 12px; letter-spacing: 0.04em; }
.world-decor {
  position: absolute;
  right: -10%;
  bottom: -15%;
  width: 70%;
  pointer-events: none;
  opacity: 0.08;
}
.world-light .world-decor { opacity: 0.08; }
@media (max-width: 880px) {
  .two-worlds { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------
   Ticker (social proof)
----------------------------------------------------------------- */

.ticker {
  background: var(--zwart);
  color: var(--wit);
  padding-block: clamp(40px, 4vw, 64px);
  overflow: hidden;
  position: relative;
}
.ticker .marquee {
  display: flex;
  gap: clamp(48px, 6vw, 96px);
  animation: marquee 60s linear infinite;
  width: max-content;
}
.ticker-item {
  /* Was inline-flex met gap. Daardoor kwam er ook ruimte tussen een woord en de
     komma erachter ("bezit , niet huurt"): flex ziet elk tekstdeel als los item.
     Gewone inline-tekst gebruikt de spaties die in de HTML staan, en die kloppen. */
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ticker-item .num { color: var(--accent); font-weight: 700; font-size: 1.2em; }
/* Stond als .ticker-item .sep, een afstammelingselector. Op de homepage staat sep
   op hetzelfde element als ticker-item en op tid.html is het een broertje ernaast,
   dus in beide gevallen matchte hij niets en werd het bolletje nooit getekend.
   .marquee .sep dekt allebei. */
.marquee .sep {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  margin: 0 var(--ruimte-3);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* -----------------------------------------------------------------
   Cards
----------------------------------------------------------------- */

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: var(--ruimte-6);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-2);
  border-color: var(--line-strong);
}

.case-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2);
  background: var(--bg-soft);
  aspect-ratio: 4 / 5;
  transition: transform var(--dur-3) var(--ease);
}
.case-card .media {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #d9d4cd, #b9aea0);
  transform: scale(1.02);
  transition: transform var(--dur-4) var(--ease);
}
.case-card .media img {
  width: 100%; height: 100%; object-fit: cover;
}
.case-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,32,33,0) 30%, rgba(35,32,33,0.78) 100%);
}
.case-card .body {
  position: absolute;
  inset: auto var(--ruimte-5) var(--ruimte-5);
  color: var(--wit);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  z-index: 2;
}
.case-card .client {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.case-card h3 {
  color: var(--wit);
  font-size: clamp(19px, 1.8vw, 26px);
  margin: 0;
  letter-spacing: -0.01em;
}
/* Het resultaat mee in de kaart: cijfer in koper, label eronder in klein wit.
   Zo draagt elke case-kaart zijn bewijs bij zich in plaats van alleen een titel. */
.case-card .metric-inline {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-3);
  margin-top: var(--ruimte-3);
  padding-top: var(--ruimte-3);
  border-top: 1px solid rgba(255,255,255,0.22);
}
.case-card .metric-inline .v {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 20px;
  font-weight: 600;
  color: var(--koper-licht, #C89272);
  letter-spacing: -0.01em;
}
.case-card .metric-inline .l { font-size: 12px; opacity: 0.8; }
.case-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ruimte-3); }
.case-card .tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  text-transform: uppercase;
}
.case-card:hover .media { transform: scale(1.08); }
.case-card .arrow {
  position: absolute;
  top: var(--ruimte-5);
  right: var(--ruimte-5);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: var(--wit);
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  z-index: 2;
}
.case-card:hover .arrow { background: var(--accent); transform: rotate(-45deg); }


/* -----------------------------------------------------------------
   Product (AI spinoff) cards
----------------------------------------------------------------- */

.product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--ruimte-7);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-5);
  background: var(--bg);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  position: relative;
  overflow: hidden;
}
.product-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--schaduw-2); }
.product-card .badge {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.product-card h3 {
  font-size: clamp(28px, 2.4vw, 36px);
  margin: 0;
}
.product-card .payoff {
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 22px);
  color: var(--ink-muted);
  margin: 0;
}
.product-card .features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
}
.product-card .features li {
  font-size: 14px;
  color: var(--ink-muted);
  padding-left: var(--ruimte-5);
  position: relative;
}
.product-card .features li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 14px;
  height: 1px;
  background: var(--accent);
}

/* -----------------------------------------------------------------
   Process / steps
----------------------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-6);
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 26px;
  height: 1px;
  background: var(--line-strong);
  z-index: 0;
}
.process-step { position: relative; z-index: 1; }
.process-step .dot {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: var(--ruimte-5);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.process-step:hover .dot { border-color: var(--accent); background: var(--accent); color: var(--wit); }
.process-step h5 { margin: 0 0 var(--ruimte-2); font-size: 18px; }
.process-step p { font-size: 14px; margin: 0; }
@media (max-width: 880px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .process::before { display: none; }
}
@media (max-width: 480px) {
  .process { grid-template-columns: 1fr; }
  /* Een lange knoptekst ("Ontmoet je Technical Innovation Director") is met
     nowrap breder dan een telefoon en maakt de hele pagina zijwaarts sleepbaar. */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* -----------------------------------------------------------------
   Stats banner
----------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-7);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding-block: clamp(40px, 5vw, 72px);
}
.stat { text-align: left; }
.stat .value {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--ruimte-3);
  display: flex;
  align-items: baseline;
  gap: 0;
}
.stat .value .suffix { font-size: 0.5em; color: var(--accent); font-weight: 500; margin-left: 4px; }
.stat .label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* Onder 560px passen twee kolommen niet meer: een lang label of een groot getal
   duwt het blok breder dan het scherm en de hele pagina gaat horizontaal scrollen.
   Was zichtbaar op /sectoren/retail/ (7px overflow op 375px). */
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------
   Client logo strip
----------------------------------------------------------------- */

.client-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ruimte-6);
  align-items: center;
}
.client-strip .client {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-align: center;
  padding: var(--ruimte-3);
  transition: color var(--dur-2) var(--ease);
}
.client-strip .client:hover { color: var(--ink); }
/* .serif en .condensed staan sinds 29-08-2026 NIET meer op de klantenstrook. Ze zetten vier
   namen in een cursieve serif en twee in een condensed, wat leek op hun echte woordmerk maar
   het niet was. Een benadering van andermans logo die er net naast zit, leest als slordig.
   De klassen blijven staan omdat ze elders bruikbaar zijn; zet ze niet terug op .client-strip
   zonder de logobestanden en toestemming per merk. Let op: sinds 02-09-2026 zet .serif geen
   schreefletter meer, want die is site-breed geschrapt. De naam klopt dus niet meer met wat
   de regel doet; hij staat er alleen nog voor de afwijkende korpsgrootte. */
.client-strip .client.serif {
  font-size: clamp(18px, 1.6vw, 24px);
}
.client-strip .client.condensed { font-stretch: condensed; letter-spacing: -0.01em; font-weight: 700; }
@media (max-width: 880px) { .client-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .client-strip { grid-template-columns: repeat(2, 1fr); } }

/* -----------------------------------------------------------------
   Mega CTA
----------------------------------------------------------------- */

.mega-cta {
  position: relative;
  padding-block: clamp(96px, 12vw, 200px);
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(160,112,80,0.18) 0%, rgba(160,112,80,0) 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(160,112,80,0.12) 0%, rgba(160,112,80,0) 70%),
    var(--antraciet);
  color: var(--wit);
  text-align: center;
}
.mega-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/logo/trm-mark-white.svg') no-repeat center 60% / 70% auto;
  opacity: 0.04;
  pointer-events: none;
}
.mega-cta h2 {
  color: var(--wit);
  font-size: clamp(40px, 6vw, 96px);
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-inline: auto;
}
.mega-cta h2 .it { color: var(--koper-licht); }
.mega-cta p { color: rgba(255,255,255,0.72); font-size: var(--t-lead); max-width: 52ch; margin: 0 auto var(--ruimte-7); }
/* p strong staat op var(--ink), en dat is onleesbaar op de donkere mega-cta. */
.mega-cta p strong { color: var(--wit); }
.mega-cta .actions { display: inline-flex; gap: var(--ruimte-4); flex-wrap: wrap; justify-content: center; }
.mega-cta .quote {
  margin: var(--ruimte-8) auto 0;
  max-width: 56ch;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--koper-licht);
}

/* -----------------------------------------------------------------
   Footer
----------------------------------------------------------------- */

.site-footer {
  background: var(--zwart);
  color: var(--wit);
  padding-block: clamp(64px, 7vw, 96px) var(--ruimte-7);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 36px;
  background: url('../img/logo/trm-wave.svg') repeat-x bottom center / auto 36px;
  opacity: 0.07;
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--ruimte-7);
  margin-bottom: var(--ruimte-8);
}
.footer-brand img { width: 240px; max-width: 100%; }
.footer-brand p { color: rgba(255,255,255,0.62); margin: var(--ruimte-5) 0 0; max-width: 32ch; }
.footer-col h5 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--ruimte-5);
  font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ruimte-3); }
.footer-col a { color: rgba(255,255,255,0.78); font-size: 14px; transition: color var(--dur-2) var(--ease); }
.footer-col a:hover { color: var(--koper-licht); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
  padding-top: var(--ruimte-6);
  border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.footer-bottom .payoff {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------
   Forms
----------------------------------------------------------------- */

.form { display: grid; gap: var(--ruimte-5); }
.field { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.field label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
}
.field input, .field textarea, .field select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  color: var(--ink);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(160,112,80,0.18);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-5); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form .check { display: flex; align-items: flex-start; gap: var(--ruimte-3); font-size: 13px; color: var(--ink-muted); }
.form .check input { width: 18px; height: 18px; }
.form .actions { display: flex; gap: var(--ruimte-4); margin-top: var(--ruimte-3); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--antraciet);
  color: var(--wit);
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  letter-spacing: 0.04em;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  box-shadow: var(--schaduw-3);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Inline bevestiging na verzenden van een lead-formulier. */
.form-success {
  text-align: center;
  padding: clamp(28px, 5vw, 48px) var(--ruimte-6, 24px);
  border: 1px solid var(--lijn, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-2, 16px);
  background: var(--bg-warm, #faf7f3);
  animation: trm-success-in var(--dur-2, 0.3s) var(--ease, ease) both;
}
.form-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--ruimte-5, 16px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, #a07050);
  color: #fff;
}
.form-success-icon svg { width: 28px; height: 28px; }
.form-success-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--antraciet, #1a1a1a);
}
.form-success-text { margin: 0; color: var(--ink-muted, #555); }
@keyframes trm-success-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------
   Page intro
----------------------------------------------------------------- */

.page-intro {
  padding-top: calc(var(--nav-hoogte) + clamp(80px, 10vw, 160px));
  padding-bottom: clamp(56px, 7vw, 112px);
  position: relative;
  overflow: hidden;
  background: var(--bg-warm);
}
.page-intro::after {
  content: '';
  position: absolute;
  right: -8%;
  bottom: -40%;
  width: 60%;
  aspect-ratio: 1;
  background: url('../img/logo/trm-mark-dark.svg') no-repeat center / contain;
  opacity: 0.04;
  pointer-events: none;
}
.page-intro h1 {
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0 0 var(--ruimte-5);
}
.page-intro h1 .it { color: var(--accent); }
.page-intro .lead { max-width: 60ch; }
.breadcrumbs {
  display: flex;
  /* Zonder wrap krimpen de kruimels tot flexitems die smaller zijn dan hun tekst, en
     breekt de tekst BINNEN elke kruimel af. Gemeten 3 sep 2026 op 375px met het
     viertrapspad van de kennisbank: 389px inhoud in 335px ruimte en een balk van 115px
     hoog met afgekapte laatste kruimel. Met wrap is dat 335px en 74px, en blijft elke
     kruimel op een regel. De tweetrapspaden elders raakt dit niet, die passen altijd. */
  flex-wrap: wrap;
  gap: var(--ruimte-3);
  row-gap: var(--ruimte-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: var(--ruimte-7);
}
.breadcrumbs a,
.breadcrumbs > span { white-space: nowrap; }
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { opacity: 0.4; }

/* -----------------------------------------------------------------
   Accordion
----------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--line-strong); }
.accordion-item { border-bottom: 1px solid var(--line-strong); }
.accordion-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: var(--ruimte-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-5);
  font-family: inherit;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.accordion-trigger:hover { color: var(--accent); }
.accordion-trigger .icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  color: var(--ink);
}
.accordion-trigger .icon::before,
.accordion-trigger .icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.accordion-trigger .icon::before { width: 12px; height: 1.5px; }
.accordion-trigger .icon::after { width: 1.5px; height: 12px; }
.accordion-item.is-open .accordion-trigger { color: var(--accent); }
.accordion-item.is-open .accordion-trigger .icon { background: var(--accent); border-color: var(--accent); color: var(--wit); }
.accordion-item.is-open .accordion-trigger .icon::after { opacity: 0; }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-3) var(--ease);
}
.accordion-panel-inner { padding: 0 0 var(--ruimte-6); max-width: 76ch; color: var(--ink-muted); }
.accordion-panel-inner p { margin: 0 0 var(--ruimte-3); }
.accordion-panel-inner p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   Reveal animations
----------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }
.reveal-delay-4 { transition-delay: 360ms; }

.split-text .word {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: bottom;
}
.split-text .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease);
}
.split-text.is-in .word > span { transform: translateY(0); }
.split-text.is-in .word:nth-child(2) > span { transition-delay: 80ms; }
.split-text.is-in .word:nth-child(3) > span { transition-delay: 160ms; }
.split-text.is-in .word:nth-child(4) > span { transition-delay: 240ms; }
.split-text.is-in .word:nth-child(5) > span { transition-delay: 320ms; }
.split-text.is-in .word:nth-child(6) > span { transition-delay: 400ms; }
.split-text.is-in .word:nth-child(7) > span { transition-delay: 480ms; }

/* -----------------------------------------------------------------
   Cookie banner
----------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 20px;
  right: auto;
  bottom: 76px;
  background: var(--antraciet);
  color: var(--wit);
  padding: var(--ruimte-5);
  border-radius: var(--radius-2);
  border: 1px solid rgba(255,255,255,0.16);
  display: block;
  max-width: 340px;
  z-index: 95;
  transform: translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cookie-banner p { color: rgba(255,255,255,0.78); font-size: 13px; margin: 0; }
.cookie-banner .actions { display: flex; gap: var(--ruimte-3); margin-top: var(--ruimte-4); flex-wrap: wrap; }
.cookie-banner button {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--wit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cookie-banner button:hover { background: var(--wit); color: var(--antraciet); }
.cookie-banner button.primary { background: var(--accent); border-color: var(--accent); }
.cookie-banner button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--wit); }
/* het chipje: vast, klein, stil; opent het paneel hierboven */
.cookie-chip {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 96;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wit);
  color: var(--antraciet);
  border: 1px solid var(--border-grey, #D4D4D0);
  border-radius: var(--radius-2);
  cursor: pointer;
  padding: 0;
}
.cookie-chip svg { width: 20px; height: 20px; display: block; }
.cookie-chip:hover, .cookie-chip.is-open { border-color: var(--accent); }
.cookie-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cookie-chip-dot { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.cookie-chip-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: cookiePulse 2.6s ease-out infinite; }
.cookie-chip.has-choice .cookie-chip-dot { display: none; }
@keyframes cookiePulse { 0% { transform: scale(.5); opacity: .7; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
/* Geen prefers-reduced-motion-uitzondering: animaties draaien altijd, ook als Windows 'animatie-effecten' uit staat (besluit Christian 05-08-2026). */
@media (max-width: 720px) {
  .cookie-banner { left: 14px; right: 14px; max-width: none; bottom: 72px; }
  .cookie-chip { left: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* -----------------------------------------------------------------
   Misc
----------------------------------------------------------------- */

.divider {
  border: 0;
  height: 1px;
  background: var(--line-strong);
  margin-block: var(--ruimte-8);
}
.wave-divider {
  height: 28px;
  background: url('../img/logo/trm-wave.svg') repeat-x center / auto 28px;
  opacity: 0.7;
  margin-block: var(--ruimte-5);
}
.surface-dark .wave-divider { opacity: 0.5; filter: brightness(2); }

.kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg-soft);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

.muted { color: var(--ink-muted); }
.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* -----------------------------------------------------------------
   Animaties aan/uit — de bezoeker beslist, niet het besturingssysteem
   -----------------------------------------------------------------
   De site luistert bewust niet naar prefers-reduced-motion: dat zette de
   beleving uit bij iedereen die in Windows animatie-effecten uit had staan,
   ook wie daar geen enkele last van heeft. In plaats daarvan staat er een
   schakelaar in de voettekst (main.js zet hem erin). De keuze staat in
   localStorage 'trm-beweging' en wordt door een klein script in de <head>
   als data-beweging op <html> gezet, vóór de eerste paint - anders zie je
   bij elke pagina eerst een halve seconde beweging die je net had uitgezet.

   Alles hieronder hangt aan data-beweging="uit". Zonder dat attribuut
   verandert er niets, dus dit blok raakt de normale bezoeker niet. */
[data-beweging="uit"] { scroll-behavior: auto; }
[data-beweging="uit"] *,
[data-beweging="uit"] *::before,
[data-beweging="uit"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
/* Vangnet: wat pas zichtbaar wordt via een reveal-klasse moet zonder overgang
   meteen te zien zijn, niet blijven hangen op opacity 0. */
[data-beweging="uit"] .reveal,
[data-beweging="uit"] .split-text,
[data-beweging="uit"] .scrolly-step,
[data-beweging="uit"] .op { opacity: 1 !important; transform: none !important; }
/* Een band die niet meer scrollt is geen band maar een afgesneden rij; laat de
   bezoeker hem dan zelf verschuiven. */
[data-beweging="uit"] .strip { overflow-x: auto; scrollbar-width: thin; }
[data-beweging="uit"] .strip-track { flex-wrap: nowrap; width: max-content; }
[data-beweging="uit"] .fx-progress { display: none; }

/* de schakelaar zelf, in .footer-bottom */
.beweging-knop {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.22em;
}
.beweging-knop:hover { color: rgba(255,255,255,0.8); }
.beweging-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Zichtbare FAQ op /configurator-vergelijken/. De markup stond er al, de tekst niet;
   zonder zichtbare tegenhanger is FAQPage-markup zowel oncitieerbaar als in strijd
   met de richtlijn van Google (GEO-audit 30-08-2026). */
.vgl-faq { margin-top: var(--ruimte-5); border-top: 1px solid var(--lijn); }
.vgl-faq-item { border-bottom: 1px solid var(--lijn); }
.vgl-faq-item > summary {
  cursor: pointer; list-style: none; padding: var(--ruimte-4) 0;
  font-weight: 500; display: flex; justify-content: space-between; gap: var(--ruimte-3);
}
.vgl-faq-item > summary::-webkit-details-marker { display: none; }
.vgl-faq-item > summary::after { content: "+"; color: var(--accent); flex: 0 0 auto; }
.vgl-faq-item[open] > summary::after { content: "\2013"; }
.vgl-faq-item > p { padding: 0 0 var(--ruimte-4); margin: 0; max-width: 68ch; }

/* De citeerbare meetalinea op een casepagina. Staat bewust boven de teaser: het
   resultaat voor de uitdaging (GEO-audit 30-08-2026). */
.case-bewijs {
  max-width: 62ch; margin: var(--ruimte-4) 0 0;
  font-size: 1.0625rem; line-height: 1.65; color: var(--tekst);
  border-left: 2px solid var(--accent); padding-left: var(--ruimte-4);
}

/* ---- Kernzin-h1 op de homepage (22-09-2026). "The marketing agency," is 21 tekens, de
   oude kop 8 en 11; op de gedeelde maat van .hero h1 wikkelt dat naar drie regels. Alleen
   de homepage draagt deze klasse, de vijf andere hero's houden de gedeelde maat. */
.hero h1.h1-kernzin { font-size: clamp(48px, 7.5vw, 104px); max-width: 24ch; }
/* Onder 414 px viel de kop op 48 px in vier regels, met 'The' alleen bovenaan (gemeten op
   320, 340, 360, 375 en 384 px). Vloeiend kleiner tot 48 px bij 414 px: overal drie regels. */
@media (max-width: 413px) { .hero h1.h1-kernzin { font-size: min(48px, 11.6vw); } }

/* ---- Homepage-hero met de tekst boven de film (23-09-2026). Op 1280x720, 1366x768 en
   1536x864 en op de meeste telefoons stonden kernzin en knoppen onder de vouw, omdat de
   filmband eerst kwam. Nu staan kop, kernzin en knoppen eerst en loopt de film eronder het
   beeld in. Alleen de homepage draagt deze klasse; de andere hero's houden de film boven. */
.hero.hero--tekst-eerst { padding-top: calc(var(--nav-hoogte) + var(--ruimte-7)); padding-bottom: 0; }
.hero.hero--tekst-eerst::before { display: none; }
.hero--tekst-eerst .hero-inner { margin-top: 0; }
.hero--tekst-eerst .hero-media { height: 62vh; min-height: 280px; margin-top: var(--ruimte-7); }
/* De kernzin als ondertitel: gewone zinsbouw, leesbare maat, antraciet (ruim boven 4,5:1).
   Tot 23-09 stond hij als eyebrow: 11 tot 13 px, kapitalen, koper met contrast 3,85:1. */
.hero-kernzin { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; font-weight: 400;
  color: var(--ink); max-width: 40ch; margin: 0 auto var(--ruimte-6); }
.hero-kernzin strong { font-weight: 600; }

/* ---- Tabelpatroon. Bron was het inline <style>-blok van tid.html (.uc-tabel, ongewijzigd
   overgenomen 22-09-2026); tid.html draagt dezelfde regels nog inline, daar mag het weg
   zodra iemand die pagina toch aanraakt. Geen tweede tabelpatroon bedenken. */
.uc-tabel { width: 100%; border-collapse: collapse; margin-top: var(--ruimte-2); }
.uc-tabel caption { text-align: left; font-size: 13px; color: var(--ink-faint); padding-bottom: var(--ruimte-3); }
.uc-tabel thead th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; padding: 0 0 var(--ruimte-3); border-bottom: 1px solid var(--line); }
.uc-tabel thead th:last-child { text-align: right; }
.uc-tabel tbody th { text-align: left; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink); padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.uc-tabel td { border-bottom: 1px solid var(--line); padding: var(--ruimte-4) 0; vertical-align: top; }

/* Het vergelijkingsblok op de homepage: drie tekstkolommen, de TRM-kolom draagt het gewicht. */
/* Geen lead in deze sectiekop, dus geen lege tweede kolom: de h2 mag de volle breedte nemen. */
/* Sinds 23-09-2026 met de uitleg uit de hero in de rechterkolom, twee alinea's. Die kolom is hoger
   dan de kop, dus de kop bovenaan uitlijnen: met de algemene align-items:end zakte hij weg naast de
   tekst en bleef linksboven een gat (Christian 24-09, "rare formatting"; gemeten 104 px op 1440). */
#verschil .section-head { margin-bottom: var(--ruimte-7); align-items: start; }
#verschil .section-head .lead + .lead { margin-top: var(--ruimte-4); }
#verschil .uc-tabel { max-width: 1040px; margin-left: auto; margin-right: auto; }
#verschil .uc-tabel caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Lopende tekst in deze tabel op --ink-muted (7,4:1 op wit); --ink-faint haalde 3,5:1 en
   zakt daarmee onder de 4,5:1 die WCAG AA voor tekst van deze maat vraagt. */
#verschil .uc-tabel thead th { color: var(--ink-muted); }
#verschil .uc-tabel thead th:last-child { text-align: left; color: var(--accent); }
#verschil .uc-tabel thead th:first-child { color: transparent; }
#verschil .uc-tabel tbody th { width: 22%; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
#verschil .uc-tabel td { width: 39%; font-size: 16px; line-height: 1.5; padding-right: var(--ruimte-5); }
#verschil .uc-tabel td:first-of-type { color: var(--ink-muted); }
#verschil .uc-tabel td:last-child { color: var(--ink); font-weight: 500; padding-right: 0; }
#verschil .vgl-bewijs { max-width: 1040px; margin: var(--ruimte-4) auto 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
#verschil .vgl-bewijs::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: var(--ruimte-3); }
/* Mobiel, ontwerp Astra 24-09-2026 (Christian: "op mobiel heel onleesbaar"). De rijnaam wordt de kop,
   daaronder twee waarden met een kort label (data-kolom-mobiel: Traditioneel / THE REAL MAG.) in
   plaats van drie regels kleine kapitalen; onze waarde zwaarder met een koperen lijn ervoor. De tabel
   houdt ARIA-rollen in de HTML, want display:block haalt de tabelsemantiek weg. */
@media (max-width: 720px) {
  #verschil .uc-tabel { display: block; width: 100%; }
  #verschil .uc-tabel thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  #verschil .uc-tabel tbody { display: block; width: 100%; }
  #verschil .uc-tabel tbody tr { display: block; padding: var(--ruimte-5) 0; border-bottom: 1px solid var(--line); }
  #verschil .uc-tabel tbody th,
  #verschil .uc-tabel tbody td {
    display: block; box-sizing: border-box; width: auto; margin: 0; padding: 0; border: 0;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  #verschil .uc-tabel tbody th {
    margin-bottom: var(--ruimte-4); font-size: 17px; line-height: 1.35; font-weight: 600;
    letter-spacing: normal; text-transform: none; color: var(--ink);
  }
  #verschil .uc-tabel tbody td {
    padding-left: calc(var(--ruimte-3) + 2px); font-size: 15px; line-height: 1.5; font-weight: 400;
    letter-spacing: normal; text-transform: none;
  }
  #verschil .uc-tabel tbody td:first-of-type { color: var(--ink-muted); }
  #verschil .uc-tabel tbody td + td { margin-top: var(--ruimte-4); }
  #verschil .uc-tabel tbody td:last-child {
    padding-left: var(--ruimte-3); padding-right: 0; border-left: 2px solid var(--accent);
    font-size: 16px; font-weight: 600; color: var(--ink);
  }
  #verschil .uc-tabel tbody td::before {
    content: attr(data-kolom-mobiel); display: block; margin-bottom: var(--ruimte-1);
    font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: normal; text-transform: none;
    color: var(--ink-muted);
  }
  #verschil .uc-tabel tbody td:last-child::before { color: var(--accent); }
}

/* De MAG's op over-ons (24-09-2026). Het blok wordt gegenereerd door site_mags.py naast het
   organigram (tussen MAGS:START en MAGS:END in over-ons.html); hier alleen de opmaak.
   Ontwerp Astra 24-09: rij per afdeling (kop 280 px links, collega's rechts in 4/3/2 kolommen),
   portret 40 px (mobiel 36), naam 14 en functie 13 px, geen afdelingsdoel. Kop en inleiding volgen
   de gewone .section-head, maar bovenaan uitgelijnd. Lange Nederlandse woorden breken af
   (min-width: 0 plus overflow-wrap en hyphens), anders liep de pagina op 390 px 41 px over. */
#mags { padding-block: 80px; }
#mags .section-head { align-items: start; margin-bottom: var(--ruimte-7); }
#mags .mags-mail { margin: var(--ruimte-4) 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
#mags .mags-mail a {
  color: var(--koper);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
#mags .mags-mail a:hover { text-decoration-thickness: 2px; }
.mags-afdeling {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.mags-kop { min-width: 0; }
.mags-kop h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.mags-onder {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--koper);
}
.mags-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 20px 16px;
}
.mag { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; }
.mag img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); }
.mag-tekst { min-width: 0; }
.mag-naam { display: block; font-size: 14px; font-weight: 600; line-height: 18px; color: var(--ink); overflow-wrap: anywhere; }
.mag-functie {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 1099px) {
  #mags { padding-block: 64px; }
  .mags-afdeling { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mags-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #mags { padding-block: 48px; }
  .mags-afdeling { gap: 20px; padding-block: 24px; }
  .mags-kop h3 { font-size: 24px; }
  .mags-onder { margin-top: 8px; }
  .mags-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mag { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .mag img { width: 36px; height: 36px; }
}

/* Inspirator-sectie op /3d-configurator/ (06-10-2026): brede demo-kaart boven twee keuzekaarten.
   Antracietpaneel met tekst naast het beeld in plaats van tekst over het beeld, zodat de deuren in beeld vrij blijven.
   Vlak, 2px radius, geen schaduw; koper alleen op het label en de knop. */
.insp-demo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--antraciet);
  color: var(--wit);
  border-radius: var(--radius-2);
  overflow: hidden;
  text-decoration: none;
}
.insp-demo .body {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--ruimte-4);
  padding: var(--ruimte-7);
}
.insp-demo .client {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--koper-licht);
}
.insp-demo :is(h2, h3) {
  margin: 0;
  color: var(--wit);
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.01em;
}
.insp-demo .insp-feiten {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}
.insp-demo .btn { margin-top: var(--ruimte-2); }
.insp-demo:hover .btn { background: var(--accent-hover); border-color: var(--accent-hover); }
.insp-demo:hover .btn svg { transform: translateX(3px); }
.insp-demo .media {
  order: 2;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #d9d4cd, #b9aea0);
}
.insp-demo .media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform var(--dur-4) var(--ease);
}
.insp-demo:hover .media img { transform: scale(1.05); }
@media (max-width: 899px) {
  .insp-demo { grid-template-columns: minmax(0, 1fr); }
  .insp-demo .media { order: 1; }
  .insp-demo .body { order: 2; padding: var(--ruimte-6) var(--ruimte-5); }
}

/* Sectie 'Probeer het zelf' (#probeer) op /3d-configurator/ (06-10-2026): de demo-kaart hierboven in de variant 'staand',
   sinds 08-10-2026 vier als 2 x 2 in een grid-2 (banken, deuren, blik, geschenkkist). Beeld boven de tekst, op 16:10: het is een
   schermafdruk van de hele configurator, in 3:2 viel de rechterrand van het keuzepaneel weg. De knop zakt naar de onderkant,
   zodat de knoppen op een lijn staan. */
#probeer .insp-demo .media { aspect-ratio: 16 / 10; }
.insp-demo.staand { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.insp-demo.staand .media { order: 1; aspect-ratio: 16 / 10; }
.insp-demo.staand .body { order: 2; justify-content: flex-start; padding: var(--ruimte-6); }
.insp-demo.staand :is(h2, h3) { font-size: clamp(20px, 1.7vw, 26px); }
.insp-demo.staand .btn { margin-top: auto; }
@media (max-width: 899px) {
  .insp-demo.staand .body { padding: var(--ruimte-6) var(--ruimte-5); }
}
/* Op tablet (641-1024px) wordt de grid-3 twee kolommen. Een oneven laatste kaart (de derde) hangt dan alleen op de tweede
   rij; die neemt de volle breedte, beeld links ingelijst en verticaal gecentreerd (de tekst is hoger dan een 16:10-beeld op halve
   breedte, zonder lijst bleef er een lege strook onder het beeld), tekst rechts (07-10-2026). */
@media (min-width: 641px) and (max-width: 1024px) {
  #probeer .grid-3 > .insp-demo.staand:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: var(--ruimte-6);
    padding: var(--ruimte-5);
  }
  #probeer .grid-3 > .insp-demo.staand:last-child:nth-child(odd) .media { align-self: center; border-radius: var(--radius-2); }
  #probeer .grid-3 > .insp-demo.staand:last-child:nth-child(odd) .body { justify-content: center; padding: 0; }
  #probeer .grid-3 > .insp-demo.staand:last-child:nth-child(odd) .btn { margin-top: var(--ruimte-2); }
}

/* Pagina /inspirator/ (06-10-2026): hero met het tabletbeeld naast de tekst, de drie wissel-beelden en de actieknoppen.
   De demo-kaart (.insp-demo) staat hierboven bij de sectie op /3d-configurator/; deze klassen zijn alleen voor de eigen pagina. */
.insp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--ruimte-8);
  align-items: center;
}
.insp-hero h1 { font-size: clamp(34px, 4.4vw, 66px); max-width: 13ch; }
.insp-hero .lead { max-width: 48ch; }
.insp-actions { display: flex; flex-wrap: wrap; gap: var(--ruimte-4); margin-top: var(--ruimte-6); }
.insp-hero-beeld { margin: 0; position: relative; z-index: 1; }
.insp-hero-beeld img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: var(--wit);
}
.insp-hero-beeld figcaption { margin-top: var(--ruimte-3); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-muted); }
.insp-wissel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ruimte-5); }
.insp-wissel figure { margin: 0; }
.insp-wissel img { display: block; width: 100%; height: auto; border-radius: var(--radius-2); background: var(--bg-warm); }
.insp-wissel figcaption {
  margin-top: var(--ruimte-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 899px) {
  .insp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-7); }
  .insp-hero h1 { max-width: none; }
}
@media (max-width: 640px) {
  .insp-wissel { grid-template-columns: minmax(0, 1fr); }
}
/* De drie kaarten van 'Waarvoor' (06-10-2026): op twee kolommen, tablet, staat de derde anders alleen op een rij. Laat die dan de volle breedte nemen. */
@media (min-width: 641px) and (max-width: 1024px) {
  .insp-waarvoor > :last-child { grid-column: 1 / -1; }
}