/* ============================================================
   CONSTELL — BRANDED OFFERTE (branded-offerte.html)
   Compositie op het Constell-designsysteem (tokens/base/components).
   Gedeeld gedrag komt uit assets/site.js; herbruikbare componenten
   (knoppen, kaarten, carrousel, stat-ring, tabs--knop, banden) uit
   het designsysteem. Hier staat alleen wat uniek is aan deze pagina,
   geprefixt `bo-`.

   Idee: een offerte is hier geen document maar een beleving — dus we
   tónen die beleving. De hero is de echte offerte op een scherm, de
   offerte-website blader je zelf door, en het salesproces tekent zich
   als een keten voor je uit.

   Bandenritme: foto-hero (inkt-scrim) · steen · steen · steen · steen ·
   steen · inkt · steen · zachtwit(carrousel) · foto-band · steen ·
   steen · zachtwit(faq) · inkt(footer)
   ============================================================ */

/* ============ 0. Kruimelpad (in de foto-hero) ============ */
.bo-kruimel {
  font-size: var(--fs-small);
  color: rgba(244, 244, 245, 0.8);
  margin-bottom: clamp(var(--sp-6), 6vw, var(--sp-9));
}
.bo-kruimel nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.bo-kruimel a { color: rgba(244, 244, 245, 0.8); text-decoration: none; transition: color var(--t-fast) var(--ease); padding-block: 0.6875rem; margin-block: -0.6875rem; }
.bo-kruimel a:hover { color: var(--c-on-dark); }
.bo-kruimel .terug { color: var(--c-on-dark); font-weight: 500; }
.bo-kruimel .sep { color: rgba(244, 244, 245, 0.4); }

/* ============ 1. Hero: de echte offerte op een scherm ============
   Volle-breedte sfeerfoto (bruidspaar dat de offerte bekijkt) met een
   inkt-scrim; de kop staat erin, het offerte-scherm hangt eronder over
   de bandgrens. */
.bo-hero {
  position: relative;
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
  overflow: hidden;
}
.bo-hero-foto { position: absolute; inset: 0; z-index: 0; }
.bo-hero-foto img { width: 100%; height: 100%; object-fit: cover; }
/* scrim: donker genoeg voor krijt-tekst, warm van boven zodat de foto leeft */
.bo-hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  /* dieper aan de top (kruimelpad) en midden (lead), zodat krijt-tekst overal
     ruim leesbaar blijft, ook waar de foto oplicht */
  background:
    linear-gradient(180deg, rgba(23,23,29,0.62) 0%, rgba(23,23,29,0.44) 42%, rgba(23,23,29,0.78) 100%);
}
.bo-hero-inhoud {
  position: relative;
  z-index: 1;
  padding-top: var(--sp-5);
  padding-bottom: clamp(9rem, 20vw, 15rem);   /* ruimte waar het scherm overheen valt */
  text-align: center;
}
.bo-hero h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}
.bo-hero .lead { color: rgba(244, 244, 245, 0.85); max-width: 52ch; margin-inline: auto; }
.bo-hero-acties { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

/* het offerte-scherm hangt over de onderrand van de foto in de volgende band */
.bo-hero-scherm {
  position: relative;
  z-index: 2;
  width: min(60rem, 92vw);
  margin: clamp(-8rem, -16vw, -11rem) auto 0;
  border-radius: var(--r-media);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.bo-hero-scherm img { width: 100%; height: auto; display: block; }

/* ============ 2. Twee kenmerken (magisch · zonder inloggen) ============
   Exact als het origineel: een horizontale kaart met een afgeronde thumbnail
   links (op ware grootte, 276×169) en de tekst rechts. Zo sluit het beeld netjes
   aan binnen de kaart en zijn er geen losse afgeronde onderhoeken meer. */
.bo-kenmerken {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.bo-kenmerk {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
}
.bo-kenmerk-beeld { flex: 0 0 auto; width: 276px; max-width: 45%; }
.bo-kenmerk-beeld > img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-showcase);
}
.bo-kenmerk-tekst { flex: 1 1 auto; min-width: 0; padding: 0; }
.bo-kenmerk-tekst .kop { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.bo-kenmerk-tekst .kop svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--c-orange-deep); }
.bo-kenmerk-tekst h3 { font-size: var(--fs-kaartkop); margin: 0; }
.bo-kenmerk-tekst p { margin: 0; }
@media (max-width: 800px) {
  .bo-kenmerken { grid-template-columns: 1fr; }
  .bo-kenmerk { flex-direction: column; align-items: flex-start; }
  .bo-kenmerk-beeld { width: 100%; max-width: none; }
}

/* ============ 3. "Dit is geen offerte." — zwevende offerte-schermen ============
   De flow tekent zichzelf: het beeld wordt van links naar rechts onthuld zodra
   de sectie in beeld komt (de reveal-observer zet .in op de container). */
.bo-geen-offerte { margin-top: var(--sp-8); }
.bo-geen-offerte img {
  width: 100%; height: auto; display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1500ms var(--ease);
}
.bo-geen-offerte.in img { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .bo-geen-offerte img { clip-path: none; transition: none; }
}

/* ============ 4. Offerte-website: blader zelf door de tabs ============
   Sticky-vrij: één mediapaneel met vaste verhouding dat kruisvervaagt
   tussen de vier schermen. Zonder JS staan de vier schermen onder elkaar. */
.bo-tabs-wrap { max-width: 58rem; margin-inline: auto; }
.bo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-6);
}
.bo-schermen {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 952 / 621;
  box-shadow: var(--shadow-card);
}
.bo-schermen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.bo-schermen img.is-aan { opacity: 1; }
.bo-tabs-voet { text-align: center; margin-top: var(--sp-6); }
/* voortgangsstreep onder de tabs, zolang de autoplay loopt */
.bo-tabs-loop { height: 2px; background: var(--c-line); border-radius: var(--r-pill); overflow: hidden; margin-bottom: var(--sp-6); }
.bo-tabs-loop span { display: block; height: 100%; background: var(--c-orange); transform-origin: left; transform: scaleX(0); }
.bo-tabs-wrap.is-live .bo-tabs-loop span { animation: bo-loop 5.5s linear infinite; }
.bo-tabs-wrap.is-gepauzeerd .bo-tabs-loop { opacity: 0; }
@keyframes bo-loop { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .bo-tabs-loop { display: none; } }
/* Zonder JS: geen absolute stapeling maar gewoon onder elkaar. */
.no-js .bo-schermen { aspect-ratio: auto; }
.no-js .bo-schermen img { position: static; opacity: 1; margin-bottom: var(--sp-4); }

/* ============ 5. De keten: widget → agent → branded offerte ============
   Exacte pixel-replica van het origineel. Een vast 1296×2049-canvas met alle
   onderdelen absoluut op de originele coördinaten (opgemeten van constell.com);
   JS schaalt het canvas naar de containerbreedte. Zo sluiten de verbindingslijnen
   altijd precies aan, ongeacht de schermbreedte, en staan de drie beelden op
   ware grootte (875×476, 534×565, 636×390) zodra er ruimte voor is. */
.bo-keten { margin-top: var(--sp-7); }
/* Header links (zoals origineel), niet gecentreerd */
.bo-keten-head { text-align: left; max-width: 46rem; margin-inline: 0; }
/* Deze sectie mag zo breed als het canvas (1296) zodat de replica op ware
   grootte kan staan; header en canvas delen dezelfde linkerkant. */
#keten > .container { width: min(1296px, 100% - 3rem); }

.bo-flow { position: relative; width: 100%; margin-inline: auto; aspect-ratio: 1296 / 2049; }
.bo-flow-mobiel { display: none; }
.bo-stage {
  position: absolute; top: 0; left: 0;
  width: 1296px; height: 2049px;
  transform-origin: top left;
  transform: scale(var(--bo-scale, 1));
}
.bo-el { position: absolute; margin: 0; }
.bo-stage img.bo-el { max-width: none; height: auto; }

/* ---- Gechoreografeerde entree, per blok getriggerd ----
   De keten heeft drie schakels (widget=g1, agent=g2, offerte=g3). Elk blok komt
   pas binnen zodra het zélf in beeld scrolt (JS zet `.g1-in/.g2-in/.g3-in` op de
   stage), en dan één voor één in de volgorde van de reis: lijn → titel → beeld →
   tekst → knop. Rustig tempo, ruime tussenpauzes. Alles gated op .reveal-armed —
   zonder JS staat de hele keten meteen zichtbaar; de reveal verbergt niets. */
.reveal-armed .bo-stage .bo-el {
  opacity: 0;
  transition:
    opacity 850ms var(--ease),
    transform 1000ms var(--ease),
    filter 850ms var(--ease),
    clip-path 1000ms var(--ease);
}
/* tekst komt omhoog en scherp in focus */
.reveal-armed .bo-stage .bo-intro,
.reveal-armed .bo-stage .bo-t1,
.reveal-armed .bo-stage .bo-t2,
.reveal-armed .bo-stage .bo-t3,
.reveal-armed .bo-stage .bo-p1,
.reveal-armed .bo-stage .bo-p2,
.reveal-armed .bo-stage .bo-p3 { transform: translateY(24px); filter: blur(5px); }
/* beelden schuiven omhoog met een subtiele schaal */
.reveal-armed .bo-stage .bo-i1,
.reveal-armed .bo-stage .bo-i2,
.reveal-armed .bo-stage .bo-i3 { transform: translateY(32px) scale(0.98); }
/* knoppen komen kort na hun tekst omhoog */
.reveal-armed .bo-stage .bo-b1,
.reveal-armed .bo-stage .bo-b2,
.reveal-armed .bo-stage .bo-b3 { transform: translateY(18px); }
/* lijnen tekenen zich van boven naar beneden, richting de volgende schakel */
.reveal-armed .bo-stage .bo-l1,
.reveal-armed .bo-stage .bo-l2,
.reveal-armed .bo-stage .bo-l3,
.reveal-armed .bo-stage .bo-l4 { clip-path: inset(0 0 100% 0); }

/* per blok zichtbaar zodra dat blok getriggerd is */
.bo-stage.g1-in .g1,
.bo-stage.g2-in .g2,
.bo-stage.g3-in .g3 { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* de tijdlijn per blok — telkens opnieuw beginnend bij 0, één voor één (~190ms) */
.bo-stage.g1-in .bo-intro { transition-delay: 0ms; }
.bo-stage.g1-in .bo-l1 { transition-delay: 190ms; }
.bo-stage.g1-in .bo-t1 { transition-delay: 380ms; }
.bo-stage.g1-in .bo-i1 { transition-delay: 570ms; }
.bo-stage.g1-in .bo-p1 { transition-delay: 760ms; }
.bo-stage.g1-in .bo-b1 { transition-delay: 950ms; }

.bo-stage.g2-in .bo-l2 { transition-delay: 0ms; }
.bo-stage.g2-in .bo-t2 { transition-delay: 190ms; }
.bo-stage.g2-in .bo-i2 { transition-delay: 380ms; }
.bo-stage.g2-in .bo-p2 { transition-delay: 570ms; }
.bo-stage.g2-in .bo-b2 { transition-delay: 760ms; }

.bo-stage.g3-in .bo-l3 { transition-delay: 0ms; }
.bo-stage.g3-in .bo-t3 { transition-delay: 190ms; }
.bo-stage.g3-in .bo-i3 { transition-delay: 380ms; }
.bo-stage.g3-in .bo-p3 { transition-delay: 570ms; }
.bo-stage.g3-in .bo-b3 { transition-delay: 760ms; }
.bo-stage.g3-in .bo-l4 { transition-delay: 950ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .bo-stage .bo-el { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}
/* verbindingslijnen (decoratief) — op de exacte originele posities */
.bo-l1 { left: 288px; top: -82px; width: 498px; }
.bo-l2 { left: 340px; top: 407px; width: 397px; }
.bo-l3 { left: 416px; top: 952px; width: 379px; }
.bo-l4 { left: 200px; top: 1709px; width: 512px; }
/* intro-blok */
.bo-intro { left: 0; top: 0; width: 461px; }
.bo-intro h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.3; margin-bottom: 0.375rem; }
.bo-intro p { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-lead); line-height: 1.55; margin: 0; }
/* schakel-titels (Space Grotesk, klein — zoals origineel, niet serif) */
.bo-t1, .bo-t2, .bo-t3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.bo-t1 { left: 826px; top: 44px; }
.bo-t2 { left: 217px; top: 626px; }
.bo-t3 { left: 776px; top: 1260px; width: 320px; }
/* beelden op ware grootte */
.bo-i1 { left: 421px; top: 108px; width: 875px; }
.bo-i2 { left: 0; top: 737px; width: 534px; }
.bo-i3 { left: 660px; top: 1379px; width: 636px; }
/* body-teksten */
.bo-p1, .bo-p2, .bo-p3 { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-lead); line-height: 1.55; }
.bo-p1 { left: 625px; top: 528px; width: 555px; }
.bo-p2 { left: 0; top: 1330px; width: 458px; }
.bo-p3 { left: 768px; top: 1797px; width: 460px; }
/* knoppen op originele maat (220×69, donker gevuld) */
.bo-b1, .bo-b2, .bo-b3 { width: 220px; height: 69px; justify-content: center; }
.bo-b1 { left: 625px; top: 668px; }
.bo-b2 { left: 0; top: 1469px; }
.bo-b3 { left: 768px; top: 1937px; }

/* --- Mobiel: een rechte genummerde tijdlijn (zoals het origineel) --- */
@media (max-width: 1000px) {
  .bo-flow { display: none; }
  #keten > .container { width: min(var(--container), 100% - 3rem); }
  .bo-flow-mobiel { display: grid; gap: 0; }
  .bo-mintro { margin-bottom: var(--sp-6); max-width: 34rem; }
  .bo-mintro h3 { font-size: var(--fs-kaartkop); font-family: var(--font-display); font-weight: 700; margin-bottom: var(--sp-3); }
  .bo-mstap { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-4); padding-bottom: var(--sp-7); position: relative; }
  .bo-mstap:not(:last-child)::before {
    content: ""; position: absolute; left: 1.25rem; top: 3rem; bottom: 0;
    border-left: 2px dashed var(--c-line-strong);
  }
  .bo-mnr {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--c-ink); color: var(--c-on-dark);
    display: grid; place-items: center; position: relative; z-index: 1;
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4);
  }
  .bo-mstap h4 { font-size: var(--fs-kaartkop); font-family: var(--font-display); font-weight: 700; margin-bottom: var(--sp-4); }
  .bo-mstap-beeld { border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--sp-4); }
  .bo-mstap-beeld img { width: 100%; height: auto; display: block; }
  .bo-mstap p { font-size: var(--fs-small); margin-bottom: var(--sp-4); }
}

/* ============ 6 & 8. Afwisselende beeld/tekst-rijen ============ */
.bo-rijen { display: grid; gap: clamp(var(--sp-7), 8vw, 7.5rem); margin-top: var(--sp-8); }
.bo-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, 5rem);
  align-items: center;
}
.bo-rij:nth-child(even) > .bo-rij-beeld { order: 2; }
/* Subtiele scroll-parallax: de foto drijft puur verticaal mee (geen zoom, geen
   clip) zodat de ingebakken omranding van de foto heel blijft. JS zet de transform
   per frame; will-change houdt het soepel. */
.bo-rij-beeld img { width: 100%; height: auto; display: block; will-change: transform; }
/* Snelle entree van de foto: hij verschijnt met een korte fade + opduik zodra hij
   in beeld scrolt (los van de rustige tekst-reveal ernaast). De entree zit op het
   kader; de scroll-zoom zit op de <img> erbinnen, dus ze bijten elkaar niet.
   Gated op .reveal-armed → zonder JS meteen zichtbaar. */
.reveal-armed .bo-rij-beeld {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 460ms var(--ease), transform 640ms var(--ease);
}
.reveal-armed .bo-rij-beeld.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .bo-rij-beeld { opacity: 1; transform: none; transition: none; }
}
.bo-rij h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
/* Bullets flush met de kop: geen ul-inspringing, de stip staat op de kop-lijn. */
.bo-rij .lijst { display: grid; gap: var(--sp-3); margin-block: var(--sp-4) var(--sp-5); padding-left: 0; list-style: none; }
.bo-rij .lijst li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.bo-rij .lijst li::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-ink); margin-top: 0.6em;
}
.bo-rij .lijst .hl-uniek { display: inline-flex; align-items: center; gap: 0.25rem; }
.bo-rij .lijst .hl-uniek .ster { color: var(--c-orange-deep); }
@media (max-width: 900px) {
  .bo-rij { grid-template-columns: 1fr; }
  .bo-rij:nth-child(even) > .bo-rij-beeld { order: 0; }
}

/* ============ 7. Agentic prijzen (donkere band) ============ */
.bo-marge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(var(--sp-6), 5vw, 5rem);
  align-items: center;
}
.bo-marge .eyebrow { color: var(--c-orange); }
.bo-marge h2 { color: var(--c-on-dark); }
.bo-marge p { color: rgba(244, 244, 245, 0.82); max-width: 44ch; }
.bo-marge-badge {
  display: inline-block;
  margin-bottom: var(--sp-5);
}
.bo-marge-badge img { height: 45px; width: auto; }
.bo-marge-beeld { display: flex; justify-content: center; }

/* De marge-knop (1-op-1 van de homepage). Drie lagen boven elkaar: de schijf
   (SVG) vult het gat waar de hand zat, de illustratie draagt de streepjes en
   labels, en de hand is een eigen laag die om het midden van de knop draait.
   De boog en het percentage komen mee. */
.marge { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 595 / 540; }
.marge > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.marge img { object-fit: contain; }
.marge-boog path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1100ms var(--ease) 120ms;
}
.marge-hand {
  transform-origin: 45.2% 48.7%;   /* het midden van de knop */
  transform: rotate(-26deg) translate(-3%, 2%);
  transition: transform 1150ms var(--ease);
}
.marge-waarde {
  position: absolute;
  inset: 24% auto auto 67%;
  width: auto;
  height: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--c-orange);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms var(--ease) 900ms, transform 420ms var(--ease) 900ms;
}
.marge.af .marge-boog path { stroke-dashoffset: 0; }
.marge.af .marge-hand { transform: none; }
.marge.af .marge-waarde { opacity: 1; transform: none; }
.marge.af .marge-boog path, .marge.af .marge-hand, .marge.af .marge-waarde { transition: none; }
/* Scroll-gekoppeld: JS zet de standen per frame, dus geen eigen overgang. */
.marge--scrub .marge-boog path,
.marge--scrub .marge-hand,
.marge--scrub .marge-waarde { transition: none; }
@media (max-width: 900px) { .bo-marge { grid-template-columns: 1fr; } }

/* ============ 10. Seizoensfotos — volle-breedte foto-band ============
   Precies als het origineel: een hoge, volledige foto-band (op desktop 1250px)
   met de hele seizoensfoto beeldvullend (cover) en de tekst bovenin gecentreerd.
   De foto blijft volledig zichtbaar; leesbaarheid komt van een subtiele
   tekst-schaduw, niet van een donker vlak. */
.bo-seizoen {
  position: relative;
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
  background: var(--c-ink);
  height: 620px;
  overflow: hidden;
}
@media (min-width: 768px)  { .bo-seizoen { height: 800px; } }
@media (min-width: 1280px) { .bo-seizoen { height: 1250px; } }
.bo-seizoen-foto { position: absolute; inset: 0; z-index: 0; }
.bo-seizoen-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.bo-seizoen .container {
  position: relative; z-index: 1; text-align: center;
  padding-top: clamp(2.5rem, 9vh, 7.625rem);
  text-shadow: 0 2px 18px rgba(23, 23, 29, 0.5);
}
.bo-seizoen h2 { color: var(--c-on-dark); margin-bottom: var(--sp-4); }
.bo-seizoen p { color: var(--c-on-dark); max-width: 46ch; margin-inline: auto; }
.bo-seizoen .klein { color: var(--c-on-dark); font-size: var(--fs-small); }

/* ============ 8b. Scrollworld — immersieve fly-through, op maat ============
   Een ruime, adembenemende sectie: een gecentreerde kop, de fly-through op
   groot formaat, dan de "scène-reis" (de vlucht = het programma van de gast) en
   ten slotte de kernpunten met de CTA. Royale lucht boven én onder. */
.bo-scrollworld {
  overflow: hidden;
  padding-block: clamp(var(--sp-8), 10vw, 9rem);
}
.bo-sw-kop { max-width: 62rem; margin-inline: auto; text-align: center; margin-bottom: clamp(var(--sp-7), 6vw, 4.5rem); }
.bo-sw-kop .badge { margin-bottom: var(--sp-5); }
.bo-sw-kop h2 { color: var(--c-on-dark); }
/* Smaller dan de kop: een gecentreerde lead wordt over de volle 62rem te lang
   om comfortabel te lezen. 41rem houdt de langste regel op ~74 tekens, binnen
   de 65-75ch die het designsystem voor lopende tekst aanhoudt (46rem gaf 84). */
.bo-sw-kop .lead { color: rgba(244, 244, 245, 0.82); margin-top: var(--sp-4); margin-inline: auto; max-width: 41rem; }

.bo-sw-scherm {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
  border-radius: var(--r-media);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-pop);
  background: var(--c-ink);
}
.bo-sw-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; outline-offset: -4px; }
/* Afgelopen: het slotbeeld (het kostenoverzicht) blijft staan, iets gedimd,
   met de knop erover — zo is duidelijk dat de film klaar is. */
.bo-sw-scherm.is-af::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 29, 0.55);
}
.bo-sw-opnieuw {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* .btn zet display:inline-flex en wint van het UA-[hidden]; zonder deze regel
   staat de knop al vanaf het laden over de film. */
.bo-sw-opnieuw[hidden] { display: none; }
.bo-sw-opnieuw:hover { transform: translate(-50%, calc(-50% - 1px)); }
.bo-sw-opnieuw:active { transform: translate(-50%, -50%); }
.bo-sw-opnieuw svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* De scroll-hint over de video is weg: de film speelt vanzelf af, je kunt er
   niet in scrollen. Wat er te bedienen valt, zit in de knop eronder. */

/* De scène-reis: de vlucht volgt het programma van de gast. */
.bo-sw-reis { margin-top: clamp(var(--sp-7), 6vw, 4.5rem); }
.bo-sw-reis-label {
  text-align: center; color: rgba(244, 244, 245, 0.7);
  font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.bo-sw-scenes {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4);
}
.bo-sw-scene {
  position: relative;
  display: grid; gap: var(--sp-2);
  opacity: 0.55;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.bo-sw-reis.in .bo-sw-scene { opacity: 1; }
/* getrapt oplichten in volgorde, als een tijdlijn */
.bo-sw-reis.in .bo-sw-scene:nth-child(1) { transition-delay: 0ms; }
.bo-sw-reis.in .bo-sw-scene:nth-child(2) { transition-delay: 120ms; }
.bo-sw-reis.in .bo-sw-scene:nth-child(3) { transition-delay: 240ms; }
.bo-sw-reis.in .bo-sw-scene:nth-child(4) { transition-delay: 360ms; }
.bo-sw-reis.in .bo-sw-scene:nth-child(5) { transition-delay: 480ms; }
.bo-sw-scene-beeld {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 16 / 10; box-shadow: var(--shadow-card);
}
.bo-sw-scene-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-sw-scene-nr {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 23, 29, 0.6); backdrop-filter: blur(6px);
  color: var(--c-on-dark); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
}
.bo-sw-scene-naam { color: var(--c-on-dark); font-weight: 500; margin-top: var(--sp-1); }
.bo-sw-scene-sub { color: rgba(244, 244, 245, 0.6); font-size: var(--fs-small); }

/* Onderrand: kernpunten + CTA */
.bo-sw-onder {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
  margin-top: clamp(var(--sp-7), 6vw, 4.5rem);
}
.bo-sw-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); max-width: 40rem; }
.bo-sw-lijst li { display: flex; gap: var(--sp-3); align-items: flex-start; color: rgba(244, 244, 245, 0.85); }
.bo-sw-lijst li::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-orange); margin-top: 0.6em;
}
@media (max-width: 900px) {
  .bo-sw-scenes { grid-template-columns: repeat(2, 1fr); }
  .bo-sw-scene:nth-child(5) { grid-column: 1 / -1; }
  .bo-sw-onder { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .bo-sw-scenes { grid-template-columns: 1fr; }
  .bo-sw-scene:nth-child(5) { grid-column: auto; }
}

/* ============ 11. Uitgelicht — 3 afwisselende rijen ============ */
.bo-uit-badge { display: flex; justify-content: center; margin-bottom: var(--sp-7); }

/* ============ 12. Specificaties — bel + 6 kaarten ============ */
.bo-spec-bel { display: flex; justify-content: center; margin-top: var(--sp-7); }
.bo-spec-bel img { height: 148px; width: auto; display: block; }
.bo-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: calc(-1 * var(--sp-2));
}
.bo-spec { padding: var(--sp-6); }
.bo-spec-ic { width: 32px; height: 32px; color: var(--c-ink-soft); margin-bottom: var(--sp-5); }
.bo-spec h3 { font-size: var(--fs-kaartkop); margin-bottom: var(--sp-3); }
.bo-spec p { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; }
@media (max-width: 900px) { .bo-spec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bo-spec-grid { grid-template-columns: 1fr; } }

/* ============ 13. Veelgestelde vragen ============ */
.bo-faq { max-width: 68rem; margin-top: var(--sp-7); }
.bo-faq-item { border-bottom: 1px solid var(--c-line-strong); }
.bo-faq-knop {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: var(--sp-5);
  background: none; border: 0; text-align: left; cursor: pointer;
  color: inherit; font-family: inherit;
}
.bo-faq-knop h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 500; margin: 0; transition: transform var(--t-fast) var(--ease); }
.bo-faq-knop:hover h3 { transform: translateX(3px); }
.bo-faq-ic { position: relative; flex: 0 0 auto; width: 22px; height: 22px; color: var(--c-ink-soft); transition: color var(--t-fast) var(--ease); }
.bo-faq-knop:hover .bo-faq-ic, .bo-faq-knop[aria-expanded="true"] .bo-faq-ic { color: var(--c-ink); }
.bo-faq-ic::before, .bo-faq-ic::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor;
  transition: transform var(--t-med) var(--ease);
}
.bo-faq-ic::after { transform: rotate(90deg); }
.bo-faq-knop[aria-expanded="true"] .bo-faq-ic::after { transform: rotate(0deg); }
.bo-faq-antwoord { padding-bottom: var(--sp-5); }
.bo-faq-antwoord p { max-width: 70ch; margin: 0; }
.bo-faq-antwoord[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .bo-faq-knop h3 { transition: none; } .bo-faq-knop:hover h3 { transform: none; } }