/* Harte Growth, de film. Merkkleuren en fonts liggen vast; zie het ontwerpplan. */
:root {
  --bg: #0F1113;
  --ink: #F2F0EC;
  --mute: #9BA0A6;
  --accent: #FF3B30;
  --wa: #25D366;
  --surface: #161A1D;
  --surface-2: #1C2024;
  --line: rgba(242, 240, 236, .08);
  --line-2: rgba(242, 240, 236, .16);

  --f-head: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body: "Instrument Sans", -apple-system, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --hdr: calc(84px + var(--safe-t));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }

.stage-dim { display: none; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 50;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  border-radius: 8px; font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Header + tijdlijn ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 30;
  padding-top: var(--safe-t);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.hdr-row {
  height: 48px; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo { display: inline-flex; padding: 6px 0; }
/* Menu: op desktop inline naast het logo, onder 900px achter een knop (paneel onder de tijdlijn). */
.hdr-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.hdr-links, .hdr-lang { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.hdr-links { gap: clamp(.9rem, 2vw, 1.75rem); }
.hdr-links a { color: var(--mute); font-size: .9375rem; text-decoration: none; padding: .5rem 0; }
.hdr-links a:hover { color: var(--ink); }
.hdr-lang { gap: .25rem; font: 500 .75rem/1 var(--f-mono); }
.hdr-lang a { display: inline-block; padding: .45rem .4rem; color: var(--mute); text-decoration: none; border-radius: 4px; }
.hdr-lang a:hover { color: var(--ink); }
.hdr-lang a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.menu-btn {
  display: none; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .25rem;
  background: none; border: 0; color: var(--ink); font: 500 .875rem/1 var(--f-body); cursor: pointer;
}
.menu-btn .mb-close { display: none; }
.menu-btn[aria-expanded="true"] .mb-open { display: none; }
.menu-btn[aria-expanded="true"] .mb-close { display: inline; }

@media (max-width: 899px) {
  .js .menu-btn { display: inline-flex; }
  .js .hdr-nav {
    display: none;
    position: fixed; left: 0; right: 0; top: var(--hdr); z-index: 29;
    max-height: calc(100svh - var(--hdr)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 1.25rem;
    padding: 1rem var(--gutter) calc(1.5rem + var(--safe-b));
    background: var(--bg); border-bottom: 1px solid var(--line-2);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8);
  }
  .js .hdr-nav.is-open { display: flex; }
  .js .hdr-links { flex-direction: column; align-items: stretch; gap: 0; }
  .js .hdr-links a { display: block; padding: .85rem 0; font: 700 1.375rem/1.1 var(--f-head); color: var(--ink); border-bottom: 1px solid var(--line); }
  .js .hdr-lang a { padding: .7rem .9rem; font-size: .8125rem; }
  /* zonder JS: menu blijft zichtbaar als rij links naast het logo */
  html:not(.js) .hdr-links { gap: .8rem; }
  html:not(.js) .hdr-links a { font-size: .8125rem; }
  html:not(.js) .hdr-lang { display: none; }
}

.tl {
  height: 36px; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: .75rem;
  overflow: hidden; /* afspeelkop schuift met translate; niet buiten de balk laten lekken */
}
.tc {
  display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap;
}
.tc-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tl-track { position: relative; flex: 1; min-width: 0; height: 100%; }
.tl-clips { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.tl-clips li { flex: 1 1 0; min-width: 0; }
.tl-clips a {
  position: relative; display: flex; align-items: flex-start; height: 100%;
  padding: 4px 6px 0; color: var(--mute); text-decoration: none; overflow: hidden;
}
/* de "clip" zelf: een blok op het spoor, 1px ruimte ertussen zoals in een montagetijdlijn */
.tl-clips a::before {
  content: ""; position: absolute; left: 0; right: 1px; bottom: 6px; height: 8px;
  background: var(--line-2); border-radius: 2px;
}
.tl-clips a:hover { color: var(--ink); }
.tl-clips a:hover::before { background: rgba(242, 240, 236, .28); }
.tl-clips a[aria-current="location"] { color: var(--ink); }
.tl-name { font-size: .6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-fill {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 8px; pointer-events: none;
  background: rgba(255, 59, 48, .35); border-radius: 2px;
  transform-origin: left center; transform: scaleX(0);
}
.tl-head { position: absolute; inset: 0; pointer-events: none; transform: translateX(0); }
.tl-head span {
  position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; margin-left: -1px;
  background: var(--accent);
}
.tl-head span::before {
  content: ""; position: absolute; top: -2px; left: -4px; width: 10px; height: 6px;
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tl-now { display: none; }

@media (max-width: 767px) {
  :root { --hdr: calc(92px + var(--safe-t)); }
  .hdr-row { height: 48px; }
  .tl { height: 44px; gap: 10px; }
  .tl-clips a { padding: 0; }
  .tl-clips li { min-width: 26px; } /* aanraakdoel minimaal 24px breed, ook voor korte hoofdstukken */
  .tl-clips a::before { bottom: 18px; }
  .tl-fill { bottom: 18px; }
  .tl-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tl-now { display: block; color: var(--mute); white-space: nowrap; min-width: 5.5em; text-align: right; }
}

/* ---------- Typografie ---------- */
.h1, .h2 {
  font-family: var(--f-head); font-weight: 800; letter-spacing: -.03em; line-height: .98;
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.6rem);
  text-wrap: balance;
}
.h2 { font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.8rem); }
.lede { color: var(--mute); max-width: 44ch; margin-top: 1.1rem; text-wrap: pretty; }
.lede strong { color: var(--ink); font-weight: 600; }

.ctas { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1.6rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.3rem; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--bg);
  font: 600 1rem/1.2 var(--f-body); text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-1px); background: #ff5147; }
.link { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }
.link:hover { color: var(--accent); }

.cue { display: none; }
/* Hint bij binnenkomst: de video speelt niet vanzelf, hij loopt mee met scrollen. Weg na de eerste scroll. */
.film-on .cue {
  display: flex; align-items: center; gap: .7rem; margin-top: 2rem;
  font: 500 .8125rem/1 var(--f-mono); color: var(--ink);
  transition: opacity .35s ease, transform .35s ease;
}
.cue-line { width: 32px; height: 2px; background: var(--accent); transform-origin: left center; }
.film-on .cue-line { animation: cue-pulse 1.6s ease-in-out infinite; }
@keyframes cue-pulse { 0%, 100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } }
.has-scrolled .cue { opacity: 0; transform: translateY(6px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .film-on .cue-line { animation: none; } }

/* ---------- Hoofdstukken: statische basis (geen JS of reduced motion) ---------- */
.chapter, .alias, #faq { scroll-margin-top: calc(var(--hdr) + 8px); }
.alias { display: block; height: 0; }
#film { padding-top: var(--hdr); }
.chapter {
  display: grid; gap: 2rem;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.chapter > .copy { max-width: 36rem; }
.scene { position: relative; overflow: hidden; }
.film-on .scene { overflow: visible; }
.scene-in {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  container-type: size;
  display: grid; place-items: center;
}
@media (min-width: 900px) {
  .chapter { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); align-items: center; column-gap: 4vw; }
  .chapter > .copy { grid-row: 1; grid-column: 1; }
  .chapter > .scene { grid-row: 1; grid-column: 2; }
}

/* ---------- Filmmodus (JS zet .film-on als beweging is toegestaan) ---------- */
.film-on #film { padding-top: 0; }
.film-on .chapter {
  display: block; padding: 0; border: 0;
  height: calc(var(--len, 2) * 100svh);
}
.film-on .copy {
  position: sticky; top: var(--hdr); z-index: 2;
  height: calc(100svh - var(--hdr));
  width: min(38rem, 40vw);
  padding: 2rem 0 2rem var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.film-on .scene {
  position: fixed; z-index: 1; pointer-events: none;
  top: var(--hdr); bottom: 0; left: 42vw; right: 0;
  /* rechts ruimte voor de WhatsApp-knop (24 + 56 + 20px), zodat die nooit over het beeld valt */
  padding: 3vh calc(100px + var(--safe-r)) 4vh 0;
}
.film-on .scene-in { height: 100%; aspect-ratio: auto; }

/* Lees meer: op desktop altijd open zonder knop; op mobiel dichtgeklapt (film.js haalt 'open' weg). */
.more > summary { display: none; }
.lede-rest { margin-top: .35rem; }

@media (max-width: 767px) {
  /* Mobiel: het beeld vult het hele scherm onder header en tijdlijn; de tekst loopt er als ondertitel
     overheen, op een zachte scrim. UI-scènes blijven boven de tekstzone (--text-zone). */
  :root { --text-zone: 40svh; }
  .film-on .scene { z-index: 1; left: 0; right: 0; top: var(--hdr); bottom: 0; height: auto; padding: 0; }
  .film-on .scene-in { padding: 14px var(--gutter) var(--text-zone); }
  /* lichte dimlaag tijdens het lezen (film.js), tussen de tekstblokken helder */
  .film-on .stage-dim {
    display: block; position: fixed; z-index: 2; left: 0; right: 0; top: var(--hdr); bottom: 0;
    background: #000; opacity: 0; pointer-events: none;
  }
  .film-on .copy {
    position: relative; top: auto; z-index: 3;
    height: auto; min-height: 100svh; width: 100%; padding: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .film-on .copy-body {
    position: relative; isolation: isolate;
    padding: 5.5rem var(--gutter) calc(18px + var(--safe-b));
  }
  /* scrim: onder vrijwel dekkend, boven de kop zacht naar transparant (geen harde balk) */
  .film-on .copy-body::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top,
      rgba(15, 17, 19, .94) 0%, rgba(15, 17, 19, .9) 55%,
      rgba(15, 17, 19, .88) calc(100% - 5.5rem), rgba(15, 17, 19, 0) 100%);
  }
  .film-on .copy-body .lede, .film-on .copy-body .note, .film-on .copy-body .price { color: #DCDFE2; }
  /* het laatste element blijft links van de WhatsApp-knop (16 + 56 + marge) */
  .film-on .copy-body > :last-child { padding-right: 76px; }
  .film-on .h1 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); }
  .film-on .h2 { font-size: clamp(1.6rem, 6.8vw, 2.1rem); }
  .film-on .lede { margin-top: .7rem; font-size: 1rem; }
  .film-on .ctas { margin-top: 1rem; }
  .film-on .btn { font-size: .9375rem; padding-inline: 1rem; white-space: nowrap; }
  .film-on .cue { margin-top: .9rem; }

  /* Lees meer */
  .more > summary {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .55rem; min-height: 44px;
    list-style: none; cursor: pointer; font: 600 .9375rem/1 var(--f-body); color: var(--ink);
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(242, 240, 236, .45);
  }
  .more > summary::-webkit-details-marker { display: none; }
  .more > summary::after { content: ""; width: 7px; height: 7px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
  .more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
  .more .more-close, .more[open] .more-open { display: none; }
  .more[open] .more-close { display: inline; }
  .more-body .lede-rest { margin-top: .2rem; }
  .more-body .note { margin-top: .6rem; }
}

/* ---------- Scène 1: opening ---------- */
/* Vóór film.js: alleen de opening is zichtbaar, de sluiter staat dicht (intro), overige scènes verborgen.
   GSAP neemt het daarna over met inline stijlen. */
.intro #opening .bar { transform: scaleY(1); }
.intro #opening .mon-meta, .intro #opening .corner, .intro #opening .op-format { opacity: 0; }
.film-on .chapter:not(#opening) > .scene .scene-in { visibility: hidden; }
.monitor {
  position: relative; overflow: hidden;
  width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9;
  border-radius: 6px; background: #08090a;
}
.room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Opening: 16:9 ruw materiaal -> 9:16 resultaat. Alles via transform (maskers, hoeken, schaal van het frame). */
.op-mon { transform-origin: 50% 50%; }
.op-v16, .op-v9 { position: absolute; top: 0; height: 100%; object-fit: cover; background: #08090a; }
.op-v16 { left: 0; width: 100%; }
.op-v9 { left: 34.18%; width: 31.64%; opacity: 0; }            /* 9:16-strook midden in 16:9 */
.op-mask { position: absolute; top: -1px; bottom: -1px; width: 34.2%; background: var(--bg); transform: scaleX(0); }
.op-mask-l { left: -1px; transform-origin: left center; }
.op-mask-r { right: -1px; transform-origin: right center; }
.op-ring { position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); pointer-events: none; }
.op-window {
  position: absolute; top: 0; bottom: 0; left: 34.18%; width: 31.64%; border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; pointer-events: none;
}
.op-format {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  font: 500 .6875rem/1 var(--f-mono); color: var(--ink);
  padding: 4px 6px; background: rgba(8, 9, 10, .7); border-radius: 3px;
}
.mon-meta {
  position: absolute; left: 4%; top: 6%;
  display: flex; align-items: center; gap: 6px;
  font: 500 .6875rem/1 var(--f-mono); color: var(--ink);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.mon-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.corner { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(242, 240, 236, .7); }
.c-tl { left: 2.5%; top: 4%; border-top-width: 1px; border-left-width: 1px; }
.c-tr { right: 2.5%; top: 4%; border-top-width: 1px; border-right-width: 1px; }
.c-bl { left: 2.5%; bottom: 4%; border-bottom-width: 1px; border-left-width: 1px; }
.c-br { right: 2.5%; bottom: 4%; border-bottom-width: 1px; border-right-width: 1px; }

/* Reduced motion of zonder beweging: direct de staande 9:16-stand */
.op-mon.is-static-portrait { width: min(100cqw, 100cqh * 9 / 16); aspect-ratio: 9 / 16; }
.is-static-portrait .op-v16, .is-static-portrait .op-mask, .is-static-portrait .op-window { display: none; }
.is-static-portrait .op-v9 { left: 0; width: 100%; opacity: 1; }
.is-static-portrait .op-format { display: none; } /* valt anders over de videobediening */
.mon-meta { transform-origin: left center; }
.op-format { transform-origin: 50% 100%; }
/* sluiterbalken: standaard open (eindbeeld), JS zet ze dicht voor de intro */
.bar { position: absolute; left: 0; right: 0; height: 50.5%; background: #050606; transform: scaleY(0); }
.bar-top { top: 0; transform-origin: top; }
.bar-bot { bottom: 0; transform-origin: bottom; }

/* ---------- WhatsApp-knop ---------- */
.wa-fab {
  position: fixed; z-index: 40;
  right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa);
  box-shadow: 0 6px 20px -6px rgba(37, 211, 102, .55);
  transition: transform .2s ease, opacity .2s ease;
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab:focus-visible { outline-offset: 4px; border-radius: 50%; }
.wa-fab.is-tucked, .wa-fab.is-away { opacity: 0; transform: translateY(120%); pointer-events: none; }
@media (min-width: 768px) {
  .wa-fab { right: calc(24px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); }
}

.note { margin-top: 1rem; max-width: 44ch; font-size: .875rem; color: var(--mute); }

/* ---------- Scène 2: media (montageprogramma) ---------- */
.edit { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3cqw; }
.edit-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-width: 0; }
.edit-label { font: 400 .6875rem/1.2 var(--f-mono); color: var(--mute); }

.bin { position: relative; min-height: 0; }
.shot {
  position: absolute; left: var(--x); top: var(--y);
  width: 13%; aspect-ratio: 9 / 16;              /* staande telefoonfoto's */
  border-radius: 6px; overflow: hidden; background: #1a1d20;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(242, 240, 236, .12);
  transform: rotate(var(--r, 0deg));
  transform-origin: 0 0;
}
.shot img, .shot video { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot-rec {
  position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px;
  font: 500 .625rem/1 var(--f-mono); color: #fff; background: rgba(8, 9, 10, .65);
  padding: 3px 5px; border-radius: 3px;
}
.shot-rec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.tlp {
  position: relative; display: grid; gap: 6px;
  grid-template-rows: 14px 24px 52px 28px;
  padding: 8px; border-radius: 8px; overflow: hidden;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.tlp-ruler { display: flex; justify-content: space-between; padding-left: 32px; font: 400 .625rem/14px var(--f-mono); color: var(--mute); }
.trk { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: stretch; }
.trk-name { font: 500 .625rem/1 var(--f-mono); color: var(--mute); display: grid; place-items: center; background: var(--surface-2); border-radius: 3px; }
.lane { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: rgba(242, 240, 236, .03); border-radius: 3px; }
.lane-v1 { display: flex; }
.clip {
  position: relative; flex: 2 1 0; min-width: 0; display: flex; overflow: hidden;
  background: #2b3a45; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(242, 240, 236, .14);
}
.clip[data-len="3"] { flex-grow: 3; }
.clip[data-len="4"] { flex-grow: 4; }
.clip-thumb { flex: none; height: 100%; width: auto; aspect-ratio: 9 / 16; max-height: 100%; object-fit: cover; }
.cut { position: absolute; z-index: 1; left: 0; top: -3px; bottom: -3px; width: 2px; background: var(--accent); }
.title-clip {
  height: 100%; display: flex; align-items: center; padding-left: 6px;
  background: rgba(255, 59, 48, .2); box-shadow: inset 0 0 0 1px rgba(255, 59, 48, .55); border-radius: 3px;
  font: 500 .625rem/1 var(--f-mono); color: var(--ink);
  transform-origin: left center;
}
.wave { width: 100%; height: 100%; fill: var(--mute); transform-origin: left center; }
.edit-head { position: absolute; top: 28px; bottom: 8px; left: 40px; right: 8px; pointer-events: none; }
.edit-head span { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.edit-head span::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 7px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.program { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.program-frame {
  position: relative; overflow: hidden; flex: none;
  height: calc(100cqh - 22px); aspect-ratio: 9 / 16;
  border-radius: 10px; background: #000;
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -24px rgba(0, 0, 0, .8);
}
.program-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* smal podium: resultaat komt als laag over de dimmende tijdlijn */
@container (max-width: 599px) {
  .edit { display: block; }
  .edit-main { height: 100%; opacity: .3; }
  .shot { width: 17%; }
  .program { position: absolute; inset: 0; margin-inline: auto; width: fit-content; }
}
@media (max-width: 767px) {
  .is-extra { display: none !important; }
}

/* ---------- Scène 3: fundament (demosite van een villaverhuur die meescrollt) ---------- */
/* De site zelf is licht: het is de site van de klant, niet die van ons. */
.browser {
  container-type: inline-size;
  width: min(100cqw, 100cqh * 1.5); aspect-ratio: 3 / 2;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; background: #F6F5F2; color: #121417;
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px -30px #000;
}
.br-bar { flex: none; display: flex; align-items: center; gap: 1cqw; height: max(22px, 4.4cqw); padding: 0 2cqw; background: #E4E1DB; }
.br-bar i { width: 1.1cqw; height: 1.1cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: #C6C1B8; }
.br-url { flex: 1; margin-left: 2cqw; padding: .5cqw 1.6cqw; border-radius: 99px; background: #fff; font: 400 max(9px, 1.5cqw)/1.3 var(--f-mono); color: #54585c; }
.ln { display: block; height: 1cqw; width: 7cqw; border-radius: 99px; background: #D5D0C8; }
.ln-m { width: 70%; }
.ln-s { width: 45%; }

/* demosite (fictieve villaverhuur): gewone HTML in het venster; film.js schuift .d-page mee met het scrollen */
.demo { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #FBF8F3; color: #1D1B18; }
.d-page { position: absolute; left: 0; right: 0; top: 0; }
.d-nav { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 2.6cqw; padding: 2.2cqw 4cqw; color: #fff; font: 500 1.3cqw/1 var(--f-body); }
.d-logo { margin-right: auto; font: 400 2.5cqw/1 'Instrument Serif', Georgia, serif; font-style: italic; }
.d-link { opacity: .88; }
.d-cta { padding: .9cqw 1.6cqw; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #1D1B18; font-weight: 600; }
.d-hero { position: relative; height: 56cqw; overflow: hidden; background: #6f6150; }
.d-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 8, .45) 0%, rgba(10, 9, 8, 0) 30%, rgba(10, 9, 8, .1) 55%, rgba(10, 9, 8, .62) 100%); }
.d-hero-copy { position: absolute; left: 4cqw; right: 4cqw; bottom: 4.4cqw; color: #fff; }
.d-kicker { font: 500 1.2cqw/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.d-h { margin-top: 1.2cqw; font: 400 5.6cqw/1 'Instrument Serif', Georgia, serif; letter-spacing: -.02em; max-width: 12ch; }
.d-sub { margin-top: 1.2cqw; max-width: 44ch; font: 400 1.45cqw/1.45 var(--f-body); opacity: .92; }
.d-ctas { display: flex; gap: 1.2cqw; margin-top: 2.2cqw; }
.d-btn, .d-wa { display: inline-flex; align-items: center; gap: .7cqw; padding: 1.1cqw 2cqw; border-radius: 99px; font: 600 1.35cqw/1 var(--f-body); white-space: nowrap; }
.d-btn { background: #fff; color: #1D1B18; }
.d-wa { background: var(--wa); color: #fff; }
.d-wa svg { width: 1.6cqw; height: 1.6cqw; }
.d-facts { list-style: none; margin: 0; padding: 2.6cqw 4cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; border-bottom: 1px solid #E8E1D6; font: 400 1.3cqw/1.3 var(--f-body); color: #5E574D; }
.d-facts b { display: block; margin-bottom: .4cqw; font: 400 3cqw/1 'Instrument Serif', Georgia, serif; color: #1D1B18; }
.d-about, .d-review, .d-book { padding: 4.6cqw 4cqw 0; }
.d-eyebrow { font: 500 1.15cqw/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #A0714A; }
.d-h2 { margin-top: 1cqw; font: 400 3.6cqw/1.05 'Instrument Serif', Georgia, serif; letter-spacing: -.01em; max-width: 16ch; }
.d-txt { margin-top: 1.4cqw; max-width: 52ch; font: 400 1.5cqw/1.55 var(--f-body); color: #5E574D; }
.d-review { text-align: center; }
.d-stars { color: #C8963E; font-size: 1.8cqw; letter-spacing: .3em; }
.d-quote { margin: 1.2cqw auto 0; max-width: 34ch; font: 400 2.5cqw/1.25 'Instrument Serif', Georgia, serif; font-style: italic; }
.d-who { margin-top: 1.2cqw; font: 400 1.2cqw/1 var(--f-body); color: #8A8276; }
.d-book { padding-bottom: 5cqw; }
.d-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 1cqw; margin-top: 2cqw; padding: 1.2cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 1px 0 #E8E1D6, 0 2cqw 5cqw -3cqw rgba(60, 40, 20, .25); }
.d-field { display: flex; flex-direction: column; gap: .5cqw; padding: .8cqw 1.2cqw; border-radius: .8cqw; background: #F6F1EA; font: 500 1.4cqw/1 var(--f-body); }
.d-field i { font: 400 1.05cqw/1 var(--f-body); font-style: normal; color: #8A8276; }
.d-form .d-btn { background: #1D1B18; color: #fff; justify-content: center; }
.d-fine { margin-top: 1.6cqw; font: 400 1.3cqw/1 var(--f-body); color: #5E574D; display: flex; align-items: center; gap: 1cqw; }
.d-wa-sm { padding: .8cqw 1.4cqw; font-size: 1.2cqw; }

@media (max-width: 767px) {
  /* mobiel: dezelfde site, maar op een telefoon */
  .browser { width: min(100cqw, 100cqh * .56); aspect-ratio: 9 / 16; border-radius: 16px; }
}
@container (max-width: 420px) {
  .br-bar { height: 9cqw; padding: 0 4cqw; gap: 2cqw; }
  .br-bar i { display: none; }
  .br-url { margin: 0; font-size: 3.6cqw; text-align: center; }
  .ln { height: 2cqw; width: 12cqw; }
  /* demosite op een telefoon */
  .d-nav { padding: 4cqw 5cqw; font-size: 3.2cqw; }
  .d-link { display: none; }
  .d-logo { font-size: 6cqw; }
  .d-cta { padding: 2cqw 3.4cqw; }
  .d-hero { height: 150cqw; }
  .d-hero-copy { left: 5cqw; right: 5cqw; bottom: 6cqw; }
  .d-kicker { font-size: 2.8cqw; }
  .d-h { margin-top: 2.6cqw; font-size: 12cqw; }
  .d-sub { margin-top: 2.6cqw; font-size: 3.6cqw; }
  .d-ctas { margin-top: 4.4cqw; gap: 2.4cqw; }
  .d-btn, .d-wa { padding: 3cqw 4cqw; font-size: 3.4cqw; gap: 1.6cqw; }
  .d-wa svg { width: 3.8cqw; height: 3.8cqw; }
  .d-facts { grid-template-columns: 1fr 1fr; gap: 4cqw; padding: 6cqw 5cqw; font-size: 3.2cqw; }
  .d-facts b { font-size: 7cqw; margin-bottom: 1cqw; }
  .d-about, .d-review, .d-book { padding: 9cqw 5cqw 0; }
  .d-eyebrow { font-size: 2.8cqw; }
  .d-h2 { margin-top: 2.4cqw; font-size: 8.4cqw; }
  .d-txt { margin-top: 3cqw; font-size: 3.6cqw; }
  .d-stars { font-size: 4.4cqw; }
  .d-quote { margin-top: 3cqw; font-size: 6cqw; }
  .d-who { margin-top: 3cqw; font-size: 3cqw; }
  .d-book { padding-bottom: 10cqw; }
  .d-form { grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 4cqw; padding: 2.8cqw; border-radius: 3cqw; }
  .d-field { gap: 1.2cqw; padding: 2.4cqw 3cqw; border-radius: 2cqw; font-size: 3.4cqw; }
  .d-field i { font-size: 2.6cqw; }
  .d-form .d-btn { grid-column: span 1; }
  .d-fine { margin-top: 4cqw; font-size: 3.2cqw; gap: 2.4cqw; }
  .d-wa-sm { padding: 2.2cqw 3.4cqw; font-size: 3cqw; }
}
}

/* ---------- Scène 4: verkeer (zoekpagina die meescrollt, fictieve namen, zonder cijfers over jou) ---------- */
/* Licht, zoals scène 3: het is een zoekpagina, niet onze site. Maten in --u (1cqw van het venster, groter op mobiel). */
.serp-wrap { container-type: inline-size; position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; }
.s-win {
  container-type: inline-size;
  position: absolute; left: 0; top: 0; width: 88%; height: 94%;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 10px; background: #fff; color: #202124;
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px -30px #000;
  --k: 1;
}
.s-win * { --u: calc(var(--k) * 1cqw); }
.s-win .br-bar { height: max(22px, 6cqw); gap: 1.3cqw; padding: 0 2.6cqw; }
.s-win .br-bar i { width: 1.5cqw; height: 1.5cqw; }
.s-win .br-url { font-size: max(9px, 2cqw); margin-left: 2.6cqw; padding: .7cqw 2cqw; }
.s-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.s-stick {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: calc(1.6 * var(--u)) calc(4 * var(--u));
  background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 #ebebeb, 0 4px 12px -6px rgba(0, 0, 0, .2);
}
.s-mini { display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(1.2 * var(--u)) calc(2.4 * var(--u)); border-radius: 99px; background: #f1f3f4; font: 400 calc(2.2 * var(--u))/1.2 var(--f-body); color: #202124; white-space: nowrap; overflow: hidden; }
.s-mini svg { flex: none; width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); color: #70757a; }
.s-page { position: absolute; left: 0; right: 0; top: 0; padding: calc(3.4 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); }

.s-q {
  display: flex; align-items: center; gap: calc(1.8 * var(--u)); padding: calc(2 * var(--u)) calc(3 * var(--u));
  border-radius: 99px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, .22);
  font: 400 calc(2.8 * var(--u))/1.2 var(--f-body); color: #202124;
}
.s-q svg { flex: none; width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); color: #70757a; }
.s-typed { white-space: nowrap; overflow: hidden; }
.s-caret { flex: none; width: 1.5px; height: calc(3.2 * var(--u)); margin-left: -1px; background: #1a73e8; }
.s-tabs { display: flex; gap: calc(3.6 * var(--u)); margin-top: calc(2.6 * var(--u)); padding: 0 calc(1 * var(--u)); border-bottom: 1px solid #ebebeb; font: 500 calc(2 * var(--u))/1 var(--f-body); color: #5f6368; }
.s-tabs span { padding-bottom: calc(1.6 * var(--u)); }
.s-tabs .on { color: #1a0dab; box-shadow: inset 0 -3px 0 #1a73e8; }

.s-ai { margin-top: calc(3 * var(--u)); padding: calc(2.8 * var(--u)) calc(3.2 * var(--u)); border-radius: calc(2 * var(--u)); background: linear-gradient(135deg, #EEF3FE, #F6F0FD); }
.s-ai-h { display: flex; align-items: center; gap: calc(1.2 * var(--u)); font: 600 calc(2.1 * var(--u))/1 var(--f-body); color: #202124; }
.s-ai-h svg { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); color: #7b5cf0; }
.s-ai-t { margin-top: calc(1.6 * var(--u)); font: 400 calc(2.3 * var(--u))/1.5 var(--f-body); color: #3c4043; }
.s-ai mark {
  color: inherit; font-weight: 600; border-radius: 3px; box-shadow: 0 0 0 .12em transparent;
  background: linear-gradient(rgba(255, 59, 48, .22), rgba(255, 59, 48, .22)) no-repeat 0 0 / var(--hl, 100%) 100%;
}

.s-local { margin-top: calc(3 * var(--u)); border-radius: calc(2 * var(--u)); overflow: hidden; box-shadow: 0 0 0 1px #e4e4e4; }
.s-map { position: relative; height: calc(18 * var(--u)); }
.s-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin {
  position: absolute; width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin: calc(-3 * var(--u)) 0 0 calc(-1.5 * var(--u));
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #9aa0a6; box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.pin-you { background: var(--accent); width: calc(4.2 * var(--u)); height: calc(4.2 * var(--u)); margin: calc(-4.2 * var(--u)) 0 0 calc(-2.1 * var(--u)); }
.s-places { list-style: none; margin: 0; padding: 0; }
.pl { display: grid; gap: calc(.7 * var(--u)); padding: calc(1.8 * var(--u)) calc(3 * var(--u)); border-top: 1px solid #ebebeb; font: 400 calc(1.9 * var(--u))/1.2 var(--f-body); color: #70757a; }
.pl b { font: 500 calc(2.3 * var(--u))/1.2 var(--f-body); color: #1a0dab; }
.pl-you { box-shadow: inset 3px 0 0 var(--accent); background: #FFF6F4; }
.st { color: #70757a; }
.st em { font-style: normal; color: #3c4043; margin-right: .2em; }
.s-win .st { letter-spacing: .02em; }
.pl .st, .res-snip .st { color: #E7A33E; }
.pl .st em, .res-snip .st em { color: #3c4043; }

.serp-list { list-style: none; margin: calc(3 * var(--u)) 0 0; padding: 0; display: grid; gap: calc(1 * var(--u)); }
/* alle rijen even hoog, zodat 'één plek omlaag' overal dezelfde afstand is */
.res { display: flex; flex-direction: column; justify-content: center; gap: calc(.9 * var(--u)); height: calc(15 * var(--u)); padding: 0 calc(2.4 * var(--u)); border-radius: calc(1.4 * var(--u)); background: #fff; overflow: hidden; }
.res-you { background: #FFF6F4; box-shadow: inset 3px 0 0 var(--accent), 0 6px 24px -10px rgba(0, 0, 0, .25); position: relative; z-index: 1; }
.res-site { display: flex; align-items: center; gap: calc(1.2 * var(--u)); }
.res-fav { flex: none; width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); border-radius: 50%; background: #e8eaed; }
.res-url { font: 400 calc(1.8 * var(--u))/1 var(--f-body); color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-title { font: 400 calc(2.6 * var(--u))/1.2 var(--f-body); color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-snip { font: 400 calc(1.9 * var(--u))/1.4 var(--f-body); color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chart {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: 44%; padding: 3cqw; border-radius: 12px;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -20px #000;
}
.chart-label { display: flex; justify-content: space-between; gap: 1rem; font: 500 1.8cqw/1 var(--f-mono); color: var(--ink); }
.chart-label span { color: var(--mute); font-weight: 400; }
.chart-plot { position: relative; margin-top: 2.4cqw; aspect-ratio: 5 / 2; }
.chart-plot svg { width: 100%; height: 100%; overflow: visible; }
.chart-cover { position: absolute; inset: -4px -4px -4px -2px; background: var(--surface-2); transform-origin: right center; transform: scaleX(0); }

@container (max-width: 480px) {
  .s-win { width: 100%; height: 88%; --k: 1.45; }
  .s-win .br-bar { height: max(22px, 8cqw); }
  .s-win .br-bar i { width: 2cqw; height: 2cqw; }
  .s-win .br-url { font-size: 3cqw; }
  .s-tabs span:nth-child(4) { display: none; }
  .chart { width: 56%; padding: 4cqw; }
  .chart-label { font-size: 3cqw; }
}

/* ---------- Scène 5: opvolging (WhatsApp-gesprek, in merkkleuren) ---------- */
.chat-wrap { position: relative; width: min(100cqw, 100cqh * 1.1); height: 100cqh; }
.phone {
  container-type: inline-size;
  position: absolute; left: 4%; top: 0; height: 100%; aspect-ratio: 9 / 18.5;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px; background: #121518;
  box-shadow: 0 0 0 6px #1d2125, 0 0 0 7px var(--line-2), 0 30px 80px -30px #000;
}
.ph-head { flex: none; display: flex; align-items: center; gap: 3.5cqw; padding: 9cqw 5cqw 4cqw; background: #181C20; border-bottom: 1px solid var(--line); }
.ph-av { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 3.6cqw/1 var(--f-head); }
.ph-name { display: flex; flex-direction: column; font: 600 4.6cqw/1.2 var(--f-body); }
.ph-name small { font: 400 3.4cqw/1.2 var(--f-body); color: var(--wa); }
.ph-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3cqw; padding: 5cqw 4.5cqw; }
.ph-day { align-self: center; font: 400 3cqw/1 var(--f-mono); color: var(--mute); padding: 1.4cqw 3cqw; border-radius: 99px; background: var(--surface); }
.msg { position: relative; max-width: 82%; padding: 3cqw 3.6cqw 5.6cqw; border-radius: 4.5cqw; font: 400 4.1cqw/1.35 var(--f-body); }
.msg time { position: absolute; right: 3.2cqw; bottom: 1.6cqw; font: 400 2.8cqw/1 var(--f-mono); color: var(--mute); }
.msg.in { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 1.2cqw; transform-origin: 0 100%; }
.out-slot { position: relative; align-self: flex-end; max-width: 82%; display: flex; justify-content: flex-end; }
.out-slot .msg { max-width: 100%; }
.msg.out { background: #2A3A33; border-bottom-right-radius: 1.2cqw; transform-origin: 100% 100%; }
.msg-ai { display: block; margin-bottom: 1.4cqw; font: 500 2.8cqw/1 var(--f-mono); color: var(--wa); }
.typing { display: none; align-self: flex-end; gap: 1.4cqw; padding: 3.4cqw 4cqw; border-radius: 4.5cqw; background: #2A3A33; }
.typing i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--mute); }
.film-on .typing { display: flex; position: absolute; right: 0; top: 0; opacity: 0; }

.summary {
  position: absolute; right: 0; bottom: 8%; width: min(52%, 22rem);
  padding: 1.25rem; border-radius: 12px; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -20px #000;
}
.sum-title { font: 700 1.05rem/1.2 var(--f-head); letter-spacing: -.01em; }
.summary dl { margin: .85rem 0 0; display: grid; gap: .55rem; }
.summary dl div { display: grid; grid-template-columns: 6.6rem 1fr; gap: .75rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.summary dt { font: 400 .75rem/1.4 var(--f-mono); color: var(--mute); }
.summary dd { margin: 0; font-size: .875rem; }

@media (max-width: 767px) {
  .chat-wrap { width: 100cqw; }
  .phone { left: 0; width: 100%; aspect-ratio: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--line-2); }
  .ph-head { padding: 3cqw 4cqw; gap: 2.4cqw; }
  .ph-av { width: 7cqw; height: 7cqw; font-size: 2.6cqw; }
  .ph-name { font-size: 3.6cqw; }
  .ph-name small { font-size: 2.8cqw; }
  .ph-body { padding: 3cqw 3.5cqw; gap: 2cqw; }
  .ph-day { display: none; }
  .msg { font-size: 3.6cqw; padding: 2.2cqw 3cqw 4.4cqw; border-radius: 3.6cqw; }
  .msg time { font-size: 2.4cqw; }
  .msg-ai { font-size: 2.4cqw; }
  .typing { padding: 2.6cqw 3cqw; }
  .typing i { width: 1.4cqw; height: 1.4cqw; }
  .summary { right: 3%; bottom: 3%; width: 72%; padding: .75rem .85rem; }
  .sum-title { font-size: .9rem; }
  .summary dl { margin-top: .5rem; gap: .3rem; }
  .summary dl div { padding-top: .3rem; grid-template-columns: 6.2rem 1fr; }
  .summary dt { font-size: .6875rem; }
  .summary dd { font-size: .8125rem; }
}

/* ---------- Hoofdstuk 6: prijs ---------- */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; margin-top: 1.2rem; color: var(--mute); }
.price strong { font: 800 clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/1 var(--f-head); letter-spacing: -.03em; color: var(--ink); }
.price s { color: var(--mute); }
.price-tag { font: 500 .75rem/1 var(--f-mono); color: var(--accent); padding: .35rem .5rem; border-radius: 4px; background: rgba(255, 59, 48, .12); }
.facts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.facts li { display: flex; gap: .6rem; align-items: baseline; }
.facts li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: translateY(-1px); }

.export {
  width: min(100cqw, 30rem); border-radius: 12px; overflow: hidden;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px -30px #000;
  font-size: .9375rem;
}
.ex-bar { display: flex; align-items: center; gap: 6px; padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ex-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 240, 236, .18); }
.ex-bar span { margin-left: .6rem; font: 500 .75rem/1 var(--f-mono); color: var(--mute); }
.ex-rows { margin: 0; padding: .5rem 1.25rem; }
.ex-rows div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.ex-rows dt { font: 400 .75rem/1.6 var(--f-mono); color: var(--mute); }
.ex-rows dd { margin: 0; }
.ex-price dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; }
.ex-price b { font: 800 1.6rem/1 var(--f-head); letter-spacing: -.02em; color: var(--ink); }
.ex-was { position: relative; color: var(--mute); text-decoration: none; }
.ex-was::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--accent); transform-origin: left center; transform: scaleX(var(--strike, 1)); }
.ex-render { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem 1.2rem; }
.ex-track { flex: 1; height: 6px; border-radius: 99px; background: rgba(242, 240, 236, .1); overflow: hidden; }
.ex-fill { display: block; height: 100%; background: var(--accent); transform-origin: left center; }
.ex-status { position: relative; min-width: 5.5rem; font: 500 .75rem/1 var(--f-mono); }
.ex-busy { position: absolute; left: 0; top: 0; color: var(--mute); opacity: 0; }
.ex-done { color: var(--ink); }

@media (max-width: 767px) {
  .film-on #prijs .facts { grid-template-columns: 1fr 1fr; gap: .3rem .9rem; font-size: .875rem; margin-top: .6rem; }
  .film-on #prijs .price { margin-top: .5rem; }
  .film-on #prijs .price strong { font-size: 2.2rem; }
  .film-on #prijs .note { margin-top: .5rem; }
  .export { font-size: .8125rem; }
  .ex-rows { padding: .25rem .9rem; }
  .ex-rows div { grid-template-columns: 5.2rem 1fr; padding: .45rem 0; gap: .6rem; }
  .ex-price b { font-size: 1.3rem; }
  .ex-render { padding: .7rem .9rem .8rem; }
}

/* ---------- Hoofdstuk 7: contact ---------- */
/* Het beeld is hier alleen een overgang: sluiter gaat dicht en het podium verdwijnt (film.js).
   Daarna staan formulier en FAQ alleen in beeld. */
#contact > .scene { display: none; }
.film-on #contact > .scene { display: block; }
.monitor-end .room { filter: saturate(.6) brightness(.7); }

#contact.chapter { grid-template-columns: minmax(0, 1fr); }
#contact > .copy { max-width: 76rem; }
.film-on #contact { height: auto; }
.film-on #contact .copy {
  position: relative; top: auto; height: auto; width: 100%;
  padding: calc(var(--hdr) + 2rem) var(--gutter) calc(6rem + var(--safe-b));
  justify-content: flex-start;
}
@media (min-width: 768px) {
  /* rechts vrij voor de WhatsApp-knop, net als het podium in de andere hoofdstukken */
  #contact > .copy, .film-on #contact .copy { padding-right: calc(100px + var(--safe-r)); }
}
@media (min-width: 1000px) {
  #contact > .copy {
    display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 26rem);
    column-gap: clamp(3rem, 6vw, 7rem); align-items: start;
  }
  .contact-side { padding-top: .5rem; }
  .contact-side .direct { margin-top: 0; }
  .foot { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .film-on #contact > .scene { display: none; } /* formulier krijgt het hele scherm */
  .film-on #contact .copy { padding-top: calc(var(--hdr) + 1.5rem); }
}

.kicker {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem;
  font: 500 .8125rem/1.2 var(--f-mono); color: var(--ink);
}
.kicker::before { content: ""; width: 24px; height: 2px; background: var(--accent); }

.form { display: grid; gap: 1rem; margin-top: 1.25rem; max-width: 42rem; }
.hp { position: absolute; left: -9999px; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .875rem; font-weight: 500; color: var(--ink); }
.opt { color: var(--mute); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem;
  font: 400 1rem/1.4 var(--f-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
}
.field textarea { resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%239BA0A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.field input::placeholder, .field textarea::placeholder { color: #6B7075; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.btn-submit { justify-self: start; }
.form-status { font-size: .9375rem; line-height: 1.5; }
.form-status p + p { margin-top: .4rem; }
.form-done { margin-top: 1.25rem; padding: 1.25rem; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); max-width: 34rem; }
.form-done-h { font: 700 1.25rem/1.2 var(--f-head); margin-bottom: .4rem; }
.form-done p:not(.form-done-h) { color: var(--mute); }

.direct { margin-top: 2rem; display: grid; gap: .4rem; font-size: .9375rem; }
.direct span { color: var(--mute); }
.direct .direct-k { color: var(--ink); font-weight: 500; }

.faq { margin-top: 2.5rem; max-width: 34rem; }
.faq-h { font: 700 1.25rem/1.2 var(--f-head); margin: 0 0 .5rem; }
.faq details { border-top: 1px solid var(--line-2); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  min-height: 48px; padding: .8rem 0; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.25rem/1 var(--f-mono); color: var(--mute); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1rem; color: var(--mute); max-width: 60ch; }

.foot { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .8125rem; color: var(--mute); }
.foot a { color: var(--mute); }
.foot a:hover { color: var(--ink); }

@media (max-width: 767px) {
  .field-row { grid-template-columns: 1fr; }
  /* de WhatsApp-knop gaat in Contact opzij (film.js), dus de verzendknop mag de volle breedte */
  .btn-submit { justify-self: stretch; }
}

/* ---------- Mobiel: schermvullend beeld (na alle scène-regels, zodat deze winnen) ---------- */
@media (max-width: 767px) and (max-height: 760px) {
  :root { --text-zone: 36svh; } /* korte telefoons */
}
@media (max-width: 767px) {
  /* Opening: 16:9 full-bleed boven de tekstzone; staand vult hij het scherm als een Reel (film.js) */
  .film-on #opening .scene-in { padding-inline: 0; }
  .film-on .op-mon, .film-on .op-ring, .film-on .op-window { border-radius: 0; }
  /* Media: het resultaat komt schermvullend over de montage heen, als een Reel */
  .film-on #media .program {
    position: absolute; top: -14px; bottom: calc(-1 * var(--text-zone));
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
    width: auto; margin: 0; gap: 0;
  }
  .film-on #media .program > .edit-label { display: none; }
  .film-on #media .program-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}

/* btw-vermelding bij prijzen (klein, gedempt) */
.vat { font: 400 .75rem/1 var(--f-body); color: var(--mute); white-space: nowrap; }
.film-on .copy-body .vat { color: #C4C8CC; }