/* ═══════════════════════════════════════════
   OPLOSSINGEN — pagina-specifieke stijlen
   ═══════════════════════════════════════════ */

/* Page-specific variables missing from base.css */
:root {
  --radius: 8px;
  --gutter: 24px;
}

/* ─── S1 + S2 — Hero + Werkelijkheid ─── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

/* ═══ Hero (from whayle-v2) ═══ */
/* ═══ HERO ═══ */
/* ──────────────────────────────────────────────
   COMPOSITIE-RATIONALE (v2)
   Zie onderbouwing onderaan dit CSS-blok; korte samenvatting:
   - Tekst op horizontal third (33 %) en verticale phi-lijn (38 % vanaf top)
     → Arnheim/Palmer visuele knooppunten.
   - Cirkel-center uitgelijnd op 67 % horizontaal × 50 % verticaal
     → dominante diagonaal van linksonder naar rechtsboven, consistent met
       Westerse leesflow (Dondis 1973) en saccade-minimalisatie.
   - Vertical rhythm: modular scale 1.5× (Tschichold / Bringhurst),
     i.p.v. lineaire 48/48/16 → 24 / 40 / 56 golvend.
   - Mobiel: cirkel wordt full-bleed figuur-grond achter de tekst, niet
     in een hoek geduwd. Hart-centrum op 50 % × 32 % (phi) — tekst op
     "vloer-kant van de cirkel" (Wertheimer's gestalt-closure).
   ────────────────────────────────────────────── */
/* Containing block for the sticky hero — hero un-sticks when this ends */
.hero-stage {
  background: var(--navy); /* dark bg prevents flash when hero jumps off-screen */
}

.hero {
  min-height: 100svh; /* svh voorkomt mobile-chrome-sprongen bij scroll (iOS Safari URL-bar) */
  display: flex;
  align-items: center;
  position: sticky;
  top: calc(72px - 100svh); /* scrolls normally, then pins when bottom reaches nav */
  z-index: 5;
  overflow: hidden;
  background: linear-gradient(135deg, #1C1E4D 0%, #154a4a 42%, #008588 100%);
}

@supports (background: linear-gradient(in oklch 135deg, #1C1E4D, #008588)) {
  .hero { background: linear-gradient(in oklch 135deg, #1C1E4D, #008588); }
}

/* ── Cirkelsysteem laag 2 ──
   Phi-punt plaatsing: hart-centrum op 67 % × 50 % van de viewport.
   Grootte = 72 vmin → schaalt proportioneel met het kleinste venster-as, waardoor
   de cirkel op landscape-desktop én portrait-mobile dezelfde optische impact heeft. */
.hero-circles {
  position: absolute;
  top: 50%;
  left: 67%;
  /* clamp houdt de cirkel écht vierkant: zowel min-grens als max-grens
     gelden gelijk voor width en height, dus aspect-ratio blijft 1:1 op
     elke viewport — ook op korte landscape-laptops en split-screens. */
  width:  clamp(520px, 72vmin, 1100px);
  height: clamp(520px, 72vmin, 1100px);
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
  /* Zachte atmospheric perspective — cirkelrand lost op in de navy bij viewportrand,
     vermindert de "zware rechte hoek" wanneer cirkel de rand raakt. */
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
}

/* Container: verleg van center-default naar "linker derde" (Arnheim).
   max-width 1200 blijft consistent met de rest van de site, maar padding-top
   komt nu uit een modular scale zodat de tekst op de verticale phi-lijn landt. */
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: clamp(80px, 12vh, 180px);   /* laat titel beginnen rond 15–20 % vanaf top */
  padding-bottom: clamp(80px, 12vh, 160px);
  /* Tekstbreedte beperken tot 55 % van container → wit aan de rechterkant
     laat de cirkel ademen. Measure-regel Bringhurst: 45–75 characters.
     Bij 152 px titel past "Inzicht," makkelijk in 7ch. */
  max-width: min(1200px, 92vw);
}

.hero .container > * {
  max-width: 55ch;  /* optische balans t.o.v. cirkel rechts */
}

/* ── Poster-woord "Inzicht," ──
   Ongewijzigd in type-specs; alleen ritme eronder herijkt. */
.hero-title {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(72px, 11vw, 152px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
  /* Modular scale 1.5× tussen blokken — groeiende ademruimte naar het
     "kleinere" detail toe = visuele rangorde door whitespace (Lupton 2004). */
  margin: 0 0 clamp(16px, 2.2vh, 32px) 0;
}

/* Subtitle — contrast met het poster-woord via Georgia italic (behouden). */
.hero-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.35;
  color: rgba(255,255,255,.40);
  max-width: 600px;
  margin: 0 0 clamp(32px, 5vh, 64px) 0; /* grotere gap vóór "het gevolg" — rustpunt */
}

/* Resultaat-regel — kleiner, langer liggend. */
.hero-result {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.35);
  margin: 0 0 clamp(32px, 5vh, 64px) 0;
}

/* ── Scroll-indicator ──
   Van centraal verplaatst naar links, onder de tekstkolom. Reden:
   centrale scroll-pijl kruist de diagonaal Inzicht → hart-cirkel en fragmenteert
   de optische flow (Arnheim's "line of force"). Links-uitgelijnd respecteert
   de F-patroon en laat de saccade inzicht→hart intact. */
.hero-scroll {
  position: absolute;
  bottom: 32px;                                        /* §4 canvas-marge onder */
  left: calc(50% - min(1200px, 92vw) / 2 + 40px);      /* start tekstkolom = container-centrering + padding-left */
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.hero-scroll span {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgba(255,255,255,.65);
}
.hero-scroll svg {
  animation: drift 3s ease-in-out infinite;
}

/* ═══ KEYFRAMES ═══ */
@keyframes drift {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Tegendraadse aderen — rotatie met wisselende richting en snelheid */
@keyframes spin-cw  { from { transform: rotate(0deg);  } to { transform: rotate(360deg);  } }
@keyframes spin-ccw { from { transform: rotate(0deg);  } to { transform: rotate(-360deg); } }

.vein-a1 { animation: spin-cw  60s linear infinite; transform-origin: 280px 280px; transform-box: fill-box; }
.vein-a2 { animation: spin-ccw 80s linear infinite; transform-origin: 280px 280px; transform-box: fill-box; }
.vein-b  { animation: spin-ccw 70s linear infinite; transform-origin: 280px 280px; transform-box: fill-box; }
.vein-h  { animation: spin-cw  65s linear infinite; transform-origin: 280px 280px; transform-box: fill-box; }

/* ═══════════════════════════════════════════
   BLOEDSOMLOOP — haarlijn-glow + hartslag
   De haarlijnen zijn de capillairen; door elk reist een teal lichtpuls.
   De hartslag tikt op ±55 bpm (1.1s lub-dub cyclus).
   De teal pulsen op de ringen reizen in eigen tempo, los van de hartslag,
   zodat de compositie ademt maar nooit metronomisch voelt.
   Gloed reist door elke ring door stroke-dashoffset te animeren; de ring zelf
   blijft zichtbaar als haarlijn onder de glow-laag (dubbele laag, zie markup).
═══════════════════════════════════════════ */

/* De "bloed-puls" op elke ring — negatieve dashoffset laat het teal-segment traag reizen.
   Geen helderheids-flash synchroon met de hartslag; de glow heeft een eigen, zeer
   trage ademhaling — zo voelt het als een ondergronds systeem, niet als een signaal. */
@keyframes blood-a {
  from { stroke-dashoffset: 0;     }
  to   { stroke-dashoffset: -1759; }  /* omtrek r=280 */
}
@keyframes blood-b {
  from { stroke-dashoffset: 0;     }
  to   { stroke-dashoffset: -1319; }  /* omtrek r=210 */
}
@keyframes blood-h {
  from { stroke-dashoffset: 0;    }
  to   { stroke-dashoffset: -880; }   /* omtrek r=140 */
}
/* Zeer trage, zachte helderheids-ademhaling — losgekoppeld van de hartslag */
@keyframes blood-breathe {
   0%, 100% { opacity: 0.70; }
   50%      { opacity: 1.00; }
}

/* Elke ring draait in eigen tempo (outer traagst, inner iets sneller).
   Dunne glow, lage opacity. Geen drop-shadow — dat maakt de lijn juist weer dikker. */
.blood-a, .blood-b, .blood-h {
  opacity: 0.85;
  animation:
    blood-a 45s linear infinite,
    blood-breathe 11s ease-in-out infinite;
}
.blood-b {
  animation:
    blood-b 35s linear infinite,
    blood-breathe 13s ease-in-out infinite;
}
.blood-h {
  animation:
    blood-h 25s linear infinite,
    blood-breathe 9s ease-in-out infinite;
}

/* ── Kloppend hart ──
   Rustige beat: ~38 bpm (1.6s cyclus), één zachte puls per cyclus (geen lub-dub).
   Scale minimaal (max 1.008) en opacity blijft laag — het ademt meer dan dat het klopt. */
.heart-beat {
  transform-box: fill-box;
  transform-origin: 280px 280px;
  animation: heart-beat 1.6s cubic-bezier(0.45, 0, 0.35, 1) infinite;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
@keyframes heart-beat {
   0%   { transform: scale(1.000); opacity: 0.22; }
  14%   { transform: scale(1.008); opacity: 0.45; }  /* zachte puls */
  32%   { transform: scale(1.000); opacity: 0.25; }
 100%   { transform: scale(1.000); opacity: 0.22; }
}

/* ── Radiale spaken: teal puls die vanuit het hart naar buiten reist ──
   Zeer lage maximale opacity — de puls moet nauwelijks zichtbaar zijn, meer als
   aanwezigheid dan als beweging. 9s basiscyclus, brede stagger. */
.spoke {
  animation: spoke-pulse 9s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  opacity: 0.45;
}
@keyframes spoke-pulse {
   0%, 100% { opacity: 0.20; }
   50%      { opacity: 0.55; }
}

/* Reduced motion — alles stilzetten voor toegankelijkheid (Sage-keuze-architectuur G4) */
@media (prefers-reduced-motion: reduce) {
  .vein-a1, .vein-a2, .vein-b, .vein-h,
  .blood-a, .blood-b, .blood-h,
  .heart-beat, .spoke,
  .hero-scroll svg {
    animation: none !important;
  }
  .blood-a, .blood-b, .blood-h { opacity: 0.35; }
  .heart-beat { opacity: 0.28; }
  /* SMIL animations (ripple, spoke gradient) worden via JS gepauzeerd */
}

/* ═══════════════════════════════════════════════════════════════
   SCÈNE 2 — s02-werkelijkheid
   Specificatie: Whayle_Flowkompas_Oplossingenfilm_v1_3 §5
   Kernboodschap: de mens als vertrekpunt (silo's) — met macrocijfers
                  als context/decor in een sticky ticker bovenin.
   Typografie: Register I (geen poster — die is voor S1/S4/S6)
   Kleur: canvas #F7F7F4 basis, navy + teal accenten
   Grid: asymmetrisch, kolomstart 1 (regel 17 huisstijl)

   Structuur:
     .s2-wrap         containing block voor sticky ticker + M2 content
       .ticker-bar   sticky, gradient-doorloop vanaf hero-bottom,
                     bevat M1 (macrocijfers als beurs-tickertape)
       .s2-m2        hoofdboodschap: de silo's, de mens, het dossier

   De ticker is DECOR. De silo's zijn de boodschap. De cijfers stromen
   voorbij op de achtergrond; het oog valt stil op de hoofdregel.
   ═══════════════════════════════════════════════════════════════ */

/* Scène-container: geen padding-top hier — de ticker landt exact op
   de hero-bottom en mag die aanraken zonder tussenruimte. */
.s2-wrap {
  position: relative;
  background: var(--bg);
}

/* ── Ticker-bar — M1 als sticky decor ──
   - position: sticky top:0 — plakt aan viewport-top zodra de lezer
     voorbij de hero scrollt, lost los als .s2-wrap voorbij is.
   - Achtergrond: dezelfde 135° gradient als de hero, maar gerenderd
     als een virtuele 100vh box met background-position:bottom. Dat
     laat exact die dunne strip zien die overeenkomt met de hero-
     bottom — links navy-mix, rechts teal. Visueel continueert de
     hero-gradient daardoor naadloos in de ticker.
   - Z-index zorgt dat de ticker boven M2-content blijft terwijl die
     eronder door scrollt. */
.ticker-bar {
  position: sticky;
  top: 72px; /* nav-hoogte — ticker plakt ónder de nav, nooit erachter */
  z-index: 10;
  height: clamp(64px, 8vh, 76px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background-image: linear-gradient(135deg, #1C1E4D 0%, #154a4a 42%, #008588 100%);
  background-size: 100vw 100vh;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Subtiele bovenrand: gelijkt de hero-bottom visueel exact */
}

@supports (background-image: linear-gradient(in oklch 135deg, #1C1E4D, #008588)) {
  .ticker-bar {
    background-image: linear-gradient(in oklch 135deg, #1C1E4D, #008588);
  }
}

/* De track bevat 2× dezelfde items, zodat translateX(-50%) naadloos loopt.
   Duur 45s = leesbaar tempo; bij reduced-motion komt alles tot stilstand. */
.ticker-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 clamp(32px, 4vw, 56px);
  color: #ffffff;
  font-family: var(--font);
  flex-shrink: 0;
}
.ticker-stat {
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: -0.005em;
}
.ticker-label {
  font-weight: 400;
  font-size: clamp(12px, 1.1vw, 14px);
  color: rgba(255, 255, 255, 0.72);
}

/* ── M2 — de hoofdboodschap: de silo's, de mens ──
   Geen flex-center, geen volledige-viewport-hoogte. De sectie is
   padded content op canvas, direct onder de sticky ticker. Royale
   padding-top geeft de lezer de tijd om eerst het ticker-ritme te
   ervaren voordat de hoofdboodschap binnenkomt — geen schrikeffect,
   wel een voelbare overgang. Kop linker-derde (kolom 1–7), silo-regels
   ingesprongen op kolom 2–8 (lichte inspring = hiërarchie), uitleiding
   kolom 1–10. Register I: geen poster-schaal. */
.s2-m2 {
  padding: clamp(24px, 3.5vh, 48px) 0 clamp(100px, 16vh, 180px);
}
.s2-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* page-label colour context for the homepage */
.page-label { color: var(--teal); }

/* Sectielabel — In S2 functioneert dit label als onderschrift bij de sticky ticker.
   De grote margin-bottom is de brug naar de hoofdkop. */
.s2-tag {
  margin: 0 0 clamp(56px, 9vh, 104px) 0;
}

.s2-m2 .s2-tag      { grid-column: 1 / span 12; }
.s2-m2 .head        { grid-column: 1 / span 8; }
.s2-m2 .silos       { grid-column: 2 / span 8; margin-top: clamp(40px, 6vh, 72px); }
.s2-m2 .close       { grid-column: 1 / span 10; margin-top: clamp(40px, 6vh, 72px); }
.s2-m2 .aphorism    { grid-column: 1 / span 10; margin-top: clamp(12px, 1.5vh, 20px); }

.s2-head {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
}

.s2-silos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
}
.s2-silo {
  font-family: var(--font);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  line-height: 1.3;
  color: var(--navy);
}
.s2-silo b {
  font-weight: 500;
}

/* Sub-kop uitleiding — dominant maar niet poster. Navy basis,
   teal-highlight op "het geheel" = semantisch accent, geen decoratie. */
.s2-close {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
}
.s2-close em {
  color: var(--teal);
  font-style: normal;
  font-weight: 500;
}

.s2-aphorism {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: rgba(28, 30, 77, 0.5);
  margin: 0;
  max-width: 40ch;
}

/* Reduced-motion: ticker stilzetten (toegankelijkheid, Sage-keuze-architectuur G4) */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* Mobile: grid vouwt naar één kolom, ticker wordt iets smaller */
@media (max-width: 767px) {
  .s2-inner { grid-template-columns: 1fr; gap: 0; }
  .s2-m2 .head, .s2-m2 .silos, .s2-m2 .close, .s2-m2 .aphorism { grid-column: 1; }
  .ticker-bar { height: clamp(54px, 9vh, 62px); }
  .ticker-item { padding: 0 24px; gap: 8px; }
  .ticker-stat { font-size: 13px; }
  .ticker-label { font-size: 11px; }
  /* Both navy panels get full viewport width — prevents shorter heading from shrinking the panel */
  .text-panel { width: 100%; padding: 0 24px; }
}



/* ─── S3-4 — Navy Fundament/Doel ─── */

.navy-pair {
  position: relative;
  z-index: 8;
  background: var(--navy);
  height: 280vh;
}
.sticky-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.circle-blueprint {
  position: absolute;
  width: 1200px;
  height: 1200px;
  pointer-events: none;
}
.text-panel {
  position: absolute;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  padding: 0 40px;
}
.panel-fundament { opacity: 0; transform: translateX(-50%) scale(0.88); }
.panel-doel { opacity: 0; transform: translateX(-50%) scale(0.88); }
.panel-fundament,
.panel-doel {
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.step-label {
  margin-bottom: 28px;
}
.heading-pair {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(30px, 3.8vw, 48px);
  color: rgba(255,255,255,.85);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 24px;
}

.text-panel .sub {
  font-family: Georgia, serif;
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(255,255,255,.45);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto;
}


/* ─── S5 — De Werkgever ─── */
/* ═══════════════════════════════════════════
   SECTIE 5 — DE WERKGEVER
   Lichte sectie na donkere cirkel-immersie.
   Redenering: feit → scope → conclusie.
═══════════════════════════════════════════ */
.section-werkgever {
  background: var(--bg);
  padding: 120px 0 140px;
}
.werkgever-w {
  text-align: left;
}
.wg-label { margin-bottom: 48px; }
.section-werkgever .head { margin-bottom: 56px; }
/* Het feit — Typold */
.wg-feit {
  font-family: var(--font);
  font-size: clamp(17px, 1.5vw, 21px);
  color: rgba(28,30,77,.55);
  line-height: 1.6;
  margin-bottom: 10px;
}
/* De scope — silos reuse; indent mirrors s2-m2 grid-column:2 offset (1 col + 1 gutter) */
.section-werkgever .silos {
  padding-left: calc((100% - 11 * var(--gutter)) / 12 + var(--gutter));
  margin-bottom: 40px;
}
/* De scope — Typold 700, opbouwend */
.wg-triplet {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.45;
  margin-bottom: 40px;
}
.wg-triplet span {
  display: block;
}
.wg-scharnier {
  font-family: Georgia, serif;
  font-size: clamp(17px, 1.5vw, 21px);
  color: rgba(28,30,77,.45);
  line-height: 1.6;
  margin-top: 48px;
}


/* ─── S5 — Platform film scene ─── */

:root {
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --eye: 30vh;
  --hair: rgba(255,255,255,.16);
}

/* Grid layout helper — scoped binnen .film en .tail */
.film .grid,
.tail .grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* Sticky filmstrip */
.film { position: relative; z-index: 8; }
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--navy);
}

/* Zachte teal gradient wash rechtsonderen */
.stage .wash {
  position: absolute;
  z-index: 0;
  inset: auto -6% -10% auto;
  width: 50%;
  height: 52%;
  pointer-events: none;
  background: linear-gradient(135deg, #1C1E4D 0%, #154a4a 42%, #008588 100%);
  background: linear-gradient(in oklch 135deg, #1C1E4D, #008588);
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, #000 0%, rgba(0,0,0,.5) 46%, transparent 72%);
          mask-image: radial-gradient(120% 120% at 100% 100%, #000 0%, rgba(0,0,0,.5) 46%, transparent 72%);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.film.revealed .stage .wash { opacity: 1; }

/* Merk-cirkel — haarlijn, randaansnijdend rechts, ademt */
.anchor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: min(150vh, 1180px);
  height: min(150vh, 1180px);
  right: calc(-1 * min(150vh, 1180px) * 0.32);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.film.revealed .anchor { opacity: 1; }
.circle-hair { width: 100%; height: 100%; display: block; overflow: visible; }
.circle-hair .hair { stroke: var(--hair); }
.anchor .circle-hair { animation: breathe 6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes breathe { 0%, 100% { opacity: .18; } 50% { opacity: .30; } }

/* Beats — absoluut gestapeld, crossfade via opacity + micro-translate */
.beats { position: absolute; inset: 0; z-index: 2; }
.beat {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
  pointer-events: none;
}
.beat.active { opacity: 1; transform: none; pointer-events: auto; }
.beat > .grid { position: absolute; inset: 0; align-content: start; height: 100%; }

/* Tekst — links, verankerd op ooghoogte */
.copy { grid-column: 1 / 8; margin-top: var(--eye); }

.lbl {
  line-height: 1;
  margin: 0 0 8px;
}

.h {
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.10;
  letter-spacing: -.02em;
  color: #fff;
  font-size: clamp(38px, 3.9vw, 56px);
  text-wrap: balance;
}
.h .br { display: block; }

.body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.1vw, 17px);
  line-height: 1.4;
  color: rgba(255,255,255,.84);
  margin-top: 16px;
  max-width: 44ch;
}
.body + .body { margin-top: 12px; }
.body .x { display: block; margin-top: 12px; color: rgba(255,255,255,.94); }

.closer {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(20px, 2.0vw, 26px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin-top: 24px;
  max-width: 24ch;
}
.closer .small {
  display: block;
  font-family: var(--serif);
  font-size: .6em;
  letter-spacing: 0;
  color: var(--teal);
  margin-top: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* Scroll-hint — verdwijnt bij eerste scroll */
.hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity .4s ease;
}
.hint .ln {
  width: 1px;
  height: 30px;
  background: linear-gradient(rgba(255,255,255,.45), transparent);
  animation: hint-drift 2.4s ease-in-out infinite;
}
.film.scrolled .hint { opacity: 0; pointer-events: none; }
@keyframes hint-drift {
  0%, 100% { transform: scaleY(.4); transform-origin: top; }
  50% { transform: scaleY(1); }
}

/* Tail — pull-back / filmische caesuur, overgang naar canvas */
.tail {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 96px 0 56px;
}
.tail .grid { align-items: center; }
.tail .logo { grid-column: 1 / 8; display: flex; align-items: center; }
.tail .meta {
  grid-column: 8 / 13;
  justify-self: end;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ── Tablet (768–1023) ── */
@media (max-width: 1023px) {
  :root { --eye: 26vh; }
  .copy { grid-column: 1 / 7; }
  .h { font-size: clamp(34px, 4.6vw, 46px); }
  .anchor {
    width: min(96vh, 760px);
    height: min(96vh, 760px);
    right: calc(-1 * min(96vh, 760px) * 0.34);
  }
  .tail .logo { grid-column: 1 / 5; }
  .tail .meta { grid-column: 5 / 9; }
  .stage .wash { width: 60%; height: 52%; }
}

/* ── Mobiel (<768) ── */
@media (max-width: 767px) {
  :root { --eye: 22vh; }
  .film .beat > .grid { padding-bottom: 8vh; }
  .copy { grid-column: 1 / -1; }
  .h .br { display: inline; }
  .h .br::after { content: " "; }
  .h { font-size: clamp(28px, 7.2vw, 36px); hyphens: none; }
  .body { font-size: 17px; max-width: none; }
  .closer { font-size: clamp(20px, 5.6vw, 25px); max-width: none; }
  .anchor {
    width: 160vw;
    height: 160vw;
    left: 50%;
    right: auto;
    top: 42%;
    transform: translate(-50%, -50%);
  }
  .stage .wash { width: 100%; height: 44%; inset: auto 0 -10% auto; }
  .tail .logo { grid-column: 1 / 4; }
  .tail .meta { grid-column: 4 / -1; justify-self: end; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .beat { transition: opacity .3s linear; transform: none !important; }
  .beat:not(.active) { opacity: .001; }
  .anchor .circle-hair { animation: none; opacity: .24; }
  .stage .wash { transition: none; }
  .hint .ln { animation: none; }
}


/* ─── S7 — Proposities ─── */
.prop-section-wrap {
  position: relative;
  z-index: 8;
  background: var(--bg);
  color: var(--navy);
  padding: 80px 0 120px;
}

.prop-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.prop-section__header {
  margin-bottom: 48px;
  max-width: 720px;
}
.prop-section__tag {
  display: inline-block;
  margin-bottom: 16px;
}
.prop-section__headline {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 16px;
}
.prop-section__sub {
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(28,30,77,.7);
  max-width: 560px;
}

/* ─── Kaart-grid ───────────────────────────────────────────────── */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ─── Stage — houdt grid-cell vast bij open-state ───────────── */
.prop-card-stage {
  position: relative;
  aspect-ratio: 4 / 3;
}

/* ─── Kaart-basis ──────────────────────────────────────────────── */
.prop-card {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  cursor: pointer;
  border-radius: var(--radius);
  outline: none;
  transform-origin: 0 0;
  will-change: transform;
}
.prop-card:focus-visible {
  box-shadow: 0 0 0 2px var(--teal);
}
.prop-card[data-placeholder] {
  cursor: default;
  pointer-events: none;
}

.prop-card__flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.prop-card[data-state="1"] .prop-card__flipper {
  transform: rotateY(-180deg);
}

.prop-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* VOORKANT — navy→teal gradient in oklch (G01) */
.prop-card__face--front {
  background: linear-gradient(135deg, #1C1E4D 0%, #154a4a 42%, #008588 100%);
  background: linear-gradient(in oklch 135deg, #1C1E4D, #008588);
}

/* ACHTERKANT — wit redactioneel vlak (Register I) */
.prop-card__face--back {
  background: var(--white);
  color: var(--navy);
  transform: rotateY(-180deg);
}

/* ─── Cirkel-laag (Laag 2) — UNIFORME POSITIE ───────────────────
   Elke propositie heeft zijn eigen cirkelvariant (identiteit).
   De positie is UNIFORM voor alle 6 kaarten — herkenbaarheid.
   S2 randaansnijding: middelpunt rechtsboven, ~60% zichtbaar. */
.circle-layer {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.circle-layer--uniform {
  top: -38%;
  right: -28%;
  width: 88%;
  aspect-ratio: 1 / 1;
}
.circle-layer svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* ─── Tekst-laag voorkant (Laag 3) ─────────────────────────────── */
.text-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 24px 56px 24px;   /* extra bottom-padding: pill staat op bottom 20+28=48px */
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* Tag — Typold v1.1: weight 500 op donker */
.tag {
  font-family: var(--font);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 8px;              /* L3.20: tag → headline */
}

/* Headline — Typold v1.1: weight 300, LH 0.95 (poster ≥36px) */
.headline {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 16px;             /* L3.20: headline → sub */
  min-height: 1.9em;               /* baseline-consistentie: 2 regels gereserveerd */
}

/* Subtitle — Typold v1.1: 10px, weight 300, 0.04em */
.text-layer .sub {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: rgba(255,255,255,.55);
  max-width: 85%;
  min-height: 2.8em;               /* baseline-consistentie: 2 regels gereserveerd */
}

/* ─── Binnenkort-pebble (vervangt Meer → op Care Insights) ───────
   Positie: rechtsonder — dezelfde plek waar "Meer →" staat op andere
   kaarten. Eén pebble-positie door de hele set, de inhoud communiceert
   de status. Olijf-accent onderscheidt 'status-aankondiging' van
   'klik-affordance' zonder de compositie te verstoren. */
.coming-soon-pebble {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px 5px;
  border-radius: 999px;
  background: rgba(198, 196, 105, 0.12);
  border: 1px solid rgba(198, 196, 105, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.coming-soon-pebble__label {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
}

/* ─── Front-pebble (rechtsonder, altijd zichtbaar klik-affordance) ─
   Rechtsonder past omdat:
   1. Cirkel staat rechtsboven (conflict voorkomen)
   2. Tekstzone staat linksonder (conflict voorkomen)
   3. Z-pattern leesroute eindigt rechtsonder — natuurlijke action-positie
   Tekst "Meer →" — kort, directioneel */
.front-pebble {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.prop-card:hover .front-pebble,
.prop-card:focus-visible .front-pebble {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.36);
  transform: translateX(2px);
}
.front-pebble__label {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.front-pebble__arrow {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,.85);
  line-height: 1;
  transform: translateY(-0.5px);
}

/* ─── Filter-pills ──────────────────────────────────────────────── */
.prop-filter {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.prop-filter__label {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28,30,77,.5);
  align-self: center;
  margin-right: 4px;
}
.prop-filter__pill {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1px solid rgba(28,30,77,.18);
  padding: 10px 20px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  font-family: var(--font);
}
.prop-filter__pill:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.prop-filter__pill:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.prop-filter__pill[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.prop-filter__pill[aria-pressed="true"]:hover {
  background: var(--navy3);
  border-color: var(--navy3);
}

/* ─── Filter state — niet-matchende kaarten verbergen ──────────── */
.prop-grid[data-filter="werkgever"] .prop-card-stage:has(.prop-card:not([data-filter-role="werkgever"])),
.prop-grid[data-filter="adviseur"] .prop-card-stage:has(.prop-card:not([data-filter-role="adviseur"])),
.prop-grid[data-filter="verzekeraar"] .prop-card-stage:has(.prop-card:not([data-filter-role="verzekeraar"])) {
  display: none;
}

/* Fade-in op matchende kaarten wanneer filter wordt toegepast */
.prop-grid.is-filtering .prop-card {
  animation: fade-in 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1023px) {
  .prop-section-wrap { --pad: 24px; }
  .prop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .prop-section-wrap { --pad: 16px; }
  .prop-grid { grid-template-columns: 1fr; gap: 12px; }
  .headline { font-size: 36px; }
  .prop-filter { gap: 8px; margin-bottom: 32px; }
  .prop-filter__pill { padding: 8px 14px 7px; font-size: 9px; }
  .prop-filter__label { width: 100%; margin-bottom: 4px; }
}

/* ─── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .prop-card__flipper,
  .front-pebble,
  .prop-filter__pill {
    transition: none !important;
  }
  .prop-grid.is-filtering .prop-card {
    animation: none;
  }
  /* Behoud flip op data-state=1, maar zonder transitie */
  .prop-card[data-state="1"] .prop-card__flipper {
    transform: rotateY(-180deg);
  }
  /* Geen FLIP-scale animatie — directe wissel */
  .prop-card.is-open {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   FLIP-MET-SCALE — open-state mechaniek
   ════════════════════════════════════════════════════════════════ */

.prop-card.is-open {
  position: fixed;
  z-index: 1000;
  top: 5vh;
  bottom: 5vh;
  left: max(40px, calc(50vw - 480px));
  right: max(40px, calc(50vw - 480px));
  aspect-ratio: auto;
  cursor: default;
}
@media (max-width: 1023px) {
  .prop-card.is-open { top: 24px; bottom: 24px; left: 24px; right: 24px; }
}
@media (max-width: 640px) {
  .prop-card.is-open { top: 16px; bottom: 16px; left: 16px; right: 16px; }
}

/* ─── Meet-hulp: even toevoegen, meten, direct verwijderen — wordt nooit geschilderd ── */
.prop-card.is-measuring {
  bottom: auto !important;
  height: auto !important;
  max-height: none !important;
}
.prop-card.is-measuring .prop-card__flipper {
  position: relative !important;
  height: auto !important;
  transform: none !important;
}
.prop-card.is-measuring .prop-card__face--front {
  display: none !important;
}
.prop-card.is-measuring .prop-card__face--back {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.prop-card.is-measuring .hl-grid,
.prop-card.is-measuring .back__body {
  flex: none !important;
}

/* FLIP-fase: kaart staat in DOM op nieuwe positie, maar wordt visueel
   teruggetransformeerd naar oude positie. Daarna animeert hij naar identity. */
.prop-card.is-flipping {
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Voorkant pebble vervaagt bij open */
.prop-card.is-open .front-pebble {
  opacity: 0;
  transition: opacity 200ms;
}

/* Achterkant: header/intro/footer blijven vast, alleen hl-grid scrollt */
.prop-card.is-open .prop-card__face--back {
  overflow: hidden;
}
.prop-card.is-open .hl-grid {
  min-height: 0;
  overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════
   ACHTERKANT — redactionele opmaak (Register I, drie-koloms editorial)
   Lay-out: header (sectielabel + headline + deck) — body (3 kolommen)
            — footer (meta + verder lezen). Past in één viewport.
   ════════════════════════════════════════════════════════════════ */

.prop-card__face--back {
  display: flex;
  flex-direction: column;
  padding: 32px;
}

/* Sluit-knop rechtsboven */
.back__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease;
  z-index: 10;
  padding: 0;
}
.back__close:hover {
  background: rgba(28,30,77,.06);
}
.back__close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.back__close svg {
  width: 14px;
  height: 14px;
}
.back__close line {
  stroke: var(--navy);
  stroke-width: 1.2;
}

/* Header */
.back__header {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.back__meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back__product {
  font-family: var(--font);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
}

.back__kicker {
  font-family: var(--font);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28,30,77,.5);
}

.back__binnenkort {
  font-family: var(--font);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  background: rgba(198,196,105,.18);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: auto;
}

.back__headline {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  max-width: 22ch;
}

.back__deck {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(28,30,77,.72);
  margin: 16px 0 0;
  max-width: 62ch;
}

/* Back intro — groot inleidend statement */
.back__intro {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy);
  max-width: 30ch;
  margin: 36px 0 0;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(16px);
  animation: rise 750ms cubic-bezier(0.2,0.8,0.2,1) 150ms forwards;
}
.back__intro strong {
  font-weight: 500;
  color: var(--teal);
}

/* Highlight grid — 2×2 */
.hl-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  align-items: start;
  gap: clamp(32px,5vh,48px) 80px;
  padding: 48px 0;
}
.hl {
  max-width: 34ch;
  opacity: 0;
  transform: translateY(16px);
  animation: rise 750ms cubic-bezier(0.2,0.8,0.2,1) forwards;
}
.hl:nth-child(1) { animation-delay: 450ms; }
.hl:nth-child(2) { animation-delay: 610ms; }
.hl:nth-child(3) { animation-delay: 770ms; }
.hl:nth-child(4) { animation-delay: 930ms; }
.hl__kop {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 12px;
}
.hl p {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 16.5px);
  line-height: 1.62;
  color: rgba(28,30,77,.85);
  margin: 0;
}

@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }

/* Body — drie-koloms editorial */
.back__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px 0;
  flex: 1;
  align-content: start;
}

.back__column {
  min-width: 0;
}

.back__subhead {
  font-family: var(--font);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 8px;
}

.back__column p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(28,30,77,.8);
  margin: 0 0 8px;
}
.back__column p:last-child { margin-bottom: 0; }

/* Footer */
.back__footer {
  flex-shrink: 0;
  margin-top: 32px;
  opacity: 0;
  animation: fade 700ms ease 1120ms forwards;
}

.back__footer-link {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.4;
  color: rgba(28,30,77,.7);
  text-decoration: none;
  display: inline;
  transition: color 200ms ease;
}
.back__footer-link:hover { color: var(--teal); }
.back__footer-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Tablet — 2-koloms editorial */
@media (max-width: 1023px) {
  .prop-card__face--back { padding: 24px; }
  .back__body {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 16px 0;
  }
}

/* Mobiel — 1-koloms, compactere typografie */
@media (max-width: 640px) {
  .prop-card__face--back { padding: 20px; padding-top: 24px; }
  .back__close { top: 12px; right: 12px; }
  .back__header { padding-bottom: 16px; }
  .back__meta-row { margin-bottom: 8px; gap: 16px; }
  .back__headline { font-size: clamp(20px, 6vw, 26px); }
  .back__deck { font-size: 12.5px; margin-top: 8px; }
  .back__body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 0;
  }
  .back__column p { font-size: 12px; }
  .hl-grid { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 44px; align-content: start; }
  .hl { max-width: none; }
  .hl__kop { font-size: 20px; }
  .hl p { font-size: 16px; line-height: 1.6; }
  .back__intro { font-size: 24px; max-width: none; }
  .back__footer-link { font-size: 16px; }
  .back__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 16px;
  }
  .back__footer-meta { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .back__intro, .hl, .back__footer { animation: none; opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   SCRIM — onder de open kaart
   ════════════════════════════════════════════════════════════════ */
.prop-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28,30,77,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  pointer-events: none;
  transition: background 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
              backdrop-filter 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 900;
}
.prop-scrim.is-active {
  background: rgba(28,30,77,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}

body.has-open-card {
  overflow: hidden;
}


/* Bij open: alle andere kaarten zijn niet meer interactief */
body.has-open-card .prop-card:not(.is-open) {
  pointer-events: none;
}

/* Reduced motion override — geen FLIP-scale, alleen fade */
@media (prefers-reduced-motion: reduce) {
  .prop-card.is-flipping {
    transition: none !important;
  }
  .prop-scrim {
    transition: background 200ms ease, backdrop-filter 200ms ease;
  }
}



/* ═══ CONTACT ═══ */
.opl-contact {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}
.opl-contact__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1C1E4D 0%, #154a4a 42%, #008588 100%);
  z-index: 0;
}
@supports (background: linear-gradient(in oklch 135deg, #1C1E4D, #008588)) {
  .opl-contact__bg {
    background: linear-gradient(in oklch 135deg, #1C1E4D, #008588);
  }
}
.opl-contact__circle {
  position: absolute;
  top: 100%;
  left: 0;
  width:  clamp(1400px, 220vmin, 3200px);
  height: clamp(1400px, 220vmin, 3200px);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
.opl-contact__circle .ring-a {
  transform-origin: 200px 200px;
  animation: hero-cw 90s linear infinite;
}
.opl-contact__circle .ring-b {
  transform-origin: 200px 200px;
  animation: hero-ccw 105s linear infinite;
}
@keyframes hero-cw  { to { transform: rotate(360deg);  } }
@keyframes hero-ccw { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .opl-contact__circle .ring-a,
  .opl-contact__circle .ring-b { animation: none; }
}
.opl-contact__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(120px, 25.8vh, 280px);
  padding-bottom: clamp(120px, 25.8vh, 280px);
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
}
.s6-label {
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 24px 0;
}
.s6-poster {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  max-width: 720px;
}
.s6-invitation {
  margin-top: clamp(40px, 6vh, 64px);
  max-width: 720px;
}
.s6-name {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.s6-role {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.4;
  color: rgba(255,255,255,.7);
  margin: 16px 0 0;
}
.s6-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 32px;
  row-gap: 8px;
  margin-top: clamp(32px, 4vh, 48px);
}
.s6-contact a {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .2s ease, border-bottom-color .35s ease;
}
.s6-contact a:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.45);
}
@media (max-width: 767px) {
  .s6-poster { max-width: 100%; }
  .s6-invitation { max-width: 100%; }
}

/* ═══ KLANTEN ═══ */
/* ─── KLANTEN TICKERTAPE ─── */
.klanten {
  --klanten-pad: 40px;
  position: relative;
  z-index: 8;
  background: var(--bg);
  padding: clamp(64px, 8vh, 96px) 0;
}

.klanten-header {
  max-width: 1200px;
  margin: 0 auto clamp(24px, 3vh, 32px);
  padding: 0 var(--klanten-pad);
}

.klanten-label { margin: 0; }

.klanten-track-wrap {
  width: calc(100% - 2 * var(--pad));
  max-width: calc(1200px - 2 * var(--pad));
  margin: 0 auto;
  overflow: hidden;
}

.klanten-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: klanten-glide 200s linear infinite;
}

.klanten-track li {
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  flex-shrink: 0;
}

.klanten-track li img {
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  max-height: clamp(20px, 2.2vw, 26px);
  max-width: clamp(88px, 10vw, 120px);
}

.klanten-track li[data-tier="stack"] img {
  max-height: clamp(26px, 2.8vw, 32px);
  max-width: clamp(54px, 6vw, 70px);
}

.klanten-track li[data-tier="wordmark"] img {
  max-height: clamp(18px, 1.9vw, 22px);
  max-width: clamp(88px, 10vw, 120px);
}

.klanten-track li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: calc(-1 * clamp(40px, 4vw, 56px) / 2);
  top: 50%;
  transform: translateY(-50%);
  color: rgba(28, 30, 77, 0.15);
  pointer-events: none;
}

@keyframes klanten-glide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.klanten-track-wrap {
  cursor: grab;
}

.klanten-track-wrap.klanten-dragging {
  cursor: grabbing;
}

.klanten-track-wrap:hover .klanten-track {
  animation-play-state: paused;
}

.klanten-track-wrap.klanten-dragging .klanten-track {
  animation-play-state: paused;
}

@media (max-width: 1023px) {
  .klanten { --klanten-pad: 24px; }
}

@media (max-width: 767px) {
  .klanten { --klanten-pad: 16px; }
  .scene-sticky .container {
    padding-top: clamp(40px, 8vh, 100px);
    padding-bottom: clamp(80px, 14vh, 140px);
  }
  .scene-sticky .container > * { max-width: 100%; }
  .hero-title { max-width: 100%; }
  .hero-title__why { white-space: normal; }
  .s2-anker { max-width: 100%; }
  .s2-list { max-width: 100%; }
  .s2-slot { max-width: 100%; }
  .s3-anker { max-width: 100%; }
  .s3-items { max-width: 100%; }
  .s3-slot { max-width: 100%; }
  .s4-pair { max-width: 100%; }
  .s5-poster { max-width: 100%; }
  .s5-body { max-width: 100%; }
  .s6-poster { max-width: 100%; }
  .s6-invitation { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .klanten-track {
    animation: none;
  }
  .klanten-track-wrap {
    overflow-x: auto;
  }
}