@font-face {
  font-family: "Power Grotesk";
  src: url("../fonts/PowerGrotesk-Heavy.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Power Grotesk";
  src: url("../fonts/PowerGrotesk-HeavyItalic.ttf") format("truetype");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kefir";
  src: url("../fonts/kefir-extra-bold.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Open Sauce Sans — het leesfont voor de lopende teksten. Aparte bestanden per
   gewicht/stijl, zodat <strong> de échte Bold pakt i.p.v. een kunstmatig verdikte Regular. */
@font-face {
  font-family: "Open Sauce Sans";
  src: url("../fonts/OpenSauceSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("../fonts/OpenSauceSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("../fonts/OpenSauceSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("../fonts/OpenSauceSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("../fonts/OpenSauceSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sauce Sans";
  src: url("../fonts/OpenSauceSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --beige: #f2f2e4;
  --black: #111010;
  --orange: #ff5633;
  --blue: #0071ff;
  --purple: #9a90de;
  --green: #00bd7d;
  --orange-2: #ff8a00;
  --yellow: #f4c737;
  --font-head: "Power Grotesk", "Bricolage Grotesque", Arial, sans-serif;
  --font-title: "Kefir", "Power Grotesk", "Bricolage Grotesque", Arial, sans-serif;
  --font-body: "Open Sauce Sans", "Inter", Arial, sans-serif;
  /* losse RGB-waarden van beige: nodig waar we de kleur moeten kunnen animeren
     (een color-mix() laat zich niet naar transparant interpoleren — de overgang
     bleef daardoor op mobiel hangen op de beige balk) */
  --beige-rgb: 242, 242, 228;
  --radius: 24px;
  --max-w: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; overflow-anchor: none; }
html {
  scroll-behavior: smooth; overflow-x: hidden;
  /* geen rubber-band bovenaan: op iOS kon je "boven de video uit" trekken en zag je
     dan een strookje pagina-achtergrond boven het beeld staan. De bannervideo moet
     tegen de bovenkant vastzitten. */
  overscroll-behavior-y: none;
}
/* alles wat bewust buiten de rooilijn steekt (de schuine trust-balk, stickers over
   hoeken) wordt hier afgeknipt. `clip` i.p.v. `hidden`: clip maakt géén scroll-
   container, dus position:sticky in de hero blijft gewoon werken. */
main { overflow-x: clip; }
body {
  background: var(--beige);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  transition: background-color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
h1, h2, h3 { line-height: 1.05; letter-spacing: -0.01em; }
h1, h2 { font-family: var(--font-title); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; }
h3 { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
section { padding: 96px 24px; max-width: var(--max-w); margin: 0 auto; }
.kicker {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--orange);
  margin-bottom: 12px;
}
.section-head { margin-bottom: 48px; }
.link { color: var(--black); text-underline-offset: 3px; }
.link:hover { color: var(--orange); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 32px;
  background: transparent;
}
/* De beige balk zit in een aparte laag die we met opacity in- en uitfaden.
   Een background-color-overgang bleek onbetrouwbaar (bleef op mobiel hangen op
   de beige startwaarde); opacity animeert altijd en wordt door de GPU gedaan. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(var(--beige-rgb), 0.88);
  backdrop-filter: blur(10px);
  transition: opacity 0.45s ease;
}
/* zolang de video schermvullend is ligt de header er transparant overheen;
   main.js zet .in-videofase op <body> op basis van de scroll-voortgang */
body.in-videofase .site-header::before { opacity: 0; }
body.in-videofase .site-header a:not(.nav-cta),
body.in-videofase .logo { color: var(--beige); }
.site-header a, .logo { transition: color 0.45s ease; }
.logo {
  font-family: var(--font-head); font-weight: 800; font-size: 1.3rem;
  text-decoration: none; color: var(--black);
}
.logo-dot { color: var(--orange); }
.site-nav { display: flex; gap: 28px; align-items: center; }
.site-nav a {
  text-decoration: none; color: var(--black);
  font-weight: 600; font-size: 0.95rem;
  font-family: var(--font-head);
}
.site-nav a:hover { color: var(--orange); }
.nav-cta {
  background: var(--orange); color: var(--beige) !important;
  padding: 10px 20px; border-radius: 999px;
  transition: transform 0.15s ease;
}
.nav-cta:hover { transform: rotate(-2deg) scale(1.04); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  padding: 16px 32px; border-radius: 999px; font-size: 1.05rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: rotate(-1.5deg) scale(1.04); }
.btn-primary { background: var(--orange); color: var(--beige); }
/* 2px minder padding compenseert de rand: ghost- en primary-knop zijn exact even hoog */
.btn-ghost { background: transparent; color: var(--black); border: 2px solid var(--black); padding: 14px 30px; }
.btn-light { background: var(--beige); color: var(--black); }
.btn-big { font-size: 1.15rem; padding: 18px 40px; }

/* ---------- hero ----------
   Schermvullende bannervideo die gewoon met de pagina meescrollt — bewust géén
   scroll-effect meer (het oude krimp-in-lijst-effect staat in
   beheer/archief-scroll-effecten.md). Tekst linksonder, weg van de gezichten
   in de video. main.js schuift de sectie onder de (transparante) header. */
.hero {
  position: relative; max-width: none; padding: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--black);
}
.hero-video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* waas onderin + net iets extra links, waar de tekst staat; de gezichten
   midden/rechts in beeld blijven vrij */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(17, 16, 16, 0.42) 0%, rgba(17, 16, 16, 0) 55%),
    linear-gradient(to top, rgba(17, 16, 16, 0.72) 0%, rgba(17, 16, 16, 0.22) 44%, rgba(17, 16, 16, 0.08) 100%);
}
.hero-kern {
  position: relative; z-index: 2;
  text-align: left; max-width: 780px;
  padding: 0 48px 52px;
}
.hero-kern h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 800; color: var(--beige);
  margin-bottom: 22px;
}
.hero-body {
  color: color-mix(in srgb, var(--beige) 94%, transparent);
  font-size: 1.15rem; line-height: 1.6; max-width: 44ch;
  margin-bottom: 30px;
}
.hero-ctas {
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
/* het terzijde naast de knop: klein en zacht, nadrukkelijk géén tweede knop.
   flex:1 houdt hem op desktop náást de knop (desnoods in twee regeltjes);
   op smalle schermen zakt hij via flex-wrap alsnog onder de knop */
.hero-terzijde {
  flex: 1; min-width: 220px; max-width: 34ch;
  font-style: italic; font-size: 0.95rem; line-height: 1.5;
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--beige) 45%, transparent);
  color: color-mix(in srgb, var(--beige) 82%, transparent);
}
.terzijde-link {
  color: inherit; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--beige) 55%, transparent);
}
.terzijde-link:hover { color: var(--beige); text-decoration-color: currentColor; }

/* ---------- stickers (poppen speels in bij scrollen) ---------- */
.sticker {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.14));
  z-index: 5;
  opacity: 0;
  transform: scale(0.3) rotate(calc(var(--rot, 0deg) - 8deg));
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sticker.pop {
  opacity: 1;
  transform: scale(1) rotate(var(--rot, 0deg));
}
/* award-badge: plopt kort na binnenkomst in en plakt in de rechtsonderhoek
   van de video. Hover: draait iets en groeit, net als de andere stickers. */
.sticker-award {
  width: 180px; bottom: 34px; right: 34px; top: auto; --rot: -8deg; z-index: 6;
  pointer-events: auto; cursor: pointer;
  transition: opacity 0.35s ease,
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              scale 0.35s cubic-bezier(0.34, 1.5, 0.5, 1),
              rotate 0.35s cubic-bezier(0.34, 1.5, 0.5, 1);
}
.sticker-award:hover { scale: 1.1; rotate: 8deg; }
.sticker-buitenbeentje-tag {
  width: 118px; top: -26px; right: -34px; --rot: 7deg;
}
/* hangt laag over de (lege) rechteronderhoek van kaart 2 — onder de laatste
   tekstregels langs, zodat de sticker geen tekst meer afdekt */
/* hangt over de rechteronderhoek van kaart 2 */
.sticker-eerstjezelf-tag {
  width: 112px; bottom: -26px; right: -34px; top: auto; left: auto; --rot: -6deg;
}
.sticker-inclusief-tag {
  width: 116px; bottom: -32px; right: -24px; top: auto; --rot: 8deg;
}
.sticker-echteverhalen-tag {
  width: 145px; top: 14px; right: -155px; --rot: -3deg;
}
/* review-sticker: rechtsONDER op de eerste quote-kaart */
.sticker-thx {
  width: 118px; bottom: -30px; right: -22px; top: auto; --rot: 7deg;
}
/* keurmerk-grapje: staat ONDERIN het Duur-vlak en vult de witte negative space;
   begint vlak onder de tekst. Gecentreerd via een eigen translateX-transform */
.sticker-duur {
  width: 122px; left: 50%; right: auto; top: auto; bottom: -38px; --rot: -4deg;
  transform: translateX(-50%) scale(0.3) rotate(calc(var(--rot) - 8deg));
}
.sticker-duur.pop {
  transform: translateX(-50%) scale(1) rotate(var(--rot));
}
/* workshop 1: rechtsboven over de foto */
.sticker-creatives {
  width: 132px; top: -26px; right: -22px; --rot: 7deg;
}

/* ---------- trust bar ---------- */
.trust-bar {
  background: var(--orange); color: var(--beige);
  overflow: hidden; padding: 20px 0;
}
/* De band bestaat uit twee identieke helften en schuift met de marquee-animatie
   precies -50%. Daarom zit de tussenruimte in een padding-right PER item en niet
   in een `gap`: met gap ontbreekt de ruimte ná het laatste item en maakte de
   lus elke ronde een zichtbaar sprongetje van een halve tussenruimte. */
.trust-track {
  display: flex; gap: 0; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  animation: marquee 48s linear infinite;
  width: max-content;
}
.trust-track > span { padding-right: 40px; }
.trust-track .dot { color: #fff; }

/* ---------- verhalen die je niet zag ---------- */
.onvertelde-head {
  text-align: center;
  --zone-text: var(--black);
}
.onvertelde-head .kicker,
.onvertelde-head h2 {
  color: var(--zone-text);
  transition: color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
.onvertelde-head .kicker { display: block; }
.onvertelde-player { max-width: 760px; margin: 0 auto; }
/* het lijstje clipt de video (Safari negeert border-radius op <video> zelf,
   waardoor het donkere videovlak buiten de ronde hoeken stak) */
.onvertelde-lijst {
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  background: var(--black);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  transform: translateZ(0); /* dwingt Safari om de clip echt toe te passen */
}
/* Eigen afspeelknop over het posterframe. De ingebouwde videobalk legt een donker
   vlak over de thumbnail; die zetten we daarom pas aan zodra je afspeelt (main.js).
   De knop beslaat de hele video, dus je kunt overal op het beeld klikken. */
.onvertelde-play {
  position: absolute; inset: 0; z-index: 2;
  background: none; border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.onvertelde-play-knop {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--beige);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(17, 16, 16, 0.4);
  transition: scale 0.25s cubic-bezier(0.34, 1.5, 0.5, 1), background 0.2s ease;
}
.onvertelde-play-knop::after {
  content: "";
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--black);
  margin-left: 6px; /* optisch midden: een driehoek oogt anders naar links verschoven */
}
.onvertelde-play:hover .onvertelde-play-knop { scale: 1.08; background: #fff; }
.onvertelde-lijst.speelt .onvertelde-play { display: none; }
.onvertelde-video {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border-radius: inherit;
  clip-path: inset(0 round var(--radius));
}

/* met de pen omcirkeld woord ("boog"): de cirkel is een SVG-path die tijdens het scrollen
   wordt "getekend" (stroke-dashoffset door JS gescrubd, niet met een tijd-animatie) */
.circle-word { position: relative; display: inline-block; white-space: nowrap; }
.pen-circle {
  position: absolute; left: -15%; top: -26%;
  width: 130%; height: 152%;
  overflow: visible; pointer-events: none; z-index: -1;
  /* het path loopt van zichzelf tegen de klok in (11→9→7→4 uur); gespiegeld tekent
     hij mét de klok mee, en blijft de uitzwaai netjes de laatste haal */
  transform: scaleX(-1);
}
.pen-circle path {
  stroke: currentColor;
  /* iets dikker dan de 3px uit het SVG-attribuut: past beter bij het zware
     Kefir-font, maar blijft een penstreek — niet een balk.
     vector-effect non-scaling-stroke maakt dit een echte schermdikte in px */
  stroke-width: 4;
  /* stroke-dasharray/offset worden door main.js gezet op basis van de scroll-voortgang */
}

/* ---------- speelse onderstreping ---------- */
.underline-word {
  position: relative; display: inline-block;
}
.underline-word::after {
  content: ""; position: absolute; left: -18%; right: -18%; bottom: -0.2em;
  height: 0.42em;
  background: url("../stickers/underline-verbinden.png") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.45s cubic-bezier(0.65, 0, 0.35, 1) 0.45s;
}
.underline-word.in::after { clip-path: inset(0 0 0 0); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- hokjes scrollytelling ---------- */
.hokjes {
  max-width: none; padding: 0;
  /* kort scrollbereik: net genoeg pin voor de titelwissel + finale. Ruimer (220vh)
     voelde alsof de scroll vastliep — zie beheer/archief-scroll-effecten.md. */
  height: 150vh; position: relative;
}
.hokjes-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 36px;
  overflow: hidden;
}
.hokjes-title {
  /* geen eigen font-size: volgt de standaard h2-maat, zodat deze kop precies even
     groot is als "De mensen waar we het liefst met een boog omheen lopen…" */
  max-width: 16ch;
  color: var(--black);
  transition: opacity 0.32s ease;
}
.hokjes-pills {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center; max-width: 620px;
  position: relative;
}
/* finale: 'buitenbeentje' komt van linksboven het beeld in en landt in het midden.
   Los element (geen positiesprong van .pill-hero) → naadloze overgang */
.hokjes-final {
  position: absolute; left: 50%; top: 50%;
  width: min(400px, 72vw); height: auto;
  translate: calc(-50% - 130px) calc(-50% - 105px);
  scale: 0.4; rotate: -16deg;
  opacity: 0; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 16px 34px rgba(17, 16, 16, 0.26));
  transition: opacity 0.85s ease 0.15s,
              translate 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              scale 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              rotate 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.hokjes-sticky[data-phase="1"] .hokjes-final {
  opacity: 1; translate: -50% -50%; scale: 1; rotate: 6deg;
}
/* alle labels ruimen rustig het veld, één voor één (--i komt uit main.js) */
.hokjes-sticky[data-phase="1"] .pill {
  opacity: 0; scale: 0.62;
  transition: opacity 0.55s ease calc(var(--i, 0) * 55ms),
              scale 0.7s cubic-bezier(0.4, 0, 0.6, 1) calc(var(--i, 0) * 55ms);
}
/* labels worden je "in het gezicht gedrukt": zoomen groot van ver naar voren met een bounce */
.pill {
  width: clamp(135px, 18vw, 195px); height: auto;
  filter: drop-shadow(0 12px 26px rgba(17, 16, 16, 0.28));
  opacity: 0;
  transform: translateY(60px) scale(0.15) rotate(0deg);
  transition: transform 0.55s cubic-bezier(0.34, 1.8, 0.5, 1), opacity 0.55s ease,
              scale 0.85s cubic-bezier(0.34, 1.5, 0.5, 1),
              translate 0.85s cubic-bezier(0.34, 1.5, 0.5, 1),
              rotate 0.9s cubic-bezier(0.34, 1.5, 0.5, 1);
  cursor: default;
}
.pill.in {
  opacity: 1; transform: translateY(0) scale(1) rotate(var(--tilt, 0deg));
}
/* speelse scatter — offsets komen per label uit main.js (--i), niet uit nth-child,
   omdat de burst/finale-sticker de nth-child-telling zouden verschuiven */
.pill { margin-left: var(--mx, 0); margin-top: var(--my, 0); }

/* ---------- verhaal ---------- */
.verhaal-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 48px;
}
/* De drie beats zijn géén kaarten meer maar één doorlopende leeslijn: je leest
   het verhaal van boven naar beneden (toen → daarna → nu) in plaats van drie
   losse blokjes naast elkaar. Bewust stil en typografisch — de docu-sectie
   hierna is juist druk en kleurrijk, dus dit blok geeft daar rust vóór. */
.beats { list-style: none; display: grid; max-width: 940px; }
.beat {
  position: relative;
  display: grid; grid-template-columns: 270px 1fr; gap: 56px;
  align-items: center;
  padding: 52px 0;
  border-top: 1px solid color-mix(in srgb, var(--black) 13%, transparent);
}
.beat:first-child { border-top: 0; padding-top: 8px; }
.beat:last-child { padding-bottom: 8px; }
.beat-foto { position: relative; margin: 0; }
.beat-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  display: block; border-radius: 18px;
}
/* de kop van elke stap draagt nu de kleur (i.p.v. losse labels of cijfercirkels) */
.beat-tekst h3 { font-size: 1.55rem; margin-bottom: 14px; color: var(--orange); }
.beat-tekst p { max-width: 54ch; }
.beat p + p { margin-top: 14px; }


/* ---------- de lezing: DE BROCHURE ----------
   Dit is het verkoopblok van de site: één donker paneel dat als een gedrukte
   brochure midden op de pagina ligt. Het paneel heeft een eigen achtergrond
   (dus niet afhankelijk van de ambient scroll-kleur) — daardoor is de tekst
   altijd leesbaar en mag groen overal het enige accent zijn. Zodra de
   ambient-kleur óók off-black wordt, versmelt het paneel met de pagina.
   Volgorde: kop → verhaal naast podiumfoto → uitspraak →
   twee blokken (publiek / organisaties). */
.lezing { padding-top: 96px; padding-bottom: 96px; }

.brochure {
  --ink: var(--beige);
  --accent: var(--green);
  --lijn: color-mix(in srgb, var(--green) 30%, transparent);
  /* exact dezelfde off-black als de ambient scroll-kleur van de pagina: zodra de
     pagina meekleurt valt het kader visueel volledig weg. Bij binnenkomst — de
     pagina is dan nog crème — ligt de brochure er nog als een donker vel op. */
  background: #151515;
  color: var(--ink);
  border-radius: 32px;
  padding: 80px 72px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px 64px;
  align-items: start;
}

/* kop over de volle breedte, met een dunne groene scheidingslijn eronder */
.brochure-kop {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 32px;
}
.brochure-kop .kicker { color: var(--accent); }
.brochure-kop h2 { font-size: clamp(2.1rem, 3.8vw, 3rem); max-width: 26ch; margin-bottom: 24px; }
/* de openingsalinea's staan vet: dat is de kern van het verkoopverhaal, de rest
   eronder leest als toelichting */
.brochure-belofte {
  font-size: 1.18rem; line-height: 1.6;
  color: color-mix(in srgb, var(--beige) 92%, transparent);
  font-weight: 700;
}
/* links in de brochure: groen onderstreept, past bij het accent van het paneel */
.brochure-intro a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  transition: color 0.15s ease;
}
.brochure-intro a:hover { color: var(--accent); }
/* de scheiding tussen "wie is Pieter" en "wat is de lezing" */
.brochure-scheiding {
  border: 0; height: 1px; background: var(--lijn);
  margin: 26px 0; width: 68px;
}

/* alle intro-alinea's in één en hetzelfde formaat: geen lead/rest-onderscheid */
.brochure-intro p {
  max-width: 48ch; margin-bottom: 0;
  font-size: 1.15rem; line-height: 1.65;
  color: color-mix(in srgb, var(--beige) 86%, transparent);
}
.brochure-intro p + p { margin-top: 18px; }

/* podiumfoto: bewijs dat de lezing bestaat, zonder dikke lijst eromheen.
   Vaste 4:5-verhouding i.p.v. meerekken met de tekstkolom: bij een lange tekst
   werd de foto anders veel te langwerpig. Dat de foto korter is dan de tekst
   ernaast mag — dat leest rustiger dan een uitgerekt beeld. */
.brochure-beeld { margin: 0; }
/* fotocarrousel in de brochure: main.js vult #heroPhotos vanuit fotos/Carrousel/
   en wisselt elke 4s; de stapel-opmaak komt van de oude hero-carrousel */
.brochure-fotos {
  position: relative; width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  background: #17161a;
}
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  opacity: 0; scale: 1;
  transition: opacity 1.1s ease, scale 5s linear;
}
.hero-photo.is-active { opacity: 1; scale: 1.06; }
.brochure-beeld figcaption {
  margin-top: 16px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent);
}

/* de uitspraak als losstaande pull-quote — display-font, dus Kefir */
.brochure-quote {
  grid-column: 1 / -1;
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: 48px 0;
  position: relative; padding-left: 78px;
}
.brochure-quote::before {
  content: "\201C";
  position: absolute; left: 0; top: 22px;
  font-family: var(--font-title); font-size: 5rem; line-height: 1;
  color: var(--accent);
}
.brochure-quote blockquote {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.15;
  max-width: 24ch; margin-bottom: 16px;
}
.brochure-quote cite {
  font-family: var(--font-head); font-weight: 700; font-style: normal;
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--beige) 55%, transparent);
}

/* de twee informatieblokken: één massief groen, één met alleen een groene lijn */
.brochure-blokken {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
.brochure-blok {
  position: relative; border-radius: var(--radius); padding: 40px 36px;
  --marker: var(--accent);
}
.brochure-blok h3 { font-size: 1.3rem; margin-bottom: 22px; }
.brochure-blok ul { list-style: none; display: grid; gap: 14px; }
.brochure-blok li { padding-left: 28px; position: relative; line-height: 1.55; }
.brochure-blok li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  font-family: var(--font-head); color: var(--marker);
}
.blok-groen {
  background: var(--green); color: var(--black); --marker: var(--black);
  transform: rotate(-0.4deg);
}
.blok-rand {
  border: 1.5px solid color-mix(in srgb, var(--green) 45%, transparent);
  transform: rotate(0.4deg); padding-bottom: 64px;
}
.blok-rand li { color: color-mix(in srgb, var(--beige) 80%, transparent); }

/* ---------- docu's (TikTok-kaart: oranje frame, ingesloten portret-video) ---------- */
.docus .section-head { position: relative; display: inline-block; }
.docu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.docu-card {
  display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden;
  background: var(--orange);
  padding: 12px 12px 4px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.docu-media {
  position: relative; aspect-ratio: 9 / 15;
  border-radius: 15px; overflow: hidden;
  background: #17161a;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
}
/* de reel-video vult het zwarte vlak; stats/views liggen erboven */
.docu-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: #17161a; display: block;
  transition: opacity 0.25s ease;
}
/* onzichtbaar tot het eerste echte frame er is; je kijkt dan op de poster die
   als achtergrond van .docu-media klaarstaat (gezet door main.js) — nooit meer
   een zwart flitsframe bij laden of hoveren */
.docu-video.nog-geen-beeld { opacity: 0; }
.docu-stats {
  position: absolute; right: 12px; bottom: 56px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: #fff;
}
.docu-stats .stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 0.72rem; font-weight: 700;
}
.docu-stats svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.docu-views {
  align-self: flex-start; position: relative; z-index: 2;
  background: var(--orange); color: var(--beige);
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
  padding: 6px 13px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  white-space: nowrap; max-width: 100%;
}
.docu-below { padding: 14px 8px 10px; }
.docu-below h3 { color: var(--beige); font-size: 1.08rem; margin-bottom: 4px; }
/* rechtop i.p.v. cursief: kleine cursieve tekst leest een stuk lastiger */
.docu-below p { color: var(--beige); opacity: 0.9; font-size: 0.9rem; line-height: 1.5; }

/* ---------- studio fomo: los, rustig blok onder de docu-kaarten ----------
   Regel → doorlopende merkenband → link. De band is dezelfde rij als op
   studiofomo.nl, maar zwart-wit gehouden zodat hij de docu-kaarten erboven
   niet beconcurreert. */
.fomo-strip {
  margin-top: 56px;
  display: grid; justify-items: center; gap: 26px;
  text-align: center;
  /* dit blok staat nog bovenin beeld wanneer de pagina eronder al zwart kleurt
     voor de lezing-zone; main.js zet dan --zone-text op crème */
  --zone-text: var(--black);
}
/* smaller kader + text-wrap: balance → twee regels van vergelijkbare lengte
   in plaats van een lange en een korte */
.fomo-tekst {
  font-size: 0.95rem; color: color-mix(in srgb, var(--zone-text) 62%, transparent);
  max-width: 50ch; text-wrap: balance;
  transition: color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* het masker laat de logo's aan beide zijden wegvagen i.p.v. hard af te knippen */
.fomo-marquee {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* twee identieke sets naast elkaar: -50% verschuiven is precies één set, dus
   de band herhaalt zich naadloos */
.fomo-track {
  display: flex; width: max-content;
  animation: marquee 38s linear infinite;
}
/* geen hover-effect: de band moet gewoon doorlopen, ook met de muis erop */
.fomo-marquee { pointer-events: none; }
.fomo-set { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
/* logo's staan van huis uit op verschillende ratio's/formaten; grayscale + vaste
   hoogte + auto-breedte houdt de rij rustig ondanks dat verschil */
.fomo-set img {
  height: 38px; width: auto; display: block;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 900ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* donkere pagina: alleen de sluier iets opendraaien. Bewust géén brightness of
   invert — dan gaan de logo's er raar uitzien; liever iets zachter dan vervormd. */
.fomo-strip.zone-omgekleurd .fomo-set img { opacity: 0.8; }
.fomo-set img.logo-klein { height: 32px; }
.fomo-set img.logo-vierkant { height: 30px; }
/* liggende wordmarks (RTL) worden op gelijke hoogte veel te breed t.o.v. de rest */
.fomo-set img.logo-breed { height: 24px; }
@media (prefers-reduced-motion: reduce) { .fomo-track { animation: none; } }
.fomo-link {
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  color: var(--zone-text, var(--black)); text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
  transition: color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fomo-link:hover { color: var(--orange); }

/* ---------- media: de perskiosk ----------
   Bewust NIET in de huisstijl van de site: de artikelen komen van buiten, dus
   elke slide draagt de vormtaal van zijn eigen bron. Een gedrukte krant krijgt
   serif-typografie op papierwit, een radio-item krijgt een donkere studio-look
   met een luisterknop, online media een strak nieuwsbericht. Daardoor voelt dit
   blok als een échte perskiosk in plaats van als nog een sitesectie. */
.media-widget {
  position: relative;
  width: 100%; max-width: 700px;
  margin: 0 auto;
}
.media-widget.reveal.visible { transform: none; }
.roos {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  position: relative; overflow: hidden;
  box-shadow: 0 22px 54px rgba(17, 16, 16, 0.16);
}
/* krant-sticker: bovenaan-midden, half over de bovenrand geplakt */
.sticker-krant {
  width: 178px; top: -104px; left: 50%; right: auto; bottom: auto;
  --rot: -3deg; z-index: 6;
  transform: translateX(-50%) scale(0.3) rotate(calc(var(--rot) - 8deg));
}
.sticker-krant.pop { transform: translateX(-50%) scale(1) rotate(var(--rot)); }

.media-track {
  display: flex; align-items: stretch;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}
.media-slide {
  flex: 0 0 100%; width: 100%; min-width: 0;
  display: grid; gap: 34px;
  padding: 34px 34px 72px;
}
/* beeld en tekst vullen samen de volle sliderhoogte: het beeld rekt mee,
   de tekst blijft verticaal gecentreerd. Zonder dit werd de hoogte bepaald
   door de langste slide en hielden de korte slides veel lege ruimte over. */
.slide-krant, .slide-online { align-items: stretch; }
.krant-pagina, .online-beeld { display: flex; min-height: 0; }
.krant-tekst, .online-tekst { align-self: center; }
.media-slide h2 { letter-spacing: 0; }
/* de bronnaam als "logo"-regel; per merk een eigen kleur en letterbeeld */
.bron-merk {
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  margin-bottom: 10px;
}
.merk-ad { font-family: Georgia, "Times New Roman", serif; font-size: 1.9rem; color: #e4003a; }
.merk-drenthe { font-family: Arial, Helvetica, sans-serif; font-size: 1.15rem; color: #0a7d3f; text-transform: uppercase; letter-spacing: 0.04em; }
.merk-zorg { font-family: Arial, Helvetica, sans-serif; font-size: 1.15rem; color: #00639b; letter-spacing: -0.01em; }

.bron-link {
  display: inline-block; margin-top: 22px;
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 0.92rem;
  text-decoration: none; padding: 12px 24px; border-radius: 4px;
}
.link-ad { background: #e4003a; color: #fff; }
.link-online { background: var(--black); color: #fff; border-radius: 999px; }
.link-radio { background: #f2f2e4; color: #10184a; border-radius: 999px; }
.bron-link:hover { opacity: 0.88; }

/* ---- 1. gedrukte krant (AD) ---- */
.slide-krant {
  grid-template-columns: 0.85fr 1.15fr; align-items: center;
  background: #fbfaf7; color: #111010;
}
.krant-pagina { margin: 0; }
.krant-pagina img {
  width: 100%; height: 100%; object-fit: contain; object-position: top;
  display: block; border-radius: 2px;
  filter: drop-shadow(0 12px 26px rgba(17, 16, 16, 0.22));
}
.krant-rubriek {
  font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #7a7772; margin-bottom: 16px;
  border-top: 2px solid #111010; padding-top: 10px;
}
.krant-kicker {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 0.9rem;
  color: #111010; margin-bottom: 10px; line-height: 1.35;
}
.slide-krant h2 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.1;
  margin-bottom: 16px;
}
.krant-intro {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem; line-height: 1.6; color: #3a3733; max-width: 44ch;
}

/* ---- 2. radio-uitzending (NPO Radio 1) ---- */
.slide-radio {
  grid-template-columns: 1fr; gap: 0; align-content: start;
  background: #10184a; color: #f2f2e4; padding: 0 0 72px;
}
.radio-still { margin: 0; }
.radio-still img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.radio-tekst { padding: 26px 34px 0; }
.radio-label {
  font-family: Arial, Helvetica, sans-serif; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: #9fb4ff; margin-bottom: 12px;
  display: flex; align-items: center; gap: 9px;
}
/* rood "aan de lucht"-lampje, knippert rustig */
.aan-de-lucht {
  width: 8px; height: 8px; border-radius: 50%; background: #ff4747;
  animation: aanlucht 2.4s ease-in-out infinite;
}
@keyframes aanlucht { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .aan-de-lucht { animation: none; } }
.slide-radio h2 {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.22;
  margin-bottom: 10px; max-width: 28ch;
}
.radio-bron {
  font-family: Arial, Helvetica, sans-serif; font-size: 0.92rem;
  color: rgba(242, 242, 228, 0.72);
}
.radio-bron a { color: #9fb4ff; }
.link-radio .play { font-size: 0.7rem; margin-right: 7px; }

/* ---- 2b. staand fragment (NPO 3FM, TikTok) ----
   Het bronmateriaal is staande TikTok-video, dus dit item krijgt een staande
   layout in plaats van de liggende radio-still. 3FM-groen als accent. */
.slide-vertical {
  grid-template-columns: 250px 1fr; align-items: stretch;
  background: #12130f; color: #f2f2e4;
}
.vertical-beeld { margin: 0; display: flex; min-height: 0; }
/* de kolom is smaller dan de foto: naar rechts uitsnijden, anders valt het
   gezicht half buiten beeld */
.vertical-beeld img {
  width: 100%; height: 100%; object-fit: cover; object-position: 85% 20%;
  display: block; border-radius: 10px;
}
.vertical-tekst { align-self: center; }
.merk-3fm {
  font-family: Arial, Helvetica, sans-serif; font-weight: 800;
  font-size: 1.15rem; letter-spacing: -0.01em; color: #9dff4f;
  margin-bottom: 12px;
}
.slide-vertical h2 {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.2;
  margin-bottom: 12px; max-width: 20ch;
}
.slide-vertical p:not(.merk-3fm):not(.vertical-bron) {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.96rem; line-height: 1.6;
  color: rgba(242, 242, 228, 0.86); max-width: 34ch;
}
.vertical-bron {
  font-family: Arial, Helvetica, sans-serif; font-size: 0.82rem;
  color: rgba(242, 242, 228, 0.55); margin-top: 12px;
}
.link-3fm { background: #9dff4f; color: #12130f; border-radius: 999px; }

/* ---- 2c. awarduitreiking (YouTube, The Best Social Awards) ----
   Bron is een videofragment van een podium met paars/groen licht; de slide neemt
   die sfeer over. Rode YouTube-knop, en de still is zelf ook aanklikbaar. */
.slide-video {
  grid-template-columns: 1fr; gap: 0; align-content: start;
  background: #141019; color: #f2f2e4; padding: 0 0 72px;
}
.video-still { margin: 0; }
.video-still a { display: block; position: relative; }
/* exact de verhouding van de still zelf, dus er wordt niets weggesneden. De slide
   blijft daarmee binnen de hoogte die de carrousel al had (radio-slides, 692px),
   zodat het blok op desktop niet hoger wordt. */
.video-still img { width: 100%; aspect-ratio: 1600 / 871; object-fit: cover; display: block; }
/* play-knop midden op de still: dit is een fragment, geen foto */
.video-play {
  position: absolute; left: 50%; top: 50%;
  width: 66px; height: 46px; border-radius: 12px;
  background: #ff0000; translate: -50% -50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: scale 0.2s ease, background 0.2s ease;
}
.video-play::after {
  content: ""; position: absolute; left: 52%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.video-still a:hover .video-play { scale: 1.08; background: #e60000; }
.video-tekst { padding: 26px 34px 0; }
.merk-awards {
  font-family: Arial, Helvetica, sans-serif; font-weight: 800;
  font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #c3b0ff; margin-bottom: 12px;
}
.slide-video h2 {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.22;
  margin-bottom: 10px; max-width: 32ch;
}
.slide-video p:not(.merk-awards) {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.96rem; line-height: 1.6;
  color: rgba(242, 242, 228, 0.82); max-width: 46ch;
}
.link-video { background: #ff0000; color: #fff; border-radius: 999px; }
.link-video .play { font-size: 0.7rem; margin-right: 7px; }

/* ---- 3. online nieuwsbericht (RTV Drenthe, Zorg+Welzijn) ---- */
.slide-online {
  grid-template-columns: 0.9fr 1.1fr; align-items: center;
  background: #fff; color: #111010;
}
.online-beeld { margin: 0; }
.online-beeld img {
  width: 100%; height: 100%; min-height: 280px;
  object-fit: cover; display: block; border-radius: 6px;
}
.slide-online h2 {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.22;
  margin-bottom: 14px;
}
.slide-online p:not(.bron-merk) {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.96rem; line-height: 1.62; color: #3a3733; max-width: 46ch;
}

/* ---- navigatie: leest als een kiosk-onderrand ---- */
.media-nav {
  position: absolute; bottom: 22px; right: 44px; left: auto;
  display: flex; align-items: center; gap: 16px; z-index: 3;
}
.media-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(17, 16, 16, 0.06); color: #111010;
  border: 1px solid rgba(17, 16, 16, 0.18);
  font-size: 1.2rem; cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s ease;
}
.media-arrow:hover { background: rgba(17, 16, 16, 0.14); }
.media-dots { display: flex; gap: 8px; }
.media-dots button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(17, 16, 16, 0.22); border: none; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.media-dots button.active { background: var(--orange); transform: scale(1.3); }
/* de navigatie ligt in een eigen pil, zodat hij leesbaar blijft op zowel de
   witte krantenslides als de donkerblauwe radioslides */
.media-nav {
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px);
  padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(17, 16, 16, 0.12);
}

/* ---------- testimonials (studiofomo-rode pagina, off-white kaarten) ---------- */
.testimonials .section-head { --zone-text: var(--black); }
.testimonials .kicker,
.testimonials h2 { color: var(--zone-text); transition: color 900ms cubic-bezier(0.4, 0, 0.2, 1); }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.quote-wide { grid-column: 1 / -1; }
.quote {
  position: relative;
  background: var(--beige);
  border-radius: var(--radius); padding: 34px 36px;
  box-shadow: 0 14px 34px rgba(17, 16, 16, 0.16);
}
.quote p {
  font-family: var(--font-body); font-weight: 500;
  font-size: 1.05rem; line-height: 1.6;
  color: var(--orange); margin-bottom: 18px;
}
.quote footer { color: var(--black); font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; }
.quote.reveal.visible:nth-child(1) { transform: rotate(-1.6deg); }
.quote.reveal.visible:nth-child(2) { transform: rotate(1.8deg); }
.quote.reveal.visible:nth-child(3) { transform: rotate(-1deg); }

/* ---------- organisatoren ---------- */
.organisatoren .section-head { text-align: center; }
/* auto-fit: lege sporen verdwijnen, dus ook met één tegel netjes gecentreerd */
.org-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 260px));
  gap: 24px; justify-content: center; margin: 0 auto;
}
.org-tile {
  position: relative;
  background: #fff; border-radius: 24px; padding: 34px 26px 96px;
  text-align: center;
  border: 2px solid color-mix(in srgb, var(--orange) 22%, transparent);
}
.org-tile h3 {
  color: var(--orange); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px;
}
.org-tile p {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.15rem; line-height: 1.5; color: var(--black);
}

/* ---------- workshops ---------- */
.workshop-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  max-width: 820px; margin: 0 auto;
}
/* links uitgelijnd: een gecentreerde alinea van 4-5 regels leest rommelig (rafelige
   linkerkant), links uitlijnen geeft het oog een vast startpunt per regel */
.workshop-card { position: relative; text-align: left; }
.workshop-photo {
  aspect-ratio: 4 / 3; width: 100%;
  border-radius: 20px; overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 12px 30px rgba(17, 16, 16, 0.10);
  background: #e7e7d8;
  margin-bottom: 24px;
}
.workshop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.workshop-card:nth-child(1) .workshop-photo { transform: rotate(-1.4deg); }
.workshop-card:nth-child(2) .workshop-photo { transform: rotate(1.4deg); }
.workshop-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--beige); }
.workshop-card p { font-size: 0.98rem; color: var(--beige); }
/* blauwe pagina: kop én kicker verkleuren mee van zwart naar cream */
.workshops .section-head { --zone-text: var(--black); }
.workshops h2,
.workshops .kicker { color: var(--zone-text); transition: color 900ms cubic-bezier(0.4, 0, 0.2, 1); }
/* in-animeren: kaart 1 schuift van links, kaart 2 van rechts */
.workshop-card:nth-child(1).reveal { transform: translateX(-70px); }
.workshop-card:nth-child(2).reveal { transform: translateX(70px); }
.workshop-card.reveal.visible { transform: none; }

/* ---------- contact ---------- */
/* de footer brengt zijn eigen ruimte mee (padding + scheidingslijntje), dus hier
   hoeft er onder het oranje blok niet nog eens een heel scherm lucht bij */
.contact { padding-bottom: 56px; }
.contact-inner {
  background: var(--orange); color: var(--beige);
  border-radius: var(--radius); padding: 72px 64px;
  text-align: center;
}
.contact-inner h2 { margin-bottom: 12px; }
.contact-inner > p { margin-bottom: 36px; font-size: 1.15rem; line-height: 1.6; max-width: 50ch; margin-left: auto; margin-right: auto; }
.contact-form { max-width: 560px; margin: 0 auto 24px; display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form textarea {
  font-family: var(--font-body); font-size: 1rem;
  padding: 16px 20px; border: none; border-radius: 16px;
  background: var(--beige); color: var(--black); width: 100%;
  resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #58585a; }
.contact-form .btn-primary { background: var(--black); }
/* honeypot-veld: onzichtbaar voor mensen, spambots vullen het toch in */
.veld-website { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-verzonden {
  background: var(--beige); color: var(--black);
  font-weight: 700; border-radius: 16px;
  padding: 14px 22px; margin-bottom: 24px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.contact-fout {
  background: var(--yellow); color: var(--black);
  font-weight: 700; border-radius: 16px;
  padding: 14px 22px; margin-bottom: 24px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.contact-alt { font-size: 0.98rem; }
.contact-alt .link { color: var(--beige); }

/* ---------- themapagina's (spreker-verbinding/, spreker-storytelling/) ----------
   Rustige leespagina's op beige; hergebruiken verder de bestaande knoppen,
   kickers, quote- en fotolijst-stijlen. Geen scroll-effecten. */
.themapagina { max-width: 820px; padding-top: 56px; position: relative; }
/* award-sticker: plakt als stempeltje over de rechterbovenhoek van de foto.
   De wrapper is nodig omdat .workshop-photo zelf overflow:hidden heeft. */
.thema-fotoblok { position: relative; max-width: 560px; }
.thema-fotoblok .workshop-photo { max-width: none; }
/* sticker-award-hoek.png is strak uitgesneden (het originele bestand heeft een
   brede transparante rand, waardoor de sticker optisch niet op zijn plek viel) */
.thema-sticker {
  position: absolute; z-index: 2;
  top: -14px; right: -10px; width: 150px; height: auto;
  rotate: 8deg;
  filter: drop-shadow(0 6px 14px rgba(17, 16, 16, 0.18));
}
/* op mobiel loopt de foto tot de schermrand: sticker naar binnen halen,
   anders steekt hij het scherm uit (main heeft overflow-x: clip) */
@media (max-width: 700px) {
  .thema-sticker { top: -10px; right: -6px; width: 104px; }
}
.themapagina h1 {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 22px;
}
.themapagina .intro { font-size: 1.18rem; line-height: 1.6; max-width: 56ch; margin-bottom: 16px; }
.themapagina h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 48px 0 16px; }
.themapagina p { max-width: 62ch; margin-bottom: 14px; }
.themapagina ul { list-style: none; display: grid; gap: 12px; margin: 18px 0; max-width: 60ch; }
.themapagina ul li { padding-left: 26px; position: relative; }
.themapagina ul li::before { content: "→"; position: absolute; left: 0; color: var(--orange); font-family: var(--font-head); }
/* op de themapagina's houdt de fotolijst de eigen verhouding van de foto aan
   (staand of liggend), i.p.v. de vaste 4/3-uitsnede van de workshop-kaarten */
.themapagina .workshop-photo { max-width: 560px; margin-top: 28px; aspect-ratio: auto; }
.themapagina .workshop-photo:has(img[src*="beat-lezing"]) { max-width: 420px; }
.themapagina .workshop-photo img { height: auto; }
.themapagina blockquote {
  background: #fff; border-radius: var(--radius);
  padding: 26px 30px; margin: 28px 0; max-width: 56ch;
  font-style: italic; font-weight: 500;
}
.themapagina blockquote footer { margin-top: 10px; font-style: normal; font-size: 0.9rem; opacity: 0.7; }
.themapagina .thema-cta { margin: 44px 0 24px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.themapagina .thema-logos { display: flex; align-items: center; gap: 32px; margin: 20px 0 8px; flex-wrap: wrap; }
.themapagina .thema-logos img { height: 26px; width: auto; filter: grayscale(1); opacity: 0.6; }

/* ---------- footer ---------- */
.footer-themas { font-size: 0.85rem; opacity: 0.8; }
.site-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
  padding: 32px 32px 40px; font-size: 0.9rem;
  color: color-mix(in srgb, var(--black) 60%, transparent);
  max-width: var(--max-w); margin: 0 auto;
}
/* dun scheidingslijntje boven de footer, zodat het blok bewust afsluit */
.site-footer::before {
  content: ""; width: 64px; height: 2px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--black) 18%, transparent);
}
.site-footer .link { color: var(--black); }

/* ---------- reveal on scroll (stagger via JS op broertjes-index) ---------- */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.6s ease,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.34s cubic-bezier(0.34, 1.55, 0.5, 1),
              scale 0.34s cubic-bezier(0.34, 1.55, 0.5, 1),
              rotate 0.34s cubic-bezier(0.34, 1.55, 0.5, 1),
              box-shadow 0.34s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.blok-groen.reveal.visible { transform: rotate(-0.4deg); }
.blok-rand.reveal.visible { transform: rotate(0.4deg); }

/* ---------- kop-animaties: elke kop komt anders binnen ---------- */
.h-char, .h-word { display: inline-block; opacity: 0; }
.h-word { white-space: pre; }
.h-wordwrap { display: inline-block; white-space: nowrap; }

.anim-letters .h-char {
  translate: 0 0.45em; scale: 0.6;
  transition: opacity 0.4s ease,
              translate 0.55s cubic-bezier(0.34, 1.6, 0.55, 1),
              scale 0.55s cubic-bezier(0.34, 1.6, 0.55, 1);
}
.anim-letters.run .h-char { opacity: 1; translate: 0 0; scale: 1; }

.anim-words .h-word {
  translate: 0 0.5em;
  transition: opacity 0.5s ease, translate 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-words.run .h-word { opacity: 1; translate: 0 0; }

/* woord voor woord van links naar rechts binnenschuiven — rustig tempo */
.anim-wipe .h-word {
  translate: -0.55em 0;
  filter: blur(7px);
  transition: opacity 0.85s ease,
              translate 1s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.85s ease;
}
.anim-wipe.run .h-word { opacity: 1; translate: 0 0; filter: blur(0); }

.anim-blur {
  opacity: 0; filter: blur(16px); scale: 1.05;
  transition: opacity 0.8s ease, filter 0.9s ease,
              scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-blur.run { opacity: 1; filter: blur(0); scale: 1; }

.anim-pop {
  opacity: 0; scale: 0.72;
  transition: opacity 0.45s ease, scale 0.7s cubic-bezier(0.34, 1.7, 0.5, 1);
}
.anim-pop.run { opacity: 1; scale: 1; }

/* rustige fade-in (verving het typemachine-effect: dat liep te snel) */
.anim-fade {
  opacity: 0; translate: 0 0.28em;
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-fade.run { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .h-char, .h-word { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  .anim-blur, .anim-pop, .anim-fade { opacity: 1 !important; filter: none !important; scale: 1 !important; translate: none !important; }
}

/* ---------- hover-leven: kaarten liften & schalen mee onder de muis ---------- */
/* (translate/scale zijn losse transform-properties → composen met de rotatie van reveal) */
.docu-card:hover { translate: 0 -8px; scale: 1.02; rotate: -1.4deg; box-shadow: 0 26px 50px rgba(17, 16, 16, 0.22); }
.docu-card:nth-child(even):hover { rotate: 1.4deg; }
.org-tile:hover  { translate: 0 -6px; scale: 1.03; rotate: 1.6deg; box-shadow: 0 18px 38px rgba(17, 16, 16, 0.14); }
.org-tile:nth-child(even):hover { rotate: -1.6deg; }
.quote:hover     { translate: 0 -7px; scale: 1.02; rotate: 1.2deg; box-shadow: 0 24px 46px rgba(17, 16, 16, 0.26); }
.quote:nth-child(even):hover { rotate: -1.2deg; }
.brochure-blok:hover { translate: 0 -6px; scale: 1.015; rotate: -1deg; }
.pill:hover { scale: 1.12; rotate: -4deg; }
/* de hele kaart (incl. sticker) lift mee, zodat de sticker vast aan het vlak blijft
   i.p.v. los te zweven als alleen de foto zou bewegen */
.workshop-card:hover { translate: 0 -7px; scale: 1.02; rotate: 1.5deg; }
.workshop-card:nth-child(even):hover { rotate: -1.5deg; }
.workshop-photo  { transition: box-shadow 0.35s ease; }
.workshop-card:hover .workshop-photo { box-shadow: 0 22px 42px rgba(17, 16, 16, 0.22); }

/* ---------- responsive ----------
   Desktop (> 900px) blijft ongemoeid: alles hieronder is puur mobiel/tablet.
   Leidraad voor mobiel: één rustige verticale maat (64px tussen secties),
   geen enkel blok dat een heel scherm vult, en geen gaten die groter zijn dan
   de sectie-afstand zelf. */
@media (max-width: 900px) {
  section { padding: 64px 20px; }

  /* Kefir zet brede woorden: op smalle schermen paste "documentairemaker" niet
     meer en liep de kop het scherm uit. Iets kleiner + een harde noodrem. */
  h2 { font-size: clamp(1.65rem, 6.6vw, 2.5rem); }
  h1, h2, h3 { overflow-wrap: break-word; }

  .hero-kern { padding: 0 22px 40px; }
  .onvertelde-play-knop { width: 64px; height: 64px; }
  .onvertelde-play-knop::after { border-width: 10px 0 10px 17px; margin-left: 5px; }
  .quote-grid, .workshop-grid { grid-template-columns: 1fr; }
  .quote-grid { gap: 22px; }
  .workshop-grid { gap: 40px; }
  .beat { grid-template-columns: 1fr; gap: 22px; padding: 36px 0; }
  .beat-foto { max-width: 220px; }
  .beat-tekst h3 { font-size: 1.3rem; }
  .verhaal-head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }

  /* brochure onder elkaar: kop, verhaal, beeld, uitspraak, blokken */
  .lezing { padding-top: 56px; padding-bottom: 56px; }
  .brochure { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px 44px; border-radius: 24px; }
  .brochure-kop { padding-bottom: 28px; }
  .brochure-kop h2 { font-size: clamp(1.65rem, 6.4vw, 2.4rem); margin-bottom: 18px; }
  .brochure-belofte { font-size: 1.05rem; }
  .brochure-intro p { font-size: 1.02rem; }
  .brochure-quote { padding: 32px 0 32px 46px; }
  .brochure-quote::before { font-size: 3.2rem; top: 14px; }
  .brochure-blokken { grid-template-columns: 1fr; gap: 20px; }
  .brochure-blok { padding: 30px 24px; }

  /* docu-kaarten blijven altijd minstens met z'n tweeën naast elkaar: één kaart
     per scherm werd een muur van oranje */
  .docu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .fomo-strip { gap: 22px; margin-top: 44px; }
  .fomo-set { gap: 40px; padding-right: 40px; }
  .fomo-set img { height: 32px; }
  .fomo-set img.logo-klein { height: 27px; }
  .fomo-set img.logo-vierkant { height: 26px; }
  .fomo-set img.logo-breed { height: 21px; }

  .org-grid { grid-template-columns: 1fr 1fr; }
  .org-tile { padding: 30px 22px 82px; }

  /* ---- media/perskiosk ----
     De slider was zo hoog als de langste slide; korte slides hielden daardoor
     een leeg vlak over. Op mobiel krijgt het spoor de hoogte van de zichtbare
     slide (main.js), dus stopt elke slide waar zijn tekst stopt. */
  .media-widget { width: calc(100% - 32px); max-width: none; }
  .media-track {
    align-items: flex-start;
    transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1),
                height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .media-slide { grid-template-columns: 1fr; padding: 26px 22px 80px; gap: 20px; }
  /* zonder min-width:0 mag een breed beeld de kolom oprekken — dáárdoor liep de
     krantentekst het scherm uit */
  .media-slide > * { min-width: 0; }
  .slide-radio { padding: 0 0 80px; }
  .slide-video { padding: 0 0 80px; gap: 0; }
  .video-tekst { padding: 22px 22px 0; }
  .video-play { width: 56px; height: 39px; }
  .slide-vertical { grid-template-columns: 1fr; }
  .vertical-beeld { max-height: 260px; justify-content: center; }
  .vertical-beeld img { width: auto; max-width: 100%; }
  .radio-tekst { padding: 22px 22px 0; }
  .krant-pagina img { max-height: 46vh; max-width: 100%; width: auto; margin: 0 auto; }
  .online-beeld img { min-height: 0; aspect-ratio: 16 / 10; max-height: 240px; }
  .media-nav { right: 22px; left: auto; bottom: 18px; }

  .contact { padding-bottom: 48px; }
  .contact-inner { padding: 48px 24px; }
  .contact-inner > p { margin-bottom: 28px; font-size: 1.05rem; }
  .form-row { grid-template-columns: 1fr; }
  .site-footer { padding: 28px 24px 36px; }

  .site-nav a:not(.nav-cta) { display: none; }
  .site-header { padding: 14px 18px; }
  .logo { font-size: 1.05rem; }
  .nav-cta { padding: 9px 16px; font-size: 0.85rem; white-space: nowrap; }

  /* stickers: per stuk een eigen mobiel formaat + plek, zodat ze overal netjes
     over de hoek van hun vlak hangen en nooit buiten beeld vallen */
  /* op mobiel rechtsboven: de tekst vult onderin de volle breedte, daar is
     geen plek — bovenin is de video vrij */
  .sticker-award { width: 104px; top: 84px; right: 14px; bottom: auto; }
  .sticker-buitenbeentje-tag { width: 96px; top: -20px; right: -22px; }
  .sticker-eerstjezelf-tag { width: 94px; bottom: -22px; right: -22px; }
  .sticker-inclusief-tag { width: 100px; bottom: -24px; right: -2px; }
  .sticker-thx { width: 100px; bottom: -24px; right: -6px; top: auto; }
  /* zelfde verhouding als op desktop: onder het vlak uit, niet erbinnen */
  .sticker-duur { width: 112px; top: auto; bottom: -32px; left: 50%; }
  .sticker-creatives { width: 112px; top: -24px; right: -8px; }
  /* onder de kop i.p.v. ernaast: naast de kop is op mobiel geen ruimte meer,
     daar dekte de sticker het woord "Pieter" af */
  .docus .section-head { margin-bottom: 78px; }
  .sticker-echteverhalen-tag { width: 88px; top: auto; bottom: -72px; right: -4px; }
  .sticker-krant { width: 122px; top: -58px; }
}

/* telefoons: twee kaarten naast elkaar betekent smalle kaarten, dus alles in
   die kaart een maatje kleiner — anders vecht de typografie om de ruimte */
@media (max-width: 620px) {
  .docu-grid { gap: 12px; }
  .docu-card { padding: 8px 8px 2px; border-radius: 18px; }
  .docu-media { border-radius: 12px; padding: 10px; }
  .docu-stats { right: 7px; bottom: 42px; gap: 9px; }
  .docu-stats svg { width: 17px; height: 17px; }
  .docu-stats .stat { font-size: 0.6rem; gap: 2px; }
  .docu-views { font-size: 0.62rem; padding: 4px 9px; }
  .docu-below { padding: 10px 4px 8px; }
  .docu-below h3 { font-size: 0.86rem; line-height: 1.2; margin-bottom: 3px; }
  .docu-below p { font-size: 0.75rem; line-height: 1.45; }
}
@media (max-width: 560px) {
  /* org-tegels onder elkaar: 2-koloms werd te smal, het keurmerk dekte dan de tekst af */
  .org-grid { grid-template-columns: 1fr; max-width: 320px; }
  .sticker-duur { width: 122px; top: auto; bottom: -34px; left: 50%; }
}