/* 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(40px, 4.5vw, 64px);
  --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; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

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);
}
/* Lange samengestelde woorden mogen een kop nooit breder maken dan het scherm.
   "consumentenspeeltje" duwde de configuratorpagina op een telefoon 96px opzij,
   waardoor je de hele pagina zijwaarts kon slepen langs een lege strook.
   break-word grijpt alleen in als het woord anders echt niet past. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
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;
}

.serif-it { font-family: 'Cormorant Garamond', 'Georgia', serif; font-style: italic; font-weight: 500; }

/* -----------------------------------------------------------------
   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; }
}

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

/* 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; }

/* 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);
}
.nav-brand { display: flex; align-items: center; gap: var(--ruimte-4); }
.nav-brand img { height: 30px; width: auto; 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;
  gap: var(--ruimte-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  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 { 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);
}
.nav-list .has-dropdown:hover .nav-dropdown,
.nav-list .has-dropdown:focus-within .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;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
.nav-mobile.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.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; }

body.nav-open { overflow: hidden; }

@media (max-width: 960px) {
  .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) + 56px);
  background: linear-gradient(to bottom, rgba(246, 243, 239, 0.92) 0%,
                              rgba(246, 243, 239, 0.55) 55%, 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); }
.hero h1 .it { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.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 {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ruimte-4);
  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; }
.ticker-item .sep {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  align-self: center;
  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(22px, 2vw, 30px);
  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); }

.sector-card {
  position: relative;
  border-radius: var(--radius-2);
  overflow: hidden;
  padding: var(--ruimte-7) var(--ruimte-6);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--antraciet);
  color: var(--wit);
  isolation: isolate;
  transition: transform var(--dur-3) var(--ease);
}
/* De sectorfoto lag op z-index -1 en werd daardoor door de eigen kaartachtergrond
   afgedekt: de kaarten waren dichte antracietvlakken. De lagen staan nu op
   0 (foto) / 1 (verloop) / 2 (tekst), zodat het beeld echt zichtbaar is. */
.sector-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.92;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-4) var(--ease);
}
.sector-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,32,33,0.10) 0%, rgba(35,32,33,0.55) 45%, rgba(35,32,33,0.92) 100%);
  z-index: 1;
  transition: opacity var(--dur-3) var(--ease);
}
.sector-card > * { position: relative; z-index: 2; }
.sector-card:hover img { transform: scale(1.04); opacity: 1; }

/* Bewijsband op de sectorpagina's: het sectorbeeld schermvullend, met een
   claim erover. De media-laag is bewust hoger dan de sectie zelf, zodat de
   parallax uit fx.js kan bewegen zonder randen te tonen. */
.sector-band {
  position: relative;
  overflow: hidden;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  padding: var(--ruimte-9) 0;
  background: var(--antraciet);
}
.sector-band-media { position: absolute; inset: -10% 0; z-index: 0; }
.sector-band-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.sector-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(35,32,33,0.15) 0%, rgba(35,32,33,0.55) 55%, rgba(35,32,33,0.9) 100%);
}
.sector-band-inner { position: relative; z-index: 2; }
.sector-band-inner .eyebrow { color: var(--koper-licht); }
.sector-band-claim {
  color: var(--wit);
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 24ch;
  margin: 0;
}
@media (max-width: 640px) { .sector-band { min-height: 38vh; } }
.sector-card h4 {
  color: var(--wit);
  font-size: clamp(24px, 2vw, 32px);
  margin: 0 0 var(--ruimte-2);
}
.sector-card p { color: rgba(255,255,255,0.78); margin: 0; }
.sector-card:hover { transform: translateY(-4px); }
.sector-card:hover img { transform: scale(1.06); }
.sector-card:hover::after { opacity: 0.7; }
.sector-card .number {
  position: absolute;
  top: var(--ruimte-5);
  left: var(--ruimte-6);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--koper-licht);
  z-index: 2;
}

/* -----------------------------------------------------------------
   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-family: 'Cormorant Garamond', serif;
  font-style: italic;
  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; }
}

/* -----------------------------------------------------------------
   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); } }

/* -----------------------------------------------------------------
   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); }
.client-strip .client.serif {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  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 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; 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); }
.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-family: 'Cormorant Garamond', serif;
  font-style: italic;
  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 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--accent); }
.page-intro .lead { max-width: 60ch; }
.breadcrumbs {
  display: flex;
  gap: var(--ruimte-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: var(--ruimte-7);
}
.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; } }
@media (prefers-reduced-motion: reduce) { .cookie-chip-dot::after { animation: none; } }
@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; }