/* ════════════════════════════════════════════════════════════════
   FLOWSHIFT — CINEMATIC SCROLL-LOCK SITE (2026)
   Zone A: the locked scrub run. Transform/opacity ONLY over the
           canvas — no backdrop-filter, no blend modes, no filters,
           no continuous animation on full-screen fixed layers.
   Zone B: everything below frame 755. Canvas idle → go rich.
════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink     : #0B0A08;
  --ink-2   : #141109;
  --ink-3   : #1D1810;
  --paper   : #F5F0E3;
  --paper-2 : #ECE4D1;
  --amber   : #E7A44E;   /* accent on dark — pulled from the sunset frames */
  --amber-lt: #F2C280;
  --amber-ink: #92601B;  /* accent that reads on paper */
  --line-d  : rgba(231,164,78,0.16);
  --line-p  : rgba(20,17,9,0.15);
  --f-serif : 'Instrument Serif', Georgia, serif;
  --f-sans  : 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono  : 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  /* Letterbox geometry — set for real by engine.js on every resize.
     Fallbacks only matter for the instant before the first paint. */
  --ov-dock-top: 60vh;
  --ov-bar-h: 0px;
}

html {
  scroll-behavior: auto;        /* Lenis owns scrolling — keep native auto */
  scrollbar-width: none;        /* no scrollbar: native drag would desync the lock */
}
::-webkit-scrollbar { width: 0; height: 0; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-sans);
  font-weight: 300;
  overflow-x: hidden;
  overscroll-behavior: none;
}
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
}

em, .it { font-family: var(--f-serif); font-style: italic; font-weight: 400; }

/* ── SKIP LINK — first tab stop ─────────────────────────────── */
.skip-link {
  position: fixed; top: 12px; left: 12px;
  z-index: 12000;
  transform: translateY(-260%);
  background: var(--amber); color: var(--ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.8rem 1.3rem; border-radius: 4px;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.skip-link:focus-visible { transform: none; }

/* ════════════════════════════════════════════════════════════════
   ZONE A — CANVAS + CINEMA CHROME
════════════════════════════════════════════════════════════════ */
#vc-canvas {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Static vignette — single layer, zero animation. Baked edge darkening
   buys overlay legibility without per-frame compositing cost. */
.vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(6,4,0,0.62) 100%),
    linear-gradient(to top, rgba(8,6,2,0.5) 0%, transparent 26%);
}

#scroll-container { position: relative; z-index: 20; }
#canvas-scroll { position: relative; }

/* ── LOADER ─────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0;
  z-index: 10000;
  background: var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.3rem;
  transition: opacity 0.7s ease 0.1s, visibility 0s linear 0.9s;
}
body.booted #loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-brand {
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--paper); line-height: 1;
}
.loader-line {
  width: min(300px, 55vw); height: 1px;
  background: var(--line-d);
  position: relative; overflow: hidden;
}
.loader-line::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  animation: loadSweep 1.8s cubic-bezier(0.22,1,0.36,1) both 0.2s;
}
@keyframes loadSweep { to { transform: scaleX(1); } }
.loader-pct {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.4em;
  text-transform: uppercase; color: rgba(231,164,78,0.65);
}

/* ── NAV — persistent, transform/opacity-safe in Zone A ─────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity 0.7s ease 0.4s, background 0.35s ease, box-shadow 0.35s ease;
}
body.booted .site-nav { opacity: 1; }
.nav-brand {
  font-family: var(--f-serif); font-style: italic;
  font-size: 1.45rem; color: var(--paper);
  text-decoration: none; line-height: 1;
  transition: color 0.3s;
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); list-style: none; }
.nav-links a {
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,240,227,0.75); text-decoration: none;
  padding: 0.4rem 0.1rem; position: relative;
  transition: color 0.25s;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--amber);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.nav-links a:hover { color: var(--amber); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: var(--amber);
  padding: 0.7rem 1.35rem; border-radius: 999px;
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.nav-cta:hover { background: var(--amber-lt); transform: translateY(-1px); }
.nav-action { display: flex; flex-direction: column; align-items: flex-end; gap: 0.32rem; max-width: 390px; }
.nav-trust, .nav-direct {
  font-family: var(--f-mono); text-align: right;
  color: rgba(245,240,227,0.58);
}
.nav-trust { font-size: 8px; letter-spacing: 0.08em; }
.nav-direct { font-size: 7px; line-height: 1.45; }
.nav-direct a { color: var(--amber-lt); text-decoration: none; }
.nav-direct a:hover { text-decoration: underline; }
@media (max-width: 1080px) { .nav-direct { display: none; } }
@media (max-width: 760px) { .nav-trust { display: none; } }
/* Once past the film: solid bar so links read on paper */
.site-nav.on-paper {
  background: rgba(11,10,8,0.92);
  box-shadow: 0 1px 0 rgba(231,164,78,0.18);
}
@media (max-width: 760px) { .nav-links { display: none; } }

/* ── PROGRESS BAR — film progress, transform-only ───────────── */
.progress-bar {
  position: fixed;
  bottom: 0; left: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, #9C6B1D, var(--amber), var(--amber-lt));
  z-index: 8500;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  transition: opacity 0.6s ease;
}

/* ── CHAPTER CUE — honest state readout, bottom left ────────── */
.cue {
  position: fixed;
  bottom: 2.2rem; left: clamp(1.2rem, 4vw, 3rem);
  z-index: 8000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease 0.9s;
  max-width: min(74vw, 420px);
}
body.booted .cue { opacity: 1; }
.cue-ticks { display: flex; gap: 7px; }
.cue-tick {
  width: 26px; height: 2px;
  background: rgba(231,164,78,0.25);
  transition: background 0.4s ease;
}
.cue-tick.past { background: var(--amber); }
.cue-tick.active { background: rgba(231,164,78,0.55); }
.cue-label {
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,240,227,0.85);
  line-height: 1.7;
}
.cue-label b { color: var(--amber); font-weight: 600; }
/* Segment progress — fills only while a chapter is actually playing */
.cue-bar {
  width: 150px; height: 2px;
  background: rgba(231,164,78,0.18);
  position: relative;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cue.playing .cue-bar { opacity: 1; }
.cue-bar-fill {
  position: absolute; inset: 0;
  background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}
body.released .cue { opacity: 0; transition-delay: 0s; }

/* ── GHOST CHAPTER NUMBER ───────────────────────────────────── */
.ghost-num {
  position: fixed;
  bottom: -0.14em; right: clamp(1rem, 3vw, 2.4rem);
  z-index: 5;
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(120px, 19vw, 240px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(231,164,78,0.22);
  pointer-events: none; user-select: none;
  transition: opacity 0.5s ease;
}
body.released .ghost-num { opacity: 0; }
@media (max-width: 760px) { .ghost-num { display: none; } }

/* ── FLASH + ENTRY LINE (JS one-shots, opacity/transform only) ─ */
.cine-flash {
  position: fixed; inset: 0; z-index: 9400;
  background: var(--amber-lt);
  opacity: 0; pointer-events: none;
}
.entry-line {
  position: fixed; top: 0; left: -100%;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  z-index: 9500; pointer-events: none; opacity: 0;
}

/* ── LOCK OVERLAYS ──────────────────────────────────────────── */
.ov {
  position: fixed; inset: 0;
  z-index: 40;
  pointer-events: none;
  display: flex;
}
.ov-inner {
  position: relative;
  align-self: flex-end;
  margin: 0 clamp(1.2rem, 5vw, 4.5rem) clamp(6.4rem, 13vh, 9rem);
  max-width: 620px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.ov--right { justify-content: flex-end; }
/* Text-shadow diffusion — keeps copy legible over bright footage without
   a boxed-in scrim behind it. Two tight dark passes for edge contrast
   plus a soft wide glow so it holds up on the lightest frames (192, 755). */
.ov-eyebrow, .ov-h, .ov-sub, .ov-list li, .ov-quote, .ov-quote-by, .ov-hint, .ov-note {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 2px 6px rgba(0,0,0,0.75),
    0 6px 24px rgba(0,0,0,0.6);
}
.ov-eyebrow {
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.15rem;
}
.ov-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--amber); }
.ov-h {
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(1.7rem, 4.6vw, 3.3rem);
  line-height: 1.06; letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.ov-h em { color: var(--amber-lt); letter-spacing: 0; }
.ov-sub {
  font-size: clamp(0.88rem, 1.4vw, 1.02rem);
  line-height: 1.7;
  color: rgba(245,240,227,0.9);
  max-width: 46ch;
  text-wrap: pretty;
}
.ov-list { list-style: none; margin-top: 0.4rem; }
.ov-list li {
  display: flex; gap: 0.75rem; align-items: baseline;
  font-size: clamp(0.86rem, 1.35vw, 1rem);
  line-height: 1.55;
  color: rgba(245,240,227,0.92);
  padding: 0.42rem 0;
}
.ov-list li::before {
  content: attr(data-i);
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  color: var(--amber); letter-spacing: 0.1em;
  flex-shrink: 0;
}
.ov-list b { font-weight: 500; color: var(--amber-lt); }
.ov-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.1rem; max-width: 480px; }
.ov-chip {
  font-family: var(--f-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,240,227,0.85);
  border: 1px solid rgba(231,164,78,0.4);
  border-radius: 999px;
  padding: 0.34rem 0.75rem;
  white-space: nowrap;
}
.ov-cta-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; pointer-events: auto; }
.ov-cta {
  display: inline-block;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); background: var(--amber);
  padding: 0.95rem 1.9rem; border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s, transform 0.25s;
  will-change: transform;
}
.ov-cta:hover { background: var(--amber-lt); }
.ov-hint {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(245,240,227,0.55);
}
/* Compact placeholder line — deliberately NOT .ov-h sized. The chapter
   heading style is tall enough to push this low-anchored box up into
   the sky, where frame 755 has the FLOWSHIFT wordmark and fireworks. */
.ov-note {
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  line-height: 1.3; letter-spacing: -0.005em;
  color: var(--amber-lt);
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.ov-quote {
  font-family: var(--f-serif); font-style: italic;
  /* Kept compact on purpose — this box sits on frame 755, where the
     FLOWSHIFT wordmark and fireworks occupy the top ~30% of the frame.
     A taller box here creeps up into the reveal itself. */
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  line-height: 1.5; color: var(--paper);
  max-width: 44ch; text-wrap: pretty;
}
.ov-quote-by {
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin-top: 0.7rem;
}

/* Staggered line choreography — pure transitions, class-driven */
.ov .ov-line {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.25s ease, transform 0.25s ease;  /* fast exit */
}
.ov.on .ov-line {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.ov.on .ov-line:nth-child(2) { transition-delay: 0.09s; }
.ov.on .ov-line:nth-child(3) { transition-delay: 0.18s; }
.ov.on .ov-line:nth-child(4) { transition-delay: 0.27s; }
.ov.on .ov-line:nth-child(5) { transition-delay: 0.36s; }
/* Keep the final result overlay on the FlowShift fireworks frame. It fades
   only after the user continues into the next section. */
body.released .ov:not(#ov-4) { opacity: 0 !important; pointer-events: none !important; }
body.released #ov-4.past { opacity: 0 !important; pointer-events: none !important; }

/* Final-result fail-safe: release() hands normal scrolling back immediately
   after frame 755. Keep the result copy above the film until the visitor
   deliberately continues into the page. */
body.final-result-visible #ov-4:not(.past) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 70;
}
body.final-result-visible #ov-4:not(.past) .ov-line {
  opacity: 1 !important;
  transform: none !important;
}
/* Intro overlay boots via body.booted (before any gesture exists) */
#ov-intro .ov-inner { align-self: center; margin-bottom: 0; }
@media (min-width: 761px) {
  #ov-intro .ov-inner { margin-left: clamp(2rem, 7vw, 6rem); }
}

@media (max-width: 760px) {
  .ov-inner {
    margin: 0 1rem clamp(6.2rem, 15vh, 8rem);
    padding: 1.2rem 1.1rem;
  }
  .ov--right { justify-content: flex-start; }
  .cue { bottom: 1.4rem; }
}

/* ── LETTERBOX DOCKING ────────────────────────────────────────────
   When engine.js reports real letterboxing (phones/tablets in
   portrait — see the .film-letterboxed toggle in resizeCanvas()),
   the bottom bar is otherwise empty space. Chapter captions dock
   inside it instead of straddling the seam between video and bar,
   sized to fit that fixed ~250–280px budget. The chapter cue moves
   into the matching top bar so the two don't collide. Scoped by a
   JS-computed class, not a width breakpoint, because what matters is
   whether the film is actually letterboxed right now — a landscape
   phone can be narrower than a portrait tablet and not need this at
   all (verified: iPhone landscape hides 18%, below the trigger; iPad
   portrait hides 58%, above it — a width query alone can't tell
   those apart). Includes #ov-intro: its own `align-self: center` rule
   is a lower-specificity descendant selector, so this still wins and
   docks it exactly like the four chapter captions — position:absolute
   takes it out of flex flow, so align-self stops applying on its own. */
html.film-letterboxed #ov-intro .ov-inner,
html.film-letterboxed #ov-1 .ov-inner,
html.film-letterboxed #ov-2 .ov-inner,
html.film-letterboxed #ov-3 .ov-inner,
html.film-letterboxed #ov-4 .ov-inner {
  position: absolute;
  top: calc(var(--ov-dock-top) + 14px);
  left: 1rem; right: 1rem;
  margin: 0;
  max-width: none;
  padding: 0.9rem 1rem;
}
html.film-letterboxed .ov-eyebrow { margin-bottom: 0.55rem; }
html.film-letterboxed .ov-h {
  font-size: clamp(1.05rem, 5.2vw, 1.5rem);
  line-height: 1.16;
  margin-bottom: 0.4rem;
}
html.film-letterboxed .ov-sub {
  font-size: 0.79rem;
  line-height: 1.4;
  max-width: none;
}
html.film-letterboxed .ov-list { margin-top: 0.15rem; }
html.film-letterboxed .ov-list li {
  /* Sized so the longest line ("Premium klussen gaan naar wie er online
     betrouwbaarder uitziet") fits on one line at the docked box's width.
     Verified empirically against real rendered height, not just measured
     text width — the browser's actual line-breaking didn't match a plain
     canvas measureText() estimate at 0.66rem (still wrapped); 10px was the
     real breakpoint, so this sits a safety margin below that. */
  font-size: 0.6rem;
  line-height: 1.3;
  padding: 0.2rem 0;
  gap: 0.4rem;
}
html.film-letterboxed .ov-note {
  font-size: 0.96rem;
  margin-bottom: 0.28rem;
}
/* Chips: wrapping to 3-4 rows was most of the height problem on
   chapter 1 (9 chips). A single scrollable row costs one line, not five. */
html.film-letterboxed .ov-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 0.6rem;
  padding-bottom: 2px;
  max-width: 100%;
}
html.film-letterboxed .ov-chips::-webkit-scrollbar { display: none; }
html.film-letterboxed .ov-chip { font-size: 8px; padding: 0.26rem 0.55rem; }
html.film-letterboxed .ov-cta-row { margin-top: 0.7rem; gap: 0.5rem; }
html.film-letterboxed .ov-cta { padding: 0.66rem 1.2rem; font-size: 9px; }
html.film-letterboxed .ov-hint { font-size: 8px; }

html.film-letterboxed .cue {
  bottom: auto;
  top: calc(var(--ov-bar-h) * 0.5 - 18px);
  left: 1rem;
}

/* ════════════════════════════════════════════════════════════════
   ZONE B — THE PAGE BELOW THE FILM
════════════════════════════════════════════════════════════════ */
main { display: block; }
.zone-b { position: relative; z-index: 30; }

.section {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.4rem, 6vw, 6rem);
  overflow: hidden;
  contain: layout style paint;
}
.section-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.s-paper   { background: var(--paper);   color: var(--ink); }
.s-paper-2 { background: var(--paper-2); color: var(--ink); }
.s-ink     { background: var(--ink);     color: var(--paper); }
.s-ink-2   { background: var(--ink-2);   color: var(--paper); }

/* Blueprint grid texture on paper sections — static, cheap */
.s-paper::before, .s-paper-2::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--line-p) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-p) 1px, transparent 1px);
  background-size: 140px 140px;
  opacity: 0.35;
  pointer-events: none;
}

/* Big ghost number per section */
.s-num {
  position: absolute;
  right: clamp(0.5rem, 4vw, 4rem); top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(11rem, 22vw, 24rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-p);
  pointer-events: none; user-select: none;
  z-index: 1;
}
.s-ink .s-num, .s-ink-2 .s-num { -webkit-text-stroke-color: var(--line-d); }

.eyebrow {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: 1.4rem;
}
.s-ink .eyebrow, .s-ink-2 .eyebrow { color: var(--amber); }
.eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; opacity: 0.7; }

.h2 {
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.9rem);
  line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 1.4rem;
}
.h2 em { font-size: 1.04em; }
.s-paper .h2 em, .s-paper-2 .h2 em { color: var(--amber-ink); }
.s-ink .h2 em, .s-ink-2 .h2 em { color: var(--amber-lt); }

.lead {
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.75;
  max-width: 62ch;
  text-wrap: pretty;
  opacity: 0.78;
}

/* Split-heading word masks (JS wraps words; CSS hides until GSAP runs) */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.js [data-split] .wi { display: inline-block; transform: translateY(115%); will-change: transform; }

/* Generic reveal targets — hidden only when JS is present */
.js [data-rv] { opacity: 0; transform: translateY(34px); }

/* ── DIVIDER — ruler tick strip ─────────────────────────────── */
.divider {
  position: relative; z-index: 30;
  height: 70px;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.divider::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, var(--line-d) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(231,164,78,0.35) 0 1px, transparent 1px 70px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 10px, transparent 10px 60px, #000 60px 70px);
          mask-image: linear-gradient(to bottom, #000 0 10px, transparent 10px 60px, #000 60px 70px);
}
.divider-label {
  position: relative; z-index: 1;
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(231,164,78,0.85);
  background: var(--ink);
  border: 1px solid var(--line-d);
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
}
.divider--paper { background: var(--paper); }
.divider--paper::before {
  background:
    repeating-linear-gradient(90deg, var(--line-p) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(20,17,9,0.32) 0 1px, transparent 1px 70px);
}
.divider--paper .divider-label {
  color: rgba(20,17,9,0.6); background: var(--paper); border-color: var(--line-p);
}

/* ── NICHE MARQUEE ──────────────────────────────────────────── */
.niche-strip {
  position: relative; z-index: 30;
  background: var(--ink);
  border-bottom: 1px solid var(--line-d);
  padding: 1.05rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 2.6rem;
  width: max-content; white-space: nowrap;
  animation: mq 30s linear infinite;
  will-change: transform;
}
.niche-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(231,164,78,0.75);
  display: flex; align-items: center; gap: 2.6rem;
}
.marquee-track span::after { content: '◆'; font-size: 7px; color: rgba(231,164,78,0.35); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ── HERKENBAAR — pain grid ─────────────────────────────────── */
.pain-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2.4rem, 5vw, 4rem);
}
@media (max-width: 760px) { .pain-grid { grid-template-columns: 1fr; } }
.pain {
  border-top: 1px solid rgba(20,17,9,0.35);
  padding-top: 1.3rem;
}
.pain-num {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.24em; color: var(--amber-ink);
  display: block; margin-bottom: 0.7rem;
}
.pain p {
  font-size: clamp(0.98rem, 1.6vw, 1.15rem);
  line-height: 1.6; color: rgba(20,17,9,0.82);
  max-width: 44ch; text-wrap: pretty;
}

/* ── ZONDER / MÉT ───────────────────────────────────────────── */
.zm-head { display: none; }
@media (min-width: 761px) {
  .zm-head {
    display: grid; grid-template-columns: 1fr 52px 1fr;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    margin-top: clamp(2.2rem, 4vw, 3.4rem);
    padding-bottom: 0.9rem;
  }
  .zm-head .mono:first-child { color: rgba(20,17,9,0.45); }
  .zm-head .mono:last-child { color: var(--amber-ink); grid-column: 3; }
}
.zm-row {
  display: grid; grid-template-columns: 1fr 52px 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.2rem, 2.4vw, 1.7rem) 0;
  border-top: 1px solid var(--line-p);
}
.zm-cell { display: flex; gap: 0.85rem; align-items: flex-start; }
.zm-ico {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  margin-top: 0.1rem;
}
.zm-x .zm-ico { border: 1px solid rgba(20,17,9,0.3); color: rgba(20,17,9,0.5); }
.zm-v .zm-ico { background: var(--amber); color: var(--ink); }
.zm-x p { color: rgba(20,17,9,0.55); font-size: 0.95rem; line-height: 1.6; }
.zm-v p { color: rgba(20,17,9,0.88); font-size: 0.95rem; line-height: 1.6; font-weight: 400; }
.zm-arrow {
  font-family: var(--f-mono); color: var(--amber-ink);
  text-align: center; font-size: 15px;
}
@media (max-width: 760px) {
  .zm-row { grid-template-columns: 1fr; gap: 0.9rem; }
  .zm-arrow { display: none; }
}

/* ── TWEE BROERS ────────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.6rem); margin-top: clamp(2.2rem, 4vw, 3.4rem); align-items: center; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.duo-media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; }
.duo-media img, .duo-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo-media figcaption {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber-lt);
}
.duo-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,10,8,0.55), transparent 45%);
}
.duo-block h3 {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--amber-ink); margin-bottom: 0.9rem;
}
.duo-block p { font-size: 1rem; line-height: 1.75; color: rgba(20,17,9,0.8); max-width: 52ch; text-wrap: pretty; }
.duo-sep { height: 1px; background: var(--line-p); margin: 1.7rem 0; }
.duo-placeholder {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin-top: 1.6rem;
  border: 1px dashed rgba(20,17,9,0.35);
  border-radius: 999px;
  padding: 0.65rem 1.2rem;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; color: rgba(20,17,9,0.5);
}
.duo-placeholder .dp-avs { display: flex; }
.duo-placeholder .dp-av {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(20,17,9,0.3);
  background: rgba(20,17,9,0.06);
  display: grid; place-items: center;
  color: rgba(20,17,9,0.4);
}
.duo-placeholder .dp-av + .dp-av { margin-left: -9px; }
.duo-placeholder span { color: var(--amber-ink); font-weight: 600; }

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.tst-grid { columns: 3; column-gap: 1.3rem; margin-top: clamp(2.4rem, 5vw, 4rem); }
@media (max-width: 1000px) { .tst-grid { columns: 2; } }
@media (max-width: 640px)  { .tst-grid { columns: 1; } }
.tst {
  break-inside: avoid;
  background: #FFFDF8;
  border: 1px solid var(--line-p);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.3rem;
  margin-bottom: 1.3rem;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.3s;
}
.tst:hover {
  transform: translateY(-4px);
  border-color: rgba(146,96,27,0.5);
  box-shadow: 0 18px 44px rgba(20,17,9,0.1);
}
.tst-quote-mark {
  font-family: var(--f-serif); font-style: italic;
  font-size: 2.4rem; line-height: 0.6;
  color: var(--amber); display: block; margin-bottom: 0.9rem;
}
.tst p { font-size: 0.92rem; line-height: 1.7; color: rgba(20,17,9,0.82); font-style: italic; font-family: var(--f-serif); }
.tst-by {
  margin-top: 1.1rem;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber-ink); font-style: normal;
}
.tst-trade {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.14em; color: rgba(20,17,9,0.45);
  margin-top: 3px;
}

/* ── PAKKETTEN ──────────────────────────────────────────────── */
.pk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .pk-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
.pk {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--line-d);
  border-radius: 20px;
  padding: 2rem 1.8rem;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease, border-color 0.3s;
}
.pk-grid:has(.pk:hover) .pk:not(:hover) { opacity: 0.55; }
.pk:hover { transform: translateY(-5px); border-color: rgba(231,164,78,0.45); }
.pk--reco { background: var(--ink-2); }
@media (min-width: 901px) { .pk--reco { margin-top: -14px; padding-bottom: 2.6rem; } }
.pk-badge {
  position: absolute; top: 1.3rem; right: 1.3rem;
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); background: var(--amber);
  border-radius: 999px; padding: 0.35rem 0.8rem;
}
.pk h3 {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: 2.2rem; line-height: 1; color: var(--paper);
}
.pk-pos { font-size: 0.86rem; color: rgba(245,240,227,0.55); margin-top: 0.55rem; }
.pk-sep { height: 1px; background: var(--line-d); margin: 1.4rem 0; }
.pk-intro {
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245,240,227,0.45); margin-bottom: 1rem;
}
.pk ul { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.pk li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.89rem; line-height: 1.55; color: rgba(245,240,227,0.82); }
.pk li svg { flex-shrink: 0; margin-top: 0.22rem; color: var(--amber); }

/* Rotating border beam on the recommended card — registered property
   sweep. Zone B only; killed under reduced motion. */
@property --beam-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.pk--reco::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 22px;
  padding: 1.5px;
  background: conic-gradient(from var(--beam-a),
    transparent 0deg, transparent 295deg,
    var(--amber) 340deg, #FFE9C4 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  animation: beamSpin 3.4s linear infinite;
  pointer-events: none;
}
@keyframes beamSpin { to { --beam-a: 360deg; } }

.pk-foot { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; margin-top: clamp(2.2rem, 4vw, 3.2rem); text-align: center; }
.pk-assurance { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; max-width: 760px; }
.pk-guarantee-copy, .pk-help { color: rgba(245,240,227,0.65); line-height: 1.65; text-wrap: pretty; }
.pk-guarantee-copy { font-size: 0.82rem; }
.pk-help { font-size: 0.9rem; }
.pk-garantie {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(245,240,227,0.55);
  border: 1px dashed var(--line-d);
  border-radius: 999px; padding: 0.7rem 1.3rem;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-wrap { max-width: 760px; margin: clamp(2.2rem, 4vw, 3.4rem) auto 0; border-top: 1px solid var(--line-p); }
.faq { border-bottom: 1px solid var(--line-p); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding: 1.35rem 0.2rem;
  background: none; border: none; cursor: pointer;
  text-align: left;
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--ink);
  transition: color 0.25s;
}
.faq-q:hover { color: var(--amber-ink); }
.faq-q .faq-ico { flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); color: rgba(20,17,9,0.5); }
.faq.open .faq-q .faq-ico { transform: rotate(180deg); color: var(--amber-ink); }
.faq-a { overflow: hidden; }
.js .faq-a { height: 0; }         /* collapsed only when JS can expand it */
.faq-a p {
  font-size: 0.95rem; line-height: 1.75;
  color: rgba(20,17,9,0.72);
  padding: 0 2.4rem 1.4rem 0.2rem;
  max-width: 64ch; text-wrap: pretty;
}

/* ── FINAL CTA ──────────────────────────────────────────────── */
.cta-final { text-align: center; }
.cta-final .h2 { margin-left: auto; margin-right: auto; }
.cta-final .lead { margin: 0 auto; }
.cta-trust {
  margin: 1.45rem auto 0;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.12em; color: rgba(245,240,227,0.72);
}
.cta-direct { margin: 0.7rem auto 0; font-size: 0.92rem; color: rgba(245,240,227,0.72); }
.cta-options {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.85rem; margin-top: 1.4rem;
}
.btn-solid {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); background: var(--amber);
  padding: 1.15rem 2.6rem; border-radius: 999px;
  text-decoration: none;
  margin-top: 2.4rem;
  transition: background 0.25s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.btn-solid:hover { background: var(--amber-lt); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--paper); text-decoration: none;
  border: 1px solid rgba(231,164,78,0.36); border-radius: 999px;
  padding: 0.75rem 1.25rem;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.btn-secondary:hover { color: var(--amber-lt); border-color: var(--amber); background: rgba(231,164,78,0.08); }
.btn-whatsapp { border-color: rgba(123,214,146,0.52); }
.btn-whatsapp:hover { border-color: #7BD692; background: rgba(123,214,146,0.08); }
.btn-secondary span { opacity: 0.62; }
.cta-mail {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 0;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(245,240,227,0.65); text-decoration: none;
  border: 1px solid var(--line-d); border-radius: 999px;
  padding: 0.75rem 1.4rem;
  transition: color 0.25s, border-color 0.25s;
}
.cta-mail:hover { color: var(--amber-lt); border-color: rgba(231,164,78,0.5); }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 30;
  background: var(--ink);
  border-top: 1px solid var(--line-d);
  padding: clamp(2.6rem, 5vw, 4rem) clamp(1.4rem, 6vw, 6rem) 7.5rem;
  overflow: hidden;
}
.footer-row {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem; color: rgba(245,240,227,0.45);
}
.footer-row .fb { font-family: var(--f-serif); font-style: italic; font-size: 1.2rem; color: rgba(245,240,227,0.85); }
.footer-payoff { color: rgba(245,240,227,0.72); }
.footer-row a { color: rgba(245,240,227,0.55); text-decoration: none; transition: color 0.25s; }
.footer-row a:hover { color: var(--amber-lt); }
.footer-copy {
  text-align: center;
  font-size: 0.72rem; color: rgba(245,240,227,0.28);
  margin-top: 2.2rem;
}
.footer-mark {
  position: absolute; left: 50%; bottom: -0.34em;
  transform: translateX(-50%);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(5rem, 17vw, 15rem);
  line-height: 1; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(231,164,78,0.18);
  pointer-events: none; user-select: none;
}

/* ════════════════════════════════════════════════════════════════
   REACT-SITE SECTIONS — geport uit flowshift website 2.0
   Liquid-glass + achtergrondvideo. Zone B only: de canvas is hier
   allang idle, dus backdrop-filter mag.
════════════════════════════════════════════════════════════════ */
.glass {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* ── WAT JE KRIJGT — video cards + fullscreen morph ─────────── */
.svc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.svc-side { color: rgba(245,240,227,0.4); padding-bottom: 1.6rem; }
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; max-width: 560px; } }
.svc {
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
.svc:hover { border-color: rgba(231,164,78,0.5); transform: translateY(-4px); }
.svc:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.svc-media {
  position: relative; isolation: isolate;
  aspect-ratio: 16/9; overflow: hidden;
  background: #0e0c08 center / cover no-repeat;
}
.svc-media video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 1; visibility: visible;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.svc:hover .svc-media video { transform: translateZ(0) scale(1.05); }
.svc-media::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  pointer-events: none;
}
.svc-body { padding: 1.35rem 1.5rem 1.5rem; }
.svc-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.svc-tag {
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(245,240,227,0.45);
}
.svc-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--paper); font-size: 14px;
  transition: background 0.3s, transform 0.3s;
}
.svc:hover .svc-arrow { background: var(--amber); color: var(--ink); transform: translate(2px, -2px); }
.svc-body h3 {
  font-family: var(--f-sans); font-weight: 400;
  font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--paper); margin-bottom: 0.6rem; text-wrap: balance;
}
.svc-body p { font-size: 0.88rem; line-height: 1.65; color: rgba(245,240,227,0.55); }

/* Fullscreen morph dialog */
.svc-full {
  position: fixed;
  z-index: 11000;
  overflow: hidden;
  background-size: cover; background-position: center;
  background-color: #000;
  border-radius: 24px;
  will-change: transform;
}
.svc-full video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
.svc-full-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent 45%, rgba(0,0,0,0.4));
  pointer-events: none;
}
.svc-back {
  position: absolute; top: 1.4rem; left: 1.4rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.25s;
}
.svc-full.in .svc-back { opacity: 1; transform: none; transition-delay: 0.75s, 0.75s, 0s; }
.svc-back:hover { background: rgba(255,255,255,0.16); }
.svc-full-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.6rem, 4vw, 3.4rem);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.svc-full.in .svc-full-content { opacity: 1; transform: none; transition-delay: 0.85s; }
.svc-full-tag {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245,240,227,0.6);
}
.svc-full-title {
  font-family: var(--f-sans); font-weight: 400;
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1.06; letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0.8rem 0 1rem; max-width: 18ch; text-wrap: balance;
}
.svc-full-desc {
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  line-height: 1.7; color: rgba(245,240,227,0.85);
  max-width: 62ch; text-wrap: pretty;
}
.svc-full-cta {
  display: inline-block; margin-top: 1.7rem;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 0.95rem 1.9rem;
  cursor: pointer; text-decoration: none;
  transition: background 0.25s, transform 0.25s;
}
.svc-full-cta:hover { background: var(--amber); color: var(--ink); transform: translateY(-2px); }

/* ── DE OPLOSSING IN VIER STAPPEN — bg-video hero (React port) ─ */
.sys4 {
  position: relative; z-index: 30;
  min-height: 100svh;
  background: #050403;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(5rem, 10vh, 7rem) clamp(1.4rem, 5vw, 5rem) clamp(2.4rem, 5vh, 3.6rem);
}
.sys4-bg {
  position: absolute; inset: 0; z-index: 0;
}
.sys4-bg video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0;                    /* JS fades in/out rond de loop */
}
.sys4-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.75));
}
.sys4-inner {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column;
  max-width: 1240px; margin: 0 auto; width: 100%;
}
.sys4-label {
  font-family: var(--f-mono); font-size: 12px;
  color: rgba(245,240,227,0.8);
  margin-bottom: 1.4rem;
}
.sys4-title {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.92; letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: auto;
  text-wrap: balance;
}
.sys4-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  margin-top: clamp(2.6rem, 6vh, 4rem);
}
@media (max-width: 1000px) { .sys4-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .sys4-cards { grid-template-columns: 1fr; } }
.sys4-card {
  border-radius: 1.25rem;
  padding: 1.5rem;
  min-height: 280px;
  display: flex; flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.3s;
}
.sys4-card:hover { transform: translateY(-5px); border-color: rgba(231,164,78,0.45); }
.sys4-ico {
  width: 44px; height: 44px; border-radius: 0.75rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  margin-bottom: auto;
}
.sys4-card h3 {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: #fff;
  margin-top: 1.3rem;
}
.sys4-card p {
  margin-top: 0.75rem;
  font-size: 0.87rem; font-weight: 300; line-height: 1.55;
  color: rgba(255,255,255,0.9);
  max-width: 32ch;
}

@media (prefers-reduced-motion: reduce) {
  .svc-media video, .sys4-bg video { display: none; }
  .svc-full.in .svc-back, .svc-full.in .svc-full-content { transition-delay: 0s; }
}

/* ════════════════════════════════════════════════════════════════
   CUSTOM CURSOR — event-driven, transform-only (safe in Zone A)
════════════════════════════════════════════════════════════════ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  opacity: 0;
}
body.cursor-on .cursor-dot, body.cursor-on .cursor-ring { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; background: var(--amber); margin: -3px 0 0 -3px; }
.cursor-ring {
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid rgba(231,164,78,0.55);
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease;
}
.cursor-ring.hovering {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-color: var(--amber);
}
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ════════════════════════════════════════════════════════════════
   PROGRESSIVE ENHANCEMENT — scroll-driven animations (Zone B only)
════════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
  .s-num {
    animation: numDrift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes numDrift {
    from { transform: translateY(calc(-50% + 70px)); }
    to   { transform: translateY(calc(-50% - 70px)); }
  }
  .footer-mark {
    animation: markRise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }
  @keyframes markRise {
    from { transform: translateX(-50%) translateY(38%); opacity: 0.3; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
  }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION — no forced playback, no ambient loops
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .pk--reco::before { animation: none; }
  .loader-line::after { animation-duration: 0.01s; }
  .js [data-rv] { opacity: 1; transform: none; }
  .js [data-split] .wi { transform: none; }
  .s-num, .footer-mark { animation: none; }
  .ov .ov-line, .ov.on .ov-line { transition-duration: 0.01s; transition-delay: 0s; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* No-JS: kill the cinema, show the page */
.no-js #loader, .no-js .cue, .no-js .ghost-num,
.no-js .ov, .no-js .progress-bar, .no-js #vc-canvas, .no-js .vignette { display: none; }
.no-js #canvas-scroll { height: 0 !important; }