/* =========================================================================
   YKFIT, Yassine Kaddouri
   Media kit voor merksamenwerkingen. Vanilla CSS, geen build-stap.

   Palet: perkament draagt de pagina, mahonie is het accent, antiek goud het
   detail op de donkere banden. Donker blijft alleen waar 9:16-video het beeld
   draagt: de hero, de videorail en de voet. Alles daartussen staat op
   perkament, want daar wint tekst het meeste contrast.

   Elke sectie zet via een thema-klasse dezelfde vier variabelen (--bg, --fg,
   --fg-dim, --accent, --line). Componenten verwijzen alléén naar die
   variabelen, zodat één set regels op licht én donker werkt.
   ========================================================================= */

/* ── Grondtokens ─────────────────────────────────────────────────────── */
:root {
  /* Donkere gronden */
  --ink:         #1E100D;   /* diep mahonie-zwart, grond van de donkere banden */
  --ink-2:       #2B1912;   /* kaarten en velden op donker */
  --ink-deep:    #150B09;   /* telefoonscherm, achter de foto's */
  --mahogany:    #3A1A14;   /* het accent van de pagina */
  --mahogany-2:  #46231B;   /* kaart op mahonie */
  --mahogany-3:  #33201A;   /* het grote merkteken in de voet */

  /* Licht */
  --parchment:   #F4EFE4;   /* de hoofdkleur */
  --parchment-2: #EAE2D1;
  --card-light:  #FFFFFF;   /* tegels op perkament, ook achter klantlogo's */

  /* Accent */
  --gold:        #D3AC34;   /* op donker */
  --gold-bright: #E8CE79;   /* hover op donker */

  /* Tekst */
  --ivory:       #F4EEE3;
  --ivory-dim:   #C3B6A1;
  --ink-text:    #241611;
  --ink-dim:     #4A382E;

  /* Foutrood in twee sterktes: diep genoeg voor perkament, licht genoeg voor
     de donkere banden. Het formulier staat op mahonie en heeft de tweede nodig. */
  --err-on-light: #A32014;
  --err-on-dark:  #FF8A7A;

  /* Merkkleuren van de vier kanalen. Ze dragen data (welk platform, welk
     aandeel), niet decoratie, en staan daarom los van het huispalet. */
  --b-tiktok:       #000000;  --b-tiktok-on:    #FFFFFF;
  --b-instagram:    #C32AA3;  --b-instagram-on: #FFFFFF;
  --b-instagram-grad: linear-gradient(135deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4);
  --b-snapchat:     #FFFC00;  --b-snapchat-on:  #000000;
  --b-youtube:      #FF0000;  --b-youtube-on:   #FFFFFF;

  --shell:   1240px;
  --gutter:  clamp(1.25rem, 5vw, 3.5rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);

  --font-display: 'Cormorant Garamond', 'Constantia', 'Georgia', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Eén schaal voor de hele pagina. Componenten kiezen een trede, niet een
     eigen getal, zodat "alles een maat groter" één plek blijft. */
  --fs-xs:   clamp(.88rem, .86rem + .1vw, .94rem);
  --fs-sm:   clamp(.96rem, .93rem + .15vw, 1.04rem);
  --fs-base: clamp(1.08rem, 1.03rem + .25vw, 1.2rem);
  --fs-md:   clamp(1.2rem, 1.1rem + .45vw, 1.4rem);
  --fs-lg:   clamp(1.5rem, 1.3rem + 1vw, 2.05rem);
  --fs-xl:   clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-2xl:  clamp(2.5rem, 1.9rem + 3.2vw, 4.4rem);
  --fs-3xl:  clamp(3.2rem, 2.2rem + 5.4vw, 7rem);

  --radius:  4px;           /* prestige = strak, niet rond */
  --ease:    cubic-bezier(.22, .8, .22, 1);

  --crest:   url('../assets/crest-mask.png');
  /* Getegelde variant: twee halfversprongen schilden met lucht eromheen, zodat
     de herhaling als blinddruk leest en niet als behang. */
  --crest-tile: url('../assets/crest-tile.png');
}

/* ── Thema's ─────────────────────────────────────────────────────────── */
/* color-scheme laat de browser zijn eigen onderdelen — de pijl en het uitklapmenu
   van een <select>, de cursor in een veld, een schuifbalk — in het donker tekenen.
   Zonder die regel blijft dat lichte chrome op een donkere band achter. */
.theme-ink {
  color-scheme: dark;
  --bg: var(--ink);        --fg: var(--ivory);    --fg-dim: var(--ivory-dim);
  --accent: var(--gold);   --accent-strong: var(--gold-bright);
  --on-accent: var(--ink);
  --line: rgba(211, 172, 52, .30);
  --line-soft: rgba(244, 238, 227, .12);
  --card: var(--ink-2);
  --solid: var(--gold); --solid-hover: var(--gold-bright); --on-solid: var(--ink);
  --err: var(--err-on-dark);
}
.theme-mahogany {
  color-scheme: dark;
  --bg: var(--mahogany);   --fg: var(--ivory);    --fg-dim: var(--ivory-dim);
  --accent: var(--gold);   --accent-strong: var(--gold-bright);
  --on-accent: var(--ink);
  --line: rgba(211, 172, 52, .34);
  --line-soft: rgba(244, 238, 227, .14);
  --card: var(--mahogany-2);
  --solid: var(--gold); --solid-hover: var(--gold-bright); --on-solid: var(--ink);
  --err: var(--err-on-dark);
}
/* De hoofdband van de pagina. Het accent is hier mahonie en niet goud: goud
   haalt op perkament net 5:1 en las daardoor grijzig, mahonie zit rond 12:1
   en geeft een kop of een cijfer meteen gewicht. */
.theme-parchment {
  color-scheme: light;
  --bg: var(--parchment);  --fg: var(--ink-text); --fg-dim: var(--ink-dim);
  --accent: var(--mahogany); --accent-strong: var(--ink-text);
  --on-accent: var(--parchment);
  --line: rgba(58, 26, 20, .24);
  --line-soft: rgba(58, 26, 20, .13);
  --card: var(--card-light);
  --solid: var(--mahogany); --solid-hover: var(--ink); --on-solid: var(--parchment);
  --err: var(--err-on-light);
}

/* ── Reset & basis ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p  { margin: 0 0 1.1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent, var(--gold));
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .85rem 1.25rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: .75rem; top: .75rem; }

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

/* ── Bouwstenen ──────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ruimer gezet dan de rest, maar niet zó ruim dat het woord uiteenvalt: op
   .26em las het als losse letters in plaats van als label. */
.eyebrow {
  margin: 0 0 1.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Cormorant zet standaard mediëvalcijfers (7 en 0 hangen onder de regel).
   Mooi in lopende tekst, onrustig in een reeks cijfers die je moet kunnen
   vergelijken, daarom overal waar getallen dragend zijn: kapitaalcijfers,
   op vaste breedte zodat een tellend cijfer niet staat te wiebelen. */
.num,
.hero__mini dd, .ptab__val, .ptab__unit, .panel__fig dd, .totals__val,
.credit__name, .credit__year, .footer-meta, .ticker__set, .eyebrow, .rail-hint,
.share__val {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* Het wapenschild als vorm. Kleur komt van de tekstkleur van het element,
   zodat hetzelfde beeld op elke ondergrond in het palet blijft. */
.crest {
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--crest);
          mask-image: var(--crest);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Het schild als blinddruk over de hele pagina: klein, halfversprongen getegeld
   en net zichtbaar. Elke band zet zijn eigen kleur en dekking, want ivoor op
   mahonie vraagt een andere waarde dan inkt op perkament. */
.hero::before,
.section::before,
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--fg, var(--ivory));
  -webkit-mask: var(--crest-tile) 0 0 / 300px repeat;
          mask: var(--crest-tile) 0 0 / 300px repeat;
  opacity: .06;
  pointer-events: none;
}
/* Perkament draagt nu bijna de hele pagina; op .05 werd de herhaling behang.
   Lager gezet zodat het blinddruk blijft. */
.section.theme-parchment::before {
  background-color: var(--mahogany);
  opacity: .035;
}
.site-footer::before { background-color: var(--gold); opacity: .07; }

/* ── Knoppen ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn--lg    { padding: 1.05rem 2.1rem; font-size: var(--fs-base); }
.btn--sm    { padding: .6rem 1.15rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* De volle knop. Op donker is dat goud, op perkament mahonie. De naam --gold
   is historisch; de rol is "het accent, vol uitgevoerd". De kleur komt uit de
   themavariabelen en niet uit een afstammelingsregel, anders erft een donkere
   band binnen de perkamenten pagina de verkeerde knop. */
.btn--gold {
  background: var(--solid, var(--gold));
  color: var(--on-solid, var(--ink));
  border-color: var(--solid, var(--gold));
}
.btn--gold:hover {
  background: var(--solid-hover, var(--gold-bright));
  border-color: var(--solid-hover, var(--gold-bright));
  transform: translateY(-2px);
}

.btn--outline { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ── Header ──────────────────────────────────────────────────────────── */
/* De header plakt, maar hij ligt niet óver de hero: hij staat in de flow en
   houdt zijn eigen band bovenaan, op de perkamenten paginagrond. Hij draagt
   daarom altijd de perkament-tokens — bovenaan én geplakt dezelfde letters,
   zodat het woordmerk vanaf de eerste pixel leesbaar is. Alleen de manier
   waaróp hij zijn grond zet verandert bij het plakken: dan schuift er inhoud
   onderdoor en wordt hij half doorlatend met een waas erachter. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--parchment);
  border-bottom: 1px solid transparent;
  --fg: var(--ink-text);
  --fg-dim: var(--ink-dim);
  --accent: var(--mahogany);
  --solid: var(--mahogany); --solid-hover: var(--ink); --on-solid: var(--parchment);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(244, 239, 228, .92);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(58, 26, 20, .24);
}

/* Zolang het mobiele menu openstaat mag de header géén backdrop-filter hebben:
   dat maakt van de header een containing block voor position:fixed-kinderen,
   waardoor het menupaneel tot de hoogte van de header krimpt. */
.is-menu-open .site-header,
.is-menu-open .site-header.is-stuck {
  background: var(--parchment);
  backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 80px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--fg);
  transition: color .3s var(--ease);
}
.wordmark .crest { width: 24px; height: 21px; color: var(--accent); flex: none; }

.nav { display: flex; align-items: center; gap: 2.2rem; }

.nav__list { display: flex; gap: 1.8rem; }
.nav__list a {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ease);
}
.nav__list a:hover,
.nav__list a.is-current { color: var(--fg); }
.nav__list a.is-current::after { transform: scaleX(1); }

.burger { display: none; }

/* ── Hero ────────────────────────────────────────────────────────────── */
/* De hero zet zijn eigen grond: de pagina eromheen is perkament, hier draagt
   donker het 9:16-beeld en laat het de naam in vol goud oplichten. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: var(--bg);
  color: var(--fg);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: center;
  grid-template-areas:
    "copy"
    "feed"
    "mini";
}
.hero__copy { grid-area: copy; }
.hero__feed { grid-area: feed; }
.hero__mini { grid-area: mini; }

.hero__title {
  margin: 0 0 1.4rem;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.hero__title span { display: block; }
.hero__title .hero__accent { position: relative; display: inline-block; color: var(--gold); }
.hero__accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.12em;
  height: 1px;
  background: var(--gold);
  transform-origin: left center;
}

.hero__lead {
  max-width: 40ch;
  margin: 0 0 2rem;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--ivory);
}
.hero__lead strong { color: var(--gold); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 0;
}

.hero__mini {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(211, 172, 52, .26);
}
.hero__mini dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.hero__mini dd {
  margin: .25rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}

.hero__caption {
  max-width: 32ch;
  margin: 1.4rem auto 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--ivory-dim);
}

/* ── De feed die tot stilstand komt ──────────────────────────────────── */
.phone {
  position: relative;
  width: 100%;
  max-width: 310px;
  margin-inline: auto;
  padding: 9px;
  border: 1px solid rgba(211, 172, 52, .34);
  border-radius: 30px;
  background: var(--ink-2);
}
.phone--sm { max-width: 232px; }

.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 23px;
  background: var(--ink-deep);
}
.phone--sm .phone__screen { border-radius: 18px; }

.phone__screen > img { width: 100%; height: 100%; object-fit: cover; }

.feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  transform: translateY(-500%);
  will-change: transform;
}
.feed img,
.feed .slides {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.feed img { object-fit: cover; }

/* Het laatste frame van de strip: vijf foto's naast elkaar die met .9s per keer
   één plaats naar links schuiven, zodat je de rij van links naar rechts afloopt.
   Bij beperkte beweging zet het vangnet onderaan dit bestand de overgang op
   .01ms: dan wisselt hij hard en beweegt er niets. */
.slides { overflow: hidden; background: var(--ink-deep); }
.slides__track {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--slide, 0) * -100%));
  transition: transform .9s var(--ease);
}

.slides__dots { display: flex; gap: .3rem; padding-right: .25rem; }
.slides__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(244, 238, 227, .38);
  transition: background-color .3s var(--ease);
}
.slides__dots .is-on { background: var(--gold); }

.phone__hud {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 2.6rem .7rem .7rem;
  background: linear-gradient(to top, rgba(21, 11, 9, .92), transparent);
  font-size: .8rem;
  letter-spacing: .08em;
}
.phone__handle { color: var(--ivory); padding-left: .25rem; }

/* ── Ticker ──────────────────────────────────────────────────────────── */
.ticker {
  overflow: hidden;
  padding: .95rem 0;
  border-block: 1px solid rgba(211, 172, 52, .30);
  background: var(--mahogany);
  color: var(--ivory);
}
.ticker__track { display: flex; width: max-content; }
.ticker__set {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__set b { font-weight: 600; }
.ticker__set .crest { width: 15px; height: 13px; color: var(--gold); flex: none; }

/* ── Secties ─────────────────────────────────────────────────────────── */
.section {
  position: relative;
  padding-block: var(--section);
  background: var(--bg);
  color: var(--fg);
}
.section--flush { padding-bottom: calc(var(--section) * .7); }

.section > .shell { position: relative; }

.section__head { margin-bottom: clamp(2.6rem, 5vw, 4rem); }

.section__head--split {
  display: grid;
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: end;
}

.section__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.005em;
}
.section__title em { font-style: italic; color: var(--accent); }

/* Leads zijn lopende tekst, geen bijschrift: ze staan in de volle
   tekstkleur. --fg-dim blijft voor labels en metadata. */
.section__lead {
  max-width: 42ch;
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--fg);
}
.section__title + p { margin-top: 1.3rem; }

/* Ankersprongen mogen niet onder de plakkende header verdwijnen. */
section[id] { scroll-margin-top: 96px; }

/* ── Bereik: vier platforms ──────────────────────────────────────────── */
.platforms__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Flexkolom en niet block: een <button> centreert zijn inhoud verticaal, en
   zodra één tab zijn eenheid over twee regels breekt gaan de vier koppen
   uit lijn staan. */
.ptab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: clamp(1.25rem, 2.6vw, 1.8rem) clamp(1rem, 2vw, 1.5rem);
  border: 0;
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.ptab:hover { background: var(--card); }
.ptab::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
.ptab[aria-selected="true"] { background: var(--card); }
.ptab[aria-selected="true"]::before { transform: scaleX(1); }

/* Meeschalend: "Instagram" is het langste woord van de vier en moet ook in
   een vierkoloms raster op een tablet binnen zijn tegel blijven. */
.ptab__name {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  margin-bottom: .9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.86rem, 1.5vw, 1.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color .25s var(--ease);
}
.ptab[aria-selected="true"] .ptab__name { color: var(--accent); }

.ptab__val {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.ptab__unit {
  display: block;
  margin: .55rem 0 0;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--fg-dim);
}

/* ── Merkchips ───────────────────────────────────────────────────────── */
/* Elk kanaal in zijn eigen kleur, maar op een vlak in plaats van kaal: het
   geel van Snapchat en het verloop van Instagram zijn los op perkament niet
   te lezen. Eén vorm voor alle vier houdt de rij rustig. */
.plogo {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.85em;
  height: 1.85em;
  border-radius: 5px;
  background: var(--brand, var(--fg));
  color: var(--brand-on, var(--bg));
  /* Randje voor de lichte merken: het geel van Snapchat heeft op perkament
     nauwelijks eigen omtrek en zou anders uitvloeien. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.plogo svg { width: 62%; height: 62%; fill: currentColor; }

/* YouTube is een liggende badge met een driehoek erin; die verhouding is de
   herkenning, dus die chip staat iets ronder en de driehoek iets kleiner. */
.plogo--yt { border-radius: 7px; }
.plogo--yt svg { width: 52%; height: 52%; }

.plogo--sm { width: 1.35rem; height: 1.35rem; border-radius: 4px; }
.plogo--sm.plogo--yt { border-radius: 5px; }

[data-brand="TikTok"]    { --brand: var(--b-tiktok);    --brand-on: var(--b-tiktok-on); }
[data-brand="Instagram"] { --brand: var(--b-instagram-grad); --brand-on: var(--b-instagram-on); }
/* Snapchat tekent zijn spook officieel wit op geel; op chipformaat verdwijnt
   dat, dus staat het hier zwart. De vorm draagt de herkenning. */
[data-brand="Snapchat"]  { --brand: var(--b-snapchat);  --brand-on: var(--b-snapchat-on); }
[data-brand="YouTube"]   { --brand: var(--b-youtube);   --brand-on: var(--b-youtube-on); }

/* TikTok is zwart; op de donkere hero-banden zou het wegvallen, daar een
   omgekeerde chip. */
.theme-ink [data-brand="TikTok"],
.theme-mahogany [data-brand="TikTok"] { --brand: #FFFFFF; --brand-on: #000000; }

.panel {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}
.panel:focus-visible { outline-offset: 6px; }

.panel__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.2rem;
}
.panel__fig dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.panel__fig dd {
  margin: .4rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 4rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.panel__note {
  margin: 1.7rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--fg);
}

.panel__share { min-width: 0; }
.panel__share-title {
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Eén balk van 100%, in vier stukken naar rato. De stukken groeien met
   flex-grow in plaats van met een breedte, zodat de voegen ertussen de som
   niet over de 100% duwen. Elk stuk draagt de merkkleur van zijn platform,
   zodat de balk zonder legenda al af te lezen is; het gekozen platform staat
   op volle dekking, de rest zakt terug. */
.split {
  display: flex;
  gap: 2px;
  height: clamp(2.4rem, 5.5vw, 3rem);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.split__seg {
  flex: var(--pct) 1 0;
  min-width: 4px;
  background: var(--brand, var(--fg));
  opacity: .62;
  transition: flex-grow .9s var(--ease), opacity .3s var(--ease);
}
.split__seg.is-active { opacity: 1; }

.split__total {
  margin: .8rem 0 1.6rem;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
}

.shares { display: grid; gap: .1rem; }
.share {
  display: grid;
  grid-template-columns: 1.35rem 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: .65rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
/* De chips in de legenda staan altijd op volle kleur: herkenning van het merk
   mag niet afhangen van welke tab toevallig openstaat. Het actieve kanaal
   wordt aangewezen door het percentage, niet door het logo te dempen. */
.share__key { color: var(--fg); transition: color .3s var(--ease); }
.share__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--fg-dim);
  transition: color .3s var(--ease);
}
.share.is-active .share__key { font-weight: 600; }
.share.is-active .share__val { color: var(--accent); }

.totals {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.totals__item { display: flex; align-items: baseline; gap: .7rem; }
.totals__key {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.totals__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* ── Case-rij ────────────────────────────────────────────────────────── */
.rail {
  display: flex;
  gap: clamp(.9rem, 2vw, 1.4rem);
  padding-inline: var(--gutter);
  padding-block: .4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail:focus-visible { outline-offset: -2px; }

.card {
  flex: 0 0 clamp(198px, 58vw, 276px);
  align-self: start;
  scroll-snap-align: center;
}

.card__link {
  display: block;
  position: relative; /* containing block voor .sr-only: zonder dit ontsnapt
                         die aan de overflow van de rij en rekt het document
                         horizontaal op */
  text-decoration: none;
  color: inherit;
}
.card__link:focus-visible { outline-offset: 4px; }

.card__frame {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--card);
}
.card__frame img,
.card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card__link:hover .card__video,
.card__link:focus-visible .card__video { transform: scale(1.04); }

.card__badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .55rem;
  border-radius: 3px;
  background: rgba(21, 11, 9, .88);
  color: var(--ivory);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.card__link:hover .card__badge,
.card__link:focus-visible .card__badge { opacity: 1; transform: none; }

.card__kicker {
  margin: 1rem 0 .35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__frame--cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.2rem;
  border: 1px solid var(--line);
  background: var(--card);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.card__link:hover .card__frame--cta,
.card__link:focus-visible .card__frame--cta { border-color: var(--accent); }
.cta-mark { align-self: flex-end; font-size: 1.5rem; line-height: 1; color: var(--accent); }
.cta-copy {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 4.4vw, 1.85rem);
  line-height: 1.08;
  color: var(--fg);
}

.rail-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.2rem;
}
.rail-hint {
  margin: 0;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--fg-dim);
}
.rail-hint kbd {
  padding: .1rem .4rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: inherit;
  font-size: .95em;
}

.rail-buttons { display: flex; gap: .6rem; }
.iconbtn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.iconbtn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ── Klantlogo's ─────────────────────────────────────────────────────── */
.clients {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.client {
  display: grid;
  place-items: center;
  min-height: 148px;
  padding: 1.8rem 1.4rem;
  /* Zuiver wit, geen perkament: deze logo's zijn voor wit getekend en een paar
     dragen witte uitsparingen die op een gebroken grond vuil ogen. */
  background: #FFFFFF;
}
.client img {
  width: auto;
  max-width: 76%;
  max-height: 56px;
}

/* Acht logo's met verhoudingen van 1:1 tot 7:1 naast elkaar. Eén vaste
   maximumhoogte laat de vierkante merken optisch verdwijnen naast de brede
   woordmerken, dus krijgen die een eigen plafond. */
.client--tall img { max-height: 100px; max-width: 84%; }
.client--mid img  { max-height: 64px; }

.clients-note {
  margin: 2rem 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
}

/* ── Formats ─────────────────────────────────────────────────────────── */
.formats { display: grid; gap: clamp(2.4rem, 5vw, 4rem); align-items: start; }

.formats__list { border-top: 1px solid var(--line-soft); }

.format {
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .3s var(--ease);
}
.format__name {
  margin-bottom: .5rem;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.005em;
}
.format__desc {
  max-width: 50ch;
  margin: 0 0 1.1rem;
  color: var(--fg);
}
.format.is-active { padding-left: 1rem; }
.format.is-active .format__name { color: var(--accent); }

.formats__preview { display: none; }

.formats__note {
  max-width: 54ch;
  margin: 2.4rem 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
}

/* ── Te zien bij ─────────────────────────────────────────────────────── */
.media { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }

.credits { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.credit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.credit__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .02em;
}
.credit__kind {
  grid-row: 2;
  grid-column: 1;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
}
.credit__year {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.media__figure { margin: 0; }
.media__figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}

/* ── Over ────────────────────────────────────────────────────────────── */
.about { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }

.about__figure { margin: 0; }
.about__figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}

.about__copy p { color: var(--fg); max-width: 46ch; }

.about__copy .statement { max-width: none; }

.statement {
  margin: 2rem 0 0;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--accent);
}

/* ── Werkwijze ───────────────────────────────────────────────────────── */
.steps { display: grid; gap: 1px; background: var(--line-soft); }

.step {
  padding: clamp(1.8rem, 3.5vw, 2.4rem) clamp(1.4rem, 3vw, 2rem);
  background: var(--card);
}
.step__num {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .12em;
  color: var(--accent);
}
.step__title {
  margin-bottom: .5rem;
  font-size: 1.6rem;
  font-weight: 700;
}
.step p { margin: 0; font-size: var(--fs-sm); color: var(--fg); }

/* ── Contact ─────────────────────────────────────────────────────────── */
.contact { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start; }

.contact__direct { margin-top: 2.2rem; border-top: 1px solid var(--line-soft); }
.contact__direct li {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact__key {
  min-width: 7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  align-self: center;
}
.contact__direct a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.contact__direct a:hover { color: var(--accent); border-color: var(--accent); }

/* ── Formulier ───────────────────────────────────────────────────────── */
.form {
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.form__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.form__head .crest { width: 17px; height: 15px; color: var(--accent); flex: none; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  margin-bottom: .45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .78rem .9rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  font-size: var(--fs-base);
  transition: border-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--accent); }

.field__err {
  margin: .4rem 0 0;
  min-height: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--err);
}
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--err); }

/* Honeypot: onzichtbaar voor mensen, wél invulbaar voor bots die het formulier
   uit de HTML lezen. display:none in plaats van wegpositioneren, zodat het veld
   nooit de documentbreedte kan oprekken. */
.hp { display: none; }

.form-status {
  margin: 1.1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--fg);
}
.form-status.is-ok { color: var(--accent); font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: 2.5rem;
  border-top: 1px solid rgba(211, 172, 52, .26);
  background: var(--ink);
  color: var(--ivory);
}
.site-footer .shell { position: relative; }

.footer-mark {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.4rem, 19vw, 15rem);
  line-height: .86;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mahogany-3);
  user-select: none;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(244, 238, 227, .12);
}
.footer-social { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--ivory);
  transition: color .2s var(--ease);
}
.footer-social a:hover { color: var(--gold); }

.footer-meta {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.footer-tail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.6rem;
  margin-top: 1.6rem;
}

.footer-motto {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--gold);
}

.footer-made {
  margin: 0;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--ivory-dim);
}
.footer-made a {
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 172, 52, .38);
  color: var(--ivory-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer-made a:hover { color: var(--gold); border-color: var(--gold); }

/* ═════════════════════════════════════════════════════════════════════
   Responsive
   ═════════════════════════════════════════════════════════════════════ */

/* ── Tot 900px: uitklapmenu ──────────────────────────────────────────── */
@media (max-width: 899px) {
  .burger {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .4rem;
    border: 0;
    background: transparent;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fg);
    cursor: pointer;
    transition: color .3s var(--ease);
  }
  .burger__box { position: relative; width: 22px; height: 12px; }
  .burger__bar,
  .burger__box::before,
  .burger__box::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }
  .burger__box::before { content: ''; top: 0; }
  .burger__bar         { top: 5px; }
  .burger__box::after  { content: ''; bottom: 0; }

  .burger[aria-expanded="true"] .burger__box::before { transform: translateY(5px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bar         { opacity: 0; }
  .burger[aria-expanded="true"] .burger__box::after  { transform: translateY(-5px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 80px 0 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 2.4rem var(--gutter) 3rem;
    background: var(--parchment);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
    overflow-y: auto;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; }

  .nav__list { flex-direction: column; gap: 0; width: 100%; }
  .nav__list li { width: 100%; border-bottom: 1px solid rgba(58, 26, 20, .16); }
  .nav__list a {
    display: block;
    padding: 1.1rem 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: .02em;
    color: var(--ink-text);
  }
  .nav__list a::after { display: none; }
  .nav__cta { margin-top: 2rem; }
}

/* ── Lage vensters: hero compacter, zodat de video niet onder de vouw
      verdwijnt ────────────────────────────────────────────────────────── */
@media (max-width: 899px) and (max-height: 900px) {
  .hero { padding-top: 1.2rem; padding-bottom: 2.4rem; }
  .hero__grid { gap: 1.6rem; }
  .hero__title { font-size: clamp(2.6rem, 10.4vw, 3.6rem); margin-bottom: 1rem; }
  .hero__lead { font-size: var(--fs-base); margin-bottom: 1.4rem; }
  .hero__actions { gap: .6rem; }
  .btn--lg { padding: .85rem 1.5rem; font-size: var(--fs-sm); }
  .phone { max-width: 244px; }
  .hero__caption { display: none; }
}

/* ── Vanaf 560px ─────────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Vanaf 700px ─────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .platforms__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panel__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Vanaf 900px ─────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
    grid-template-areas:
      "copy feed"
      "mini feed";
    column-gap: clamp(3rem, 6vw, 5rem);
    row-gap: 0;
  }
  .hero__actions { margin-bottom: 2.6rem; }

  .section__head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .section__head--split .section__lead { justify-self: end; }

  .panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

  .formats { grid-template-columns: minmax(0, 1fr) 232px; }
  .formats__preview { display: block; position: sticky; top: 124px; }

  .media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .media__figure { order: 2; }

  .about { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }

  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1120px) {
  .card { flex: 0 0 300px; }
}

/* ═════════════════════════════════════════════════════════════════════
   Beweging: alles hieronder is optioneel en valt netjes terug.
   Basisstaat = eindstaat, zodat de pagina zonder JS compleet is.
   ═════════════════════════════════════════════════════════════════════ */
.reveal { opacity: 1; transform: none; }
.hero__accent::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  .js:not(.js-failed) .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s var(--ease), transform .65s var(--ease);
  }
  .js:not(.js-failed) .reveal.is-in { opacity: 1; transform: none; }

  /* De vier stukken schuiven vanuit links open zodra de balk in beeld komt. */
  .js:not(.js-failed) .reveal .split__seg { flex-grow: 0; min-width: 0; }
  .js:not(.js-failed) .reveal.is-in .split__seg { flex-grow: var(--pct); min-width: 3px; }

  /* De feed raast omhoog en komt tot stilstand op zijn frame. */
  .js:not(.js-failed) .feed {
    animation: feedSettle 2s cubic-bezier(.1, .82, .18, 1) .3s both;
  }
  .js:not(.js-failed) .hero__accent::after {
    transform: scaleX(0);
    transition: transform .7s cubic-bezier(.2, .9, .25, 1);
  }
  .js:not(.js-failed) .hero.is-stopped .hero__accent::after { transform: scaleX(1); }

  .ticker__track { animation: tickerRun 46s linear infinite; }
}

@keyframes feedSettle {
  0%   { transform: translateY(0);      filter: blur(0); }
  7%   { filter: blur(9px); }
  60%  { filter: blur(4px); }
  100% { transform: translateY(-500%);  filter: blur(0); }
}

@keyframes tickerRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Vangnet: schakelt ook de losse hover-overgangen uit die niet in het
   no-preference-blok hierboven staan. Autoplay wordt in main.js afgevangen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}