/* ============================================================
   RENS POLMAN — PORTFOLIO
   Cinematisch donker thema · grote typografie · filmische feel
   ============================================================ */

:root {
  --bg: #0a0a0b;
  --bg-soft: #111113;
  --bg-card: #161618;
  --ink: #f4f1ec;
  --ink-dim: #9b968e;
  --accent: #ff4b26;
  /* Volgt automatisch de tekstkleur, ook als die in het beheer wordt aangepast */
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* scrollbar-gutter reserveert altijd ruimte voor de scrollbalk, ook als
   die (tijdelijk, bv. bij een open pop-up) niet getoond wordt — voorkomt
   dat de pagina-inhoud een paar pixels opschuift zodra de scrollbalk
   verdwijnt. */
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* iOS Safari blaast in liggende stand automatisch de lettergrootte van
     tekstrijke blokken op (zijn eigen "text autosizing"). Dat maakte de
     tekst in de project-pop-up op een horizontale iPhone veel te groot en
     deels onleesbaar. Op 100% forceren = onze eigen groottes respecteren,
     zonder de standaard pinch-to-zoom van de gebruiker te blokkeren. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ---------- Film grain ---------- */
.grain {
  position: fixed;
  inset: -100%;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 3%); }
  50% { transform: translate(3%, -2%); }
  75% { transform: translate(-3%, -3%); }
  100% { transform: translate(2%, 2%); }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.4rem clamp(1.25rem, 4vw, 3.5rem);
  transition: padding 0.4s;
}
/* Blur zit op een los pseudo-element i.p.v. op .nav zelf: een
   backdrop-filter/filter op .nav zou .nav een "containing block" maken
   voor position:fixed-kinderen (zoals het schermvullende mobiele menu),
   waardoor dat menu na scrollen alleen nog binnen de navbalk zou passen
   in plaats van het hele scherm. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: opacity 0.4s;
}
.nav.is-scrolled {
  padding-block: 0.9rem;
}
.nav.is-scrolled::before { opacity: 1; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__links a { position: relative; padding: 0.2rem 0; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 102;
}
.nav__burger span {
  width: 28px; height: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 7rem clamp(1.25rem, 4vw, 3.5rem) clamp(3rem, 6vh, 4.5rem);
  position: relative;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: saturate(1.05) contrast(1.02) brightness(1.12);
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Vloeiend verloop met egale, transparante zone ter hoogte van het gezicht
     (veel tussenstappen voorkomen zichtbare banden in het verloop) */
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 11, 0.4) 0%,
    rgba(10, 10, 11, 0.24) 5%,
    rgba(10, 10, 11, 0.11) 10%,
    rgba(10, 10, 11, 0.03) 15%,
    rgba(10, 10, 11, 0) 20%,
    rgba(10, 10, 11, 0) 42%,
    rgba(10, 10, 11, 0.05) 50%,
    rgba(10, 10, 11, 0.14) 58%,
    rgba(10, 10, 11, 0.27) 66%,
    rgba(10, 10, 11, 0.44) 74%,
    rgba(10, 10, 11, 0.62) 82%,
    rgba(10, 10, 11, 0.8) 90%,
    rgba(10, 10, 11, 0.94) 100%
  );
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7.5vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__line {
  display: block;
  overflow: hidden;
}
.hero__line span {
  display: block;
  transform: translateY(110%);
  animation: heroRise 1.1s var(--ease-out) forwards;
}
.hero__line--accent span {
  animation-delay: 0.12s;
}
@keyframes heroRise { to { transform: translateY(0); } }
.hero__meta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 3rem;
}
.hero__roles {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  /* Optische correctie: bij dikke/grote letters (hero__title, gewicht 900)
     ligt de linker zijdracht van de letter binnen de tekstbox verder naar
     rechts dan bij dunnere/kleinere letters (hier gewicht 600) — zonder
     deze marge oogt VIDEOMAKER te ver naar links t.o.v. RENS POLMAN,
     terwijl de CSS-boxen zelf al exact gelijk uitlijnen. */
  margin-left: clamp(0.15rem, 0.32vw, 0.3rem);
}
.hero__roles-accent { color: var(--accent); }
@keyframes filmstrip {
  to { transform: translateX(-50%); }
}

/* ---------- Clients marquee ---------- */
.clients {
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}
/* Animatie start pas via JS zodra document.fonts.ready — zie main.js */
.marquee__track.is-running {
  animation: filmstrip 36s linear infinite;
  will-change: transform;
}
.marquee__track i {
  font-style: normal;
  color: var(--accent);
  font-size: 0.75em;
}
/* Spatiëring via margin-right op elk element, bewust NIET via flex-gap:
   de baan loopt naadloos door translateX(-50%), en dat vereist dat de
   eerste kopie van de namenlijst precies de helft van de totale breedte
   is. Met gap ontbreekt de ruimte ná het allerlaatste element, waardoor
   het -50%-punt een halve gap te vroeg lag — één zichtbare schok per
   omloop (elke 36s). Met een eigen rechtermarge per element telt die
   ruimte wél mee en sluit de loop exact aan. */
.marquee__track span,
.marquee__track i {
  margin-right: 2.6rem;
}

/* ---------- Section head ---------- */
.section-head {
  padding: clamp(3.2rem, 7.5vw, 6rem) clamp(1.25rem, 4vw, 3.5rem) 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 2.5rem;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ---------- Work ---------- */
.work { border-bottom: 1px solid var(--line); }
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.4rem);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(4rem, 8vw, 6.5rem);
}
.card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  /* Voorkomt een renderingnaadje aan de ronde randen tijdens/na
     het zoomen van de foto (bekend browserprobleem bij
     overflow:hidden + border-radius + een geanimeerde child) */
  isolation: isolate;
  cursor: pointer;
  background: var(--bg-card);
  border: none;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  display: block;
  width: 100%;
}
.card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.card:hover .card__media img {
  transform: scale(1.06);
}
.card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem 1.3rem;
  /* Meerdere tussenstappen (i.p.v. 2 stops) + volledig dekkend aan de
     onderrand, zodat de foto er nooit doorheen kan schemeren */
  background: linear-gradient(
    180deg,
    rgba(10, 10, 11, 0) 48%,
    rgba(10, 10, 11, 0.3) 66%,
    rgba(10, 10, 11, 0.6) 80%,
    rgba(10, 10, 11, 0.85) 92%,
    rgba(10, 10, 11, 1) 100%
  );
  opacity: 1;
  transition: opacity 0.4s;
}
.card__client {
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.325rem);
  line-height: 1.15;
  text-transform: uppercase;
}

/* ---------- Werk: ingeklapt grid + "Laat meer zien" ----------
   Standaard staat het grid ingeklapt (class .work--ingeklapt, gezet door
   main.js zodra er meer projecten zijn dan er ingeklapt passen): alleen de
   eerste paar rijen zijn zichtbaar, met daaronder de "Laat meer zien"-knop.
   Hoeveel kaarten zichtbaar blijven verschilt per kolomaantal (zie de
   responsive-regels onderaan dit bestand) zodat het altijd op hele rijen
   uitkomt. Eén klik haalt de class weg en ontvouwt de rest. */
.work__meer { display: none; }
.work--ingeklapt .work__meer {
  display: flex;
  justify-content: center;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(4rem, 8vw, 6.5rem);
}
/* De onderruimte van de sectie zit ingeklapt bij de knop, niet bij het grid */
.work--ingeklapt .work__grid { padding-bottom: clamp(1.8rem, 3vw, 2.6rem); }
/* De eerstvolgende rij is ingeklapt nog nét te zien: alleen de bovenkant,
   naar onderen uitdovend in de achtergrondkleur, als hint dat er meer werk
   onder de knop zit. Die peek-kaarten zijn pas klikbaar ná het ontvouwen.
   Het uitdoven gaat via een gradient-overlay (::after) naar var(--bg) en
   niet via mask-image — een mask op deze kaarten liet de hele sectie zwart
   renderen in de embedded-Chromium-preview, en de achtergrond is toch
   effen, dus dit oogt identiek. Client/titel-tekst (.card__overlay) wordt
   op deze kaarten verborgen: die tekst is altijd onderaan de kaart
   gepositioneerd (justify-content: flex-end), en door de sterk verlaagde
   hoogte hier kwam die tekst juist wél binnen het nog zichtbare stukje
   terecht — precies boven de knop, wat verwarrend oogde. */
.work--ingeklapt .card:nth-child(n + 13) {
  height: clamp(70px, 9vw, 115px);
  pointer-events: none;
}
.work--ingeklapt .card:nth-child(n + 13) .card__overlay { display: none; }
.work--ingeklapt .card:nth-child(n + 13)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 35%, transparent),
    var(--bg) 96%
  );
}
/* 3 kolommen (desktop): 4 rijen + peek-rij = 15 kaarten, rest verborgen */
.work--ingeklapt .card:nth-child(n + 16) { display: none; }
/* .btn is geschreven voor <a>; hier zit 'ie op een <button> */
button.btn { border: none; cursor: pointer; }
/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
  row-gap: 0;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(4rem, 9vw, 7.5rem);
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.about > .section-head {
  grid-column: 1 / -1;
  padding-inline: 0;
}
.about__media {
  position: sticky;
  top: 7rem;
  border-radius: 10px;
  overflow: hidden;
}
.about__media img {
  width: 100%;
  filter: saturate(0.9) contrast(1.03);
}
.about__paras p {
  color: var(--ink-dim);
  margin-bottom: 1.3rem;
}
/* Liggende foto onder de Over-tekst */
.about__media-extra {
  margin-top: 2.2rem;
  border-radius: 10px;
  overflow: hidden;
}
.about__media-extra img {
  width: 100%;
  filter: saturate(0.9) contrast(1.03);
}

/* ---------- Speaker ---------- */
.speaker {
  border-bottom: 1px solid var(--line);
}
.speaker__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(4rem, 9vw, 7rem);
}
.speaker__left {
  display: grid;
  gap: 2rem;
  align-content: start;
}
.speaker__video {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.speaker__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.speaker__text p {
  margin-bottom: 1.2rem;
  color: var(--ink-dim);
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  /* Expliciet i.p.v. overgeërfd: <a> en <button> krijgen van de browser een
     andere standaard line-height (button's UA-stijl negeert de line-height
     van .btn's voorouders), waardoor de knoppen anders hoog uitvielen en de
     tekst niet overal even goed gecentreerd stond. Met een vaste waarde
     hier renderen alle knoppen — of het nu een <a> of <button> is —
     precies even hoog. */
  line-height: 1;
  background: var(--ink);
  color: var(--accent);
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  margin-top: 0.8rem;
  transition: transform 0.3s var(--ease-out);
}
/* Zelfde oranje hover-streep als de menuknoppen (.nav__links a::after),
   voor een consistente hover-stijl door de hele site heen — hier binnen
   de knop zelf i.p.v. eronder. */
.btn::after {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem; bottom: 0.45rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.btn:hover { transform: translateY(-3px); }
.btn:hover::after { transform: scaleX(1); transform-origin: left; }
/* "Laat meer zien" hoeft niet mee te liften op hover — enkel de oranje
   hover-streep (via .btn:hover::after hierboven) blijft voor deze knop. */
#toonMeerKnop:hover { transform: none; }
/* Dubbele pijltjes naast "Laat meer zien": zelfde visuele hint als een
   accordeon-chevron, maar dan als knipoog naar het handgetekende dubbele
   V-schetsje dat hiervoor als voorbeeld diende. Bewust géén eigen
   hover-transform op het icoon (zie #toonMeerKnop:hover hierboven). */
.btn__chevrons {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
}

/* ---------- Contact ---------- */
.contact {
  text-align: center;
  padding: clamp(5rem, 11vw, 9rem) clamp(1.25rem, 4vw, 3.5rem);
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.contact__email { margin-top: 2.6rem; }
.contact__socials {
  margin-top: 2.4rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}
.contact__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  transition: color 0.3s, border-color 0.3s;
}
.contact__socials a:hover { color: var(--accent); border-color: var(--accent); }
.contact__socials svg { width: 1.3rem; height: 1.3rem; }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 2.5rem);
  visibility: hidden;
  opacity: 0;
  /* Zelfde patroon als het mobiele menu (.nav__links): visibility klapt bij
     het openen direct om (0s 0s) en wacht bij het sluiten op de fade (0s
     0.35s). Zo kan de sluitknop meteen bij openen focus krijgen — met een
     'transition: visibility 0.35s' is de modal op dat moment formeel nog
     hidden en doet focus() niets. */
  transition: opacity 0.35s, visibility 0s 0.35s;
}
.modal.is-open { visibility: visible; opacity: 1; transition: opacity 0.35s, visibility 0s 0s; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal__panel {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: min(960px, 100%);
  max-height: 92svh;
  overflow-y: auto;
  transform: translateY(24px) scale(0.985);
  transition: transform 0.4s var(--ease-out);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 2;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10,10,11,0.7);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.modal__close:hover { background: var(--accent); transform: rotate(90deg); }
.modal__media {
  background: #000;
  aspect-ratio: 16 / 9;
  position: relative;
}
.modal__media iframe, .modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
/* Staande video's (TikTok, Instagram): info links, video rechts */
.modal__panel--portrait {
  display: flex;
  align-items: stretch;
  width: min(880px, 100%);
}
.modal__panel--portrait .modal__body {
  flex: 1;
  align-self: center;
}
.modal__media--portrait {
  order: 2;
  flex: 0 0 auto;
  aspect-ratio: auto;
  height: min(72svh, 660px);
  display: flex;
  justify-content: center;
}
.modal__media--portrait iframe {
  width: calc(min(72svh, 660px) * 0.62);
  height: 100%;
}
/* TikTok's embed-widget heeft een vaste, niet-responsieve kaartgrootte
   (325×738px — getest, schaalt zelf niet mee met de iframe-afmeting).
   Die exacte verhouding aanhouden en als geheel schalen voorkomt zowel
   witte randen (verkeerde breedte/hoogte-verhouding) als afgesneden
   content (te weinig hoogte) — schaalfactor is puur CSS, geen JS nodig. */
.modal__media--tiktok {
  --tiktok-scale: min(1, calc(min(72svh, 660px) / 738px));
  position: relative;
  width: calc(325px * var(--tiktok-scale));
  height: calc(738px * var(--tiktok-scale));
  overflow: hidden;
}
.modal__media--tiktok iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 325px;
  height: 738px;
  transform: scale(var(--tiktok-scale));
  transform-origin: top left;
}
/* Instagram's /embed/-iframe toont ook de kopregel (profielfoto, naam) en
   voettekst (likes, reactievak) eromheen, geen losse video — en is dus
   véél hoger dan de eigenlijke video. De aanname van .modal__media--portrait
   (breedte = hoogte × 0.62, alsof het om kale video gaat) klopte daardoor
   niet en sneed de voettekst af. Net als bij TikTok: vaste, geteste
   kaartgrootte (340×660px) aanhouden en als geheel schalen. */
.modal__media--instagram {
  --instagram-scale: min(1, calc(min(72svh, 660px) / 660px));
  position: relative;
  width: calc(340px * var(--instagram-scale));
  height: calc(660px * var(--instagram-scale));
  overflow: hidden;
}
.modal__media--instagram iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 660px;
  transform: scale(var(--instagram-scale));
  transform-origin: top left;
}
/* Facebook's video-plugin (zie hierboven, width=340&height=605 in de link)
   staande kaart, zelfde schaal-aanpak als TikTok en Instagram. */
.modal__media--facebook {
  --facebook-scale: min(1, calc(min(72svh, 660px) / 605px));
  position: relative;
  width: calc(340px * var(--facebook-scale));
  height: calc(605px * var(--facebook-scale));
  overflow: hidden;
}
.modal__media--facebook iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 605px;
  transform: scale(var(--facebook-scale));
  transform-origin: top left;
}
/* Smal scherm: terug naar gestapeld, video boven */
@media (max-width: 700px) {
  .modal__panel--portrait { display: block; }
  .modal__media--portrait { height: min(62svh, 560px); }
  .modal__media--portrait iframe { width: min(100%, calc(min(62svh, 560px) * 0.62)); }
  .modal__media--tiktok {
    --tiktok-scale: min(1, calc(min(62svh, 560px) / 738px));
    margin-inline: auto;
  }
  .modal__media--instagram {
    --instagram-scale: min(1, calc(min(62svh, 560px) / 660px));
    margin-inline: auto;
  }
  .modal__media--facebook {
    --facebook-scale: min(1, calc(min(62svh, 560px) / 605px));
    margin-inline: auto;
  }
  /* Overschrijft de generieke iframe-breedte hierboven: de vaste kaarten
     moeten op hun natuurlijke breedte blijven staan, anders klopt de
     schaalberekening niet meer. */
  .modal__media--tiktok iframe { width: 325px; }
  .modal__media--instagram iframe { width: 340px; }
  .modal__media--facebook iframe { width: 340px; }
}
/* Foto met play-knop die de video extern opent.
   Vult de media absoluut (inset: 0) i.p.v. met height: 100%. Reden: iOS Safari
   lost een procentuele hoogte op een gewoon blok-element niet op tegen een
   ouder die zijn hoogte alleen uit aspect-ratio haalt — dan klapt deze laag in
   en verdwijnt de play-knop. Absoluut vullen werkt daar wél (vandaar ook
   position: relative op .modal__media hierboven). */
.modal__extern {
  position: absolute;
  inset: 0;
  display: block;
}
.modal__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s var(--ease-out);
}
.modal__play svg {
  width: 34px;
  height: 34px;
  fill: #fff;
  /* De driehoek wijst naar rechts en oogt daardoor links-zwaar; een klein
     duwtje naar rechts laat 'm optisch in het midden van de cirkel staan. */
  margin-left: 3px;
}
.modal__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}
.modal__body { padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.modal__client {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  text-transform: uppercase;
  line-height: 1.05;
}
.modal__stat {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.modal__stat:empty { display: none; }
.modal__desc {
  margin-top: 1rem;
  color: var(--ink-dim);
}
.modal__serie {
  margin-top: 0.8rem;
  color: var(--ink-dim);
}
.modal__serie:empty { display: none; }
.modal__serie a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.modal__roles {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
.modal__roles span {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
body.modal-open { overflow: hidden; }

/* ---------- Reveal animaties ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.card.reveal { transition-delay: calc(var(--stagger, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__line span { transform: none; }
}

/* Geen overgangsanimaties tijdens het resizen van het venster */
body.resizing *,
body.resizing *::before,
body.resizing *::after {
  transition: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  /* 2 kolommen: 6 rijen zichtbaar + kaart 13-14 als peek-rij, rest verborgen
     (de grenzen worden per breakpoint alleen maar strenger, dus deze regels
     kunnen gewoon bovenop de desktop-regels stapelen) */
  .work--ingeklapt .card:nth-child(n + 13) {
    height: clamp(70px, 9vw, 115px);
    pointer-events: none;
  }
  .work--ingeklapt .card:nth-child(n + 13) .card__overlay { display: none; }
  .work--ingeklapt .card:nth-child(n + 13)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 35%, transparent),
      var(--bg) 96%
    );
  }
  .work--ingeklapt .card:nth-child(n + 15) { display: none; }
  .about { grid-template-columns: 1fr; }
  /* row-gap van .about staat op 0 (voor gelijke kop-afstand), dus de
     ruimte tussen foto en tekst moet hier van de foto zelf komen —
     vergelijkbaar met de gap in .speaker__inner. */
  .about__media { position: static; max-width: 460px; margin-bottom: clamp(2rem, 5vw, 4rem); }
  .speaker__inner { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .nav__links {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 11, 0.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    font-size: 1.5rem;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease-out), visibility 0s 0.5s;
    z-index: 101;
  }
  .nav__links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.5s var(--ease-out), visibility 0s 0s;
  }
  .nav__burger { display: flex; }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
  .work__grid { grid-template-columns: 1fr; }
  /* 1 kolom (mobiel): 10 kaarten zichtbaar + kaart 11 als peek, rest verborgen.
     Hoger dan op desktop/tablet (9vw blijft op mobiele breedtes altijd onder
     de ondergrens hangen, dus daar was nauwelijks iets van de foto te zien) —
     alleen de hoogte is aangepast, de gradient zelf (zie ::after) niet. */
  .work--ingeklapt .card:nth-child(n + 11) {
    height: clamp(95px, 14vw, 130px);
    pointer-events: none;
  }
  .work--ingeklapt .card:nth-child(n + 11) .card__overlay { display: none; }
  .work--ingeklapt .card:nth-child(n + 11)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 35%, transparent),
      var(--bg) 96%
    );
  }
  .work--ingeklapt .card:nth-child(n + 12) { display: none; }
  .hero__roles { font-size: 0.82rem; letter-spacing: 0.08em; white-space: normal; }
  .hero__meta { gap: 0.8rem; }
  /* Minder ruimte tussen de opdrachtgevers: op een smal scherm passen er
     anders maar 1 à 2 namen tegelijk in beeld. */
  .marquee__track span,
  .marquee__track i { margin-right: 1.3rem; }
  /* Portret bij Over neemt op een smal scherm te veel ruimte in boven de
     tekst — hier wat kleiner en gecentreerd. */
  .about__media { max-width: 260px; margin-inline: auto; }
}