/* ============================================================
   DE BUSINESS ACHTER MINDFULNESS — VISUEEL WIREFRAME
   Stylesheet gebaseerd op styleguide_natuur_business.html
   Eerste designvoorstel — Argentumpress
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* === BOS === */
  --forest-deep:  #1a2e1c;
  --forest-mid:   #2d4a30;
  --forest-light: #4a7c50;
  --moss:         #6b8f5e;
  --sage:         #9ab895;
  --mist:         #c8d9c4;
  --birch:        #e8ede6;
  /* === WATER === */
  --water-deep:   #1c3040;
  --water-mid:    #2e5068;
  /* === AARDE / PAPIER === */
  --bark:         #5c3d28;
  --clay:         #a0664a;
  --sand:         #d4b896;
  --paper:        #f2ead8;
  --cream:        #faf6ee;
  /* === NEUTRAAL === */
  --coal:         #1a1a18;
  --graphite:     #3a3a36;
  --slate:        #6b6b65;
  --smoke:        #a8a89e;
  --linen:        #ede8df;
  /* === RISO === */
  --riso-red:     #e84855;
  --riso-yellow:  #f5c618;
  --riso-teal:    #3dbfb8;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 32px; --space-xl: 64px; --space-2xl: 112px;

  --col-text: 1160px;
  --col-wide: 1160px;
  --col-max:  1160px;
  --gutter:   56px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--coal);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Korrel-overlay over de hele pagina */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
}

/* ============================================================
   LAYOUT PRIMITIVES
============================================================ */
.wrap      { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--gutter); }
.text      { max-width: var(--col-text); margin: 0 auto; padding: 0 var(--gutter); }

.block { padding: var(--space-2xl) 0; }

.section-cream { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-cream + .section-paper,
.section-paper + .section-cream { border-top: 1px solid rgba(26,46,28,0.07); }

/* Donkere, gelaagde Vox-sectie */
.vox {
  position: relative;
  background: var(--forest-deep);
  color: var(--birch);
  overflow: hidden;
}
.vox > .vox-layers { position: absolute; inset: 0; pointer-events: none; }
.vox-l1 { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 12% 88%, rgba(74,124,80,0.45) 0%, transparent 55%); }
.vox-l2 { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 70% at 88% 12%, rgba(74,122,155,0.3) 0%, transparent 52%); }
.vox-l3 { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 20px, rgba(255,255,255,0.015) 20px 21px); }
.vox-l4 { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(26,46,28,0.85), transparent); }
.vox > .wrap, .vox > .wrap-wide, .vox > .text { position: relative; z-index: 2; }

/* ============================================================
   TYPOGRAFIE
============================================================ */
.body-text {
  font-family: var(--font-body);
  font-size: 19px; font-weight: 300; line-height: 1.8;
  color: var(--graphite);
  text-wrap: pretty;
  text-align: justify;
}
.body-text + .body-text { margin-top: var(--space-md); }
.body-text strong { font-weight: 500; color: var(--coal); }
.vox .body-text { color: var(--mist); }
.vox .body-text strong { color: var(--birch); }

/* ============================================================
   RODE DRAAD — Travelbase (rood ●) vs lokaal (groen ●)
============================================================ */
.thread {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.thread::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.thread--tb { color: var(--riso-red); }
.thread--tb::before { background: var(--riso-red); }
.thread--local { color: var(--forest-light); }
.thread--local::before { background: var(--forest-light); }
.vox .thread--local { color: var(--moss); }
.vox .thread--local::before { background: var(--moss); }

/* ============================================================
   MEDIA-SLOT
============================================================ */
.slot {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--forest-deep);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.slot::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 5px 5px;
  mix-blend-mode: screen;
}
.slot:has(.slot__img)::before,
.slot:has(.slot__video)::before { display: none; }
.slot:has(.slot__img)::after,
.slot:has(.slot__video)::after { display: none; }
.slot::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 90% at 30% 70%, rgba(74,124,80,0.5) 0%, transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.025) 12px 13px);
}
.slot__inner { position: relative; z-index: 2; padding: var(--space-lg); width: 100%; }

.slot__badge {
  position: absolute; top: var(--space-md); left: var(--space-md); z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coal); background: var(--riso-yellow);
  padding: 5px 10px; border-radius: 2px;
}
.slot__badge .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--coal); }
.slot__badge--inline { position: static; }

.slot--bleed  { min-height: 70vh; }
.slot--wide   { aspect-ratio: 16 / 9; }
.slot--tall   { aspect-ratio: 3 / 4; }
.slot--square { aspect-ratio: 1 / 1; }
.slot--banner { aspect-ratio: 21 / 9; }

.slot__desc {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 20px); font-weight: 700; line-height: 1.25;
  color: var(--birch); max-width: 460px;
}

.slot[data-type="video"] { background: var(--water-deep); }
.slot[data-type="video"]::after {
  background:
    radial-gradient(ellipse 80% 90% at 40% 60%, rgba(74,122,155,0.55) 0%, transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.025) 12px 13px);
}

.slot__img,
.slot__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.slot__video { opacity: 0.6; transition: opacity 0.3s; }
.slot--playing .slot__video { opacity: 1; }

.slot__badge,
.slot__inner { transition: opacity 0.2s; }
.slot--playing .slot__badge,
.slot--playing .slot__inner { opacity: 0; pointer-events: none; }
.slot--playing .slot__play  { display: none; }

.slot__controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.slot--playing .slot__controls { opacity: 1; pointer-events: auto; }

.slot__ctrl-toggle {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.8); background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.slot__ctrl-toggle[data-state="playing"]::after {
  content: ''; display: block; width: 10px; height: 12px;
  background: linear-gradient(to right,
    rgba(255,255,255,0.9) 0, rgba(255,255,255,0.9) 3px,
    transparent 3px, transparent 7px,
    rgba(255,255,255,0.9) 7px, rgba(255,255,255,0.9) 10px);
}
.slot__ctrl-toggle[data-state="paused"]::after {
  content: ''; display: block; width: 0; height: 0; margin-left: 3px;
  border-left: 10px solid rgba(255,255,255,0.9);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

.slot__progress {
  flex: 1; height: 4px; background: rgba(255,255,255,0.3);
  border-radius: 2px; cursor: pointer; position: relative;
  padding: 8px 0; margin: -8px 0; box-sizing: content-box;
}
.slot__progress-fill {
  position: absolute; left: 0; top: 8px; height: 4px;
  background: #fff; border-radius: 2px; width: 0;
  pointer-events: none; transition: none;
}

.slot__ctrl-time {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.8); white-space: nowrap;
}

.slot__ctrl-fs {
  flex-shrink: 0; width: 28px; height: 28px;
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.slot__ctrl-fs::before {
  content: '';
  display: block; width: 14px; height: 14px;
  border: 1.5px solid rgba(255,255,255,0.8);
  box-shadow: inset 0 0 0 3px transparent;
  background:
    linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)) top 0 left 0 / 4px 1.5px no-repeat,
    linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)) top 0 left 0 / 1.5px 4px no-repeat,
    linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)) bottom 0 right 0 / 4px 1.5px no-repeat,
    linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)) bottom 0 right 0 / 1.5px 4px no-repeat;
  border: none;
}

.slot__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.slot__play::after {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-left: 16px solid rgba(255,255,255,0.85);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}

/* fotoreportage-strip */
.reportage {
  display: grid; gap: var(--space-sm);
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(180px, 1fr));
}
.reportage .slot:nth-child(1) { grid-row: span 2; aspect-ratio: auto; }
.reportage .slot { min-height: auto; aspect-ratio: 4 / 3; }

.slot__caption {
  font-family: var(--font-mono);
  font-size: 9px; color: var(--smoke);
  padding: 3px 0 0; line-height: 1.4; letter-spacing: 0.04em;
}
.slot__caption .credit { font-style: italic; }

.expert__credit {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--smoke); font-style: italic;
  margin-top: 5px; text-align: left;
}

/* ============================================================
   SPLIT-KOLOM — Travelbase links / lokaal rechts
============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg);
  max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--gutter);
}
.split__col { padding: var(--space-lg); border-radius: 4px; }
.split__col--tb {
  border-left: 3px solid var(--riso-red);
  background: linear-gradient(to right, rgba(232,72,85,0.05), transparent 40%);
}
.split__col--local {
  border-left: 3px solid var(--forest-light);
  background: linear-gradient(to right, rgba(74,124,80,0.06), transparent 40%);
}
.split__price {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 52px); font-weight: 900; line-height: 1;
  margin: var(--space-sm) 0 2px;
}
.split__col--tb    .split__price { color: var(--riso-red); }
.split__col--local .split__price { color: var(--forest-light); }
.split__price small { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--slate); }
.split__body { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--graphite); margin-top: var(--space-sm); text-align: justify; }
.split__body strong { font-weight: 500; color: var(--coal); }
.vox .split__body { color: var(--mist); }
.vox .split__body strong { color: var(--birch); }
.vox .split__col--tb    { background: linear-gradient(to right, rgba(232,72,85,0.14), transparent 40%); }
.vox .split__col--local { background: linear-gradient(to right, rgba(107,143,94,0.18), transparent 40%); }

/* ============================================================
   EXPERT-KAART
============================================================ */
.expert {
  background: var(--paper);
  border: 1px solid rgba(92,61,40,0.16);
  border-left: 4px solid #005194;
  border-radius: 4px;
  padding: var(--space-lg);
  overflow: hidden;
  position: relative;
  display: grid; grid-template-columns: 132px 1fr; gap: var(--space-lg); align-items: start;
}
.expert::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.expert--wederhoor { border-left-color: #005194; }
.expert__col { position: relative; z-index: 1; }
.expert__portrait {
  aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden;
  background: var(--forest-mid); position: relative;
}
.expert__portrait::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 4px 4px; mix-blend-mode: screen;
}
.expert__portrait::after {
  content: 'PORTRET'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--sage);
}
.expert__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.expert__portrait:has(img)::before,
.expert__portrait:has(img)::after { display: none; }

.expert__index { font-family: var(--font-mono); font-size: 11px; color: #005194; margin-bottom: var(--space-sm); letter-spacing: 0.08em; }
.expert__name  { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; line-height: 1.1; color: var(--forest-deep); margin-bottom: 4px; }
.expert__inst  { font-size: 13px; color: var(--slate); margin-bottom: var(--space-md); }

.section-paper .expert { background: var(--cream); }
.section-cream .expert { background: var(--paper); }

/* ============================================================
   DATA-CALLOUT
============================================================ */
.callout {
  background: var(--forest-deep); color: var(--birch);
  padding: var(--space-lg); border-radius: 4px; position: relative; overflow: hidden;
}
.callout--alarm    { background: var(--water-deep); }
.callout--positive { background: var(--forest-mid); }
.callout::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%; background: rgba(74,124,80,0.18);
}
.callout__num {
  font-family: var(--font-display); font-size: clamp(44px, 6vw, 64px); font-weight: 900; line-height: 1;
  color: var(--riso-yellow); position: relative; z-index: 1;
}
.callout--alarm    .callout__num { color: var(--riso-red); }
.callout--positive .callout__num { color: #fff; }
.callout__label  { font-size: 14px; color: var(--mist); line-height: 1.5; margin-top: 6px; position: relative; z-index: 1; }
.callout__source { margin-top: var(--space-md); font-family: var(--font-mono); font-size: 10px; color: var(--moss); position: relative; z-index: 1; }

/* ============================================================
   DRIE KEUZES
============================================================ */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--gutter); }
.choice {
  border: 1px solid var(--linen); border-top: 4px solid var(--forest-light); border-radius: 4px;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  background: var(--paper);
}
.section-paper .choice { background: var(--cream); }
.choice--grey { border-top-color: var(--sand); }
.choice--max  { border-top-color: var(--riso-red); }
.choice__step  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.choice__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--forest-deep); margin: 8px 0 var(--space-sm); }
.choice__body  { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--graphite); text-align: justify; }
.choice__body strong { font-weight: 500; color: var(--coal); }

/* ============================================================
   LEDGER (voordelen | nadelen)
============================================================ */
.ledger {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-2xl);
  max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--gutter); position: relative;
}
.ledger::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--linen); }
.ledger__head { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-md); }
.ledger__head--pro { color: var(--forest-light); }
.ledger__head--con { color: var(--riso-red); }
.ledger__list { list-style: none; display: grid; gap: var(--space-md); }
.ledger__list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; color: var(--graphite); }
.ledger__list li strong { font-weight: 500; color: var(--coal); }
.ledger__list--pro li::before { content: '+'; position: absolute; left: 0; top: 0;    font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--forest-light); line-height: 1; }
.ledger__list--con li::before { content: '–'; position: absolute; left: 0; top: -2px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--riso-red);    line-height: 1; }

/* ============================================================
   WAARDEKETEN
============================================================ */
.chain-panel { border-radius: 4px; padding: var(--space-lg) 0; }
.chain { display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--space-sm); }
.chain__node { flex: 1; min-width: 160px; background: var(--forest-deep); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: var(--space-md); }
.chain__node--tb     { box-shadow: inset 0 3px 0 var(--riso-red); }
.chain__node--local  { box-shadow: inset 0 3px 0 var(--moss); }
.chain__node--nature { box-shadow: inset 0 3px 0 var(--sage); }
.chain__step  { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); }
.chain__who   { font-family: var(--font-display); font-size: clamp(18px,2vw,22px); font-weight: 700; color: var(--birch); line-height: 1.15; margin-top: 7px; }
.chain__flow  { font-family: var(--font-mono); font-size: 11px; color: var(--mist); margin-top: var(--space-sm); line-height: 1.5; }
.chain__arrow { align-self: center; flex: 0 0 auto; color: var(--moss); font-size: 24px; padding: 0 2px; }

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--forest-deep);
  padding-bottom: var(--space-2xl);
}
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 30%, rgba(74,124,80,0.4) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(26,46,28,0.35) 0%, rgba(26,46,28,0.55) 55%, rgba(26,46,28,0.92) 100%);
}
.hero__photo::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 5px 5px; mix-blend-mode: screen;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter); width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 8vw, 104px); line-height: 0.95; letter-spacing: -0.025em;
  color: var(--birch); max-width: 18ch;
}
.hero__title .reg { position: relative; display: inline-block; font-style: italic; color: var(--sage); vertical-align: top; }
.hero__title .reg::before { content: attr(data-text); position: absolute; top: 3px; left: -4px; color: var(--riso-teal); opacity: 0.5; z-index: -1; }
.hero__title .reg::after  { content: attr(data-text); position: absolute; top: -3px; left: 4px;  color: var(--riso-red);  opacity: 0.45; z-index: -1; }
.hero__title em { font-style: italic; color: var(--sage); }
.hero__sub {
  margin-top: var(--space-lg);
  font-size: 16px; font-weight: 300; color: var(--mist); line-height: 1.65;
  text-align: justify;
}
.hero__byline {
  margin-top: var(--space-lg);
  font-family: var(--font-mono); font-size: 11px; color: var(--smoke); letter-spacing: 0.04em;
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center;
}

/* ============================================================
   HOOFDSTUK-OPENER
============================================================ */
.chap { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter); }
.chap__kicker {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--clay);
  display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-lg);
}
.chap__kicker::after { content: ''; height: 1px; flex: 1; background: var(--linen); }
.chap__num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 22px; color: var(--forest-light); flex-shrink: 0;
}
.chap__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(46px, 7.5vw, 104px); line-height: 0.98; letter-spacing: -0.025em;
  color: var(--forest-deep); text-wrap: balance;
}
.chap__title em { font-style: italic; color: var(--forest-light); }
.vox .chap__title  { color: var(--birch); }
.vox .chap__title em { color: var(--sage); }
.vox .chap__kicker { color: var(--sage); }
.vox .chap__kicker::after { background: rgba(255,255,255,0.16); }
.vox .chap__num    { color: var(--moss); }

/* ============================================================
   SECTIEKOP
============================================================ */
.sub { max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--gutter); }
.sub__label {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--clay); display: inline-flex; align-items: center; gap: 11px; margin-bottom: var(--space-sm);
}
.sub__label::before { content: ''; width: 26px; height: 2px; background: var(--clay); }
.sub__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.01em;
  color: var(--forest-deep); text-wrap: balance;
}
.vox .sub__title { color: var(--birch); }
.vox .sub__label { color: var(--sage); }
.vox .sub__label::before { background: var(--moss); }

/* ============================================================
   COLOFON / CREDITS
============================================================ */
.colophon { padding: var(--space-2xl) 0 0; }
.colophon__inner { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter); }
.colophon__persons { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.colophon__photo {
  aspect-ratio: 3/4; background: var(--linen); border: 1px solid var(--clay); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--smoke); margin-bottom: var(--space-sm);
}
.colophon__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.colophon__pname { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--forest-deep); margin-bottom: 4px; line-height: 1.2; }
.colophon__roles { list-style: none; display: grid; gap: 2px; }
.colophon__roles li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--graphite); display: flex; gap: 5px; }
.colophon__roles li::before { content: '·'; color: var(--clay); flex-shrink: 0; }
.colophon__footer { background: var(--forest-deep); margin-top: var(--space-2xl); padding: var(--space-lg) var(--gutter); display: flex; justify-content: space-between; align-items: baseline; }
.colophon__date { font-family: var(--font-mono); font-size: 12px; color: var(--sage); letter-spacing: 0.04em; }

/* ============================================================
   KAART-COMPONENT (inline Leaflet)
============================================================ */
#shell {
  height: 520px; border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
}
#toolbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px;
  background: #0d1f15;
  border-bottom: 1px solid #2d5a3d;
}
.toolbar-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px; color: #f4f7f2; margin-right: 4px; white-space: nowrap;
}
.toolbar-title span { color: #e8c84a; }
.filter-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; border: 1px solid;
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: #f4f7f2; transition: opacity 0.2s;
}
.filter-btn.np { border-color: #3a7a52; }
.filter-btn.nr { border-color: #4a7aa8; }
.filter-btn.off { opacity: 0.3; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.np { background: #3a7a52; }
.dot.nr { background: #4a7aa8; }
.fullscreen-btn {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  border: 1px solid #2d5a3d; background: transparent;
  cursor: pointer; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: #7ab88a; text-decoration: none;
  transition: border-color 0.2s, color 0.2s; white-space: nowrap;
}
.fullscreen-btn:hover { border-color: #e8c84a; color: #e8c84a; }
.fullscreen-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
#map-wrap { flex: 1; position: relative; overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; }
.leaflet-container { background: #0d2033; }
.leaflet-popup-content-wrapper {
  background: #0d1f15; color: #f4f7f2;
  border: 1px solid #2d5a3d; border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  font-family: var(--font-mono);
}
.leaflet-popup-tip { background: #0d1f15; }
.leaflet-popup-content { margin: 12px 16px; font-size: 11px; line-height: 1.6; min-width: 200px; }
.popup-name { font-family: var(--font-display); font-size: 15px; color: #f4f7f2; margin-bottom: 3px; }
.popup-type-np { display: inline-block; font-size: 8px; padding: 1px 6px; border-radius: 3px; background: #3a7a52; color: #f4f7f2; margin-bottom: 7px; }
.popup-type-nr { display: inline-block; font-size: 8px; padding: 1px 6px; border-radius: 3px; background: #1e3550; border: 1px solid #4a7aa8; color: #c8dfc2; margin-bottom: 7px; }
.popup-row   { display: flex; gap: 16px; margin-bottom: 4px; }
.popup-label { color: #7ab88a; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
.popup-val   { color: #c8dfc2; }
.leaflet-control-attribution { background: rgba(13,31,21,0.85) !important; color: #2d5a3d !important; font-size: 8px !important; }
.leaflet-control-attribution a { color: #7ab88a !important; }
.leaflet-control-zoom a { background: #0d1f15 !important; color: #7ab88a !important; border-color: #2d5a3d !important; }
.leaflet-control-zoom a:hover { background: #2d5a3d !important; color: #f4f7f2 !important; }
.leaflet-control-reset a {
  background: #0d1f15 !important; color: #7ab88a !important;
  border: 1px solid #2d5a3d; border-radius: 2px;
  display: flex !important; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-size: 13px; text-decoration: none; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.leaflet-control-reset a:hover { background: #2d5a3d !important; color: #f4f7f2 !important; }
#scroll-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(13,31,21,0.88); color: #7ab88a;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 4px; border: 1px solid #2d5a3d;
  pointer-events: none; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s; z-index: 500;
}
#scroll-hint.visible { opacity: 1; }
.leaflet-tooltip {
  background: #0d1f15 !important; border: 1px solid #2d5a3d !important;
  color: #c8dfc2 !important; font-family: var(--font-mono) !important;
  font-size: 10px !important; border-radius: 3px !important;
  padding: 3px 8px !important; box-shadow: none !important;
}
.leaflet-tooltip::before { display: none !important; }
#loader {
  position: absolute; inset: 0;
  background: rgba(13,31,21,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  z-index: 9999; pointer-events: none; transition: opacity 0.4s;
}
#loader.hidden { opacity: 0; pointer-events: none; }
.spinner { width: 28px; height: 28px; border: 2px solid #2d5a3d; border-top-color: #e8c84a; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-txt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7ab88a; }

/* ============================================================
   VIDEO CONTROLS AUTO-HIDE
============================================================ */
.slot--playing.slot--controls-hidden .slot__controls {
  opacity: 0 !important; pointer-events: none !important;
}
.slot[data-type="foto"] .slot__img { cursor: zoom-in; }

/* ============================================================
   LIGHTBOX
============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain; border-radius: 2px;
  pointer-events: none;
}
.lightbox__close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.7); font-size: 28px;
  line-height: 1; padding: 8px;
}
.lightbox__close:hover { color: #fff; }

/* ============================================================
   ENTRANCE-ANIMATIE
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
  .rise.in { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  .colophon__persons { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --gutter: 28px; }
}

@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .block { padding: var(--space-xl) 0; }
  .split    { grid-template-columns: 1fr; gap: var(--space-md); }
  .choices  { grid-template-columns: 1fr; }
  .ledger   { grid-template-columns: 1fr; gap: var(--space-xl); }
  .ledger::before { display: none; }
  .expert   { grid-template-columns: 1fr; gap: var(--space-md); }
  .expert__portrait { aspect-ratio: 1 / 1; max-width: 120px; }
  .expert__portrait img { object-position: center 20%; }
  .reportage { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .reportage .slot { aspect-ratio: 3 / 2; }
  .reportage .slot:nth-child(1) { grid-row: auto; grid-column: span 2; aspect-ratio: 16/9; }
  .hero__title { font-size: clamp(40px, 13vw, 64px); }
  .slot--bleed { min-height: 56vh; }
  .chain__arrow { transform: rotate(90deg); width: 100%; text-align: center; }
  .chain__node  { min-width: 100%; }
  .colophon__footer { flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
}

@media (max-width: 460px) {
  .reportage { grid-template-columns: 1fr; }
  .reportage .slot { aspect-ratio: 4 / 3; }
  .reportage .slot:nth-child(1) { grid-column: auto; }
  .colophon__persons { grid-template-columns: repeat(2, 1fr); }
}