/* ============================================================
   Pages, homepage nodes + subpages
   ============================================================ */

/* Give content room for the spine on the left */
.page {
  padding-left: clamp(0rem, 1vw, 1.5rem);
}

.section__head {
  max-width: 56ch;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section__head .h2 {
  margin-top: 0.8rem;
}
.section__head .lead {
  margin-top: 1.4rem;
  max-width: 46ch;
}
/* "Directeuren die de transformatie aangingen." viel op 56ch over drie regels;
   op 72ch breekt hij na "de" en staat de tweede regel voluit. */
#klantverhalen .section__head {
  max-width: 72ch;
}
/* the urgentie headline ("Vanaf 2025 wordt er gehandhaafd op Ai-geletterdheid.")
   needs a wider measure to land on two lines instead of three */
#urgentie .section__head {
  max-width: 84ch;
}
#urgentie .section__head .h2 {
  text-wrap: balance;
}
/* De sprong van het YouTube-blok naar #urgentie krijgt twee keer --section-pad:
   .channel legt zijn eigen bodempadding bovenop die van de sectie. Onder de
   bridge-CTA stond maar één --section-pad, waardoor de uitnodiging zich meteen
   opdrong. Verdubbel de bodem van #urgentie zodat beide overgangen dezelfde
   adempauze hebben. */
#urgentie {
  padding-bottom: calc(var(--section-pad) * 2);
}
/* zelfde reden als #urgentie: bredere measure zodat "Een duidelijke
   voorsprong." op één regel past en de kop op twee regels blijft
   (zwarte zin 1 + blauwe zin 2, gesplitst met een <br>) */
#privileges .section__head {
  max-width: 84ch;
}

/* Subtitle consistency: every section subtitle uses --fs-lead and a 1.4rem gap
   to its title (like the standard .section__head .lead). Bring the bespoke
   sections in line: kloof (custom two-column copy) and the YouTube channel head. */
#kloof .kloof__copy .prose {
  margin-top: 1.4rem;
}
#kloof .kloof__copy .prose p {
  font-size: var(--fs-lead);
}
.channel__head .lead {
  margin-top: 1.4rem;
}

/* node index tag, e.g. 01 */
.node-index {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  color: var(--accent-deep);
}

/* ---------------- NODE 00: HERO ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(7rem, 6rem + 6vw, 10rem);
  padding-bottom: var(--space-6);
  overflow: hidden;
  /* .page schuift alles 1vw op voor de spine; zonder dit knipt overflow: hidden
     de gloed linksonder af op die 1vw en staat er een kale strook naast. De
     hero loopt tot de rand, de inhoud blijft staan. */
  margin-left: calc(clamp(0rem, 1vw, 1.5rem) * -1);
  padding-left: clamp(0rem, 1vw, 1.5rem);
}
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Geen filter: blur() op deze bollen. WebKit rastert een geblurde laag bij
   elke scrollstap opnieuw (gemeten op de home: 44 -> 52 fps op iPhone, en op
   desktop verdwijnen de lange frames). De zachte rand komt nu uit het
   verloop zelf: iets verder doorlopend naar transparant, zelfde kleur/dekking. */
.hero__glow span {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
}
.hero__glow span:nth-child(1) {
  width: 46vw;
  height: 46vw;
  right: -10vw;
  top: 6vh;
  background: radial-gradient(
    circle closest-side,
    var(--accent-glow) 0%,
    color-mix(in srgb, var(--accent-glow) 88%, transparent) 18%,
    color-mix(in srgb, var(--accent-glow) 66%, transparent) 32%,
    color-mix(in srgb, var(--accent-glow) 42%, transparent) 46%,
    color-mix(in srgb, var(--accent-glow) 22%, transparent) 58%,
    color-mix(in srgb, var(--accent-glow) 9%, transparent) 68%,
    color-mix(in srgb, var(--accent-glow) 2%, transparent) 78%,
    transparent 86%
  );
}
.hero__glow span:nth-child(2) {
  width: 34vw;
  height: 34vw;
  left: -8vw;
  bottom: -8vh;
  background: radial-gradient(
    circle closest-side,
    var(--glass-tint) 0%,
    color-mix(in srgb, var(--glass-tint) 88%, transparent) 18%,
    color-mix(in srgb, var(--glass-tint) 66%, transparent) 32%,
    color-mix(in srgb, var(--glass-tint) 42%, transparent) 46%,
    color-mix(in srgb, var(--glass-tint) 22%, transparent) 58%,
    color-mix(in srgb, var(--glass-tint) 9%, transparent) 68%,
    color-mix(in srgb, var(--glass-tint) 2%, transparent) 78%,
    transparent 86%
  );
  opacity: 0.5;
}
/* Achtergrondbeeld in donkere modus (13 sep 2026). Bron: Achtergrond/
   achtergrond-darkmode.png (3816x2310), verliesvrij naar WebP gezet: elke pixel
   is identiek aan de PNG, dus de kleuren van het verloop veranderen niet en er
   komen geen compressietrapjes bij. Staat op elke pagina die de twee
   gloedbollen van .hero__glow in zijn kop droeg (class hero--beeld op de
   kopsectie: .hero op home, .subhero, .vt-hero, .ep-stage, en sinds 16 sep
   ook .kh-hero op de keuzehulp, die tot dan een eigen gloed had, en .ag-hero
   op de vier pagina's van de campagne Agent op de agenda). Het beeld draagt
   zijn eigen gloed rechts en linksonder, precies waar de twee CSS-bollen
   staan; die gaan in dark dus uit, anders stapelen ze op het beeld en worden
   de kleuren feller dan in het bestand. Licht houdt de CSS-bollen.
   Maat: het vlak is overal exact één schermbreedte bij één schermhoogte,
   vanaf de bovenkant van de sectie. Cover rekent op de maat van het vlak, dus
   alleen zo staat de gloed op elke pagina op dezelfde plek als op home (Mika,
   13 sep: home is leidend). Een kortere subhero laat het beeld onder zich
   doorlopen in de eerste sectie (overflow-x: clip laat de y-as vrij); een
   hogere kop (training met het podium, de downloads-lijn, de check) krijgt
   het beeld dus NIET over zijn volle hoogte, want max(100svh, 100%) rekte het
   vlak op en schoof de gloed omlaag en naar rechts. Home mag wel meegroeien
   met zijn eigen hero (normaal precies 100svh).
   z-index -1 in de stapelcontext van de pagina, niet in een eigen context:
   met isolation op de sectie zou het beeld over de tekst van de volgende
   sectie heen tekenen. De aurora-mesh zit daarom sinds 13 sep op body::before
   (z-index -1, eerder in de DOM) en niet meer op body::after, zie base.css;
   anders tekende de mesh over het beeld en gaf een lichte vlek rechtsboven.
   Geen masker naar de onderrand: elke uitloop (recht, S-curve, met of zonder
   mesh) maakte de onderste 30% donkerder dan het bestand en dat las als een
   donkere streep vanaf de proof-regel. Het beeld loopt dus tot één
   schermhoogte, waar op home de logoband met zijn border-top toch al een
   sectiegrens tekent.
   Links steekt het beeld 1vw uit over de spine-strook van .page (die knipt
   overflow-x: clip weg, vandaar in dark overflow-x: visible op de sectie; de
   bollen die de clip nodig hadden staan dan toch uit); op home is de hero
   zelf al 1vw naar links geschoven en knipt overflow: hidden het restje af. */
[data-theme="dark"] .subhero.hero--beeld,
[data-theme="dark"] .vt-hero.hero--beeld,
[data-theme="dark"] .ep-stage.hero--beeld,
[data-theme="dark"] .kh-hero.hero--beeld,
[data-theme="dark"] .ag-hero.hero--beeld {
  overflow-x: visible;
}
[data-theme="dark"] .hero--beeld::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: calc(clamp(0rem, 1vw, 1.5rem) * -1);
  height: 100svh;
  z-index: -1;
  pointer-events: none;
  background: url("../img/hero-bg-dark.webp") center / cover no-repeat;
}
/* home: de hero zelf staat al 1vw naar links (zie .hero), dus hier left 0,
   anders is het vlak 1vw breder dan het scherm en verschuift de gloed */
[data-theme="dark"] .hero.hero--beeld::before {
  left: 0;
  height: max(100svh, 100%);
}
/* Subpagina's (14 sep 2026): de onderrand van het beeld valt hier niet op
   een sectiegrens zoals op home, maar midden in de inhoud (de line-up op
   downloads, de kijkwand op de videotheek, de eerste sectie op contact). Het
   beeld eindigt linksonder in een blauwe gloed (rgb 16 27 55) en de pagina
   eronder is bijna zwart, dus zonder overgang staat er een harde streep op
   precies één schermhoogte. Het laatste deel loopt daarom uit naar
   transparant, zodat de gloed doorloopt in de achtergrond. Home eerst niet
   (op 13 sep las een uitloop daar als een donkere streep vanaf de
   proof-regel, zie boven), maar op 14 sep liet Mika dezelfde uitloop ook op
   home zetten, zodat het beeld overal op dezelfde manier eindigt. */
[data-theme="dark"] .hero.hero--beeld::before,
[data-theme="dark"] .subhero.hero--beeld::before,
[data-theme="dark"] .vt-hero.hero--beeld::before,
[data-theme="dark"] .ep-stage.hero--beeld::before,
[data-theme="dark"] .kh-hero.hero--beeld::before,
[data-theme="dark"] .ag-hero.hero--beeld::before {
  /* Gloed linksonder iets feller, op zijn eigen plek (Mika, 14 sep 2026;
     eerst op home, daarna overal). Geen losse bol (die verschoof de gloed
     omhoog, twee keer afgekeurd), maar het beeld met zichzelf versterkt:
     onderste laag het beeld, daarop een dekkend verloop (wit linksonder,
     zwart elders) in multiply, zodat alleen linksonder het beeld overblijft,
     en daarover het beeld nog eens in screen. Vorm en positie zijn dus die
     van het bestand zelf. Het verloop moet dekkend zijn: een
     halfdoorzichtige kern doet bij multiply niets. Gemeten op 1440x900:
     +26% linksonder (x 4-15%, y 75-85%), 0% op 65% hoogte en rechts. */
  background-image:
    url("../img/hero-bg-dark.webp"),
    radial-gradient(45% 50% at 7% 100%, #fff, #000 70%),
    url("../img/hero-bg-dark.webp");
  background-position: center, 0 0, center;
  background-size: cover, 100% 100%, cover;
  background-repeat: no-repeat;
  background-blend-mode: screen, multiply, normal;
  /* Uitloop als masker-PNG, niet als linear-gradient (16 sep 2026). Het
     verloop tekent de browser in 8 bit: over ruim 400 px zakt de dekking van
     255 naar 0 over een donker beeld (10 tot 60 van 255), dus het resultaat
     springt om de 10 tot 40 px een niveau, en omdat het verloop per rij gelijk
     is liggen die stapjes in rechte lijnen van links naar rechts. Dat waren de
     vage donkere strepen in dark vanaf de subtekst tot de onderkant van de hero
     (Mika). De PNG heeft het verloop van vroeger (dekkend tot 55%, naar 0 op
     100%) met fijne ruis in het alfakanaal, hoogstens een half niveau in het
     eindbeeld, zodat de afronding per pixel verschilt en de rijen niet meer
     gelijk lopen. Boven de 55%-lijn is het masker exact dekkend, daar
     verandert niets. Tweede verschil: het CSS-verloop begon op 55% met een
     knik, en zo'n knik in een gladde gloed leest het oog als een lijn (Mach-
     band); Mika zag die lijn rechts in de gloed ook toen de strepen al weg
     waren. De helling loopt nu over het eerste kwart van de uitloop geleidelijk
     op en gaat daarna lineair door, het lineaire deel is daardoor 14% steiler
     en de gloed linksonder ongeveer 4% helderder dan met het CSS-verloop.
     Ook de ruissterkte loopt zacht op: volle ruis ineens inschakelen op 55%
     gaf door het afknippen op 255 alsnog een donkere horizontale lijn.
     De op home bevestigde correctie geldt nu voor alle kopsecties hieronder.
     Hoogte rekt mee met de sectie; 32 px breed op 16 css-px is op een
     2x-scherm precies een schermpixel per maskerpixel.
     Als data-URI, niet als los bestand: een mask-image via url() is een
     CORS-verzoek. Dat faalt zodra index.html rechtstreeks vanaf de schijf wordt
     geopend (file://) en bij elke andere laadfout, en dan verbergt de browser
     het complete beeld (hero zwart, alleen de mesh over; zo zag Mika het op
     16 sep). Inline kan het masker niet ontbreken. De variabele staat er een
     keer, de twee mask-image-regels wijzen ernaar. Maken en bijwerken:
     python3 tools/hero-fade-mask.py (vaste seed, zelfde bytes).
     Niet terugzetten naar een CSS-verloop, dan komen de strepen terug. */
  --hero-fade-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAgACAYAAABHOTGlAAB+N0lEQVR42u29V69l2ZbnNdfaa3t39vEm4oRNf03d22Vx6pZA8BUACYk3PgBfBCHxgpCQgAdeQAh4aRqpW0VXV6mqbl2XJjIz3PF+e28mD3f84/5q1om8WU1DC2mmlIqIY9Yea5ph/+M/Eu+9d/8a/0vdv+b/ogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWIAkQBogBRgChAFCAKEAWI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");
  -webkit-mask-image: var(--hero-fade-mask);
  mask-image: var(--hero-fade-mask);
  -webkit-mask-size: 16px 100%;
  mask-size: 16px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
[data-theme="dark"] .hero--beeld .hero__glow {
  display: none;
}
/* Staand scherm (telefoon, maar ook een tablet in portret): van het brede
   beeld blijft maar een derde over, gecentreerd zou je alleen het donkere
   midden zien. Eigen snede (rechterdeel op volle hoogte, ook verliesvrij) met
   de gloed in beeld. Zelfde voorwaarde als de preload in het inline
   themascript van elke pagina. */
@media (max-width: 767px), (orientation: portrait) {
  [data-theme="dark"] .hero--beeld::before {
    background-image: url("../img/hero-bg-dark-phone.webp");
    background-position: 62% center;
  }
  /* zelfde drie lagen als hierboven, met de phone-snede; deze regel is
     nodig omdat de lagen-regel (twee klassen) anders van de regel hierboven
     wint en de telefoon het brede beeld laadt */
  [data-theme="dark"] .hero.hero--beeld::before,
  [data-theme="dark"] .subhero.hero--beeld::before,
  [data-theme="dark"] .vt-hero.hero--beeld::before,
  [data-theme="dark"] .ep-stage.hero--beeld::before,
  [data-theme="dark"] .kh-hero.hero--beeld::before,
  [data-theme="dark"] .ag-hero.hero--beeld::before {
    background-image:
      url("../img/hero-bg-dark-phone.webp"),
      radial-gradient(45% 50% at 7% 100%, #fff, #000 70%),
      url("../img/hero-bg-dark-phone.webp");
    background-position: 62% center, 0 0, 62% center;
  }
}
.hero__inner {
  position: relative;
  max-width: min(100%, 62rem);
  margin-inline: auto;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 1.3rem + 4.7vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 560;
  max-width: 22ch;
  margin-inline: auto;
}
.hero h1 .reveal {
  display: block;
}
.hero h1 .reveal + .reveal {
  margin-top: 0;
}
.hero h1 .it {
  font-style: italic;
  font-weight: 460;
}
.hero__sub {
  margin-top: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--ink-soft);
  font-weight: 380;
  max-width: 46ch;
}
.hero__sub strong {
  color: var(--ink);
  font-weight: 600;
}
.hero__actions {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
}
/* In de split-hero (training + consultancy) is de tekst links uitgelijnd, dus de
   knoppen ook: links uitlijnen i.p.v. gecentreerd. Homepage-hero blijft centraal. */
.subhero--split .hero__actions {
  justify-content: flex-start;
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__scroll .mouse {
  width: 20px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink-faint);
  position: relative;
}
.hero__scroll .mouse::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent-deep);
  transform: translateX(-50%);
  animation: scrollDot 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollDot {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  35% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0;
    transform: translate(-50%, 11px);
  }
}

/* ---------------- Client strip ---------------- */
.clients {
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Ai-training: logobalk gecentreerd tussen de hero-CTA's en de stappen-sectie.
   De hero geeft eronder maar --space-5; deze margin tilt de band omlaag zodat de
   witruimte boven én onder de band gelijk is (= --section-pad, het site-ritme). */
.clients--spaced {
  margin-top: var(--section-pad);
}
.clients__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 4vw, 4rem);
  justify-content: space-between;
}
.clients__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 18ch;
}
/* Homepage: de regel boven de logo's is een gewone zin in plaats van een
   eyebrow. Mono in kapitalen met brede spatiëring las als decoratie; groter,
   in de broodletter en in --ink valt hij op en leest hij in één keer. */
.clients__label--pitch {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
}
/* niet afbreken na "MKB-" op een smal toestel */
.clients__label--pitch span {
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .clients__label--pitch {
    font-size: 1.1875rem;
  }
}
/* Telefoon: de logoband komt alleen op, zonder omhoog te schuiven. Op de
   homepage staat hij net onder de hero (100svh), dus hij verschijnt altijd
   terwijl je duimt. De scroll beweegt hem al; 26px extra lift met ease-out
   daarbovenop gaf twee bewegingen door elkaar en de zin leek te zwemmen
   (Mika, 30 sep 2026). Een fade van de tekst die met de scroll meeloopt,
   leest rustig. */
@media (max-width: 767px) {
  [data-motion="on"] .clients .reveal {
    transform: none;
    transition: opacity 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }
}
/* logo marquee wall
   Twee rijen die eindeloos doorlopen: de bovenste naar links, de onderste naar
   rechts. De loop is naadloos omdat clients.js de breedte van één set meet en
   die exact als --logowall-shift zet; de rij bevat altijd genoeg kopieën om de
   volle breedte te vullen, dus er valt nooit een gat en er is geen sprong. */
.logowall {
  --logowall-gap: clamp(2.4rem, 1rem + 4vw, 4.6rem);
  position: relative;
  overflow: hidden;
  /* Zachte randen links en rechts. Vroeger een mask-image op de hele wall; op
     de iPhone kostte dat één bevroren frame van 420-460ms zodra de band voor
     het eerst in beeld kwam (en nog eens bij het verlaten), gemeten op Mika's
     toestel op 9 sep 2026 en weg zodra het masker uit stond. Een masker over
     een laag met bewegende kinderen dwingt WebKit tot een dure maskerlaag. Nu
     twee overlays in de achtergrondkleur met een verloop. Die zijn op 30 sep
     2026 weer weg: de achtergrond is geen vlakke --bg maar de vaste aurora-mesh
     (body::before), met een gloed linksonder. Scrolde de band daarlangs, dan
     stond er een zwart blok op de linkerrand. Een verloop in één kleur past
     daar nooit op. Nu weer het masker, maar alleen met een muis; op een
     touchscherm loopt de band tot de schermrand en is een harde rand daar
     gewoon de rand van het scherm. */
}
@media (hover: hover) and (pointer: fine) {
  .logowall {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
}
.logowall__track {
  display: flex;
  align-items: center;
  gap: var(--logowall-gap);
  width: max-content;
  will-change: transform;
  /* duur en shift komen uit clients.js (gemeten), zodat beide rijen even snel
     lopen ongeacht hoeveel logo's erin zitten */
  animation: logowall-marquee var(--logowall-dur, 44s) linear infinite;
  animation-play-state: paused;
}
/* pas lopen als de logo's geladen en gemeten zijn: anders schuift de rij nog
   terwijl de breedtes veranderen, en dat is precies de zichtbare hik */
.logowall.is-ready .logowall__track {
  animation-play-state: running;
}
.logowall__seg {
  display: flex;
  align-items: center;
  gap: var(--logowall-gap);
  flex-shrink: 0;
}
/* tweede rij: tegengestelde richting */
.logowall__track--rev {
  animation-direction: reverse;
}
.logowall__track + .logowall__track {
  margin-top: clamp(1.3rem, 1rem + 1.2vw, 2rem);
}
.logowall img {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.6;
  /* geen filter meer: clients.js kiest een vooraf ingekleurde variant
     (zwart in licht, wit in donker). Zie de toelichting daar. */
  transition: opacity var(--dur-2);
}
.logowall img:hover {
  opacity: 1;
}
[data-theme="dark"] .logowall img {
  opacity: 0.5;
}
[data-theme="dark"] .logowall img:hover {
  opacity: 0.95;
}
/* Op een touchscherm bestaat geen hover, dus daar bleven de logo's op halve
   kracht en verdwenen ze bijna in de achtergrond. Daar staan ze vast in de
   hoverstand: wit in donker, zwart in licht. Met een muis blijft het zoals het
   was. */
@media (hover: none) {
  .logowall img {
    opacity: 1;
  }
  [data-theme="dark"] .logowall img {
    opacity: 0.95;
  }
}
@keyframes logowall-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--logowall-shift, 50%) * -1), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logowall {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logowall__track {
    animation: none;
    width: 100%;
  }
  .logowall__seg {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 2rem 3rem;
  }
}
.clients__logos {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  flex-wrap: wrap;
}
.clients__logos img {
  height: 30px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1) contrast(0.9);
  transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
[data-theme="dark"] .clients__logos img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.5;
}
.clients__logos img:hover {
  opacity: 1;
  filter: none;
}
[data-theme="dark"] .clients__logos img:hover {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* ---------------- Review bubbles (reviews page) ----------------
   Grid, geen CSS-kolommen (columns). WebKit (Safari op Mac én iPhone)
   tekent een element met backdrop-filter binnen een multicolumn-container
   niet meer zodra het buiten het eerste kolomfragment valt: de glaskaarten
   stonden in het DOM (opacity 1, aanklikbaar) maar bleven onzichtbaar, ook
   bij columns: 1 op de telefoon (Mika, 22 sep 2026). Een grid kent geen
   fragmentatie, dus geen bug, en balanceert bovendien voorspelbaar. */
.bubbles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
}
@media (min-width: 640px) {
  .bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .bubbles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bubble {
  margin: 0;
  padding: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  border-radius: var(--r-lg);
  display: block;
}
.bubble__stars {
  color: var(--accent-deep);
  font-size: 0.85rem;
  letter-spacing: 3px;
  margin-bottom: 0.8rem;
}
.bubble__q {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 420;
}
.bubble__by {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.2rem;
}
.bubble__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: #04181b;
  background: var(--grad-accent);
  flex-shrink: 0;
}
img.bubble__av {
  object-fit: cover;
  background: none;
}
.bubble__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bubble__name b {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}
.bubble__name span {
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* ---------------- NODE 01: DE KLOOF ---------------- */
.kloof__layout {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 920px) {
  .kloof__layout {
    grid-template-columns: 0.85fr 1.15fr;
  }
}
.infocard {
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--r-lg);
}
/* De conclusie onder de grafiek: eerst het cijfer, dan op een eigen regel de
   duiding over de volle kaartbreedte. Naast elkaar werd de zin tot een smalle
   kolom geknepen. */
.infocard__caption {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.4rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.infocard__note {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: 58ch;
  line-height: 1.65;
  text-wrap: pretty;
}
.infocard__note em {
  font-style: italic;
}
.infocard__note b {
  font-weight: 600;
  color: var(--ink);
}
.diverge {
  width: 100%;
  height: auto;
  display: block;
}
.diverge .axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}
.diverge .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}
.diverge .lead-line {
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 10px var(--accent-glow));
}
.diverge .lag-line {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.7;
}
.diverge .gap-band {
  fill: var(--accent);
  opacity: 0.14;
}
.diverge .dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
/* Lichte modus: het voorsprong-bolletje krijgt de diepblauwe tekst-gradient. */
[data-theme="light"] .diverge .dot {
  fill: url(#divergegrad);
}
.diverge .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--ink-faint);
  text-transform: uppercase;
}
.diverge .lbl-lead {
  fill: var(--accent-deep);
}
.gap-readout {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.4rem);
  font-weight: 560;
  color: var(--ink);
  line-height: 1;
}
.gap-readout small {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

/* ---------------- NODE 02: DE HERKADERING (scroll-zoom) ---------------- */
.reframe {
  position: relative;
  /* de scene loopt tot de linkerrand: de spine-ruimte van .page teruggeven,
     anders knipt de stage (overflow: hidden) het gebouw 1vw voor de rand af */
  margin-left: calc(-1 * clamp(0rem, 1vw, 1.5rem));
  /* breedte van het frame. Ook begrensd door de schermhoogte: op een laag
     scherm (Windows-laptop op 125%, ~1500x800) bleef het frame 1100px breed,
     waardoor de ingezoomde poppetjes tot boven de sectierand reikten. 95svh
     laat een Mac-scherm van ~1170 hoog precies zoals het was. */
  --rf-w: min(92vw, 1100px, 95svh);
}
.reframe__scroller {
  position: relative;
  height: 320vh;
}
.reframe__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.reframe__viewport {
  position: relative;
  width: var(--rf-w);
  aspect-ratio: 16 / 10;
}
.reframe__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: 50% 47%;
  /* bewust geen will-change/transform meer: de zoom loopt via de viewBox van
     de SVG (app.js), zodat het beeld bij elke zoomstand scherp blijft */
}
.building {
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--ink-faint);
}
.building .floor-rect {
  fill: var(--glass-fill);
  stroke: var(--line-strong);
  stroke-width: 1.2;
}
.building .floor-soft {
  fill: var(--bg-2);
  stroke: var(--line);
}
.building .glyph {
  fill: var(--ink-faint);
  opacity: 0.65;
}
/* Medewerkers (#ws in index.html): gedempte, natuurlijke tinten zodat het
   gebouw een echte werkvloer is, maar ingetogen genoeg voor de koppen erop.
   Per <use> kiest een style-attribuut shirt, haar en huidskleur uit deze sets;
   de onderdelen lezen de tokens via inline style (zie de defs in index.html). */
.building {
  --ws-k1: #8c776a; --ws-k2: #6f5a4d; --ws-k3: #9a877b;
  --ws-h1: #1b1f26; --ws-h2: #3d3129; --ws-h3: #262a31; --ws-h4: #6d6356;
  --ws-s1: #3c4a5c; --ws-s2: #57616f; --ws-s3: #4a4458; --ws-s4: #44544f; --ws-s5: #5b5047;
  --ws-pants: #232a34; --ws-shoe: #14181e; --ws-chair: #171b22;
  --ws-metal: #3a414c; --ws-desktop: #454d59; --ws-alu: #8d97a3;
  --ws-shadow: rgba(0, 0, 0, 0.5); --ws-lampshade: #2c323b;
  --ws-leaf: #3f5a4c; --ws-pot: #5a4f48; --ws-mug: #7d8793; --ws-paper: #a7b0ba;
}
[data-theme="light"] .building {
  --ws-k1: #d2b3a0; --ws-k2: #a88470; --ws-k3: #e0c7b7;
  --ws-h1: #3b3f46; --ws-h2: #6b5242; --ws-h3: #4c5058; --ws-h4: #a99a84;
  --ws-s1: #7f93ab; --ws-s2: #a3adba; --ws-s3: #8f88a3; --ws-s4: #8aa099; --ws-s5: #a8988a;
  --ws-pants: #56606d; --ws-shoe: #343a43; --ws-chair: #5b636e;
  --ws-metal: #8a94a0; --ws-desktop: #b7c0ca; --ws-alu: #dde2e8;
  --ws-shadow: rgba(12, 18, 28, 0.16); --ws-lampshade: #9aa4b0;
  --ws-leaf: #7fa08c; --ws-pot: #b9a597; --ws-mug: #eef1f5; --ws-paper: #ffffff;
}
/* Ai-kern met lichtdraden (index.html .core/.links/.nodes): de draden groeien
   met de zinnen mee (app.js); zonder pin/motion staan ze allemaal aan. Geen
   non-scaling-stroke: dat rekent de dash-lengtes in schermpixels en dan klopt
   het groeien (pathLength=1, dashoffset 1 -> 0) niet meer. */
.building .core__halo { fill: url(#corehalo); opacity: 0.55; }
.building .core__body {
  fill: url(#screengrad);
  transform-box: fill-box; transform-origin: 50% 50%;
}
[data-motion="on"] .building .core__body { animation: core-breathe 3.8s ease-in-out infinite alternate; }
@keyframes core-breathe { from { scale: 1; } to { scale: 1.06; } }
.building .core__rim { fill: none; stroke: #fff; stroke-opacity: 0.35; stroke-width: 0.8; }
.building .core__label { fill: #04181b; }
.building .link {
  fill: none; stroke: var(--accent); stroke-width: 0.7; stroke-linecap: round; opacity: 0.85;
  stroke-dasharray: 1 2; stroke-dashoffset: 1; /* gap 2: anders tekent de ronde kap een puntje op het uiteinde */
}
.building .node { opacity: 0; }
.building .node__dot { fill: #eaf9ff; }
.building .node__halo { fill: var(--accent); opacity: 0.22; }
[data-theme="light"] .building .node__dot { fill: var(--accent-deep); }
[data-theme="light"] .building .link { stroke: var(--accent-deep); }
.no-pin .building .link, [data-motion="off"] .building .link { stroke-dashoffset: 0; }
.no-pin .building .node, [data-motion="off"] .building .node { opacity: 1; }
.building .layer-band {
  fill: var(--accent);
  opacity: 0.3;
}
.building .layer-edge {
  stroke: var(--accent-deep);
  stroke-width: 2;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}
/* Leven in de poppetjes: ze typen. De armen zijn een eigen laag per persoon
   (index.html, #ws-arm) en tikken op en neer in korte reeksen met denkpauzes
   ertussen; de rechterarm loopt 0,13 s achter op de linker. Tempo en fase per
   persoon via inline --ws-t en animation-delay, anders typt het hele kantoor in
   de maat. Traag ademen en wiegen (eerdere versie) las als zuchten; te kleine
   slagen (<1 px/s) ziet niemand, dus de tik is 0,9 eenheid plus 4 graden om de schouder; de elleboog steekt
   daarvoor net naast de romp uit (wsp-arm in index.html).
   Buiten beeld pauzeert de hele svg via anim-sleep (.is-offstage). */
@keyframes ws-type { 0%{translate:0 0;rotate:0deg} 2.6%{translate:0 -0.9px;rotate:-4deg} 5.2%{translate:0 0;rotate:0deg} 7.8%{translate:0 -0.9px;rotate:-4deg} 10.4%{translate:0 0;rotate:0deg} 13.0%{translate:0 -0.9px;rotate:-4deg} 15.6%{translate:0 0;rotate:0deg} 18.2%{translate:0 -0.9px;rotate:-4deg} 20.8%{translate:0 0;rotate:0deg} 23.4%{translate:0 -0.9px;rotate:-4deg} 26.0%{translate:0 0;rotate:0deg} 28.6%{translate:0 -0.9px;rotate:-4deg} 31.2%{translate:0 0;rotate:0deg} 33.8%{translate:0 -0.9px;rotate:-4deg} 38%{translate:0 0;rotate:0deg} 46%{translate:0 0;rotate:0deg} 46%{translate:0 0;rotate:0deg} 48.6%{translate:0 -0.9px;rotate:-4deg} 51.2%{translate:0 0;rotate:0deg} 53.8%{translate:0 -0.9px;rotate:-4deg} 56.4%{translate:0 0;rotate:0deg} 59.0%{translate:0 -0.9px;rotate:-4deg} 61.6%{translate:0 0;rotate:0deg} 64.2%{translate:0 -0.9px;rotate:-4deg} 66.8%{translate:0 0;rotate:0deg} 69.4%{translate:0 -0.9px;rotate:-4deg} 72.0%{translate:0 0;rotate:0deg} 74.6%{translate:0 -0.9px;rotate:-4deg} 77.2%{translate:0 0;rotate:0deg} 79.8%{translate:0 -0.9px;rotate:-4deg} 82%{translate:0 0;rotate:0deg} 100%{translate:0 0;rotate:0deg} }
[data-motion="on"] .building .ws-arm {
  transform-box: fill-box;
  transform-origin: 100% 0; /* de schouder (binnenkant boven): de elleboog tikt daaromheen */
  animation: ws-type var(--ws-t, 4.4s) ease-in-out infinite;
}
/* werkvloer naast het gebouw: alleen in de gepinde zoom (app.js regelt de
   vervaging); de statische terugval toont het losse gebouw */
.building .annex { display: none; }
.reframe.is-centered .building .annex { display: inline; }
.building .outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  opacity: 0.5;
}
.reframe__beats {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}
/* Desktop: het 4:3-gebouw is hoger dan het 16:10-frame en steekt onderaan uit,
   waardoor het visuele midden van de kaart lager ligt dan het frame-midden. De
   zinnen meeschuiven zodat ze precies in het midden van de kaart staan. */
@media (min-width: 768px) {
  .reframe__beats { transform: translateY(calc(var(--rf-w) * 0.082)); }
  /* Met de gepinde zoom (app.js) staat het midden van het gebouw, de Ai-laptop,
     juist in het midden van de stage; de zinnen dus ook */
  .reframe.is-centered .reframe__beats { transform: none; }
}
/* readability scrim behind the centred beat text */
.reframe__beats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(42% 30% at 50% 50%, rgba(4, 6, 11, 0.62), transparent 72%);
}
[data-theme="light"] .reframe__beats::before {
  background: radial-gradient(44% 32% at 50% 50%, rgba(244, 247, 251, 0.78), transparent 72%);
}
/* alle drie de beats in dezelfde grid-cel → exact gecentreerd door place-items
   center op .reframe__beats; GSAP doet alleen de opacity/y-entry erbovenop */
.reframe__beat {
  grid-area: 1 / 1;
  max-width: min(90vw, 30rem);
  opacity: 0;
  transform: translateY(20px);
  z-index: 2;
}
.reframe__beat .h2 {
  /* 4.7svh: op een laag scherm krimpt het gebouw mee (--rf-w), de zin ook */
  font-size: min(clamp(1.8rem, 1.2rem + 3vw, 3.4rem), 4.7svh);
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}
[data-theme="light"] .reframe__beat .h2 {
  color: #0a0e14;
  text-shadow: 0 2px 26px rgba(255, 255, 255, 0.7);
}
.reframe__eyebrow {
  position: absolute;
  top: clamp(5rem, 8vh, 7rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
/* Static fallback (no motion) shows the building at mid-zoom with all beats stacked */
[data-motion="off"] .reframe__scroller,
.no-pin .reframe__scroller {
  height: auto;
}
[data-motion="off"] .reframe__stage,
.no-pin .reframe__stage {
  position: relative;
  height: auto;
  padding-block: var(--section-pad);
  gap: 2.5rem;
}
/* Static fallback shows only the payoff beat, centred over the building */
[data-motion="off"] .reframe__beat,
.no-pin .reframe__beat {
  opacity: 0;
  transform: none;
}
[data-motion="off"] .reframe__beat[data-beat="2"],
.no-pin .reframe__beat[data-beat="2"] {
  opacity: 1;
}

/* ---- Mobile-native reframe: the 3 statements fade in one by one on scroll ----
   On phones we drop the pinned zoom (jank) and the building diagram, and let the
   escalating statements appear one by one as you scroll, same feel as the other
   mobile scenes. JS adds .is-mobile-scene; initReframe is skipped on phones. */
@media (max-width: 767px) {
  .reframe.is-mobile-scene .reframe__scroller { height: auto; }
  .reframe.is-mobile-scene .reframe__stage {
    position: relative;
    height: auto;
    overflow: visible;
    display: block;
    padding-block: var(--section-pad);
  }
  .reframe.is-mobile-scene .reframe__eyebrow {
    position: static;
    transform: none;
    left: auto;
    margin-bottom: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  }
  .reframe.is-mobile-scene .reframe__viewport { width: 100%; aspect-ratio: auto; height: auto; }
  .reframe.is-mobile-scene .reframe__zoom { display: none; }
  .reframe.is-mobile-scene .reframe__beats {
    position: static;
    inset: auto;
    display: block;
    text-align: center;
  }
  .reframe.is-mobile-scene .reframe__beats::before { display: none; }
  .reframe.is-mobile-scene .reframe__beat {
    position: static;
    max-width: none;
    margin: 0 auto;
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-theme="light"] .reframe.is-mobile-scene .reframe__beat .h2,
  [data-theme="dark"] .reframe.is-mobile-scene .reframe__beat .h2 {
    color: var(--ink);
    text-shadow: none;
  }
  html.reveal-js .reframe.is-mobile-scene .reframe__beat {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  }
  html.reveal-js .reframe.is-mobile-scene .reframe__beat.is-in {
    opacity: 1;
    transform: none;
  }
}
/* On phones the whole "organisatielaag" scroll-section is removed entirely;
   it stays on iPad and laptop (>= 768px). */
@media (max-width: 767px) {
  .reframe {
    display: none;
  }
  /* 'Het programma' (square-scene, trainingpagina): alleen op tablet/laptop;
     op telefoon helemaal weg, net als de homepage-reframe hierboven */
  .square-scene {
    display: none;
  }
}

/* ---------------- NODE 03: HET GROEIMODEL ---------------- */
.growth__scroller {
  position: relative;
}
.growth__stage {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .growth__stage {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
  }
  .growth--pin .growth__viz {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: center;
  }
  /* Give the cards column enough height for the sticky rings to track through */
  .growth--pin .phase-cards {
    padding-block: 22vh;
    gap: 14vh;
  }
  /* De 22vh onderaan de kaarten-kolom is al een volle tussenruimte; de sectie
     hoeft daar GEEN eigen bodempadding bovenop te leggen (anders staat #bewijs
     ~dubbel zo ver = de "dode staart" die Mika zag). Zo is groeimodel -> bewijs
     net zo ver als alle andere secties. De 22vh bovenaan blijft voor het centreren
     van de eerste kaart op de sticky ringen. */
  .growth--pin {
    padding-bottom: 0;
  }
}
.rings {
  width: min(80vw, 460px);
  height: auto;
}
.rings circle {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.4;
  transition: stroke 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.rings .ring.is-lit {
  stroke: var(--accent-deep);
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.rings .ring-core {
  fill: var(--accent);
  opacity: 0.18;
  stroke: none;
}
.rings .ring-core.is-lit {
  opacity: 0.9;
}
.rings .ring-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--accent-ink); /* light mode: same colour as Koploper */
}
[data-theme="dark"] .rings .ring-label {
  fill: #fff; /* dark mode: readable white */
}
.rings .ring-label.is-lit {
  fill: var(--accent-deep);
}
/* KOPLOPER-kern: lichte modus krijgt de diepe accent-kleur (i.p.v. wassige cyaan),
   net als de andere light-accenten. Donkere modus ongewijzigd. Het label kleurt mee
   zodat het leesbaar blijft: donker op de faint/heldere kern, wit op de opgelichte
   diepblauwe kern in lichte modus. */
[data-theme="light"] .rings .ring-core {
  fill: var(--accent-deep);
}
.rings [data-core-label] {
  font-weight: 700;
}
[data-theme="dark"] .rings [data-core-label] {
  fill: var(--accent-ink);
}
[data-theme="light"] .rings [data-core].is-lit ~ [data-core-label] {
  fill: #fff;
}
.phase-cards {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.phase-card {
  position: relative;
  padding: clamp(1.3rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.phase-card__top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.phase-card__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.35em 0.7em;
  border-radius: var(--r-pill);
}
/* Lichte modus: diepe accent-gradient (zoals de overige light-accenten) + witte
   tekst. Donkere modus houdt de lichte cyaan-fill. */
[data-theme="light"] .phase-card__num {
  background: var(--grad-text);
  color: #fff;
}
.phase-card h3 {
  font-size: var(--fs-h3);
}
.phase-card p {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  max-width: 44ch;
}
.phase-card__meter {
  margin-top: 1.1rem;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.phase-card__meter i {
  display: block;
  height: 100%;
  width: var(--fill, 30%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width 0.7s var(--ease-out);
}
.growth--pin .phase-card.is-dim {
  opacity: 0.42;
}
.growth--pin .phase-card.is-active {
  transform: translateX(6px);
}

/* ---------------- NODE 04: HET BEWIJS ---------------- */
/* Ruimte ná de cijfer-balk ("1000+ medewerkers getraind") naar #stemmen ("Echte
   bedrijven. Echte adoptie") moet exact even ver zijn als groeimodel(03) -> bewijs(04)
   hierboven. Mika wil overal dezelfde sectie-afstand (29 juni 2026). De eerdere
   0.6x-inkorting is verwijderd.
   - Mobiel (<960px): de pin is uit, dus groeimodel->bewijs = --section-pad → hier ook.
   - Desktop (>=960px): groeimodel->bewijs wordt gedreven door de 22vh-staart van de
     gepinde phase-cards en is dus vh-afhankelijk (216px @900h, 284px @1200h). We
     spiegelen die met 23vh zodat de twee overgangen op ELK schermformaat gelijk zijn
     (binnen ~2px), niet alleen op een ~900px hoog scherm. */
#bewijs {
  padding-bottom: var(--section-pad);
}
@media (min-width: 960px) {
  #bewijs {
    padding-bottom: 23vh;
  }
}
/* Mika, 29 sep 2026: "Meer reviews bekijken" -> de overtuigingskaart (#mensen) en
   die kaart -> "05 Het probleem" even ver als bewijs -> "04 Uit het MKB" hierboven.
   Die afstand is 23vh plus de ~10px die het eyebrow in zijn kop zakt; onder de
   reviews staat geen eyebrow maar de kaartrand, dus die 10px komt er hier bij.
   Het kloof-tekstblok stond verticaal gecentreerd naast de hogere grafiek en zakte
   daardoor ~80px extra; bovenaan uitlijnen zet "05" en de grafiek op dezelfde lijn,
   allebei op de referentie-afstand. Onder 960px is de referentie --section-pad
   (plus die 10px); de kloof staat daar al in één kolom en klopte vanzelf. */
#stemmen {
  padding-bottom: calc(var(--section-pad) + 10px);
}
@media (min-width: 960px) {
  #stemmen {
    padding-bottom: calc(23vh + 10px);
  }
  #mensen {
    padding-bottom: 23vh;
  }
  #kloof .kloof__copy {
    align-self: start;
  }
}
/* De afstand vóór de gepinde growth-scene (belofte -> groeimodel/03) moet gelijk
   zijn aan de afstanden rond die scene (groeimodel->bewijs en bewijs->stemmen),
   die vh-gebaseerd zijn (22-23vh). Op desktop dus dezelfde 23vh als #bewijs, zodat
   belofte->03 exact even groot is als 04->05 op ELKE schermhoogte. Mobiel (<960px,
   pin uit) blijft --section-pad, net als #bewijs. */
@media (min-width: 960px) {
  #belofte {
    padding-bottom: 23vh;
  }
}
/* Telefoon (<768px): daar is de reframe-scene (#herkadering) display:none, dus
   #belofte volgt visueel direct op #kloof. De afstand kloof-tabel -> "DE BELOFTE"
   is daardoor TWEE sectie-paddings gestapeld (kloof-bodem + belofte-top). De
   afstand belofte -> 03 was maar ÉÉN sectie-padding (groeimodel-top is genuld).
   Mika wil die twee gelijk: dus onderaan #belofte op de telefoon 2x section-pad,
   zodat "Winstgevend"-kaart -> "03 Het groeimodel" even ver is als de 3x-tabel ->
   "DE BELOFTE". (De infocard heeft een zoom-transform die 'm optisch iets hoger
   laat eindigen; de layout-afstand is exact 2x section-pad, dus geen extra offset.) */
@media (max-width: 767px) {
  #belofte {
    padding-bottom: calc(var(--section-pad) * 2);
  }
}
.proof__grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(2, 1fr);
}
/* phones: one full-width column so card titles (long Dutch compound words like
   "kernprocessen", "organisatiebrede") fit and stay readable instead of
   overflowing the narrow 2-up columns */
@media (max-width: 600px) {
  .proof__grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 820px) {
  .proof__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.stat {
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.stat__gauge {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  overflow: visible;
}
.stat__gauge circle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.stat__gauge .track {
  stroke: var(--line);
}
.stat__gauge .arc {
  stroke: var(--accent-deep);
  filter: drop-shadow(0 0 6px var(--accent-glow));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__num .unit {
  font-size: 0.5em;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-weight: 500;
  margin-left: 0.15em;
}
.stat__label {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  max-width: 28ch;
  margin-top: 0.7rem;
}
.proof-bar {
  margin-top: 2.2rem;
  border-radius: var(--r-pill);
  padding: 1.1rem clamp(1.2rem, 1rem + 2vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.5rem + 3vw, 3.5rem);
  justify-content: space-around;
  align-items: center;
}
.proof-bar div {
  text-align: center;
}
.proof-bar b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 560;
  color: var(--ink);
}
.proof-bar span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------- NODE 05: DE STEMMEN ---------------- */
.voices__grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .voices__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.voice {
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  transition: transform var(--dur-2) var(--ease-out);
}
.voice:hover {
  transform: translateY(-6px);
}
.voice__metric {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 560;
  color: var(--ink);
  line-height: 1;
}
.voice__metric span {
  color: var(--accent-deep);
}
.voice blockquote {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 420;
}
.voice__by {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.voice__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.voice__who {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.voice__who b {
  font-weight: 600;
}
.voice__who span {
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* "meer reviews"-regel onder de stemmen. max-width:none heft de globale
   p-leesbreedte (var(--measure)) op, anders blijft dit een smalle box links
   en centreert text-align de link alleen bínnen die box. */
.voices-more {
  max-width: none;
  text-align: center;
  margin-top: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
}

/* ---------------- NODE 06: HET KANAAL (YouTube), premium library ---------------- */
.channel {
  position: relative;
  background: var(--bg-contrast);
  border-radius: clamp(28px, 3vw, 48px);
  margin-inline: clamp(0.5rem, 0.2rem + 1vw, 1.5rem);
  padding-block: var(--section-pad);
  overflow: hidden;
}
.channel__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 50% at 84% -8%, rgba(102, 198, 255, 0.32), transparent 60%),
    radial-gradient(44% 55% at 6% 110%, rgba(174, 245, 253, 0.18), transparent 60%);
}
.channel__head {
  max-width: 62ch;
}
/* Abonneer-knop: wit met donkere tekst in beide thema's. De YouTube-sectie is
   altijd donker, dus wit valt overal goed op. (.on-dark zet --ink-invert licht,
   daarom hier expliciete waarden i.p.v. de standaard .btn-kleuren.) */
.channel__subscribe {
  --bg-btn: #f4f7fb;
  --fg-btn: #0a0e16;
}
.channel__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 0.5rem + 3vw, 4rem);
  margin-top: 1.9rem;
}
.channel__stats div b {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.1vw, 3.1rem);
  font-weight: 680;
  line-height: 1;
  display: block;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.channel__stats div span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.5rem;
  display: block;
}

/* Featured cinematic video */
.channel__feature {
  display: block;
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(174, 245, 253, 0.22);
  background: #06080b;
  box-shadow: 0 50px 130px -44px rgba(0, 0, 0, 0.85), 0 0 90px -44px rgba(102, 198, 255, 0.55);
  isolation: isolate;
  will-change: transform;
}
.channel__feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.channel__feature:hover img {
  transform: scale(1.045);
}
.feature__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3, 6, 10, 0.92) 0%, rgba(3, 6, 10, 0.18) 46%, transparent 72%);
}
.feature__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(1.4rem, 1rem + 2.5vw, 3rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.feature__meta h3 {
  color: #fff;
  font-size: clamp(1.3rem, 0.9rem + 1.9vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.feature__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.9rem;
}
.feature__badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
/* phones: the featured-video card is short, so its overlay title rises off the
   scrim onto the bright thumbnail. Darken the scrim higher up and add a
   text-shadow so the title, badge and views stay clearly readable. */
@media (max-width: 600px) {
  .feature__grad {
    background: linear-gradient(
      to top,
      rgba(3, 6, 10, 0.97) 0%,
      rgba(3, 6, 10, 0.88) 32%,
      rgba(3, 6, 10, 0.52) 62%,
      transparent 92%
    );
  }
  .feature__meta h3 { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); }
  .channel__feature .vidcard__views,
  .channel__feature .feature__badge { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
}
.playbtn {
  width: clamp(56px, 5.5vw, 78px);
  height: clamp(56px, 5.5vw, 78px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* blue gradient liquid glass */
  background: linear-gradient(135deg, rgba(126, 216, 245, 0.42), rgba(79, 147, 255, 0.55));
  border: 1px solid rgba(174, 245, 253, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 50px rgba(102, 198, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--dur-2) var(--ease-spring), filter var(--dur-1);
}
/* smaller play buttons on the gallery cards */
.vidcard__thumb .playbtn {
  width: 46px;
  height: 46px;
}
.feature__play,
.vidcard__thumb .playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.channel__feature:hover .feature__play,
.vidcard:hover .vidcard__thumb .playbtn {
  transform: translate(-50%, -50%) scale(1.1);
  filter: brightness(1.1);
}
.playbtn svg {
  width: 36%;
  height: 36%;
  fill: #ffffff;
  margin-left: 0;
}

/* Gallery row: clean cards, text BELOW the thumbnail */
.channel__gallery {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.6rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .channel__gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.6rem;
    -webkit-overflow-scrolling: touch;
  }
  .vidcard {
    scroll-snap-align: start;
  }
}
.vidcard {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.vidcard__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: #06080b;
  border: 1px solid rgba(174, 245, 253, 0.16);
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.vidcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.vidcard:hover .vidcard__thumb {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 50px -24px rgba(102, 198, 255, 0.6);
}
.vidcard:hover .vidcard__thumb img {
  transform: scale(1.06);
}
.vidcard__title {
  color: #fff;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.vidcard__views {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.vid__embed {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Value props + incentive band */
.channel__values {
  display: grid;
  gap: 1rem 1.6rem;
  margin-top: clamp(1.8rem, 1rem + 2vw, 2.6rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) {
  .channel__values {
    grid-template-columns: 1fr;
  }
}
.channel__value {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-small);
}
.channel__value svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}
.channel__band {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem) clamp(1.6rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.channel__band h3 {
  color: #fff;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  line-height: 1.08;
}
.channel__band p {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.5rem;
}
.channel__cta {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.channel .btn--ghost {
  --fg-btn: #fff;
  border-color: rgba(174, 245, 253, 0.4);
}
.channel .btn--ghost:hover {
  border-color: var(--accent);
}

/* ---------------- NODE 07: DE URGENTIE (twee paden / fork) ---------------- */
.fork {
  position: relative;
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fork__branch {
  position: relative;
  align-self: stretch;
  min-height: 130px;
}
.fork__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.fork__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.3s var(--ease-out);
}
.fork__line--yes {
  stroke: var(--accent-deep);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.fork__line--no {
  stroke: var(--line-strong);
  stroke-dasharray: 6 7;
  stroke-dashoffset: 0;
  opacity: 0.7;
}
.fork__origin {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.fork.is-in .fork__line--yes,
html:not(.reveal-js) .fork__line--yes {
  stroke-dashoffset: 0;
}
.fork__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(70px, 130px) 1fr;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
.fork__start {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fork__today {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--grad-accent);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 8px 22px -8px var(--accent-glow);
}
.fork__sub {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
  line-height: 1.18;
  color: var(--ink);
}
.fork__cards {
  display: grid;
  gap: 1rem;
}
.fork__card {
  padding: 1.2rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.fork__card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.25rem);
  font-weight: 560;
  line-height: 1.22;
  margin: 0.55rem 0 0.4rem;
}
.fork__card p {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.45;
}
.fork__card--yes {
  border-color: color-mix(in srgb, var(--accent-deep) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  box-shadow: 0 24px 60px -30px var(--accent-glow);
}
.fork__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
.fork__tag--yes {
  color: var(--accent-ink);
  background: var(--grad-accent);
}
.fork__tag--no {
  color: var(--ink-soft);
  background: var(--bg-3);
  border: 1px solid var(--line);
}
/* Lichte modus: dezelfde diepe accent-gradient als de overige light-accenten
   (var(--grad-text)) met witte tekst voor contrast. Donkere modus houdt de
   lichte cyaan-gradient (--grad-accent), die daar juist goed werkt. */
[data-theme="light"] .fork__today,
[data-theme="light"] .fork__tag--yes {
  background: var(--grad-text);
  color: #fff;
}
@media (max-width: 720px) {
  .fork__branch {
    display: none;
  }
  .fork__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .fork__start {
    align-items: center;
    text-align: center;
  }
  .fork__today {
    align-self: center;
  }
}

/* ================= Ai-training (flagship) redesign ================= */

/* ---- Kop op 4 regels ---- */
/* De kop van ai-training is langer dan die van de andere subpagina's. Een
   vw-clamp werkt hier niet: de tekstkolom springt bij 900px van volle breedte
   naar 1.08fr, dus dezelfde viewportbreedte geeft twee heel verschillende
   kolombreedtes. Daarom hangt de tekengrootte aan de kolom zelf (100cqw =
   kolombreedte). 10.2cqw houdt de breedste regel ("Je medewerkers leren", 9.13em)
   binnen de kolom, zodat de kop overal op 4 regels blijft. Alleen deze pagina:
   .subhero--split wordt ook door claude-training.html gebruikt. */
.subhero__copy:has(.subhero__title--fit) {
  container-type: inline-size;
}
/* Specificiteit (0,3,1): moet over `.v2 .subhero h1` heen (v2.css, 0,2,1 en
   laadt ná pages.css). Vandaar ook de klasse i.p.v. een inline font-size. */
.v2 .subhero--split h1.subhero__title--fit {
  font-size: clamp(1.7rem, 10.2cqw, 3.85rem);
}

/* ---- Subhero met foto (mens boven de vouw) ---- */
.subhero--split .subhero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .subhero--split .subhero__grid { grid-template-columns: 1.08fr 0.92fr; }
}
.subhero__media { position: relative; isolation: isolate; }
.subhero__halo {
  position: absolute;
  /* horizontaal 0 i.p.v. -8%: de blur-glow stak op smalle schermen ~4px buiten
     de viewport en veroorzaakte horizontale scroll; verticaal blijft de bleed */
  inset: -8% 0 -14% 0;
  background: radial-gradient(60% 60% at 50% 75%, var(--accent-glow), transparent 70%);
  filter: blur(30px);
  z-index: 0;
}
.subhero__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
/* wide variant for a landscape (training-in-action) photo */
.subhero__media--wide img { aspect-ratio: 4 / 3; object-position: 60% center; }
@media (max-width: 899px) {
  .subhero__media img { aspect-ratio: 16 / 11; }
}

/* ---- Trainingsprogramma (curriculum) ---- */
.curriculum { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.curriculum + .curriculum { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.curriculum__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}
.curriculum__badge {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--grad-accent);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 8px 22px -10px var(--accent-glow);
}
.curriculum__intro-wrap { flex: 1 1 320px; }
.curriculum__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.1; }
.curriculum__intro { color: var(--ink-soft); font-size: var(--fs-small); margin-top: 0.3rem; max-width: 62ch; }
.curriculum__dur {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.curriculum__modules {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .curriculum__modules { grid-template-columns: 1fr 1fr; }
}
.module {
  position: relative;
  padding: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.module__num {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  opacity: 0.55;
  pointer-events: none;
}
.module__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.6rem;
}
.module__title { font-size: 1.12rem; font-weight: 560; line-height: 1.25; margin-bottom: 0.5rem; max-width: 26ch; }
.module__desc { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.curriculum--deep .module {
  border-color: color-mix(in srgb, var(--accent-deep) 26%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
}
.curriculum--deep .module__num { -webkit-text-stroke-color: color-mix(in srgb, var(--accent-deep) 45%, transparent); }

/* ---- Vierkant-scene: tekent zich rond op scroll (gepind) ----
   Default = leesbare statische versie (nooit blanco). JS voegt op desktop
   .is-pinned toe voor de filmische, gepinde scroll-scene. */
.square-scene { position: relative; }
.square-scroller { position: relative; }
.square-stage {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-block: var(--section-pad);
  width: min(92vw, var(--maxw, 1180px));
  margin-inline: auto;
  padding-inline: var(--gutter, 1.5rem);
}
.square-scene__head { text-align: center; }
.square-scene__title { margin-top: 0.6rem; max-width: 24ch; margin-inline: auto; }
.square-viewport {
  position: relative;
  width: min(82vw, 460px);
  aspect-ratio: 1 / 1;
  margin: 0.5rem auto 0;
}
.square-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}
.square-track { fill: none; stroke: var(--line-strong); stroke-width: 2; }
/* "Sessie 1: De basis" ingekleurd vlak (driehoek node3 -> node0) */
.square-fill { fill: #4f93ff; opacity: 0.16; }
.square-diag {
  fill: none;
  stroke: #6fa8ff;
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* default shown; gsap draws it in pinned mode */
  opacity: 0.65;
}
.square-fill__label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  fill: var(--accent-deep);
}
.square-fill__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  fill: #fff;
}
.square-progress {
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8;
  stroke-dashoffset: 0; /* default: shown complete */
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.sq-node { fill: var(--bg-2); stroke: var(--accent-deep); stroke-width: 2; }
.sq-marker {
  fill: var(--accent);
  stroke: var(--accent-deep);
  stroke-width: 2;
  opacity: 0;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}
/* default static: beats are a readable stacked list under the square */
.square-beats {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 640px;
  margin: 2rem auto 0;
}
.square-beat {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.square-beat__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.5rem;
}
.square-beat__title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.4rem; }
.square-beat__desc { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.square-beat__title em { color: var(--accent-deep); font-style: normal; }

/* ===== pinned cinematic mode (JS adds .is-pinned on desktop) ===== */
.square-scene.is-pinned .square-scroller { height: 460vh; }
.square-scene.is-pinned .square-stage {
  /* Het vierkant is bewust iets kleiner dan de eerste versie (58vmin i.p.v.
     64vmin, en een strakkere hoogte-formule): kaart 06 hangt volledig ONDER
     de onderlijn (zie de beat-5-regel verderop) en heeft daar zijn kaarthoogte
     + marge nodig, terwijl kaart 02 boven de bovenlijn vrij moet blijven van
     de gepinde kop. Doorgemeten op 1280x800 t/m 1728x1080. */
  --sq: min(58vmin, 860px, max(280px, calc(200svh - 1270px)));
  --card: clamp(214px, 18vw, 268px);
  position: sticky;
  top: 0;
  height: 100svh;
  width: auto;
  padding: 0;
  place-items: center;
  overflow: hidden;
}
.square-scene.is-pinned .square-scene__head {
  position: absolute;
  /* clear the fixed site nav (top ~18px, height ~55px) that stays pinned too.
     Nudged down so the title sits closer to the square; capped by the top-middle
     card (beat 02) which starts just below it. */
  top: clamp(6rem, 9.5vh, 6.8rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 720px);
  z-index: 5;
}
.square-scene.is-pinned .square-scene__title { font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.9rem); }
.square-scene.is-pinned .square-viewport {
  width: var(--sq);
  margin: 0;
  /* shift the whole square (cards live inside it) down below the pinned
     heading, maar net genoeg: de ruimte onder de onderlijn moet kaart 06
     volledig kunnen herbergen (zie --sq hierboven). */
  transform: translateY(106px);
}
.square-scene.is-pinned .square-progress { stroke-dashoffset: 8; } /* gsap drives it */
.square-scene.is-pinned .square-beats {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* each topic becomes a glass card placed just outside its node */
.square-scene.is-pinned .square-beat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card);
  padding: clamp(0.8rem, 0.6rem + 0.5vw, 1.05rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--shadow-lift);
  text-align: left;
  opacity: 0;
  z-index: 2;
}
.square-scene.is-pinned .square-beat__tag { margin-bottom: 0.3rem; }
.square-scene.is-pinned .square-beat__title { font-size: 1rem; line-height: 1.18; margin-bottom: 0.3rem; }
.square-scene.is-pinned .square-beat__desc { font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); }
/* positions: just outside each of the 8 nodes (clockwise from top-left).
   the drawn square spans +/-0.3*--sq from centre. */
.square-scene.is-pinned .square-beat[data-beat="0"] { transform: translate(calc(-50% - var(--sq) * 0.3 - var(--card) / 2 - 22px), calc(-50% - var(--sq) * 0.3)); }
.square-scene.is-pinned .square-beat[data-beat="1"] { transform: translate(-50%, calc(-50% - var(--sq) * 0.3 - 80px)); }
.square-scene.is-pinned .square-beat[data-beat="2"] { transform: translate(calc(-50% + var(--sq) * 0.3 + var(--card) / 2 + 22px), calc(-50% - var(--sq) * 0.3)); }
.square-scene.is-pinned .square-beat[data-beat="3"] { transform: translate(calc(-50% + var(--sq) * 0.3 + var(--card) / 2 + 22px), -50%); }
.square-scene.is-pinned .square-beat[data-beat="4"] { transform: translate(calc(-50% + var(--sq) * 0.3 + var(--card) / 2 + 22px), calc(-50% + var(--sq) * 0.3)); }
/* kaart 06 (midden-onder) hangt, net als kaart 02 boven, volledig vrij van
   zijn lijn: geankerd op zijn BOVENrand (geen -50%), 12px onder de onderlijn,
   zodat geen enkele kaart- of schermhoogte hem door de lijn kan laten steken.
   De vorm/breedte is identiek aan de andere kaarten. */
.square-scene.is-pinned .square-beat[data-beat="5"] { transform: translate(-50%, calc(var(--sq) * 0.3 + 12px)); }
.square-scene.is-pinned .square-beat[data-beat="6"] { transform: translate(calc(-50% - var(--sq) * 0.3 - var(--card) / 2 - 22px), calc(-50% + var(--sq) * 0.3)); }
.square-scene.is-pinned .square-beat[data-beat="7"] { transform: translate(calc(-50% - var(--sq) * 0.3 - var(--card) / 2 - 22px), -50%); }
/* payoff sits in the centre of the now-closed square, without card chrome */
.square-scene.is-pinned .square-beat--done {
  width: auto;
  max-width: 22ch;
  transform: translate(-50%, -50%);
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.square-scene.is-pinned .square-beat--done .square-beat__tag { text-align: center; }
.square-scene.is-pinned .square-beat--done .square-beat__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); }
.square-scene.is-pinned .square-beat--done .square-beat__desc { max-width: 26ch; margin-inline: auto; }

/* Big screens (external monitor / 16" laptop): the compact card sizing exists to
   survive short laptop heights. With real vertical room, scale the cards and their
   text up so the whole scene reads larger, and lift card 02 a touch more so it
   keeps clearing its (now taller) dot. */
@media (min-width: 1500px) and (min-height: 1000px) {
  .square-scene.is-pinned .square-stage { --card: clamp(300px, 17vw, 340px); }
  .square-scene.is-pinned .square-beat { padding: clamp(1rem, 0.85rem + 0.35vw, 1.25rem); }
  .square-scene.is-pinned .square-beat__tag { font-size: 0.74rem; margin-bottom: 0.4rem; }
  .square-scene.is-pinned .square-beat__title { font-size: clamp(1.08rem, 1rem + 0.25vw, 1.28rem); }
  .square-scene.is-pinned .square-beat__desc { font-size: clamp(0.88rem, 0.82rem + 0.18vw, 1rem); }
  .square-scene.is-pinned .square-beat[data-beat="1"] { transform: translate(-50%, calc(-50% - var(--sq) * 0.3 - 104px)); }
  /* kaart 06 heeft hier geen aparte offset nodig: de rand-ankering in de
     basisregel werkt op elke kaart- en schermhoogte. */
}

/* ---- Traject-scene: 6 fases die op scroll in/uit faden (gepind) ----
   Default = leesbare statische lijst (nooit blanco). JS voegt op desktop
   .is-pinned toe voor de filmische, gepinde scroll-scene met voortgangsbalk. */
.journey-scene { position: relative; }
.journey-scroller { position: relative; }
.journey-stage {
  width: min(92vw, var(--maxw, 1180px));
  margin-inline: auto;
  padding-block: var(--section-pad);
  padding-inline: var(--gutter, 1.5rem);
}
.journey-scene__head { text-align: center; }
.journey-scene__title { margin-top: 0.6rem; max-width: 22ch; margin-inline: auto; }
/* de lead heeft een eigen max-width (32ch); zonder auto-marges hangt dat
   blok links in de kolom terwijl de kop erboven wel gecentreerd staat. */
.journey-scene__head .lead { margin-inline: auto; }
.journey-rail { display: none; } /* alleen in pinned-modus */
/* default static: leesbare gestapelde kaarten */
.journey-beats {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 680px;
  margin: 2.4rem auto 0;
}
.journey-beat {
  padding: clamp(1.3rem, 1rem + 1vw, 1.7rem) clamp(1.4rem, 1rem + 1.5vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.journey-beat__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.journey-beat__icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  box-shadow: 0 8px 22px -10px var(--accent-glow);
}
.journey-beat__icon svg { width: 18px; height: 18px; }
.journey-beat__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.journey-beat__title { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.2; margin-bottom: 0.5rem; }
.journey-beat__title em { color: var(--accent-deep); font-style: normal; }
.journey-beat__focus { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; margin-bottom: 0.9rem; }
.journey-beat__list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.journey-beat__list li { position: relative; padding-left: 1.25rem; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.4; }
.journey-beat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-accent);
}
.journey-beat__result { font-size: 0.94rem; font-weight: 560; color: var(--ink); }
.journey-beat__result span { color: var(--accent-deep); }
.journey-beat--done .journey-beat__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.journey-beat--done .journey-beat__focus { margin-bottom: 0; }

/* ===== pinned cinematic mode (JS adds .is-pinned on desktop) ===== */
.journey-scene.is-pinned .journey-scroller { height: 620vh; }
.journey-scene.is-pinned .journey-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  /* Kop, rail en kaartband staan in één kolom in plaats van los van elkaar op
     drie absolute posities. Die drie posities hielden elkaar alleen uit elkaar
     zolang de kop precies twee regels bleef; op Windows valt het display-font
     terug op Inter in plaats van SF Pro, wordt de kop drie regels en zakte die
     dwars door de rail. In een kolom kan dat niet meer gebeuren: de rail volgt
     de kop, en de kaart krijgt de rest. */
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  width: auto;
  /* de vaste navigatiebalk loopt tot 74px; daaronder begint de kop */
  padding: clamp(5.4rem, 10vh, 7rem) var(--gutter, 1.5rem) clamp(0.8rem, 2.2vh, 2rem);
  overflow: hidden;
}
.journey-scene.is-pinned .journey-scene__head {
  position: static;
  transform: none;
  width: min(95vw, 1040px);
  z-index: 5;
}
/* Zelfde maat als de "Ai moet renderen. Punt."-kop (var(--fs-h2)), maar met een
   hoogtecap: op een laag venster (1366x768 geeft ~640px) mag de kop de kaart
   eronder niet opeten. */
.journey-scene.is-pinned .journey-scene__title {
  font-size: min(var(--fs-h2), 6.6vh);
  line-height: 1.05;
}
/* the scroll-prompt sits directly under the title, centred, at the same 16px
   gap as the "Ai moet renderen. Punt." headline and its body paragraph */
.journey-scene.is-pinned .journey-scene__head .lead {
  /* zelfde grootte als de journey-beat focus-tekst ("Zes maanden bouwen...") */
  font-size: min(clamp(1.14rem, 1.02rem + 0.45vw, 1.38rem), 2.4vh);
  line-height: 1.5;
  margin: min(1rem, 1.9vh) auto 0;
  /* de <br> zet "Scroll mee." op regel 1 en de uitleg op regel 2; met de
     standaard --measure viel die tweede zin om in een derde regel, en die
     botste met de fase-rail eronder. */
  max-width: none;
  color: var(--ink-soft);
}
.journey-scene.is-pinned .journey-rail {
  display: block;
  /* relatief, niet absoluut: de rail hangt onder de kop in dezelfde kolom, dus
     hij schuift mee zodra de kop een regel langer wordt. */
  position: relative;
  inset: auto;
  transform: none;
  margin-top: clamp(0.9rem, 2.4vh, 2.2rem);
  width: min(84vw, 540px);
  height: 16px;
  z-index: 4;
}
.journey-rail__line,
.journey-rail__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
}
.journey-rail__line { background: var(--line-strong); }
.journey-rail__fill {
  right: auto;
  width: 100%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  background: var(--grad-accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.journey-rail__dot {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--accent-deep);
  transform: translate(-50%, -50%);
}
.journey-rail__marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--accent-deep);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--accent-glow);
  z-index: 2;
}
.journey-scene.is-pinned .journey-beats {
  /* de kaartband is de derde rij van de stage (de ruimte die kop en rail
     overlaten), niet meer de hele stage; de kaart wordt dáárin gecentreerd en
     kan de rail dus niet meer raken. Als container-met-hoogte is de band ook de
     maatstok voor de kaart: die rekent in cqh, dus hij past zich aan de ruimte
     aan die de kop werkelijk overlaat, of die kop nu twee of drie regels is. */
  container-type: size;
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  pointer-events: none;
}
.journey-scene.is-pinned .journey-beat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88vw, 560px);
  transform: translate(-50%, -50%);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem) clamp(1.5rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  z-index: 2;
}
.journey-scene.is-pinned .journey-beat--done {
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  text-align: center;
  width: min(88vw, 30ch);
}
.journey-scene.is-pinned .journey-beat--done .journey-beat__head { justify-content: center; }

/* pinned: grotere, beter leesbare kaart + tekst.
   Alles binnen de kaart hangt aan één maat (de font-size van .journey-beat) en
   staat in em. Op een ruim venster is dat 1rem en ziet de kaart eruit zoals
   altijd; op een laag venster (een 1366x768-laptop houdt ~640px over) krimpt
   die ene waarde en krimpt de hele kaart proportioneel mee, zodat hij binnen de
   band tussen rail en onderrand blijft in plaats van onderaan af te breken. */
.journey-scene.is-pinned .journey-beat {
  width: min(93vw, 780px);
  /* 2.6cqh vult de band voor ongeveer 94%; op een ruim scherm wint 1rem en is
     de kaart precies zoals hij was. */
  font-size: min(1rem, 2.6cqh);
  padding: 3.2em clamp(2.3rem, 1.6rem + 2.2vw, 3.5rem);
}
.journey-scene.is-pinned .journey-beat__head { gap: 0.95em; margin-bottom: 1em; }
.journey-scene.is-pinned .journey-beat__icon { width: 3em; height: 3em; border-radius: 0.81em; }
.journey-scene.is-pinned .journey-beat__icon svg { width: 1.56em; height: 1.56em; }
.journey-scene.is-pinned .journey-beat__tag { font-size: 0.82em; }
.journey-scene.is-pinned .journey-beat__title { font-size: 2.3em; margin-bottom: 0.37em; }
.journey-scene.is-pinned .journey-beat__focus { font-size: 1.38em; line-height: 1.6; margin-bottom: 0.9em; }
.journey-scene.is-pinned .journey-beat__list { gap: 0.68em; margin-bottom: 1.25em; }
.journey-scene.is-pinned .journey-beat__list li { font-size: 1.26em; padding-left: 1.35em; }
.journey-scene.is-pinned .journey-beat__list li::before { width: 0.45em; height: 0.45em; top: 0.55em; }
.journey-scene.is-pinned .journey-beat__result { font-size: 1.3em; }
.journey-scene.is-pinned .journey-beat--done .journey-beat__title { font-size: 3.3em; }
/* de slotregel erft de globale p-maatvoering (max-width: var(--measure)),
   die smaller is dan de kop; zonder auto-marges plakt dat blok links vast
   terwijl de kop erboven gecentreerd staat */
.journey-scene.is-pinned .journey-beat--done .journey-beat__focus { font-size: clamp(1.14rem, 1rem + 0.5vw, 1.38rem); margin-inline: auto; }

/* ---- Mobiel-eigen scene: kaarten faden 1-voor-1 in + slanke voortgangsbalk ----
   Desktop houdt de gepinde scene; dit draait alleen < 768px (JS voegt
   .is-mobile-scene toe en injecteert .scene-prog). Native scroll = boterzacht. */
.scene-prog { display: none; }
@media (max-width: 767px) {
  /* a slim reading-progress bar hugging the very top, shown only while you
     scroll through the scene. fixed (not sticky) so the body's overflow-x:clip
     guard can't break it. */
  .is-mobile-scene .scene-prog {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* onder de nav (z:100) zodat het balkje niet over het open menu valt */
    z-index: 90;
    height: 3px;
    width: 100%;
    margin: 0;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
    pointer-events: none;
  }
  .is-mobile-scene .scene-prog.is-on { opacity: 1; }
  .scene-prog__fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--grad-accent);
    box-shadow: 0 0 10px var(--accent-glow);
  }
  /* the SVG square is a desktop set-piece; on phones the steps carry it */
  .is-mobile-scene .square-viewport { display: none; }
  /* cards fade + slide in one by one, gated on reveal-js so it is never blank
     without JS (reveal-js is only set when motion is on) */
  html.reveal-js .is-mobile-scene .journey-beat,
  html.reveal-js .is-mobile-scene .square-beat {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    will-change: opacity, transform;
  }
  html.reveal-js .is-mobile-scene .journey-beat.is-in,
  html.reveal-js .is-mobile-scene .square-beat.is-in {
    opacity: 1;
    transform: none;
  }
  /* "Scroll mee"-prompt zelfde grootte als de journey-beat focus-tekst op mobiel */
  .journey-scene__head .lead { font-size: var(--fs-small); }
}

/* ---- Tool-advies blok ---- */
.advice {
  margin-top: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  justify-content: space-between;
}
.advice__body { flex: 1 1 360px; }
.advice__eyebrow { color: var(--accent-deep); margin-bottom: 0.5rem; }
.advice__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 0.6rem; }
.advice__body p { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.5; max-width: 52ch; }
.advice .btn { flex-shrink: 0; }

/* ---------------- NODE 08: DE UITNODIGING (CTA) ---------------- */
.invite {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 2rem + 6vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  border-radius: clamp(28px, 3vw, 48px);
  overflow: hidden;
  background: var(--bg-contrast);
}
.invite h2 {
  color: #fff;
}
.invite h2 {
  font-size: var(--fs-h2);
  max-width: 24ch;
  margin-inline: auto;
}
/* Zachtere accent-gradient op de invite-kop (was te fel/neon op de donkere kaart).
   background-image (niet background) zodat background-clip:text intact blijft.
   Vaste waarde -> consistent op elke pagina, in beide thema's. */
.invite h2 em {
  background-image: var(--grad-text-dark);
}
.invite p {
  margin: 1.3rem auto 0;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.4;
}
.invite__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.invite__reassure {
  margin-top: 1.6rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.invite__glow {
  position: absolute;
  width: 60%;
  height: 70%;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
/* De onderglow van de afspraak-kolom was te fel in darkmode -> veel zachter.
   Geldt op elke pagina met deze kolom; lichte modus blijft ongewijzigd. */
[data-theme="dark"] .invite__glow {
  opacity: 0.28;
}
[data-theme="dark"] .invite.glass--glow::after {
  opacity: 0.38;
}

/* ---------------- booking SUITE (every page with an agenda) ----------------
   Luxe concept: one bespoke "suite" card pairing a real in-company photograph
   (left) with a clean dark booking module (right). The photography and
   liquid-glass material carry the premium feeling, so the calendar reads as
   part of a considered experience rather than a bare widget. Used on the
   homepage + all subpages via .booking-suite / .suite (each page keeps its own
   copy and a fitting photo). */
.booking-suite {
  padding-block: clamp(5.5rem, 4rem + 9vw, 12rem);
  /* Vangnet voor #kennismaking: springt de browser zelf naar het fragment
     (dat doet hij op een trage verbinding nog eens over, zie initHashLanding
     in app.js), dan landt de sectie hier onder de zwevende nav in plaats van
     eronder weg. Zelfde 84px die app.js als nav-offset aanhoudt. */
  scroll-margin-top: 84px;
}
.booking-suite__intro {
  max-width: 48rem;
  margin: 0 auto clamp(2.6rem, 1.8rem + 3vw, 4.5rem);
  text-align: center;
}
.booking-suite__eyebrow {
  color: var(--accent-deep);
  justify-content: center;
  margin-bottom: 1.2rem;
}
.booking-suite__title {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-inline: auto;
}
.booking-suite__title em {
  font-style: normal;
  background-image: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.booking-suite__lead {
  margin: 1.3rem auto 0;
  max-width: 48ch;
  font-size: var(--fs-lead);
  /* zelfde regelafstand als .lead: op --lh-body (1.6) staan de regels
     veel verder uit elkaar dan bij de leads elders op de pagina */
  line-height: 1.36;
  letter-spacing: -0.018em;
  color: var(--ink-soft);
  /* gelijkmatige regelverdeling: houdt de lead op een nette 2 regels i.p.v.
     een lange regel + één los woord ("liggen.") op een derde regel */
  text-wrap: balance;
}
/* the suite card */
.suite {
  position: relative;
  width: min(100%, 68rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: clamp(24px, 1.5rem + 1.4vw, 40px);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--shadow-lift),
    0 40px 130px -45px var(--accent-glow);
}
@media (min-width: 900px) {
  .suite {
    grid-template-columns: 0.84fr 1.16fr;
  }
}
/* photographic pane */
.suite__visual {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
}
.suite__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 30%;
  display: block;
}
/* depth + legibility scrim */
.suite__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 14, 0.12) 0%, transparent 28%, rgba(4, 8, 14, 0.5) 100%),
    linear-gradient(90deg, transparent 72%, rgba(4, 8, 14, 0.4) 100%);
  pointer-events: none;
}
.suite__proof {
  position: absolute;
  left: clamp(1rem, 0.6rem + 1vw, 1.6rem);
  bottom: clamp(1rem, 0.6rem + 1vw, 1.6rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: #f3f6fb;
  background: rgba(8, 12, 20, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.suite__proof-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
/* booking pane: a controlled dark surface so the calendar always integrates */
.suite__booking {
  --ink: #f3f6fb;
  --ink-soft: #c2cad4;
  --ink-faint: #8a93a0;
  /* Het paneel is in beide thema's donker, dus --ink-invert moet mee omdraaien.
     Zonder deze regel erft een .btn hier in light mode de lichte --ink-invert
     van :root: witte tekst op de witte pil van het agenda-vangnet. */
  --ink-invert: #0a0e16;
  position: relative;
  padding: clamp(1.3rem, 0.9rem + 1.6vw, 2.4rem);
  color: var(--ink);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(120% 80% at 100% 0%, rgba(102, 198, 255, 0.1), transparent 60%),
    #070b12;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
}
.suite__booking-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
  margin-bottom: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.suite__booking-title {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.suite__meta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.suite .calendar-embed {
  margin-top: 0;
}
.suite__reassure {
  margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.4rem);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  text-align: center;
}
/* Uitwijkroutes onderaan de boekingskaart. Spiegelt .suite__booking-head:
   dezelfde haarlijn, label links, actie rechts. Geen accentkleur, want die
   is hier voor de knoppen; deze regels mogen de agenda niet beconcurreren. */
.suite__routes {
  display: grid;
  gap: 0.55rem;
  margin-top: clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
  padding-top: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.suite__route {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1.2rem;
  /* geen lopende tekst: de leesbreedte uit base.css zou de rij afknijpen
     en de rechterkolom halverwege de kaart laten stranden */
  max-width: none;
  font-size: var(--fs-small);
}
.suite__route-label {
  color: var(--ink-faint);
}
.suite__route-link {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.suite__route-link:hover,
.suite__route-link:focus-visible {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.55);
}
/* Smal: label en link passen niet naast elkaar. Ze stapelen dan allebei,
   ook de rij die op het randje nog wel zou passen. Anders valt de ene rij
   om en de andere niet, en dat leest als een fout. */
@media (max-width: 560px) {
  .suite__routes {
    gap: 0.85rem;
  }
  .suite__route {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
}

/* ---------------- Subpage hero ---------------- */
.subhero {
  position: relative;
  padding-top: clamp(8rem, 7rem + 6vw, 12rem);
  /* geen eigen bodem: de eerste sectie eronder levert de tussenruimte (= één
     --section-pad), zodat hero -> eerste sectie overal even ver staat als alle
     andere secties onderling. */
  padding-bottom: 0;
  /* .hero__glow van de home-hero mag hier ook staan. De rechterbol steekt
     8vw buiten de viewport, dus horizontaal wegknippen; verticaal laten we hem
     wél uitlopen, zodat de gloed de overgang naar de eerste sectie verzacht.
     overflow-x: clip (niet hidden) omdat clip als enige waarde met een
     zichtbare y-as gecombineerd mag worden. */
  overflow-x: clip;
}
/* Dezelfde afstand van menubalk tot titel op alle subpagina's. (Tot 3 okt 2026
   stond hier een uitzondering voor de fotohero van over-ons; die is nu de
   bioscoop, bioscoop.css, en zet zijn tekst onderin.) */
.subhero {
  padding-top: clamp(9.5rem, 7.5rem + 7.5vw, 14rem);
}
.subhero h1 {
  font-size: var(--fs-display);
  max-width: 18ch;
  margin-top: 1rem;
}
.subhero .lead {
  margin-top: 1.4rem;
  max-width: 52ch;
  font-size: var(--fs-lead);
}

/* Belofte triad (animated icons) */
.triad {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}
@media (min-width: 780px) {
  .triad {
    grid-template-columns: repeat(3, 1fr);
  }
}
.triad__card {
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--dur-2) var(--ease-out);
}
.triad__card:hover {
  transform: translateY(-6px);
}
.triad__icon {
  width: 56px;
  height: 56px;
  display: block;
}
.triad__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.triad__card h3 {
  font-size: var(--fs-h3);
}
.triad__card p {
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
/* icon animations */
.tri-check {
  stroke-dasharray: 40;
  animation: triDraw 4.5s var(--ease-in-out) infinite;
}
@keyframes triDraw {
  0% { stroke-dashoffset: 40; }
  22%, 80% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 40; }
}
.tri-layer {
  transform-box: fill-box;
  transform-origin: center;
  animation: triFloat 3.2s var(--ease-in-out) infinite;
}
.tri-l2 { animation-delay: 0.18s; }
.tri-l3 { animation-delay: 0.36s; }
@keyframes triFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}
.tri-dot {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px var(--accent));
  animation: triPulse 2.2s var(--ease-in-out) infinite;
}
@keyframes triPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: 0.6; }
}

/* feature list rows */
.featrow {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 880px) {
  .featrow {
    grid-template-columns: 1fr 1fr;
  }
  .featrow:nth-child(even) .featrow__media {
    order: -1;
  }
}
.featrow__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.featrow h3 {
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
}

/* generic bullet list */
.ticks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.4rem;
}
.ticks li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: var(--ink-soft);
}
.ticks svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-deep);
}

/* contact + downloads */
.contact__grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .contact__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* contact form layout */
.contactgrid {
  display: grid;
  gap: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  align-items: start;
}
@media (min-width: 880px) {
  .contactgrid {
    grid-template-columns: 1.35fr 0.65fr;
  }
}
.form {
  padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  border-radius: var(--r-lg);
}
.form__row {
  display: grid;
  gap: 0 1rem;
}
@media (min-width: 560px) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.05rem;
}
.field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  font: inherit;
  /* min. 16px zodat iOS Safari NIET automatisch inzoomt bij focus */
  font-size: max(1rem, 0.98rem);
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.8em 1em;
  width: 100%;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: rgba(255, 255, 255, 0.05);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field textarea {
  resize: vertical;
  min-height: 130px;
}
.form__submit {
  margin-top: 0.5rem;
}
.form__note {
  margin-top: 1rem;
  font-size: var(--fs-small);
}
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-card {
  padding: 1.8rem;
  border-radius: var(--r-lg);
}
.contact-card h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}
.contact-card a,
.contact-card p {
  font-size: 1.05rem;
  color: var(--ink);
}

/* Contact page: Direct contact card (icon rows) + FAQ card */
.contact-info {
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--r-lg);
}
.contact-info__title {
  margin-bottom: 1.4rem;
}
.cinfo__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0;
}
.cinfo__row + .cinfo__row {
  border-top: 1px solid var(--line);
}
a.cinfo__row {
  transition: transform var(--dur-1);
}
a.cinfo__row:hover {
  transform: translateX(3px);
}
.cinfo__icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
}
.cinfo__icon svg {
  width: 23px;
  height: 23px;
}
.cinfo__icon--mail {
  background: rgba(120, 210, 255, 0.16);
  color: #66c6ff;
}
.cinfo__icon--wa {
  background: rgba(150, 120, 255, 0.18);
  color: #b09bff;
}
.cinfo__icon--loc {
  background: rgba(255, 120, 180, 0.16);
  color: #ff8fc0;
}
.cinfo__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.cinfo__label {
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.cinfo__value {
  font-size: 1.1rem;
  color: var(--ink);
  word-break: break-word;
}
.cinfo__sub {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
a.cinfo__row:hover .cinfo__value {
  color: var(--accent-deep);
}
.contact-faq {
  padding: clamp(1.4rem, 1rem + 1.5vw, 1.9rem);
  border-radius: var(--r-lg);
}
.contact-faq__q {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.contact-faq__a {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* ---------------- Veelgestelde vragen (FAQ-accordeon, liquid glass) ---------------- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 0.5rem + 0.6vw, 1rem);
  max-width: 56rem;
}
/* centred FAQ variant (ai-training): head text + the whole list centred on the
   page; the question/answer text inside each item stays left-aligned. */
.faq--center .section__head {
  text-align: center;
  margin-inline: auto;
}
.faq--center .section__head .lead {
  margin-inline: auto;
}
.faq--center .faq__list {
  margin-inline: auto;
}
.faq__item {
  border-radius: var(--r-lg);
}
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: clamp(1.1rem, 0.95rem + 0.7vw, 1.55rem) clamp(1.3rem, 1rem + 1vw, 1.9rem);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.25s var(--ease-out);
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q:hover {
  color: var(--accent-deep);
}
.faq__item[open] .faq__q {
  color: var(--accent-deep);
}
.faq__q:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 8px;
}
/* plus -> minus toggle */
.faq__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-deep);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq__item[open] .faq__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0);
}
.faq__a {
  padding: 0 clamp(1.3rem, 1rem + 1vw, 1.9rem) clamp(1.25rem, 1rem + 0.8vw, 1.65rem);
}
.faq__a p {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.faq__item[open] .faq__a {
  animation: faqReveal 0.35s var(--ease-out);
}
@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.faq__more {
  margin-top: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  max-width: none; /* de globale p-measure breekt deze ene zin nét af */
}
/* in de gecentreerde FAQ-variant staat ook de afsluitende regel gecentreerd */
.faq--center .faq__more { text-align: center; margin-inline: auto; }

.download-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .download-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.download {
  padding: 1.8rem;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 240px;
  transition: transform var(--dur-2) var(--ease-out);
}
.download:hover {
  transform: translateY(-6px);
}
.download .tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  align-self: flex-start;
  padding: 0.35em 0.7em;
  border-radius: var(--r-pill);
}
/* Lichte modus: diepe accent-gradient + witte tekst, net als de andere pills. */
[data-theme="light"] .download .tag {
  background: var(--grad-text);
  color: #fff;
}
.download h3 {
  font-size: 1.3rem;
}
.download p {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.download .link-arrow {
  margin-top: auto;
}

/* ============================================================
   GRATIS DOWNLOADS, premium guide showcase (gratis-downloads only)
   3D guide-cover mockups, flagship spotlight, library grid.
   Scoped under .dlx-* / .guidebook so nothing else is affected.
   ============================================================ */

/* ---- hero stat strip ---- */
.dlx-hero__stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}
.dlx-hero__stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.1rem 1.9rem;
  border-left: 1px solid var(--line);
}
.dlx-hero__stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.dlx-hero__stats b {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.7rem);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dlx-hero__stats span {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* ---- the 3D guide cover (reusable mockup) ---- */
.guidebook {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.guidebook__cover {
  position: relative;
  z-index: 2;
  aspect-ratio: 13 / 17;
  border-radius: 18px;
  padding: clamp(1.4rem, 1rem + 1.3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: #eaf6fb;
  background:
    radial-gradient(120% 75% at 100% 0%, rgba(174, 245, 253, 0.18), transparent 55%),
    linear-gradient(158deg, #1a212e 0%, #0c111a 58%, #080b11 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.3),
    0 42px 80px -34px rgba(0, 0, 0, 0.85);
}
/* book spine: bright accent edge on the left */
.guidebook__cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, #aef5fd, #4f93ff);
  box-shadow: 0 0 26px rgba(174, 245, 253, 0.55);
}
/* page-stack slivers behind, to fake thickness */
.guidebook__stack {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(158deg, #11161f, #070a0f);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.guidebook__stack--1 { transform: translate(9px, 11px); }
.guidebook__stack--2 { transform: translate(18px, 22px); opacity: 0.55; }

/* watermark motif (giant ghost glyph) */
.guidebook__mark {
  position: absolute;
  z-index: 0;
  right: -0.4rem;
  top: 50%;
  transform: translateY(-46%);
  font-family: var(--font-display);
  font-weight: 720;
  font-size: clamp(7rem, 4rem + 14vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  background: linear-gradient(170deg, rgba(174, 245, 253, 0.26), rgba(79, 147, 255, 0.05));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  white-space: nowrap;
}
.guidebook--code .guidebook__mark,
.guidebook--design .guidebook__mark { font-size: clamp(4rem, 2.4rem + 9vw, 7rem); right: 0.2rem; }

/* header = logo linksboven, daaronder de categorie (eyebrow) */
.guidebook__top {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.guidebook__logo {
  display: block;
  width: clamp(22px, 2.1vw, 28px);
  height: auto;
}
.guidebook--xl .guidebook__logo { width: 32px; }
.dlx-orb .guidebook__logo,
.dlx-detail .guidebook__logo { width: 20px; }
.guidebook__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(174, 245, 253, 0.85);
}
.guidebook__title {
  position: relative;
  z-index: 3;
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 660;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.7rem);
  color: #f3f8fc; /* altijd licht: de cover is in beide thema's donker */
}
.guidebook__sub {
  position: relative;
  z-index: 3;
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: rgba(234, 246, 251, 0.62);
}
.guidebook__foot {
  position: relative;
  z-index: 3;
  margin-top: 1.3rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: rgba(234, 246, 251, 0.55);
}

/* shared: corner ribbon on a cover + the soft category tag (rail + cards) */
.guidebook__ribbon {
  position: absolute;
  z-index: 4;
  top: 0.85rem;
  right: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #04181b;
  background: linear-gradient(90deg, #aef5fd, #7fd8f5);
  padding: 0.32em 0.7em;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(174, 245, 253, 0.35);
}
.dlx-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.32em 0.7em;
  border-radius: var(--r-pill);
}
[data-theme="light"] .dlx-card__tag { background: var(--grad-text); color: #fff; }

/* ---- hero: copy + fanned cover deck ---- */
.dlx-hero { overflow-x: clip; }
.dlx-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .dlx-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.dlx-hero__copy { text-align: left; }
.dlx-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
  margin-top: 2.2rem;
}
.dlx-hero__deck {
  position: relative;
  min-height: clamp(20rem, 27vw, 30rem);
}
.dlx-hero__glow {
  position: absolute;
  inset: -16%;
  z-index: 0;
  background: radial-gradient(54% 54% at 52% 46%, rgba(116, 205, 247, 0.3), transparent 70%);
  filter: blur(56px);
  pointer-events: none;
}
.dlx-deck__c {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 17vw, 230px);
  transition: transform 0.5s var(--ease-spring);
}
.dlx-deck__c--back {
  z-index: 1;
  transform: translate(-94%, -52%) rotate(-10deg);
  filter: brightness(0.86) saturate(0.9);
}
.dlx-deck__c--mid {
  z-index: 2;
  transform: translate(-50%, -46%) rotate(-2deg);
  filter: brightness(0.95);
}
.dlx-deck__c--front {
  z-index: 3;
  transform: translate(-2%, -50%) rotate(8deg);
}
.dlx-hero__deck:hover .dlx-deck__c--back { transform: translate(-104%, -54%) rotate(-13deg); }
.dlx-hero__deck:hover .dlx-deck__c--front { transform: translate(6%, -50%) rotate(11deg); }
@media (max-width: 899px) {
  .dlx-hero__copy { text-align: center; }
  .dlx-hero__copy .dlx-hero__stats,
  .dlx-hero__cta { justify-content: center; }
  .dlx-hero__deck { min-height: 22rem; margin-top: 1rem; }
  .dlx-deck__c { width: clamp(140px, 38vw, 180px); }
}
@media (max-width: 560px) {
  .dlx-hero__stats { justify-content: center; gap: 0.4rem 1.6rem; }
  .dlx-hero__stats > div { border-left: 0; padding-inline: 0; align-items: center; }
}

/* ---- featured flagship ---- */
.dlx-feature { overflow-x: clip; }
.dlx-spot__halo {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: radial-gradient(56% 56% at 50% 44%, rgba(116, 205, 247, 0.32), transparent 70%);
  filter: blur(54px);
  pointer-events: none;
}
.dlx-feature__head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.2rem, 1rem + 3vw, 3.6rem);
}
/* de lead heeft een eigen max-width; zonder auto-marges zou dat blok links
   uitlijnen i.p.v. onder het midden van de titel (text-align centreert alleen
   de tekst, niet het blok zelf) */
.dlx-feature__head .lead { margin-inline: auto; }
.dlx-feature__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 1rem + 4vw, 4.2rem);
  align-items: center;
}
@media (min-width: 920px) {
  .dlx-feature__stage { grid-template-columns: 0.88fr 1.12fr; }
}
.dlx-feature__visual {
  position: relative;
  will-change: transform;
}
.guidebook--xl {
  position: relative;
  z-index: 1;
  max-width: 410px;
  margin-inline: auto;
}
.dlx-feature__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 540px) {
  .dlx-feature__panels { grid-template-columns: 1fr; }
}
.dlx-feat {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  padding: 1.2rem 1.25rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--glass-tint);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.dlx-feat:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.dlx-feat__ic {
  flex: 0 0 auto;
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-ink);
}
[data-theme="light"] .dlx-feat__ic { background: var(--grad-text); color: #fff; }
.dlx-feat__ic svg { width: 1.45rem; height: 1.45rem; }
.dlx-feat h3 { font-size: 1.06rem; }
.dlx-feat p { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 0.25rem; }
.dlx-feature__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.7rem;
  margin-top: clamp(3.4rem, 2rem + 4.5vw, 5.5rem);
}
.dlx-feature__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* ============================================================
   Bibliotheek-cirkel (draaitafel), gratis-downloads only.
   DEFAULT (mobiel / geen GSAP / reduced motion) = nette verticale catalogus:
   6 `.dlx-detail` kaarten (mini-cover + body) gestapeld, draaitafel verborgen.
   WHEEL-MODE (`.is-wheel`, desktop + GSAP) = de stage pint; de ring draait per
   scroll zodat 1 gids op het 9-uur focuspunt belandt, opschaalt en gloeit, met
   het detailpaneel ernaast (alleen de actieve zichtbaar).
   ============================================================ */
.dlx-wheel__intro {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
}
.dlx-wheel__scroller { position: relative; }
.dlx-wheel__dial { display: none; }
.dlx-wheel__dots { display: none; }

/* meta-chips (gedeeld) */
.dlx-rail__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.2rem; }
.dlx-rail__meta span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0.32em 0.7em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

/* ---- detail-kaart (fallback-catalogus) ---- */
.dlx-wheel__panels { display: grid; gap: 1.4rem; }
.dlx-detail {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.6rem;
  align-items: center;
  padding: 1.7rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--glass-tint);
}
.dlx-detail__cover { perspective: 900px; }
.dlx-detail .guidebook { width: 140px; }
.dlx-detail .guidebook__cover { padding: 0.95rem 1.05rem; border-radius: 14px; }
.dlx-detail .guidebook__cover::before { width: 5px; }
.dlx-detail .guidebook__brand { font-size: 0.6rem; gap: 0.3rem; }
.dlx-detail .guidebook__brand i { width: 4px; height: 4px; }
.dlx-detail .guidebook__eyebrow { font-size: 0.46rem; letter-spacing: 0.1em; }
.dlx-detail .guidebook__title { font-size: 1.16rem; }
.dlx-detail .guidebook__sub { font-size: 0.64rem; margin-top: 0.26rem; }
.dlx-detail .guidebook__foot { font-size: 0.5rem; margin-top: 0.8rem; padding-top: 0.6rem; }
.dlx-detail .guidebook__mark { font-size: clamp(3rem, 6vw, 4.6rem); }
.dlx-detail__body { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.dlx-detail__no { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-soft); }
.dlx-detail__no b { color: var(--accent-strong, #1f7fe0); }
[data-theme="dark"] .dlx-detail__no b { color: var(--accent); }
.dlx-detail__body h3 { font-size: 1.4rem; }
.dlx-detail__body > p { font-size: var(--fs-small); color: var(--ink-soft); }
.dlx-detail__list { list-style: none; margin: 0.3rem 0; padding: 0; display: grid; gap: 0.5rem; }
.dlx-detail__list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.45;
}
.dlx-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}
/* light mode: lichtcyaan vinkjes vallen weg op wit → de diepe merk-blauw gebruiken */
[data-theme="light"] .dlx-detail__list li::before { background: var(--grad-text); }
.dlx-detail__body .btn { margin-top: 0.6rem; }
@media (max-width: 560px) {
  .dlx-detail { grid-template-columns: 1fr; justify-items: start; gap: 1.1rem; }
}

/* ---- WHEEL-MODE (desktop + GSAP) ---- */
.dlx-wheel-sec.is-wheel .dlx-wheel__stage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* centreer wanneer er ruimte is (minder lege onderkant op hoge schermen), maar
     val terug op bovenkant zodra de inhoud niet past, zodat de titel nooit
     achter de menubalk wegvalt */
  justify-content: safe center;
  gap: clamp(0.5rem, 1.4vh, 1.3rem);
  padding-top: clamp(5.5rem, 11vh, 7.5rem);
  padding-bottom: clamp(1rem, 3vh, 2rem);
  overflow: hidden;
}
/* sectie-bodem = één --section-pad, gelijk aan alle andere secties (de sectie
   eronder krijgt via de globale regel pt:0, dus deze bodem levert de hele afstand) */
.dlx-wheel-sec.is-wheel { padding-bottom: var(--section-pad); }
/* in de draaitafel-modus zit de titel/subtitel mee in de gepinde stage en blijft
   dus zichtbaar terwijl je door de gidsen scrolt. Links uitgelijnd (lijnt met het
   detailpaneel eronder), met extra ruimte tot de draaitafel. */
.dlx-wheel-sec.is-wheel .dlx-wheel__intro {
  margin-bottom: clamp(2.4rem, 5vh, 4.4rem);
  max-width: var(--maxw);
  margin-inline: auto;
  text-align: left;
}
.dlx-wheel-sec.is-wheel .dlx-wheel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 3rem);
  width: 100%;
}
.dlx-wheel-sec.is-wheel .dlx-wheel__dial { display: block; }
.dlx-wheel-sec.is-wheel .dlx-wheel__dots { display: flex; }

/* alleen het actieve detail zichtbaar; cover verhuist naar de draaitafel */
.dlx-wheel-sec.is-wheel .dlx-wheel__panels { position: relative; min-height: clamp(20rem, 48vh, 27rem); }
.dlx-wheel-sec.is-wheel .dlx-detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  grid-template-columns: none;
  gap: 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-out);
}
.dlx-wheel-sec.is-wheel .dlx-detail.is-active { opacity: 1; transform: none; pointer-events: auto; }
.dlx-wheel-sec.is-wheel .dlx-detail__cover { display: none; }
.dlx-wheel-sec.is-wheel .dlx-detail__body { gap: 0.85rem; }
.dlx-wheel-sec.is-wheel .dlx-detail__body h3 { font-size: clamp(1.7rem, 1rem + 1.8vw, 2.4rem); }
.dlx-wheel-sec.is-wheel .dlx-detail__body > p { font-size: 1.02rem; max-width: 34rem; }

/* de draaitafel zelf */
.dlx-wheel__dial {
  --R: clamp(140px, 13.5vw, 180px);
  --orbW: clamp(112px, 11vw, 142px);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: calc(var(--R) * 2 + var(--orbW) + 1.5rem);
  margin-inline: auto;
  justify-self: center;
}
.dlx-wheel__focus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--orbW) * 1.55);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--R)));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 205, 247, 0.3), transparent 66%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.dlx-wheel__ring {
  position: absolute;
  inset: 0;
  transform: rotate(var(--spin, 270deg));
}
.dlx-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbW);
  margin: calc(var(--orbW) * -0.5) 0 0 calc(var(--orbW) * -0.5);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--R))) rotate(calc(-1 * var(--a)));
  z-index: 1;
}
.dlx-orb.is-active { z-index: 5; }
.dlx-orb__cover {
  transform: rotate(calc(-1 * var(--spin, 270deg)));
  opacity: 0.4;
  scale: 0.78;
  filter: saturate(0.85);
  transition: opacity 0.45s var(--ease-out), scale 0.55s var(--ease-spring), filter 0.45s var(--ease-out);
}
.dlx-orb.is-active .dlx-orb__cover { opacity: 1; scale: 1.34; filter: none; }
.dlx-orb .guidebook { width: 100%; }
.dlx-orb .guidebook__cover { padding: 0.9rem 1rem; border-radius: 14px; }
.dlx-orb .guidebook__cover::before { width: 5px; }
.dlx-orb .guidebook__brand { font-size: 0.56rem; gap: 0.28rem; }
.dlx-orb .guidebook__brand i { width: 4px; height: 4px; }
.dlx-orb .guidebook__eyebrow { font-size: 0.44rem; letter-spacing: 0.1em; }
.dlx-orb .guidebook__title { font-size: 1.04rem; }
.dlx-orb .guidebook__sub { font-size: 0.58rem; margin-top: 0.24rem; }
.dlx-orb .guidebook__foot { font-size: 0.46rem; margin-top: 0.7rem; padding-top: 0.5rem; }
.dlx-orb .guidebook__mark { font-size: clamp(2.6rem, 5vw, 3.8rem); }

/* voortgangsstippen */
.dlx-wheel__dots { justify-content: center; gap: 0.6rem; margin-top: 1.4rem; }
.dlx-wheel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: transform 0.4s var(--ease-spring), background 0.4s, box-shadow 0.4s;
}
.dlx-wheel__dot.is-active { background: var(--accent); transform: scale(1.35); box-shadow: 0 0 10px var(--accent); }
[data-theme="light"] .dlx-wheel__dot.is-active { background: #1f7fe0; box-shadow: 0 0 10px rgba(31, 127, 224, 0.5); }

/* ---- complete package ---- */
.dlx-pack { overflow-x: clip; }
.dlx-pack__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  border-radius: var(--r-xl);
}
@media (min-width: 820px) {
  .dlx-pack__card { grid-template-columns: 1.18fr 0.82fr; }
}
.dlx-pack__copy .lead { max-width: 42rem; }
.dlx-pack__copy .btn { margin-top: 1.6rem; }
.dlx-pack__deck { display: grid; place-items: center; }

/* orbit-constellatie: 6 mini-gids-covers cirkelen langzaam om een centrale hub,
   met spaaklijnen die naar het midden lopen (= alles in 1 pakket). */
.dlx-pack__orbit {
  --R: clamp(104px, 13.5vw, 144px);
  --cw: clamp(70px, 7.6vw, 92px); /* breedte van een mini-cover */
  --odur: 52s;
  position: relative;
  width: calc(var(--R) * 2 + var(--cw) * 1.35);
  aspect-ratio: 1;
  margin-inline: auto;
}
.dlx-orbit__ring {
  position: absolute;
  inset: 0;
  animation: dlxOrbitSpin var(--odur) linear infinite;
}
.dlx-orbit__spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5px;
  height: var(--R);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(var(--a));
  background: linear-gradient(to top, rgba(116, 205, 247, 0.6), rgba(116, 205, 247, 0.04));
  border-radius: 2px;
}
.dlx-orbit__node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cw);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--R))) rotate(calc(-1 * var(--a)));
}
.dlx-orbit__chip { animation: dlxOrbitCounter var(--odur) linear infinite; }
/* mini-cover in de orbit: compact (logo + titel + watermerk), eyebrow/sub/foot verborgen */
.dlx-orbit__chip .guidebook { width: 100%; }
.dlx-orbit__chip .guidebook__cover {
  padding: 0.55rem 0.6rem;
  border-radius: 11px;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.dlx-orbit__chip .guidebook__cover::before { width: 3.5px; }
.dlx-orbit__chip .guidebook__logo { width: 14px; }
.dlx-orbit__chip .guidebook__eyebrow,
.dlx-orbit__chip .guidebook__sub,
.dlx-orbit__chip .guidebook__foot { display: none; }
.dlx-orbit__chip .guidebook__title { font-size: 0.6rem; }
.dlx-orbit__chip .guidebook__mark { font-size: 2.6rem; right: -0.1rem; }
.dlx-orbit__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: clamp(88px, 11vw, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  color: #eaf6fb;
  background: radial-gradient(circle at 50% 32%, rgba(116, 205, 247, 0.34), rgba(14, 19, 28, 0.94) 70%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 0 0 7px rgba(116, 205, 247, 0.06),
    0 22px 50px -20px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.dlx-orbit__logo { width: clamp(20px, 2.4vw, 26px); height: auto; display: block; }
.dlx-orbit__hublabel {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 0.7rem;
  line-height: 1.08;
  letter-spacing: 0.005em;
}
@keyframes dlxOrbitSpin { to { transform: rotate(360deg); } }
@keyframes dlxOrbitCounter { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dlx-orbit__ring, .dlx-orbit__chip { animation: none; }
}
@media (max-width: 819px) {
  .dlx-pack__deck { order: -1; }
}

/* team */
.team-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 680px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 920px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.team-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;
  /* alle teamfoto's zijn uitgeknipte personen (alpha-webp): de merk-gradient
     vormt de "studio-achtergrond" achter de persoon, donkere variant hier,
     lichte variant in de [data-theme="light"]-override hieronder */
  background:
    radial-gradient(130% 85% at 50% 112%, rgba(79, 147, 255, 0.5), rgba(79, 147, 255, 0) 64%),
    linear-gradient(118deg, rgba(174, 245, 253, 0.28) 0%, rgba(111, 200, 245, 0.2) 45%, rgba(79, 147, 255, 0.34) 100%),
    linear-gradient(165deg, #0d1930, #04050a);
  border: 1px solid var(--line);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
[data-theme="light"] .team-card {
  background:
    radial-gradient(130% 85% at 50% 112%, rgba(31, 127, 224, 0.28), rgba(31, 127, 224, 0) 64%),
    linear-gradient(118deg, #dff7fe 0%, #cfe9fd 45%, #b9d4ff 100%);
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}
.team-card--initials {
  display: grid;
  place-items: center;
  /* geen eigen background meer: erft de merk-gradient van .team-card zodat
     de kaart-zonder-foto meedoet met de rest van het grid */
}
.team-initials {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 680;
  letter-spacing: -0.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transform: translateY(-12%);
}
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom; /* uitgeknipte personen "staan" onderin de kaart */
}
.team-card figcaption,
.team-card .tco-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem;
  background: linear-gradient(to top, rgba(8, 10, 12, 0.86), transparent);
  color: #fff;
}
.team-card figcaption b,
.team-card .tco-cap b {
  font-size: 1.15rem;
  font-family: var(--font-display);
}
.team-card figcaption span,
.team-card .tco-role {
  display: block;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Openstaande rol in het team ---------------------------------------
   Elke teamfoto is een uitgeknipte persoon op dezelfde studio-achtergrond.
   Deze kaart is diezelfde studio zonder iemand erin: het licht staat aan en
   de contour tekent zichzelf zodra de kaart in beeld scrollt. De kaart is
   in zijn geheel een link naar de vacaturepagina.
   ------------------------------------------------------------------------ */
.team-card--open {
  display: block;
  text-decoration: none;
  color: inherit;
  /* kleuren van de contour: licht op de donkere studio */
  --tco-1: #c6faff;
  --tco-2: #6fc8f5;
  --tco-3: #4f93ff;
  --tco-fill-1: rgba(174, 245, 253, 0.44);
  --tco-fill-2: rgba(79, 147, 255, 0.06);
  --tco-beam: linear-gradient(180deg, rgba(198, 250, 255, 0.3), rgba(111, 200, 245, 0.09) 52%, rgba(79, 147, 255, 0) 84%);
}
[data-theme="light"] .team-card--open {
  --tco-1: #11a0d0;
  --tco-2: #1a8fd8;
  --tco-3: #1f7fe0;
  --tco-fill-1: rgba(31, 127, 224, 0.3);
  --tco-fill-2: rgba(31, 127, 224, 0.04);
  --tco-beam: linear-gradient(180deg, rgba(31, 127, 224, 0.26), rgba(31, 127, 224, 0.08) 52%, rgba(31, 127, 224, 0) 84%);
}

/* de lichtbundel van boven: smal bij de lamp, breed op de vloer */
.tco-beam {
  position: absolute;
  inset: 0;
  clip-path: polygon(39% -2%, 61% -2%, 91% 102%, 9% 102%);
  background: var(--tco-beam);
  opacity: 0.8;
  transition: opacity var(--dur-2) var(--ease-out);
}

.tco-fig {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.tco-s1 { stop-color: var(--tco-1); }
.tco-s2 { stop-color: var(--tco-2); }
.tco-s3 { stop-color: var(--tco-3); }
.tco-f1 { stop-color: var(--tco-fill-1); }
.tco-f2 { stop-color: var(--tco-fill-2); }

.tco-fill {
  fill: url(#tcoFill);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.tco-line {
  fill: none;
  stroke: url(#tcoStroke);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* pathLength="1", dus 1 = volledig weggetekend, 0 = volledig getekend */
.tco-line > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.tco-line-b { transition-delay: 0.15s; }
.tco-line-a { transition-delay: 0.7s; }
/* alleen verbergen zolang de reveal nog niet gespeeld heeft; staat motion uit,
   dan komt .is-in nooit en is de contour meteen zichtbaar */
[data-motion="on"] .team-card--open.reveal:not(.is-in) .tco-line > * {
  stroke-dashoffset: 1;
}

.team-card--open:hover .tco-fill,
.team-card--open:focus-within .tco-fill { opacity: 1; }
.team-card--open:hover .tco-beam,
.team-card--open:focus-within .tco-beam { opacity: 1; }

.tco-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.9rem);
  font-weight: 600;
  color: #fff;
}
.tco-arrow {
  display: inline-block;
  transition: transform var(--dur-1) var(--ease-out);
}
.team-card--open:hover .tco-arrow { transform: translateX(4px); }
.team-card--open:focus-visible {
  outline: 3px solid var(--tco-1);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tco-line > *,
  .tco-fill,
  .tco-beam,
  .tco-arrow { transition: none; }
}

/* smalle kaarten (2 kolommen op mobiel): het bijschrift telt hier een regel
   meer dan bij de teamleden, dus wat strakker zetten zodat de link heel blijft */
@media (max-width: 679px) {
  .team-card--open .tco-cap { padding: 1rem; }
  .tco-cta { font-size: 0.74rem; margin-top: 0.35rem; white-space: nowrap; }
  /* de pijl eraf: "Bekijk de vacatures" vult op smalle kaarten de hele regel,
     en de kaart is toch in zijn geheel klikbaar */
  .tco-arrow { display: none; }
}

/* ============================================================
   YouTube channel, "Nº 1" cinematic showcase (gratis-downloads only)
   A full redesign of the channel/video section: an award medallion, a live
   subscriber ticker, a cinematic featured "theater" player and a ranked deck
   of the other videos. Scoped to .ytx so the homepage .channel is untouched;
   it restyles the existing .channel markup + reuses the click-to-play facade.
   ============================================================ */
.ytx .channel {
  position: relative;
  overflow: hidden;
}
.ytx .channel__aura {
  position: absolute;
  inset: -22% -10% auto;
  height: 78%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 60% at 50% 0%, rgba(102, 198, 255, 0.24), transparent 70%),
    radial-gradient(38% 50% at 84% 6%, rgba(174, 245, 253, 0.16), transparent 72%),
    radial-gradient(40% 60% at 12% 14%, rgba(79, 147, 255, 0.16), transparent 72%);
  filter: blur(18px);
}
.ytx .container {
  position: relative;
  z-index: 1;
}

/* ---- Nº1 rank badge (play-zegel) ---- */
.ytx__rank {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 auto 1.6rem;
  padding: 0.5rem 1.3rem 0.5rem 0.5rem;
  border-radius: var(--r-pill);
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(174, 245, 253, 0.26);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 20px 50px -28px rgba(0, 0, 0, 0.8);
}
/* YouTube-rode play-tile: afgeronde vierkant (geen ronde disc -> geen turntable) */
.ytx__rank-seal {
  position: relative;
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.95rem;
  display: grid;
  place-items: center;
  background: linear-gradient(157deg, #ff5a5f 0%, #ec0b1a 58%, #c80019 100%);
  box-shadow: 0 9px 24px -7px rgba(236, 11, 26, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.ytx__rank-seal::after {
  content: "";
  position: absolute;
  inset: -32%;
  z-index: -1;
  border-radius: 1.2rem;
  background: radial-gradient(closest-side, rgba(236, 11, 26, 0.5), transparent 72%);
  filter: blur(9px);
}
.ytx__rank-seal svg { width: 1.3rem; height: 1.3rem; fill: #fff; margin-left: 2px; }
.ytx__rank-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
  padding-right: 0.95rem;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.ytx__rank-no sup { font-size: 0.5em; font-weight: 600; margin: 0 0.05em; color: var(--accent); }
/* Twee regels, met de <br> als enige breekpunt: "Best bekeken Ai-kanaal" /
   "van Nederland & België". Zonder nowrap koos de browser op een telefoon zijn
   eigen breekpunt en viel het af als "BEST BEKEKEN AI-" / "KANAAL VAN". */
.ytx__rank-label {
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.ytx__rank-label b { color: #fff; font-weight: 600; letter-spacing: 0.02em; }

/* ---- head ---- */
.ytx .channel__head {
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}
.ytx .channel__head h2 {
  color: #fff;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-inline: auto;
}
.ytx .channel__head h2 em {
  font-style: normal;
  background-image: var(--grad-text-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ytx .channel__head .lead {
  margin: 1.2rem auto 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.72);
}
/* live-ticker stats */
.ytx .channel__stats {
  justify-content: center;
  gap: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  margin-top: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
}
/* De rode live-stip hoorde bij het label en stond dus onder het cijfer, vlak
   voor "abonnees". Daardoor stond dat woord ingesprongen en een haartje lager
   dan "video's" en "weergaven". De stip staat nu op dezelfde regel als het
   cijfer, ervoor; het label is weer kaal en lijnt met zijn buren. */
.channel__stats .ytx__statnum,
.ytxo__node .ytx__statnum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.ytx__statnum .ytx__livedot { flex: 0 0 auto; margin-right: 0; }
.ytx__livedot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: #ff3b30;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
  animation: ytxLive 1.9s ease-out infinite;
}
@keyframes ytxLive {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* ---- cinematic featured "theater" ---- */
.ytx .channel__feature {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: clamp(18px, 1rem + 1vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(174, 245, 253, 0.22);
  box-shadow: 0 60px 110px -45px rgba(0, 0, 0, 0.85), 0 0 90px -34px rgba(102, 198, 255, 0.55);
}
.ytx .channel__feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.ytx .channel__feature:hover img {
  transform: scale(1.04);
}
.ytx .feature__grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 42%, rgba(2, 5, 10, 0.45) 100%),
    linear-gradient(180deg, rgba(2, 5, 10, 0.12) 0%, transparent 32%, rgba(2, 5, 10, 0.82) 100%);
}
.ytx .feature__play {
  width: clamp(62px, 5vw, 86px);
  height: clamp(62px, 5vw, 86px);
}
.ytx .feature__play::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(174, 245, 253, 0.55);
  animation: ytxRing 2.6s ease-out infinite;
}
@keyframes ytxRing {
  0% { transform: scale(0.85); opacity: 0.85; }
  100% { transform: scale(1.55); opacity: 0; }
}
.ytx .feature__meta {
  position: absolute;
  left: clamp(1.1rem, 0.7rem + 1.4vw, 2rem);
  right: clamp(1.1rem, 0.7rem + 1.4vw, 2rem);
  bottom: clamp(1.1rem, 0.7rem + 1.4vw, 1.8rem);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.ytx .feature__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.7rem;
  padding: 0.34rem 0.8rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #04181b;
  background: linear-gradient(120deg, #c6faff, #7fd8f5);
  box-shadow: 0 0 24px -6px rgba(126, 216, 245, 0.7);
}
.ytx .feature__badge .dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #04181b;
}
.ytx .channel__feature h3 {
  color: #fff;
  font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
  max-width: 22ch;
}
.ytx .channel__feature .vidcard__views {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

/* ---- ranked deck (the gallery becomes a vertical leaderboard) ---- */
@media (min-width: 901px) {
  .ytx .container {
    display: grid;
    grid-template-columns: 1.62fr 1fr;
    /* de orbit-stage vervangt de oude "feature deck"-rij */
    grid-template-areas:
      "head    head"
      "orbit   orbit"
      "values  values"
      "band    band";
    column-gap: clamp(1.2rem, 0.6rem + 1.6vw, 2.2rem);
    row-gap: clamp(1.8rem, 1.1rem + 2vw, 3rem);
    align-items: stretch;
  }
  .ytx .channel__head { grid-area: head; }
  .ytx .ytxo { grid-area: orbit; }
  .ytx .channel__feature {
    grid-area: feature;
    /* fill the grid cell (equal height with the deck). Without this the 16/9
       aspect-ratio drives the width past the 690px track, so the feature
       overlapped the deck by ~8px. */
    aspect-ratio: auto;
    align-self: stretch;
  }
  .ytx .channel__gallery { grid-area: deck; }
  .ytx .channel__values { grid-area: values; }
  .ytx .channel__band { grid-area: band; }

  .ytx .channel__gallery {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(0.5rem, 0.3rem + 0.5vw, 0.85rem);
    margin: 0;
    counter-reset: ytxrank 1;
  }
  .ytx .channel__gallery .vidcard {
    display: grid;
    grid-template-columns: 1.5rem 40% 1fr;
    grid-template-areas:
      "rank thumb title"
      "rank thumb views";
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.2rem;
    padding: 0.5rem;
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }
  .ytx .channel__gallery .vidcard:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(174, 245, 253, 0.3);
    transform: translateX(4px);
  }
  .ytx .channel__gallery .vidcard::before {
    counter-increment: ytxrank;
    content: counter(ytxrank, decimal-leading-zero);
    grid-area: rank;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    opacity: 0.75;
  }
  .ytx .channel__gallery .vidcard__thumb {
    grid-area: thumb;
    align-self: stretch;
    border-radius: 12px;
  }
  .ytx .channel__gallery .vidcard__title {
    grid-area: title;
    align-self: end;
    font-size: 0.92rem;
    margin: 0;
  }
  .ytx .channel__gallery .vidcard__views {
    grid-area: views;
    align-self: start;
  }
}

/* ---- value props: slim centred row ---- */
.ytx .channel__values {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 0.6rem + 1.4vw, 2.2rem);
  margin-top: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
}
.ytx .channel__value {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.66);
}
.ytx .channel__value svg {
  color: var(--accent);
}
/* Telefoon: de drie regels vallen elk op een eigen rij. Gecentreerd per rij
   begint elke regel dan ergens anders (de langste het meest links), dus de
   vinkjes stonden schots en scheef. Nu een kolom die als geheel gecentreerd
   staat; binnenin lijnen de vinkjes links uit. */
@media (max-width: 760px) {
  .ytx .channel__values {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    gap: 0.9rem;
  }
}

/* ---- premium subscribe band ---- */
.ytx .channel__band {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 40px 100px -50px var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  .ytx__medal-disc::before,
  .ytx__livedot,
  .ytx .feature__play::after {
    animation: none;
  }
}

/* ============================================================
   YouTube lightbox, click a video -> it enlarges in a popup over the screen
   and plays on the site (no leaving for YouTube). Shared, appended to <body>.
   ============================================================ */
.ytlb-lock {
  overflow: hidden;
}
/* geen scroll-chaining/rubber-band naar de pagina erachter met de lightbox open */
.ytlb { overscroll-behavior: contain; }
.ytlb {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease-out), visibility 0.32s;
}
.ytlb.is-open {
  opacity: 1;
  visibility: visible;
}
.ytlb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 10, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.ytlb__inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 64rem);
  transform: scale(0.93);
  transition: transform 0.4s var(--ease-spring);
}
.ytlb.is-open .ytlb__inner {
  transform: scale(1);
}
.ytlb__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(14px, 1vw, 22px);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(174, 245, 253, 0.28);
  box-shadow: 0 70px 150px -40px rgba(0, 0, 0, 0.9), 0 0 110px -28px rgba(102, 198, 255, 0.55);
}
.ytlb__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ytlb__close {
  position: absolute;
  top: -3.2rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background var(--dur-1), transform var(--dur-1);
}
.ytlb__close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
}
.ytlb__close svg {
  width: 55%;
  height: 55%;
}
.ytlb__title {
  margin: 1rem 0 0;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}
@media (max-width: 560px) {
  .ytlb__close {
    top: -2.9rem;
  }
}

/* ============================================================
   Download-popup (lead-formulier), gratis-downloads only.
   Donker glas-modal als directe body-child (fixed t.o.v. viewport).
   ============================================================ */
html.dl-open { overflow: hidden; }
.dl-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  /* safe center: past de kaart, dan gecentreerd; is de kaart hoger dan het
     scherm (kleine telefoon / toetsenbord open), dan lijnt hij bovenaan uit
     zodat de modal zelf scrollbaar is en niets buiten beeld valt */
  place-items: safe center;
  padding: 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.dl-modal[hidden] { display: none; }
.dl-modal.is-open { opacity: 1; visibility: visible; }
.dl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 14, 0.64);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dl-modal__card {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: clamp(2.1rem, 1.2rem + 2.8vw, 3.4rem);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, #171d28 0%, #0c1017 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 100px -30px rgba(0, 0, 0, 0.8);
  color: #eef3f9;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.36s var(--ease-spring), opacity 0.3s ease;
}
.dl-modal.is-open .dl-modal__card { transform: none; opacity: 1; }
.dl-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #cdd8e4;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.dl-modal__close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.dl-modal__head { margin-bottom: 1.5rem; }
.dl-modal__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.34em 0.75em;
  border-radius: var(--r-pill);
  margin-bottom: 0.9rem;
}
.dl-modal__head h2 {
  font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* De kop breekt op een vaste plek (de <br> in download-modal.js), zodat het
   voorwerp bij "waar mogen we" blijft staan en de vraag op regel twee komt.
   Op de smalste telefoons is de kaart binnenin 203px en heeft "Waar mogen we
   'm" er 212 nodig; die helft zou dan alsnog omslaan en er stonden drie regels.
   De clamp zit daar al op zijn minimum, dus die halen we hier iets omlaag. */
@media (max-width: 359.98px) {
  .dl-modal__head h2 {
    font-size: 1.5rem;
  }
}
.dl-modal__sub {
  margin-top: 0.75rem;
  font-size: 1.05rem;
  color: rgba(238, 243, 249, 0.66);
}
.dl-modal__sub b { color: #eef3f9; font-weight: 620; }
.dl-modal__form { display: grid; gap: 0.9rem; }
.dl-modal__form[hidden] { display: none; }

/* ActiveCampaign-formulier in de popup (AC's eigen <style> weggelaten; opmaak hier,
   scoped op .dl-acform zodat het voor elk AC-formulier-id werkt). */
.dl-modal__forms { width: 100%; }
.dl-acform[hidden] { display: none; }
.dl-acform form { margin: 0; padding: 0; }
.dl-acform ._form_element { position: relative; margin-bottom: 0.9rem; }
.dl-acform ._form_element:has(> input[type="hidden"]) { display: none; margin: 0; }
.dl-acform ._form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 560;
  color: rgba(238, 243, 249, 0.8);
  margin-bottom: 0.35rem;
}
.dl-acform .field-required { color: var(--accent); margin-left: 1px; }
.dl-acform ._field-wrapper { position: relative; }
.dl-acform input[type="text"],
.dl-acform input[type="email"],
.dl-acform input[type="tel"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #eef3f9;
  font: inherit;
  /* min. 16px zodat iOS Safari niet inzoomt bij focus in de download-popup */
  font-size: max(1rem, 0.95rem);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.dl-acform input::placeholder { color: rgba(238, 243, 249, 0.35); }
.dl-acform input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(174, 245, 253, 0.16);
}
.dl-acform input._has_error { border-color: #f0807f; }
.dl-acform ._button-wrapper { margin-top: 0.5rem; }
.dl-acform ._submit {
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: 0;
  border-radius: var(--r-pill);
  background: #fff;
  color: #0a0e14;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 640;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
.dl-acform ._submit:hover { transform: translateY(-1px); }
.dl-acform ._submit:disabled { opacity: 0.5; cursor: not-allowed; }
.dl-acform ._error,
.dl-acform ._error-inner {
  font-size: 0.76rem;
  color: #ffb1b0;
  margin-top: 0.3rem;
  line-height: 1.3;
}
.dl-acform ._error-arrow { display: none; }
.dl-acform ._form_error { color: #ffb1b0; margin-bottom: 0.4rem; }
.dl-acform ._form-thank-you {
  text-align: center;
  font-size: 1.02rem;
  color: #eef3f9;
  padding: 0.6rem 0;
}
.dl-acform ._clear-element { clear: both; }
.dl-field { display: grid; gap: 0.35rem; }
.dl-field span {
  font-size: 0.78rem;
  font-weight: 560;
  color: rgba(238, 243, 249, 0.8);
}
.dl-field input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #eef3f9;
  font: inherit;
  /* min. 16px zodat iOS Safari niet inzoomt bij focus */
  font-size: max(1rem, 0.95rem);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.dl-field input::placeholder { color: rgba(238, 243, 249, 0.35); }
.dl-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(174, 245, 253, 0.16);
}
.dl-modal__submit { width: 100%; justify-content: center; margin-top: 0.4rem; }
.dl-modal__fine {
  font-size: 0.74rem;
  text-align: center;
  color: rgba(238, 243, 249, 0.45);
  margin-top: 0.2rem;
}
/* Geruststelling onder de knop: klein, stil, maar met een echte link naar het
   privacybeleid. Staat buiten .dl-modal__forms zodat hij bij elk formulier hoort. */
.dl-modal__privacy {
  margin-top: 1.1rem;
  max-width: 40ch;
  margin-inline: auto;
  line-height: 1.55;
  text-wrap: balance;
}
.dl-modal__privacy a {
  color: rgba(238, 243, 249, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(238, 243, 249, 0.28);
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease-out), text-decoration-color 0.2s var(--ease-out);
}
.dl-modal__privacy a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.dl-modal__done { text-align: center; padding: 0.6rem 0 0.4rem; }
.dl-modal__check {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.dl-modal__check svg { width: 1.8rem; height: 1.8rem; }
.dl-modal__done h3 { font-size: 1.4rem; }
.dl-modal__done p { margin-top: 0.4rem; color: rgba(238, 243, 249, 0.66); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
  .dl-modal, .dl-modal__card { transition: opacity 0.2s ease; }
  .dl-modal__card { transform: none; }
}

/* ============================================================
   Anim-sleep (initAnimSleep in app.js): oneindige animaties
   pauzeren zodra hun sectie buiten beeld scrollt. Puur een
   perf-maatregel, zichtbaar verandert er niets, want de
   pauze geldt alleen offscreen.
   ============================================================ */
.is-offstage,
.is-offstage::before,
.is-offstage::after,
.is-offstage *,
.is-offstage *::before,
.is-offstage *::after {
  animation-play-state: paused !important;
}

/* ============================================================
   YTXO, Orbit-ecosysteem (homepage #kanaal)
   De featured video is de hub; de andere video's en de live-stats
   cirkelen eromheen, in dezelfde visuele taal als de orbit op de
   downloadpagina. Basis (mobiel/tablet) = hub + 2-koloms kaartgrid;
   ≥901px wordt het de orbit-stage. Entrance-choreografie rijdt op
   .is-in van reveal.js; zonder JS of met motion off is alles
   gewoon zichtbaar op zijn eindpositie.
   ============================================================ */
.ytxo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-block: clamp(1.6rem, 1rem + 2vw, 2.6rem) clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}
@media (min-width: 520px) {
  .ytxo { grid-template-columns: 1fr 1fr; }
}
.ytxo__lines, .ytxo__node { display: none; }
.ytxo__hub { grid-column: 1 / -1; order: -1; position: relative; }
.ytxo__bob { display: block; height: 100%; }

/* --- hub (featured video) --- */
.ytxo__aura {
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(174, 245, 253, 0.2), transparent 65%);
  filter: blur(16px);
  animation: ytxoBreath 6s ease-in-out infinite alternate;
}
@keyframes ytxoBreath { from { opacity: 0.55; } to { opacity: 1; } }
.ytxo__screen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(174, 245, 253, 0.35);
  box-shadow:
    0 55px 110px -45px rgba(0, 0, 0, 0.95),
    0 0 90px -25px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.ytxo__screen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.ytxo__screen:hover img { transform: scale(1.04); }
.ytxo__grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2, 5, 10, 0.12), transparent 38%, rgba(2, 5, 10, 0.85)); }
/* materiaal in play.css; hier maat en plek */
.ytxo__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
}
.ytxo__play svg { width: 17px; height: 17px; fill: #fff; margin-left: 2px; }
.ytxo__play--hub { width: 68px; height: 68px; }
.ytxo__play--hub svg { width: 26px; height: 26px; margin-left: 3px; }
.ytxo__play--hub::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(174, 245, 253, 0.55);
  animation: ytxRing 2.6s ease-out infinite;
}
.ytxo__screen:hover .ytxo__play,
.ytxo__card:hover .ytxo__play { transform: translate(-50%, -50%) scale(1.08); }
.ytxo__meta {
  position: absolute;
  left: clamp(0.9rem, 0.5rem + 1vw, 1.4rem);
  right: clamp(0.9rem, 0.5rem + 1vw, 1.4rem);
  bottom: clamp(0.8rem, 0.5rem + 0.8vw, 1.2rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.ytxo__meta h3 { color: #fff; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); letter-spacing: -0.02em; margin-top: 0.5rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
/* De pil ligt midden op de thumbnail, waar het beeld licht en druk is. Een
   doorschijnende cyaanvulling met cyaan tekst viel daar weg. Nu een dekkende
   donkere pil met bijna-witte tekst: leesbaar op elke thumbnail, in het donker
   en op de telefoon. Geen backdrop-filter, dat kost per scrollframe. */
.ytxo__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #f2fdff;
  padding: 0.45em 0.85em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(174, 245, 253, 0.45);
  background: rgba(7, 12, 20, 0.92);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.9);
}
.ytxo__badge .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #aef5fd; box-shadow: 0 0 8px #aef5fd; }
.ytxo__views {
  display: block;
  margin: 0.22rem 0.15rem 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ytxo__views--hub { margin: 0; color: rgba(255, 255, 255, 0.75); white-space: nowrap; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }

/* --- satelliet-kaarten --- */
.ytxo__card {
  display: block;
  height: 100%;
  border-radius: 14px;
  padding: 0.55rem 0.55rem 0.7rem;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), transparent 60%), var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 26px 55px -28px rgba(0, 0, 0, 0.9);
  transition: transform 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.ytxo__card:hover { transform: translateY(-6px); border-color: rgba(174, 245, 253, 0.45); }
.ytxo__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; }
.ytxo__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ytxo__title {
  display: block;
  margin: 0.6rem 0.2rem 0;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

/* --- desktop: de orbit-stage --- */
@media (min-width: 901px) {
  .ytxo {
    display: block;
    width: min(100%, 1080px);
    margin-inline: auto;
    aspect-ratio: 1000 / 820;
    /* De stage is een grid-item met alleen absoluut geplaatste kinderen. Met
       de standaard stretch rekt WebKit hem op naar de rijhoogte, en die is
       zonder inhoud 0: de hele orbit klapte in Safari in elkaar (kaarten over
       elkaar, band er dwars doorheen). Met start bepaalt de aspect-ratio de
       hoogte, in elke browser 886px op 1080 breed. */
    align-self: start;
    /* voor de entree hieronder: cqw = 1% van de stagebreedte, en de hoogte is
       daar een vaste fractie van (--ytxo-ar volgt de aspect-ratio) */
    container-type: inline-size;
    --ytxo-ar: 0.82;
  }
  /* de head-statsrij verdwijnt: dezelfde cijfers leven op de buitenring */
  .ytx .channel__stats { display: none; }

  .ytxo__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ytxo__ring { fill: none; stroke: rgba(174, 245, 253, 0.14); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  .ytxo__ring--outer { stroke: rgba(174, 245, 253, 0.08); }
  /* komeet: een kort lichtsegment dat traag over de binnenring loopt */
  .ytxo__comet {
    fill: none;
    stroke: rgba(174, 245, 253, 0.55);
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-dasharray: 60 940;
    filter: drop-shadow(0 0 5px rgba(174, 245, 253, 0.6));
    animation: ytxoComet 16s linear infinite;
  }
  @keyframes ytxoComet { to { stroke-dashoffset: -1000; } }
  .ytxo__spoke {
    stroke: rgba(116, 205, 247, 0.28);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }

  .ytxo__hub {
    position: absolute;
    order: 0;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(340px, 44%, 470px);
    z-index: 3;
  }
  .ytxo__sat {
    position: absolute;
    left: var(--sx); top: var(--sy);
    transform: translate(-50%, -50%);
    width: clamp(240px, 27.6%, 300px);
    z-index: 2;
  }
  /* De satellieten staan verder van het oog dan de hub in het midden. Op 1.2x
     zijn de titel en het weergavecijfer pas echt te lezen. Alleen hier: het
     mobiele kaartgrid houdt zijn eigen maat. */
  .ytxo__sat .ytxo__card { padding: 0.66rem 0.66rem 0.85rem; border-radius: 17px; }
  .ytxo__sat .ytxo__thumb { border-radius: 11px; }
  .ytxo__sat .ytxo__title { margin: 0.72rem 0.24rem 0; font-size: 0.96rem; }
  .ytxo__sat .ytxo__views { margin: 0.26rem 0.18rem 0; font-size: 0.67rem; }
  .ytxo__sat .ytxo__play { width: 55px; height: 55px; }
  .ytxo__sat .ytxo__play svg { width: 20px; height: 20px; }
  /* subtiele idle-float zodat het stelsel "leeft" (op de binnenwrapper, zodat
     de hover-transform van de kaart en de entrance van de wrapper vrij blijven) */
  .ytxo__bob { animation: ytxoFloat 7s ease-in-out var(--bd, 0s) infinite alternate; }
  @keyframes ytxoFloat { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

  .ytxo__node {
    position: absolute;
    display: flex;
    left: var(--sx); top: var(--sy);
    transform: translate(-50%, -50%);
    align-items: baseline;
    /* Eén vloeiend anker: op >=1360px staan de pillen op 1.2x (net als de
       satellieten), daaronder krimpen ze terug naar hun oude maat zodat de
       linker- en rechterpil niet buiten het scherm vallen. */
    font-size: clamp(0.83rem, 0.312rem + 0.81vw, 1rem);
    gap: 0.6em;
    padding: 0.72em 1.32em;
    border-radius: var(--r-pill);
    border: 1px solid var(--glass-border);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), transparent 60%), var(--glass-fill-strong);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 40px -14px var(--accent-glow);
    white-space: nowrap;
    z-index: 2;
  }
  .ytxo__node b {
    font-family: var(--font-display);
    font-weight: 640;
    font-size: 1.38em;
    letter-spacing: -0.02em;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .ytxo__node span {
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* --- entrance-choreografie (alleen met actieve JS-reveals + motion on):
     de hub verschijnt, de spokes tekenen, de satellieten en stat-nodes
     vliegen vanuit het midden naar hun baan. --- */
  /* De vlucht loopt via translate, niet via left/top: die laatste twee dwingen
     elke frame een layout af van de hele stage (zeven elementen tegelijk, drie
     met backdrop-filter) en gaven gemeten layoutverschuivingen plus haperframes
     precies als de sectie in beeld komt. Een translate draait op de compositor.
     De baan is dezelfde: van het midden (50/50) naar --sx/--sy, hier als
     afstand in stagebreedtes uitgedrukt. --nx/--ny zijn --sx/--sy zonder
     procentteken (staan ernaast in de HTML), want met een percentage valt niet
     te rekenen in een translate. Kent een browser cqw niet, dan vervalt alleen
     de vlucht en komen ze op hun plek op. */
  [data-motion="on"].reveal-js .ytxo__sat,
  [data-motion="on"].reveal-js .ytxo__node {
    transition:
      translate 0.9s var(--ease-out) var(--d, 0s),
      opacity 0.6s var(--ease-out) var(--d, 0s),
      scale 0.9s var(--ease-out) var(--d, 0s);
  }
  [data-motion="on"].reveal-js .ytxo.reveal:not(.is-in) .ytxo__sat,
  [data-motion="on"].reveal-js .ytxo.reveal:not(.is-in) .ytxo__node {
    translate:
      calc((50 - var(--nx, 50)) * 1cqw)
      calc((50 - var(--ny, 50)) * var(--ytxo-ar) * 1cqw);
    scale: 0.55;
    opacity: 0;
  }
  [data-motion="on"].reveal-js .ytxo__lines { transition: opacity 0.8s var(--ease-out) 0.1s; }
  [data-motion="on"].reveal-js .ytxo.reveal:not(.is-in) .ytxo__lines { opacity: 0; }
  [data-motion="on"].reveal-js .ytxo__spoke { transition: stroke-dashoffset 0.9s var(--ease-out) 0.25s; }
  [data-motion="on"].reveal-js .ytxo.reveal:not(.is-in) .ytxo__spoke { stroke-dashoffset: 1; }
  [data-motion="on"].reveal-js .ytxo__aura,
  [data-motion="on"].reveal-js .ytxo__screen { transition: opacity 0.7s var(--ease-out), scale 0.8s var(--ease-out); }
  [data-motion="on"].reveal-js .ytxo.reveal:not(.is-in) .ytxo__aura,
  [data-motion="on"].reveal-js .ytxo.reveal:not(.is-in) .ytxo__screen { opacity: 0; scale: 0.92; }
}

/* smal desktop-tussenmaatje: stage iets hoger zodat nodes niet knellen */
@media (min-width: 901px) and (max-width: 1100px) {
  .ytxo { aspect-ratio: 1000 / 880; --ytxo-ar: 0.88; }
}

@media (prefers-reduced-motion: reduce) {
  .ytxo__aura, .ytxo__comet, .ytxo__bob, .ytxo__play--hub::after { animation: none; }
}

/* ============================================================
   DLX2, "Productlancering"-redesign van de downloadpagina.
   Hero full-height met zwevende covers, stat-band met enorme
   count-ups, sticky Cowork-showcase met 3D-scrub + lichtsweep
   (initShowcase), en de bibliotheek als horizontale shelf
   (initShelf pint op desktop; mobiel = native scroll-snap).
   ============================================================ */

/* ---- hero ---- */
/* Top-uitgelijnd (niet gecentreerd): zo begint de tekst op exact dezelfde
   hoogte als de hero's van de andere subpagina's (.subhero padding-top). */
.dlx2-hero { min-height: min(92vh, 920px); display: flex; align-items: flex-start; position: relative; }
.dlx2-hero .dlx-hero__grid { align-items: start; }
/* "De bibliotheek · 100% gratis" op één regel (de generieke eyebrow-max-width
   zou hem anders laten omwikkelen) */
.dlx2-hero .eyebrow { max-width: none; white-space: nowrap; }
.v2 .dlx2-hero__title {
  font-size: clamp(3.4rem, 1.5rem + 7.2vw, 7.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.dlx2-hero .lead { margin-top: 1.5rem; }
.dlx2-hero .dlx-hero__cta { margin-top: 2.4rem; }
/* de covers zweven traag; op de binnenste cover zodat de fan-transform van
   .dlx-deck__c onaangetast blijft */
.dlx2-hero .dlx-deck__c--front .guidebook__cover { animation: dlx2Float 7s ease-in-out infinite alternate; }
.dlx2-hero .dlx-deck__c--mid .guidebook__cover { animation: dlx2Float 8.5s ease-in-out -1.2s infinite alternate; }
.dlx2-hero .dlx-deck__c--back .guidebook__cover { animation: dlx2Float 9.5s ease-in-out -2.4s infinite alternate; }
@keyframes dlx2Float { from { transform: translateY(-6px); } to { transform: translateY(7px); } }
.dlx2-hero__cue { position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2.2rem); transform: translateX(-50%); }
.dlx2-hero__mouse { display: block; width: 20px; height: 32px; border-radius: var(--r-pill); border: 1.5px solid var(--ink-faint); position: relative; }
.dlx2-hero__mouse::after {
  content: "";
  position: absolute; top: 6px; left: 50%;
  width: 3px; height: 6px; border-radius: 2px;
  background: var(--accent-deep);
  transform: translateX(-50%);
  animation: scrollDot 1.8s var(--ease-in-out) infinite;
}

/* ---- stat-band ---- */
.dlx2-band { padding-block: clamp(3rem, 2rem + 4vw, 6rem); border-block: 1px solid var(--line); }
/* Sectie-ritme (zie base.css): "main > .section + .section" nult de top-padding
   van elke sectie die op een sectie volgt. De band is echter een compacte strip
   met kleinere eigen binnenpadding, dus de sectie erná moet zijn volle
   --section-pad terugkrijgen, anders plakt de showcase-kop direct tegen de
   cijfers aan. (Zelfde afstand als tussen de secties op de homepagina.) */
main > .dlx2-band + .section { padding-top: var(--section-pad); }
.dlx2-band__grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; text-align: center; }
@media (min-width: 720px) {
  .dlx2-band__grid { grid-template-columns: repeat(3, 1fr); }
  .dlx2-stat + .dlx2-stat { border-left: 1px solid var(--line); }
}
.dlx2-stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(3.6rem, 2rem + 6vw, 7rem);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dlx2-stat span { display: block; margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

/* ---- Cowork sticky showcase ---- */
@media (min-width: 901px) {
  .dlx2-show__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); align-items: start; }
  .dlx2-show__pin { position: sticky; top: 108px; }
  .dlx2-show__flow { display: flex; flex-direction: column; gap: clamp(1.3rem, 1.8vw, 2.2rem); padding-block: clamp(1.5rem, 4vh, 3.5rem); }
}
.dlx2-show__flow .dlx-feat {
  padding: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-2) 62%, transparent);
}
.dlx2-show__book .guidebook__cover { overflow: hidden; }
/* lichtsweep over de cover; staat zonder GSAP onzichtbaar geparkeerd */
.dlx2-sweep {
  position: absolute;
  top: -12%; bottom: -12%;
  left: 0; width: 36%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.1) 58%, transparent 100%);
  transform: translateX(-180%) skewX(-12deg);
}

/* ---- bibliotheek-shelf ---- */
/* ===== Bibliotheek: rustig statisch overzicht (featured + grid). Vervangt de
   oude zijwaartse pin-slider (dlx2-shelf/initShelf) die maar 1,5 gids tegelijk
   liet zien en je verticale scroll kaapte. ===== */
.dlx2-lib__head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }
.dlx2-lib__head h2 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); letter-spacing: -0.04em; }
.dlx2-lib__head .lead { margin: 1rem auto 0; }

/* Featured: de nieuwste gids, uitgelicht met volle context */
.libfeat {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.8rem);
  border-radius: var(--r-xl);
  margin-bottom: clamp(1.4rem, 1rem + 2vw, 2.4rem);
}
@media (min-width: 760px) {
  .libfeat { grid-template-columns: minmax(200px, 290px) 1fr; }
}
.libfeat__cover .guidebook { width: min(62vw, 250px); margin-inline: auto; }
.libfeat__body .eyebrow--plain { color: var(--accent-deep); }
.libfeat__body h3 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -0.02em; margin-top: 0.5rem; }
.libfeat__lead { margin-top: 0.7rem; color: var(--ink-soft); max-width: 48ch; }
.libfeat__list { margin-top: 1.1rem; display: grid; gap: 0.55rem; }
.libfeat__list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.libfeat__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--grad-accent);
}
.libfeat__foot { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }
.libfeat__meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* Grid: de overige zes gidsen als boekenplank, alles in beeld, geen scroll */
.dlx2-lib__grid {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.9rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .dlx2-lib__grid { grid-template-columns: repeat(3, 1fr); } }

.libcard {
  display: flex;
  flex-direction: column;
  padding: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.libcard__cover .guidebook { width: 100%; }
/* watermerk temmen op de kleinere grid-covers */
.libcard .guidebook__mark { font-size: clamp(3.4rem, 2rem + 11vw, 6.4rem); }
.libcard__desc {
  margin-top: 1.05rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.libcard__cta {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  white-space: nowrap;
  font-weight: 600; color: var(--accent-deep);
}
.libcard__cta .arrow { transition: transform 0.3s var(--ease-out); }
.libcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (hover: hover) {
  .libcard { will-change: transform; }
  .libcard:hover { transform: translateY(-7px); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.7); }
  .libcard:hover .libcard__cta .arrow { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .libcard { transition: none; }
  .libcard:hover { transform: none; }
}

/* ---- pack: grotere kop, zelfde inhoud ---- */
.dlx-pack__copy h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); letter-spacing: -0.035em; }

@media (prefers-reduced-motion: reduce) {
  .dlx2-hero .guidebook__cover, .dlx2-hero__mouse::after { animation: none; }
}

/* ===== Triflow (over-ons): drie stations op één geanimeerde route =====
   Vervangt de drie losse triad-kaarten. De iconen zitten in ronde nodes op
   een gradient-lijn; bij reveal (.is-in via reveal.js) tekenen de segmenten
   zich links-naar-rechts in en poppen de nodes op volgorde binnen. Een
   lichtpuls (comet) reist blijvend over de lijn, .triflow staat in de
   initAnimSleep-lijst (app.js) zodat dat buiten beeld pauzeert. Zonder JS of
   met reduced-motion staat alles er gewoon statisch. */
.triflow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.triflow__step { position: relative; }
.triflow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(90% 90% at 50% 20%, var(--glass-tint), transparent 70%),
    linear-gradient(165deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px -18px rgba(79, 147, 255, 0.55);
}
.triflow__node svg { width: 42px; height: 42px; overflow: visible; }
.triflow__num {
  position: absolute;
  top: -7px;
  right: -12px;
  padding: 0.14rem 0.44rem;
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #06121f;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.triflow__body h3 { font-size: var(--fs-h3); }
.triflow__body p { color: var(--ink-soft); font-size: var(--fs-small); max-width: 34ch; }
.triflow__step:hover .triflow__node { border-color: var(--accent); }

/* --- mobiel: verticale route, node links en tekst rechts --- */
.triflow__step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.15rem;
  align-items: start;
}
.triflow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 76px;
  bottom: calc(-2rem - 4px);
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, #aef5fd, #4f93ff);
  opacity: 0.55;
  transform-origin: center top;
}
.triflow__comet { display: none; }

/* --- desktop: horizontale route, drie kolommen --- */
@media (min-width: 780px) {
  .triflow {
    --triflow-gap: clamp(1.2rem, 1rem + 2vw, 3rem);
    grid-template-columns: repeat(3, 1fr);
    gap: var(--triflow-gap);
    container-type: inline-size; /* maat voor de cqw in triflowComet */
  }
  .triflow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
  }
  .triflow__step:not(:last-child)::after { content: none; }
  .triflow__body p { margin-inline: auto; }
  /* lijnsegment van de vorige node naar deze node (over de kolomgrens heen):
     vorige node-center ligt op -(kolombreedte/2 + gap) = -50% - gap */
  .triflow__step + .triflow__step::before {
    content: "";
    position: absolute;
    top: 35px;
    left: calc(-50% - var(--triflow-gap, 2rem) + 44px);
    width: calc(100% + var(--triflow-gap, 2rem) - 88px);
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, #aef5fd, #4f93ff);
    opacity: 0.55;
    transform-origin: left center;
  }
  /* lichtpuls die over de route reist */
  [data-motion="on"] .triflow__comet {
    display: block;
    position: absolute;
    z-index: 2;
    top: 32px;
    left: 16.7%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9fbff;
    box-shadow: 0 0 12px 3px rgba(174, 245, 253, 0.75), 0 0 26px 8px rgba(79, 147, 255, 0.4);
    animation: triflowComet 5.2s var(--ease-in-out) 1.6s infinite;
    opacity: 0;
  }
}
/* De puls reist via translate (compositor), niet via left (elke frame een
   layout). cqw = 1% van de breedte van .triflow, dus 66.6cqw is de afstand van
   station 1 (16,7%) naar station 3 (83,3%) en 33.3cqw die naar station 2. */
@keyframes triflowComet {
  0% { translate: 0; opacity: 0; }
  8% { opacity: 1; }
  46% { translate: 66.6cqw; opacity: 1; }
  54% { translate: 66.6cqw; opacity: 0; }
  60% { translate: 0; opacity: 0; }
  68% { translate: 0; opacity: 1; }
  92% { translate: 33.3cqw; opacity: 1; }
  100% { translate: 33.3cqw; opacity: 0; }
}

/* --- entrance-choreografie: alleen met JS + motion aan (zelfde scoping als
   de ytxo-sectie); de route tekent zich in en de stations poppen op --- */
[data-motion="on"].reveal-js .triflow.reveal:not(.is-in) .triflow__node { opacity: 0; transform: scale(0.55); }
[data-motion="on"].reveal-js .triflow.reveal:not(.is-in) .triflow__body { opacity: 0; transform: translateY(14px); }
[data-motion="on"].reveal-js .triflow.reveal:not(.is-in) .triflow__step::before { transform: scaleX(0); }
[data-motion="on"].reveal-js .triflow.reveal:not(.is-in) .triflow__step::after { transform: scaleY(0); }
[data-motion="on"].reveal-js .triflow .triflow__node {
  transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
[data-motion="on"].reveal-js .triflow .triflow__body { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
[data-motion="on"].reveal-js .triflow .triflow__step::before,
[data-motion="on"].reveal-js .triflow .triflow__step::after { transition: transform 0.55s var(--ease-in-out); }
/* nth-of-type: de stappen zijn de <article>s (vóór ze staan nog een defs-svg
   en de comet-span, dus nth-child zou verkeerd tellen) */
[data-motion="on"].reveal-js .triflow .triflow__step:nth-of-type(1) .triflow__body { transition-delay: 0.18s; }
[data-motion="on"].reveal-js .triflow .triflow__step:nth-of-type(2) .triflow__node { transition-delay: 0.28s; }
[data-motion="on"].reveal-js .triflow .triflow__step:nth-of-type(2) .triflow__body { transition-delay: 0.46s; }
[data-motion="on"].reveal-js .triflow .triflow__step:nth-of-type(3) .triflow__node { transition-delay: 0.56s; }
[data-motion="on"].reveal-js .triflow .triflow__step:nth-of-type(3) .triflow__body { transition-delay: 0.74s; }
[data-motion="on"].reveal-js .triflow .triflow__step:nth-of-type(2)::before { transition-delay: 0.34s; }
[data-motion="on"].reveal-js .triflow .triflow__step:nth-of-type(3)::before { transition-delay: 0.62s; }

@media (prefers-reduced-motion: reduce) {
  .triflow__comet { animation: none; display: none; }
}

/* ============================================================
   Over ons, verhaal-tijdlijn (.story) + missie-manifest (.manifest)
   De tijdlijn zet het oprichtersverhaal om in vier gedateerde
   hoofdstukken op één lijn (zelfde vormtaal als de spine/triflow).
   Afgesloten jaren staan ghost; "nu" krijgt de merk-gradient en
   eindigt in tellers, het verhaal loopt letterlijk uit op bewijs.
   ============================================================ */
.story {
  --story-col: clamp(84px, 8vw + 44px, 156px);
  --story-gap: clamp(1.8rem, 1.2rem + 2.5vw, 3.4rem);
  list-style: none;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) auto 0;
  max-width: 920px;
  padding: 0;
}
.story__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--story-col) 1fr;
  column-gap: var(--story-gap);
  padding-block: clamp(1.7rem, 1.1rem + 2vw, 2.9rem);
}
.story__item:first-child { padding-top: 0.4rem; }
/* lijnsegment per hoofdstuk: tekent zich in zodra het hoofdstuk in beeld komt */
.story__item::before {
  content: "";
  position: absolute;
  left: calc(var(--story-col) + var(--story-gap) / 2);
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(174, 245, 253, 0.5), rgba(79, 147, 255, 0.26));
}
.story__item:first-child::before {
  background: linear-gradient(180deg, transparent, rgba(174, 245, 253, 0.5));
}
.story__item:last-child::before {
  background: linear-gradient(180deg, rgba(174, 245, 253, 0.5), transparent);
}
[data-theme="light"] .story__item::before {
  background: linear-gradient(180deg, rgba(42, 167, 214, 0.45), rgba(31, 127, 224, 0.25));
}
[data-theme="light"] .story__item:first-child::before {
  background: linear-gradient(180deg, transparent, rgba(42, 167, 214, 0.45));
}
[data-theme="light"] .story__item:last-child::before {
  background: linear-gradient(180deg, rgba(42, 167, 214, 0.45), transparent);
}
[data-motion="on"].reveal-js .story__item::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--ease-out) 0.15s;
}
[data-motion="on"].reveal-js .story__item.is-in::before { transform: scaleY(1); }
/* jaartal: ghost voor afgesloten hoofdstukken */
.story__when {
  position: relative;
  display: block;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--ink-faint);
}
.story__when small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
/* node op de lijn, uitgelijnd met het jaartal */
.story__when::after {
  content: "";
  position: absolute;
  left: calc(100% + var(--story-gap) / 2);
  top: 0.5em;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--accent-glow);
}
.story__item--now .story__when {
  color: transparent;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.story__item--now .story__when::after {
  box-shadow: 0 0 0 4px var(--bg), 0 0 22px var(--accent-glow);
}
.story__body h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0.65rem;
}
.story__body p {
  color: var(--ink-soft);
  max-width: 54ch;
}
/* tellers waarin het laatste hoofdstuk eindigt */
.story__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 1rem + 2.2vw, 3rem);
  margin-top: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}
.story__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.story__stat > span {
  display: block;
  margin-top: 0.45rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  max-width: 16ch;
}
@media (max-width: 719px) {
  .story__item {
    grid-template-columns: 1fr;
    row-gap: 0.7rem;
    padding-left: 2.1rem;
  }
  .story__item::before { left: 7px; margin-left: 0; }
  .story__when { text-align: left; }
  .story__when::after {
    left: calc(-2.1rem + 8px);
    margin-left: -6px;
    top: 0.45em;
  }
  .story__when small { display: inline-block; margin: 0 0.5rem 0 0; vertical-align: 0.35em; }
}

/* ---------- Missie-manifest: tegen/voor, regel voor regel gespiegeld ---------- */
.manifest {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  margin-top: clamp(2.2rem, 1.5rem + 2.5vw, 3.6rem);
}
@media (min-width: 780px) {
  .manifest { grid-template-columns: 1fr 1fr; }
}
.manifest__panel {
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  border-radius: var(--r-lg);
}
/* het afgewezen rijtje: gestreepte rand, geen glas, het hoort er net niet bij */
.manifest__panel--tegen {
  border: 1px dashed var(--line-strong);
}
.manifest__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.manifest__panel--tegen .manifest__label { color: var(--ink-faint); }
.manifest__panel--voor .manifest__label { color: var(--accent-deep); }
.manifest__panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  margin: 0;
  padding: 0;
}
.manifest__panel li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: var(--fs-body);
}
.manifest__panel li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.18em;
}
.manifest__panel--tegen li {
  color: var(--ink-faint);
}
.manifest__panel--tegen s {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
}
.manifest__panel--voor li {
  color: var(--ink);
  font-weight: 500;
}
/* de conclusie */
.manifest__quote {
  margin: clamp(2.6rem, 2rem + 3vw, 4.6rem) auto 0;
  max-width: 36ch;
  text-align: center;
}
.manifest__quote p { text-wrap: balance; }
.manifest__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 2.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.14;
  color: var(--ink);
}
.manifest__quote em {
  font-style: normal;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.manifest__quote cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
/* vinkjes: de vaste merk-gradient is te bleek op licht, daar solide accent */
[data-theme="light"] .manifest__panel--voor li svg path {
  stroke: var(--accent-deep);
}

/* ---------- Hero social proof: avatar-rij + sterren + label onder de CTA's.
   Homepage-hero is gecentreerd, de split-hero (training) links, volgt
   dezelfde uitlijning als .hero__actions erboven. ---------- */
.hero-proof {
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.1rem;
}
.subhero--split .hero-proof {
  justify-content: flex-start;
}
.hero-proof__avatars {
  display: flex;
  flex: 0 0 auto;
}
.hero-proof__avatars img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 2px var(--bg);
}
.hero-proof__avatars img + img {
  margin-left: -11px;
}
.hero-proof__stars {
  color: var(--accent-deep);
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  white-space: nowrap;
}
/* entrance: zodra de proof-rij als laatste hero-element onthult, poppen de
   avatars één voor één binnen; de sterren tikken er direct achteraan in.
   Gated op reveal-js + .reveal zodat de rij zonder JS gewoon zichtbaar is. */
[data-motion="on"].reveal-js .hero-proof.reveal .hero-proof__avatars img {
  opacity: 0;
  transform: scale(0.3) translateY(10px);
}
[data-motion="on"].reveal-js .hero-proof.reveal .hero-proof__stars {
  opacity: 0;
  transform: scale(0.8);
}
[data-motion="on"].reveal-js .hero-proof.reveal.is-in .hero-proof__avatars img {
  animation: proofPop 0.55s cubic-bezier(0.34, 1.5, 0.5, 1) forwards;
}
[data-motion="on"].reveal-js .hero-proof.reveal.is-in .hero-proof__avatars img:nth-child(1) { animation-delay: calc(var(--reveal-delay, 0s) + 0.2s); }
[data-motion="on"].reveal-js .hero-proof.reveal.is-in .hero-proof__avatars img:nth-child(2) { animation-delay: calc(var(--reveal-delay, 0s) + 0.31s); }
[data-motion="on"].reveal-js .hero-proof.reveal.is-in .hero-proof__avatars img:nth-child(3) { animation-delay: calc(var(--reveal-delay, 0s) + 0.42s); }
[data-motion="on"].reveal-js .hero-proof.reveal.is-in .hero-proof__avatars img:nth-child(4) { animation-delay: calc(var(--reveal-delay, 0s) + 0.53s); }
[data-motion="on"].reveal-js .hero-proof.reveal.is-in .hero-proof__avatars img:nth-child(5) { animation-delay: calc(var(--reveal-delay, 0s) + 0.64s); }
[data-motion="on"].reveal-js .hero-proof.reveal.is-in .hero-proof__stars {
  animation: proofPop 0.45s cubic-bezier(0.34, 1.5, 0.5, 1) forwards;
  animation-delay: calc(var(--reveal-delay, 0s) + 0.82s);
}
@keyframes proofPop {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.hero-proof__label {
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

/* ---------- Het team in de hero (homepage, sinds 3 okt 2026) ----------
   Feedback: laat eerder zien dat er mensen achter het bedrijf zitten. De
   groepsfoto stond sinds 1 okt in een founder-band tussen het manifest en
   "Het verschil" (quote + team, gekozen uit drie varianten; archief in
   tools/archief/teamkeuze/). Op 3 okt koos Mika uit drie plekken in de kop
   (het podium onder de proof-rij, naast de tekst, de opkomst; archief in
   tools/archief/teamhero-keuzeronde-2026-10-03.tar.gz) voor "de opkomst":
   de hero plakt één schermhoogte, de boodschap wijkt en het team komt uit
   de vloer omhoog, met "Acht mensen, één team." erboven (blok "Hero in twee
   aktes" verderop). De founder-band is daarmee weg; de stage staat nu
   onderin de hero (.hero__team).
   Maat: --h is Mika, --k per persoon. De k's zijn zo gekozen dat de
   bovenkant van het hoofd naar buiten toe gelijk afloopt (80/72,5/66/60%
   van Mika), gemeten op de alpha van elke foto; Els staat kleiner in haar
   kader en krijgt een scale van 1.16. Elk figuur schuift met 30% van zijn
   breedte onder zijn buur richting het midden, dus de gezichten blijven vrij. */
.hero--team {
  /* zo groot als de hoogte toelaat (44svh: het team vult de onderste helft
     van de tweede akte), nooit breder dan de container (de rij is 3,48 x --h).
     Staat op de hero, niet op de stage: de tekst van de tweede akte hangt
     aan deze hoogte (zie .hero__akte in het blok "Hero in twee aktes"). */
  --h: clamp(200px, min(12vw + 150px, (100vw - 2 * var(--gutter)) / 3.48, 44svh), 380px);
}
.tband__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: max-content;
  /* centreren op de kolom, ook als de stage breder is (telefoon) */
  margin-left: 50%;
  translate: -50% 0;
  /* onderkant strak op de sectierand: wat de foto's naar beneden schuiven
     (zie --gap) valt hier weg; boven en opzij blijft ruimte voor de
     naamkaartjes */
  clip-path: inset(-50% -40% 0 -40%);
}
.tband__halo {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 130%; height: 70%;
  background: radial-gradient(
    50% 70% at 50% 92%,
    var(--accent-glow) 0%,
    color-mix(in srgb, var(--accent-glow) 55%, transparent) 30%,
    color-mix(in srgb, var(--accent-glow) 18%, transparent) 55%,
    transparent 78%
  );
  opacity: calc(var(--ho, 1) * 0.75); /* --ho: de opkomst (tband.js) */
  pointer-events: none;
}
.tband__p {
  position: relative;
  flex: none;
  margin: 0;
  width: calc(var(--h) * var(--k) * 0.774);
}
/* De laagvolgorde zit op de foto, niet op de figure: een figure met z-index
   is een eigen stapel, en dan viel een naamkaartje achter de foto van de buurman. */
.tband__p > img,
.tband__open > svg { position: relative; z-index: var(--zf, var(--z)); }
.tband__p--l { margin-right: calc(var(--h) * var(--k) * -0.3); }
.tband__p--r { margin-left: calc(var(--h) * var(--k) * -0.3); }
.tband__p img { display: block; width: 100%; height: auto; filter: brightness(var(--b, 1)); }
[data-theme="light"] .tband__p img { filter: none; }
/* Onderkant van iedereen op één lijn met de sectierand. George, Jura en Els
   hebben onderaan 3-4 doorzichtige pixelrijen en Mika eindigde een halve
   pixel te hoog: daar scheen de gloed als een blauw streepje doorheen.
   --dy (inline, per persoon) schuift de foto omlaag en de clip-path van de
   stage knipt het overschot weg. Youri staat al goed. */
.tband__p img { translate: var(--fx, 0px) var(--dy, 0); scale: var(--s, 1); transform-origin: 50% 100%; }
.tband__p--els img { scale: calc(1.16 * var(--s, 1)); translate: var(--fx, 0px) 0.9%; }
/* De opkomst (tband.js): de scroll zet per persoon --pr (hoe ver omhoog)
   en --po (dekking); de clip-path van de stage knipt onder de voeten, dus
   ze komen echt uit de vloer. Alleen de foto beweegt, nooit de figure: een
   figure met opacity of transform wordt een eigen stapel en dan telt de
   HTML-volgorde (Jura stond vóór Mika). transform staat los van de
   translate/scale van "naar voren". Zonder JS of met reduced motion staan
   ze gewoon (terugval in het blok "Hero in twee aktes"). */
[data-motion="on"] .hero--team .tband__p > :is(img, svg) {
  opacity: var(--po, 0);
  transform: translateY(calc((1 - var(--pr, 0)) * 58%));
}
[data-motion="on"] .hero--team .tband__open > span {
  opacity: var(--po, 0);
  transform: translateY(calc((1 - var(--pr, 0)) * 120px));
}
.tband__p figcaption {
  position: absolute; left: 50%; top: -0.4rem; translate: -50% -100%;
  white-space: nowrap; text-align: center;
  padding: 0.45rem 0.75rem; border-radius: 12px;
  background: var(--glass-fill-strong); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 0.8rem; line-height: 1.25; color: var(--ink-soft);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s, transform 0.35s var(--ease-out);
  pointer-events: none;
  z-index: 20;
}
.tband__p figcaption b { display: block; color: var(--ink); font-weight: 600; }
/* Els is 1.16x opgeschaald vanaf haar voeten, dus haar hoofd steekt 16% van
   haar hoogte boven haar eigen box uit; haar naamkaartje schuift evenveel mee */
.tband__p--els figcaption { top: calc(-0.4rem - var(--h) * var(--k) * 0.16); }
.tband__p:hover figcaption { opacity: 1; transform: none; }
.tband__p:hover img { filter: brightness(1); }
/* de lege plek rechts: een contour voor wie er nog bij komt */
.tband__open {
  display: grid; place-items: end center;
  aspect-ratio: 800 / 1034;
  text-decoration: none; color: var(--ink);
}
.tband__open svg { width: 100%; height: auto; overflow: visible; }
.tband__open path {
  fill: color-mix(in srgb, var(--accent) 6%, transparent);
  stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
  opacity: 0.75; transition: opacity 0.3s;
}
[data-theme="light"] .tband__open path { stroke: #1f7fe0; fill: rgba(31, 127, 224, 0.05); }
/* "Jij?" op de buik: verticaal het midden van de romp (y=534..1034 van 1034,
   dus 75,8%), wat samenvalt met de hoogte van Quinns ellebogen ernaast.
   Horizontaal exact op de as van het silhouet (x=400 van 800). */
.tband__open span {
  position: absolute; left: 50%; top: 75.8%; translate: -50% -50%; z-index: var(--z);
  font-size: 0.82rem; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap;
}
.tband__open:hover path { opacity: 1; stroke-dasharray: none; }

/* ---------- Teamband: naar voren (sinds 1 okt 2026, tband.js) ----------
   Wie je aanwijst (muis, tik, Tab) groeit naar Mika's maat en komt
   bovenop; Mika stapt terug naar 0.8, de rest naar 0.95 en wordt
   donkerder. tband.js zet per foto --s (schaal vanaf de voeten), --fx
   (opzij: de rij legt zich opnieuw uit), --cy (naamkaartje stijgt mee)
   en --zf (laagvolgorde vanaf de gekozen persoon). Alles via scale en
   translate op de img zelf, los van de transform van de reveal, en niet
   op de figure (zie de opmerking over stapels hierboven). */
.tband__stage {
  /* een veer met ~4% doorschot (demping 0.72), uitgerekend */
  --tb-veer: linear(0, 0.0509, 0.1709, 0.3216, 0.4767, 0.6199, 0.7425, 0.841, 0.9157, 0.9689, 1.0041, 1.0251, 1.0355, 1.0384, 1.0366, 1.032, 1.0263, 1.0203, 1.0148, 1.0101, 1.0062, 1.0033, 1.0013, 1);
}
.tband__p[tabindex] { outline: none; }
.tband__halo { translate: calc(-50% + var(--hx, 0px)) 0; }
/* "Jij?" is een link zonder naamkaartje: daar beweegt het element zelf.
   Met een translate wordt hij een eigen stapel op niveau 0, onder alle
   foto's; dat klopt, hij staat altijd het verst naar buiten. Vooraan
   krijgt hij zelf een z-index. */
.tband__open { translate: var(--fx, 0px) 0; scale: var(--s, 1); transform-origin: 50% 100%; }
.tband__open.is-focus { z-index: 20; }
.tband__open.is-focus path { opacity: 1; stroke-dasharray: none; }
/* wie niet vooraan staat, wordt donkerder (licht: valer) */
.tband__stage.has-focus .tband__p:not(.is-focus) img { filter: brightness(calc(var(--b, 1) * 0.58)) saturate(0.85); }
[data-theme="light"] .tband__stage.has-focus .tband__p:not(.is-focus) img { filter: saturate(0.3) contrast(0.7) brightness(1.14); }
.tband__stage.has-focus .tband__open:not(.is-focus) { opacity: 0.45; }
.tband__p.is-focus img { filter: brightness(1); }
/* het naamkaartje hoort bij wie vooraan staat, niet bij de foto onder de
   muis (de rechthoeken overlappen) */
.tband__stage.is-live .tband__p:hover:not(.is-focus) figcaption { opacity: 0; transform: translateY(6px); }
.tband__stage.is-live .tband__p.is-focus figcaption { opacity: 1; transform: none; }
.tband__p figcaption { translate: calc(-50% + var(--fx, 0px)) calc(-100% + var(--cy, 0px)); }
/* geen overgang op opacity/transform: die stuurt de scroll (de opkomst) */
[data-motion="on"] .tband__stage .tband__p > img {
  transition: scale 0.85s var(--tb-veer), translate 0.85s var(--tb-veer), filter 0.5s var(--ease-out);
}
[data-motion="on"] .tband__stage .tband__open {
  transition: scale 0.85s var(--tb-veer), translate 0.85s var(--tb-veer), opacity 0.5s var(--ease-out);
}
[data-motion="on"] .tband__halo { transition: translate 0.9s var(--ease-out); }
[data-motion="on"] .tband__p figcaption {
  transition: opacity 0.25s, transform 0.35s var(--ease-out), translate 0.85s var(--tb-veer);
}
/* ---------- Hero in twee aktes: de boodschap, dan het team (sinds 3 okt 2026) ----------
   .hero-track is twee schermhoogtes; de hero plakt (sticky) en tband.js
   vertaalt de scroll over die eerste schermhoogte naar --hp (0..1). Daarmee
   wijkt .hero__inner (lux.js slaat zijn exit-parallax hier over), komt het
   team op (--pr/--po per persoon, Mika eerst) en verschijnt de tweede tekst
   bovenin (--akte). Daarna laat de hero los en volgt de logoband. */
.hero-track { position: relative; height: 200svh; }
.hero--team { position: sticky; top: 0; height: 100svh; min-height: 0; }
.hero--team .hero__inner {
  translate: 0 calc(var(--hp, 0) * -9svh);
  opacity: var(--tekst, 1);
}
/* vanaf halverwege het vervagen (tband.js zet .is-tekst-weg) zijn de
   knoppen niet meer aanwijsbaar: de muis-merklijn tekende anders een
   lijn om een onzichtbare knop (Mika, 3 okt 2026) */
.hero--team.is-tekst-weg .hero__inner { pointer-events: none; }
/* en andersom: zolang de boodschap er staat is het team (dekking 0, maar
   wel aanwijsbaar) niet te raken. Op de telefoon ligt het onzichtbare team
   over de knoppen onderin de hero: een tik op "Doe de keuzehulp" raakte
   Mika's foto, de link ging niet open en zijn naamkaartje wel (Mika, 3 okt 2026) */
[data-motion="on"] .hero--team:not(.is-tekst-weg) .hero__team { pointer-events: none; }
/* de scroll-cue gaat uit zodra de akte begint. De lux-regel die hem laat
   binnenkomen weegt zwaarder, vandaar de tweede selector; en zijn overgang
   van 0,9s zou anders achter de scroll aanlopen */
.hero--team .hero__scroll,
.lux-on[data-motion="on"] .lux-hero.is-enter.hero--team .hero__scroll {
  opacity: calc(1 - var(--hp, 0) * 4);
  /* lux geeft hem 0,9s en zijn plek in de cascade (--ld) als vertraging;
     bij het scrollen moet hij direct reageren */
  transition-duration: 0.35s;
  transition-delay: 0s;
  /* de failsafe-animatie van lux (opacity 1, forwards) zou na 9s de
     berekende dekking overschrijven */
  animation: none;
}
/* De regel staat in het midden van de ruimte tussen de menubalk en de
   hoofden van het team (--h = Mika's hoogte, de stage staat op de onderrand).
   Eerst stond hij vast aan de bovenkant: op een breed scherm gaapte er dan
   een gat van 500px tussen "Leer het hele team kennen" en de hoofden, je las
   en moest dan helemaal naar beneden kijken (Mika, 3 okt 2026; drie andere
   composities bekeken en afgewezen, archief in
   tools/archief/akte-keuzeronde-2026-10-03.tar.gz; vlak boven de hoofden
   was dan weer te laag). Het blok beslaat die hele ruimte en centreert zijn
   inhoud; is de ruimte te klein (laag scherm), dan schuift hij naar boven aan. */
.hero__akte {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: 5.5rem; bottom: calc(var(--h) + 1.5rem);
  display: grid; align-content: center; justify-items: center;
  text-align: center; pointer-events: none;
  opacity: var(--akte, 0);
  translate: 0 calc((1 - var(--akte, 0)) * 26px);
}
@supports (align-content: safe center) { .hero__akte { align-content: safe center; } }
.hero__akte.is-open { pointer-events: auto; }
.hero__akte .eyebrow { justify-content: center; }
.hero__akte h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.3rem);
  font-weight: 640; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink); max-width: 20ch; margin: 0.7rem auto 0;
}
.hero__akte .lead { margin: 0.9rem auto 0; max-width: 42ch; line-height: 1.4; }
/* desktop: de regel breekt na de komma (Mika, 3 okt 2026); op de telefoon
   loopt hij gewoon door */
.akte-br { display: none; }
@media (min-width: 768px) {
  .hero__akte .lead { max-width: 62ch; }
  .akte-br { display: inline; }
}
/* telefoon: altijd twee regels, ook "werk." (Mika, 3 okt 2026). De letter
   schaalt mee met de breedte van het blok: de regel is ~39 em lang, twee
   regels bieden 2 x 100cqw. 4.75 houdt ~4% marge (Chromium en WebKit vallen
   pas bij 4.95 om op 360px); balance verdeelt de woorden over beide regels. */
@media (max-width: 767px) {
  .hero__akte { container-type: inline-size; }
  /* kop even groot als de andere sectiekoppen, zoals "Drie manieren om te
     beginnen." (Mika, 3 okt 2026) */
  .hero__akte h2 { font-size: var(--fs-h2); line-height: 1.04; }
  .hero__akte .lead {
    font-size: min(var(--fs-lead), 4.75cqw);
    max-width: none; text-wrap: balance;
  }
}
.hero__akte .link-arrow { margin-top: 1.2rem; }
.hero__team {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
}
/* Waar de browser scroll-gestuurde animaties kent (Chrome, Safari 26+)
   loopt de opkomst buiten de hoofdthread om: dezelfde choreografie als de
   JS-versie in tband.js, maar via animation-timeline op de compositor.
   Op de telefoon was de JS-versie traag en stroef (3 okt 2026). tband.js
   doet dan alleen nog .is-open op de akte. De maat staat in variabelen op
   de hero zodat de telefoon zijn eigen moment krijgt: daar staan de knoppen
   onderin de hero, dus het team komt pas als de boodschap echt weg is. */
@supports (animation-timeline: scroll()) {
  [data-motion="on"] .hero--team {
    --ak-tekst-tot: 38svh;   /* boodschap weg tussen 2svh en hier */
    --ak-van: 8svh;          /* Mika begint */
    --ak-stap: 5svh;         /* per plek verder van Mika later */
    --ak-duur: 42svh;        /* opkomst per persoon */
    --ak-dekking: 20svh;     /* dekking is eerder vol dan de plek */
    --ak-gloed-van: 20svh; --ak-gloed-tot: 75svh;
    --ak-akte-van: 52svh;  --ak-akte-tot: 86svh;
  }
  [data-motion="on"] .hero--team .hero__inner {
    translate: none; opacity: 1;
    animation: ak-tekst-schuif linear both, ak-tekst-weg ease-in-out both;
    animation-timeline: scroll(root), scroll(root);
    animation-range: 0 100svh, 2svh var(--ak-tekst-tot);
  }
  /* alleen een to-keyframe: het beginpunt is de waarde eronder, dus de
     entree van lux (opacity 0 -> 1) blijft gewoon werken */
  .hero--team .hero__scroll,
  .lux-on[data-motion="on"] .lux-hero.is-enter.hero--team .hero__scroll {
    opacity: 1;
    animation: ak-cue linear both;
    animation-timeline: scroll(root);
    animation-range: 0 25svh;
  }
  [data-motion="on"] .hero--team .tband__p > :is(img, svg),
  [data-motion="on"] .hero--team .tband__open > span {
    animation: ak-op ease-in-out both, ak-dekking ease-out both;
    animation-timeline: scroll(root), scroll(root);
    animation-range:
      calc(var(--ak-van) + var(--d, 0) * var(--ak-stap)) calc(var(--ak-van) + var(--d, 0) * var(--ak-stap) + var(--ak-duur)),
      calc(var(--ak-van) + var(--d, 0) * var(--ak-stap)) calc(var(--ak-van) + var(--d, 0) * var(--ak-stap) + var(--ak-dekking));
    will-change: transform, opacity;
  }
  [data-motion="on"] .hero--team .tband__open > span { animation-name: ak-op-jij, ak-dekking; }
  [data-motion="on"] .hero--team .tband__halo {
    opacity: 0.75;
    animation: ak-gloed linear both;
    animation-timeline: scroll(root);
    animation-range: var(--ak-gloed-van) var(--ak-gloed-tot);
    will-change: opacity;
  }
  [data-motion="on"] .hero--team .hero__akte {
    opacity: 1; translate: none;
    animation: ak-akte ease-in-out both;
    animation-timeline: scroll(root);
    animation-range: var(--ak-akte-van) var(--ak-akte-tot);
    will-change: opacity, translate;
  }
  @media (max-width: 819.98px) {
    [data-motion="on"] .hero--team {
      --ak-tekst-tot: 30svh;
      --ak-van: 28svh;
      --ak-gloed-van: 35svh; --ak-gloed-tot: 85svh;
      --ak-akte-van: 60svh;  --ak-akte-tot: 90svh;
    }
  }
}
@keyframes ak-tekst-schuif { from { translate: 0 0; } to { translate: 0 -9svh; } }
@keyframes ak-tekst-weg { from { opacity: 1; } to { opacity: 0; } }
@keyframes ak-cue { to { opacity: 0; } }
@keyframes ak-op { from { transform: translateY(58%); } to { transform: none; } }
@keyframes ak-op-jij { from { transform: translateY(120px); } to { transform: none; } }
@keyframes ak-dekking { from { opacity: 0; } to { opacity: 1; } }
@keyframes ak-gloed { from { opacity: 0; } to { opacity: 0.75; } }
@keyframes ak-akte { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
/* Telefoon: geen brightness-filter op de foto's. Een filter op een laag die
   per frame beweegt is op iOS duur, en het verschil in diepte (0,86..1) zie
   je op vijf mensen niet. Het dimmen bij "naar voren" (has-focus) blijft. */
@media (max-width: 819.98px) {
  .hero--team .tband__p img { filter: none; }
}
/* Terugval zonder JS of met reduced motion: geen tweede akte, alles onder
   elkaar in één gewone hero (boodschap, regel over het team, het team). */
html:not([data-motion="on"]) .hero-track { height: auto; }
html:not([data-motion="on"]) .hero--team {
  position: static; display: block; height: auto; min-height: 100svh; padding-bottom: 0;
}
html:not([data-motion="on"]) .hero--team .hero__inner { translate: none; opacity: 1; }
html:not([data-motion="on"]) .hero__akte {
  position: static; opacity: 1; translate: none; pointer-events: auto;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
html:not([data-motion="on"]) .hero__team { position: static; margin-top: 1.5rem; }

/* Telefoon: Mika met twee aan elke kant, zo groot als de breedte toelaat.
   George begint 6px rechts van de spine (die eindigt op 10px, dus op 16px)
   en Youri eindigt 6px voor de rechterrand: zichtbaar 100vw - 22px breed.
   Het zichtbare deel is 2,1826 x --h: de stage is 2,261 x --h, min de
   doorzichtige randen in de foto's (George 4% links = 0,0229h, Youri 9,6%
   rechts = 0,0555h). De stage is breder dan de container, dus margin: auto
   centreert niet (hij liep rechts uit); daarom op het schermmidden gezet en
   dan verschoven: +0,0163h zodat de mensen zelf in het midden staan en niet
   hun kaders, en +3px omdat het zichtbare vlak (16px .. 100vw-6px) rechts
   van het schermmidden ligt (5px in theorie, 3px gemeten: de container is
   niet exact op het scherm gecentreerd). */
@media (max-width: 819.98px) {
  .hero--team { --h: min(250px, calc((100vw - 22px) / 2.1826)); }
  .tband__stage {
    translate: calc(-50% + 3px + var(--h) * 0.0163) 0;
  }
  .tband__p--far { display: none; }
  /* Naamkaartje als naambordje op de borst in plaats van boven het hoofd:
     boven Mika liep het door "Leer het hele team kennen" heen, en George en
     Youri staan zo dicht op de rand dat een gecentreerd kaartje van het
     scherm viel. De buitenste twee lijnen uit naar binnen, op de rand van
     het zichtbare lijf (George 4% doorzichtig links, Youri 9,6% rechts). */
  .tband__p figcaption {
    top: auto; bottom: 0.6rem; translate: calc(-50% + var(--fx, 0px)) 0;
    padding: 0.4rem 0.65rem; font-size: 0.75rem;
  }
  .tband__p--rand-l figcaption { left: 4%; translate: var(--fx, 0px) 0; }
  .tband__p--rand-r figcaption { left: auto; right: 9.6%; translate: var(--fx, 0px) 0; }
}

/* ---------------- Eén sectie-ritme op de telefoon (alle pagina's) ----------------
   Mika, 8 september 2026: op de telefoon moet de zwarte ruimte tussen ALLE
   secties even groot zijn als die tussen de YouTube-band ("Sluit je aan bij de
   voorlopers") en "07 De klok tikt" op de homepage. Die overgang meet
   2x --section-pad, omdat .channel bovenop de sectiepadding nog een eigen
   bodem legt. De meeste andere overgangen waren maar 1x.

   Sinds 9 september 2026 geldt dit voor elke pagina, niet alleen de home.
   base.css nult de top-padding van elke sectie die op een andere sectie volgt
   (zodat de afstand op desktop overal precies 1x is); op de telefoon geven we
   die top-padding terug, waardoor bodem + top samen 2x maken. !important is
   nodig omdat vervolgsecties op sommige pagina's een inline padding-top:0
   dragen (partnership "Voor wie", vacatures, werken-bij); dat was een
   desktop-keuze en op de telefoon hoort ook daar dezelfde adempauze. */
@media (max-width: 767px) {
  main > .section + .section {
    padding-top: var(--section-pad) !important;
  }
  /* Logoband midden op een pagina (partnership, automatisering, reviews,
     over-ons, claude-training, keuzehulp, afspraak): van de tekst erboven
     tot de logo's en van de logo's tot de tekst eronder dezelfde 2x als
     tussen twee secties. De band heeft binnenin al --space-5 (48px) lucht
     en zijn scheidingslijnen zijn te zwak om als rand te lezen, dus die
     48px telt mee in de 2x. */
  main > .section + .clients {
    margin-top: calc(var(--section-pad) - var(--space-5));
  }
  main > .clients + .section {
    padding-top: calc(var(--section-pad) * 2 - var(--space-5));
  }
  /* De mobiele journey-scene (partnership, automatisering, claude-training,
     keuzehulp) heeft zelf al ~1x lucht boven en onder zijn inhoud; met de 1x
     van de buursecties komt dat vanzelf op 2x uit. Gemeten 212px, niets doen. */
  /* Homepage-correcties: deze waren al dubbel (zie de blokken hierboven), dus terug naar enkel */
  body.home #belofte,
  body.home #urgentie {
    padding-bottom: var(--section-pad);
  }
  body.home #kanaal .channel {
    padding-bottom: 0;
  }
}

/* ---------------- Telefoon: tikdoelen en microtekst ----------------
   Tekstlinks van 16-25px hoog zijn op een telefoon lastig te raken. Extra
   verticale padding maakt het raakvlak ruim 40px zonder dat de regel anders
   valt. Microlabels onder 10px worden op een telefoon onleesbaar. */
@media (max-width: 767px) {
  .link-arrow,
  .suite__route-link,
  .vac-back,
  .ep-more__all {
    padding-block: 0.45rem;
  }
  .accent-text,
  p a:not(.btn) {
    padding-block: 0.2rem;
  }
  /* De live-stip staat nu vóór het cijfer en maakt de abonnee-kolom een paar
     pixels breder; met de oude tussenruimte viel "weergaven" naar een tweede
     regel. Iets krapper en de drie cijfers staan weer naast elkaar. */
  .ytx .channel__stats { gap: clamp(1rem, 0.3rem + 2.6vw, 2.2rem); }
  .ytxo__views,
  .ytxo__badge,
  .laatste20__eyebrow,
  .laatste20__legend-accent,
  .flow__badge,
  .flow__note,
  .route__badge {
    font-size: max(0.66rem, 10.5px);
  }
}

/* ---------------- Smalle telefoons: de rangpil ----------------
   De pil draagt sinds deze ronde twee volle regels ("Best bekeken Ai-kanaal" /
   "van Nederland & België") die niet mogen breken. Onder 380px past dat alleen
   als de zegel en de "Nº1" meekrimpen; het label blijft daardoor op leesbare
   11,5px staan in plaats van dat we de tekst kleiner moeten zetten. */
@media (max-width: 380px) {
  .ytx__rank {
    gap: 0.6rem;
    padding: 0.42rem 1rem 0.42rem 0.42rem;
  }
  .ytx__rank-seal { width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; }
  .ytx__rank-seal svg { width: 1.1rem; height: 1.1rem; }
  .ytx__rank-no { font-size: 1.3rem; padding-right: 0.7rem; }
  .ytx__rank-label { letter-spacing: 0.045em; }
  /* Drie cijfers naast elkaar houden: op 296px werkruimte vielen abonnees,
     video's en weergaven anders over twee regels, met "weergaven" eenzaam
     onderaan. Iets kleiner en ze staan weer in één rij. */
  .ytx .channel__stats { gap: 0.6rem 0.6rem; }
  .ytx .channel__stats div b { font-size: 1.6rem; }
  .ytx .channel__stats div span { font-size: 0.64rem; letter-spacing: 0.08em; }
}

/* ---------------- Telefoon: rustige homepage-hero ----------------
   Op 390px stond alles aaneengesloten van menubalk tot onderrand: vier regels
   kop, de subtitel, twee knoppen onder elkaar en een avatar-rij met sterren.
   Nu twee zones in één scherm. Boven de kop en één zin, onder (waar je duim
   zit) de hoofdknop, de keuzehulp als rustige link en de proof als één regel.
   De lucht ertussen is wat overblijft, dus die groeit mee met het scherm; op
   een laag scherm houdt de subtitel zijn marge en loopt de hero gewoon door.
   De keuzehulp-knop was hier een ghost-knop met blur(8px) erachter; als
   link heeft hij geen glas meer, dus ook geen backdrop-filter die WebKit bij
   de uitloop elk frame opnieuw moet blurren. */
@media (max-width: 767px) {
  .hero {
    align-items: stretch;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    container-type: inline-size;
  }
  /* De kop volgt de kolombreedte, zo groot dat hij op vier regels blijft:
     de langste regel, "De Ai-partner voor", is 7,74em breed in SF Pro en
     8,53em in Inter (Android/Windows). Vandaar twee delers met wat marge;
     alleen WebKit kent -apple-system-body en heeft SF Pro. Op 390px: 43px.
     Groter (46-49px geprobeerd) breekt de kop in vijf regels. v2.css zet de
     maat later met .v2 .hero h1, dus .hero__inner erbij voor de specificiteit. */
  .v2 .hero .hero__inner h1 {
    font-size: min(100cqw / 8.8, 3.6rem);
  }
  @supports (font: -apple-system-body) {
    .v2 .hero .hero__inner h1 {
      font-size: min(100cqw / 8, 3.6rem);
    }
  }
  /* Op telefoon iets ingetogener: de eerste regel een tikje kleiner, de tweede
     nog een tikje kleiner, zodat de eerste de grootste blijft. */
  .v2 .hero .hero__inner h1 .reveal:first-child {
    font-size: 0.95em;
  }
  .v2 .hero .hero__inner h1 .it {
    font-size: 0.9em;
  }
  /* .v2 .hero__sub in v2.css laadt later, vandaar de extra .hero */
  .v2 .hero .hero__sub {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }
  .hero__actions {
    margin-top: auto;
    flex-direction: column;
    gap: 0.25rem;
  }
  .hero .btn--ghost,
  .hero .btn--ghost:hover {
    --bg-btn: transparent;
    --fg-btn: var(--ink-soft);
    border-color: transparent;
    box-shadow: none;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }
  /* een muis met scrollwiel zegt niets op een aanraakscherm */
  .hero__scroll {
    display: none;
  }
}

/* ---------------- Voor wie het wel/niet is (partnership + automatisering) ------
   Twee glazen kolommen naast elkaar. Links de vinkjes in het accent, rechts
   de gedempte streepjes: het verschil moet je zien voordat je leest. De
   opsommingen erven de p-maatvoering niet, dus li krijgt zijn eigen ritme. */
.fit-list {
  display: grid;
  gap: clamp(1rem, 0.8rem + 0.9vw, 1.6rem);
  align-items: start;
}
@media (min-width: 900px) {
  .fit-list {
    grid-template-columns: 1fr 1fr;
  }
}
.fit-list__col {
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.85rem + 0.6vw, 1.4rem);
}
.fit-list__col h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.7rem);
  line-height: 1.15;
}
.fit-list__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.fit-list__col li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.fit-list__col li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.02em;
  font-weight: 700;
  color: var(--accent-deep);
}
.fit-list__col--no li::before {
  content: "–";
  color: var(--ink-faint);
}

/* De voetnoot onder zo'n paar (en onder de cijferband op de homepage):
   gecentreerd, kleiner en gedempt, zodat hij de kolommen afsluit in plaats
   van als vierde alinea mee te tellen. */
.source-line {
  max-width: 80ch;
  margin: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-faint);
}