/* ============================================================
   FILM NOMADS — stijl
   Kleuren en lettertypes staan hieronder bij :root.
   ============================================================ */

@font-face { font-family: Almaq; font-weight: 700; font-display: swap; src: url(assets/fonts/almaq.woff2) format("woff2"); }
@font-face { font-family: Oswald; font-weight: 400; font-display: swap; src: url(assets/fonts/oswald-v49-latin-regular.woff2) format("woff2"); }
@font-face { font-family: Oswald; font-weight: 700; font-display: swap; src: url(assets/fonts/oswald-v49-latin-700.woff2) format("woff2"); }

:root {
  --blue: #27618f;
  --blue-dark: #1b4a6f;
  --pink: #d91c5c;
  --night: #040203;
  --white: #fff;
  --radius: 16px;
  --heading: Almaq, "Arial Black", sans-serif;
  --body: Oswald, "Arial Narrow", sans-serif;
  --bounce: cubic-bezier(.215, .61, .355, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blue);
  color: var(--white);
  font: 400 18px/1.55 var(--body);
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--heading); text-transform: uppercase; line-height: 1; margin: 0 0 .5em; }
h2 { font-size: clamp(40px, 6vw, 60px); }
h3 { font-size: 30px; }
h4 { font-size: 20px; }
.lead { font-size: 20px; max-width: 620px; }

.container { width: min(1140px, 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }
.container.narrow { width: min(760px, 100% - 32px); }
.block { position: relative; padding: 96px 0; overflow-x: clip; }
html { overflow-x: clip; background: var(--night); }
section[id], footer[id] { scroll-margin-top: 72px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 14px 24px; background: var(--blue);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgb(0 0 0 / .25); }
.site-header .logo { grid-column: 2; }
.site-header .logo img { height: 44px; width: auto; }
.site-header nav { grid-column: 3; justify-self: end; display: flex; gap: 24px; }
.site-header nav a { text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 16px; }
.site-header nav a:hover { color: var(--pink); }

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 2; height: calc(100svh - 72px); min-height: 360px; background: var(--night); overflow: hidden; }
.hero video { width: 100%; height: 100%; object-fit: cover; }
/* Tekst over de headervideo */
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(4 2 3 / .1) 40%, rgb(4 2 3 / .6)); pointer-events: none; }
/* In het onderste derde: het midden van de kadering blijft vrij voor de beelden */
.hero-copy {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(80px, 10vh, 120px);
  text-align: center; padding: 0 20px;
}
.hero-kicker { margin: 0 0 6px; font: 700 clamp(22px, 3vw, 40px)/1 var(--body); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 20px rgb(0 0 0 / .4); }
.hero-rotator { position: relative; display: grid; margin: 0; font-size: clamp(40px, 7vw, 96px); line-height: 1; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.hero-rotator span { grid-area: 1 / 1; opacity: 0; translate: 0 60%; transition: opacity .5s, translate .7s cubic-bezier(.22, 1, .36, 1); }
.hero-rotator span.on { opacity: 1; translate: 0 0; }
.hero-rotator span.off { opacity: 0; translate: 0 -60%; }
.hero-cta { margin-top: 28px; font-size: 17px; padding: 12px 26px; text-decoration: none; box-shadow: 0 8px 22px rgb(0 0 0 / .3); }
.hero-cta:hover { color: var(--white); }
.scroll-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 28px; height: 44px; margin-left: -14px;
  border: 3px solid var(--white); border-radius: 14px;
}
.scroll-cue::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  background: var(--white); border-radius: 2px; animation: cue 1.6s infinite;
}
@keyframes cue { to { transform: translateY(14px); opacity: 0; } }
/* Staand scherm (9:16-header): tekst nog iets lager, scroll-icoontje kleiner */
@media (orientation: portrait) {
  .hero-copy { bottom: 76px; }
  .scroll-cue { bottom: 18px; width: 24px; height: 38px; margin-left: -12px; }
}

/* ---------- Intro ---------- */
/* Schuin roze vlak (zoals huidige site) */
.pink-bg {
  position: absolute; inset: 0; z-index: 0; background: var(--pink);
  clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 86%);
}
/* Het roze vlak valt links een stukje over de headervideo heen */
.intro { z-index: 2; margin-top: -90px; padding: 180px 0 170px; }
.intro .container { z-index: 4; } /* cases en tekst boven de blauwe bumper */
/* Rechts begint het roze net boven de onderkant van de video, zodat er geen blauw strookje overblijft */
.intro .pink-bg { clip-path: polygon(0 0, 100% 72px, 100% 100%, 0 86%); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.intro-grid .text { align-self: center; padding: 24px; }
.intro-copy p { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45; } /* iets groter dan de gewone tekst */
.intro-copy .intro-kicker { margin: 0 0 10px; font: 700 clamp(16px, 1.4vw, 20px)/1 var(--body); text-transform: uppercase; letter-spacing: .08em; }
.intro-copy h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.02; text-wrap: balance; }
/* Tekst schuift van achter de eerste video naar rechts */
.intro-grid > .slot:first-child { position: relative; z-index: 2; }

/* ---------- Cases in het tekstvak ---------- */
.intro-grid .text { transition: opacity .22s, translate .22s; }
.intro-grid .text.swap-out { opacity: 0; translate: -24px 0; }
.intro-grid .text.swap-in { animation: caseIn .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes caseIn { from { opacity: 0; translate: 30px 0; } }
.case-kicker { display: inline-block; background: var(--white); color: var(--pink); font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; }
.case-copy h2 { margin: 10px 0 4px; }
.case-title { font: 700 20px var(--body); text-transform: uppercase; margin: 0 0 18px; opacity: .9; }
.case-via { margin: -12px 0 18px; font-size: 14px; opacity: .8; font-style: italic; }
/* Labels: soort video (gevuld) en onze rol (omlijnd) */
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; padding: 0; list-style: none; }
.case-tags li { font: 700 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; border: 2px solid rgb(255 255 255 / .7); }
/* Soort video: klein kopje boven de klantnaam, met een schermpje ervoor */
.case-soort { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.case-soort::before { content: ""; width: 14px; height: 10px; border: 2px solid currentColor; border-radius: 3px; }
.case-copy dl { margin: 0; display: grid; gap: 12px; }
.case-copy dt { font: 700 13px var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.case-copy dd { margin: 2px 0 0; font-size: 17px; line-height: 1.45; }
.case-copy .tbd { font-style: italic; opacity: .6; }
.case-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.case-actions .case-play { background: var(--white); color: var(--pink); border: 0; cursor: pointer; font: 700 15px var(--body); text-transform: uppercase; }
.case-back { background: none; border: 0; color: var(--white); cursor: pointer; font: 700 14px var(--body); text-transform: uppercase; opacity: .8; }
.case-back:hover { opacity: 1; text-decoration: underline; }
.video-card.active { box-shadow: 0 0 0 4px var(--white), 0 16px 40px rgb(0 0 0 / .25); }

/* ---------- Shake it up (rechtsonder, naast de derde video) ---------- */
.intro-grid { position: relative; }
.shake { position: absolute; right: -30px; bottom: -96px; display: flex; align-items: center; gap: 10px; z-index: 3; }
.shake-note { font: 700 18px/1 "Kalam", "Comic Sans MS", cursive; rotate: -8deg; white-space: nowrap; }
.big-red {
  position: relative; flex: none; width: 76px; height: 57px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); animation: nudge 4s 3s infinite;
}
.big-red svg { width: 100%; height: 100%; overflow: visible; }
.big-red .cap { transition: transform .08s; }
.big-red:hover .cap { filter: brightness(1.1); }
.big-red:active .cap { transform: translateY(6px); }
@keyframes nudge { 0%, 90%, 100% { translate: 0 0; } 93% { translate: 0 -5px; } 96% { translate: 0 1px; } }
.intro-grid.shaking .slot { animation: shake .6s cubic-bezier(.36, .07, .19, .97) both; }
.intro-grid.shaking .slot:nth-of-type(2) { animation-delay: .05s; }
.intro-grid.shaking .slot:nth-of-type(3) { animation-delay: .1s; }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px) rotate(-1deg); }
  20%, 80% { transform: translate(4px, -2px) rotate(2deg); }
  30%, 50%, 70% { transform: translate(-8px, 3px) rotate(-3deg); }
  40%, 60% { transform: translate(8px, -3px) rotate(3deg); }
}
.slot.pop { animation: bounceIn .8s both; }
@media (prefers-reduced-motion: reduce) { .big-red { animation: none; } .intro-grid.shaking .slot, .slot.pop { animation: none; } }
.intro-grid .text { position: relative; z-index: 1; }

.video-card {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 9; background: var(--night); box-shadow: 0 16px 40px rgb(0 0 0 / .25);
  border: 0; padding: 0; width: 100%; color: inherit; font: inherit;
  cursor: url(assets/img/cursor-play.svg) 4 18, pointer;
}
.video-card video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--bounce); }
.video-card:hover video { transform: scale(1.04); }
/* Kleine, subtiele playknop linksonder: het beeld blijft vrij. Bij hover verdwijnt hij, dan speelt de video. */
.video-card .play {
  position: absolute; left: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgb(255 255 255 / .22); border: 1.5px solid rgb(255 255 255 / .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .25s, transform .3s var(--bounce);
}
.video-card .play::after {
  content: ""; position: absolute; left: 12px; top: 9px;
  border-left: 11px solid var(--white); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.video-card:hover .play { opacity: 0; transform: scale(.8); }
/* Naam verschijnt pas bij hover, onder de playknop */
.video-card .label {
  position: absolute; left: 50%; top: calc(50% + 48px); translate: -50% 8px; opacity: 0; max-width: 92%;
  font: 700 clamp(26px, 3.1vw, 44px)/1 var(--heading); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  text-shadow: 0 1px 10px rgb(0 0 0 / .7); pointer-events: none;
  transition: opacity .25s, translate .35s var(--bounce);
}
.video-card:hover .label { opacity: 1; translate: -50% 0; }
.label-kicker {
  display: block; width: max-content; margin: 0 auto 6px; padding: 3px 10px; border-radius: 99px;
  background: var(--white); color: var(--pink); font: 700 12px/1.2 var(--body); letter-spacing: .14em; font-style: normal; text-shadow: none;
}
.video-card.clicked .label { opacity: 0; }
.video-card.vertical { aspect-ratio: 9 / 16; }
.video-card.portrait::before {
  content: ""; position: absolute; inset: -30px; background: var(--fill) center / cover;
  filter: blur(22px) brightness(.55);
}
.video-card.portrait video { position: relative; object-fit: contain; }
.video-card.portrait .play, .video-card.portrait .label { z-index: 2; }
.video-card .card-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .25s; }
.video-card.has-thumb .card-thumb { opacity: 1; }
.video-card.has-thumb.is-playing .card-thumb { opacity: 0; }
.video-card .play, .video-card .label { z-index: 2; }

/* ---------- Klanten ---------- */
/* Witte balk met afgeronde punt, valt van boven over het roze vlak */
/* z-index lager dan .intro: de balk zakt onder het roze vlak vandaan */
.clients { position: relative; z-index: 1; margin-top: -150px; height: 260px; }
.clients::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: var(--white); z-index: -1; }
.clients-row {
  position: relative; height: 100%; margin-left: 30%; padding: 120px 0 0 24px;
  background: var(--white); display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.clients-row::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -150px; width: 200px; z-index: -1;
  background: url(assets/img/client-before.svg) no-repeat left bottom / cover;
}
.belt-note { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 14px; }
.belt-line { width: 2px; height: 38px; border-radius: 2px; background: var(--blue); }
.belt-note-text {
  font: 700 10px/1.35 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); text-align: right; white-space: nowrap;
}
/* Lopende band */
.belt {
  position: relative; z-index: 1; flex: 1; min-width: 0; overflow: hidden; padding: 8px 0;
  margin-left: -23px; /* rand van de band valt precies onder het streepje */
  /* links een harde rand (achter het streepje), rechts zacht uitfaden */
  -webkit-mask: linear-gradient(90deg, #000, #000 93%, #0000);
          mask: linear-gradient(90deg, #000, #000 93%, #0000);
}
.belt-track { display: flex; width: max-content; animation: belt 40s ease-in-out infinite alternate; }
.belt:hover .belt-track { animation-play-state: paused; }
.belt-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.belt-set img { height: 36px; width: auto; object-fit: contain; transition: transform .3s var(--bounce); }
.belt-set img:hover, .logo-text:hover { transform: translateY(-6px) rotate(-3deg); }
.logo-text {
  font: 700 26px/1 var(--heading); text-transform: uppercase; color: var(--night); white-space: nowrap;
  transition: transform .3s var(--bounce);
}
@keyframes belt { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .belt-track { animation-duration: 200s !important; } }

/* ---------- Bumpers: de afgeronde pijlvormen die van de zijkant binnenvliegen ---------- */
.bumper { position: absolute; z-index: 3; pointer-events: none; background-repeat: no-repeat; background-size: cover; }
.hero-right    { right: -2rem; top: 20px; width: 132px; height: 446px; background-image: url(assets/img/arrowpoint-right-blue.svg); background-position: left top; }
.left-pink     { left: -2rem;  top: 48px;  width: 133px; height: 240px; background-image: url(assets/img/arrowpoint-left-pink.svg);  background-position: right top; }
.right-pink    { right: -2rem; top: -2rem; width: 124px; height: 260px; background-image: url(assets/img/arrowpoint-right-pink.svg); }
.left-pink-02  { left: -2rem;  top: 10%;   width: 145px; height: 229px; background-image: url(assets/img/arrowpoint-left-pink-02.svg); background-position: right top; }
.right-blue-02 { right: -2rem; top: 3rem;  width: 190px; height: 283px; background-image: url(assets/img/arrowpoint-right-blue-02.svg); }
.club .right-pink { top: auto; bottom: 8%; }
.reviews-bumper { top: 0; }

/* ---------- NIEUW: Creatieve club ---------- */
/* Subtiele stippellijn áchter de kaartjes langs */
.route-wrap { position: relative; }
.route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.route-line { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 8; }
.route-reveal { fill: none; stroke: #fff; stroke-width: 12; }
.route-dot { fill: #fff; filter: drop-shadow(0 0 6px rgb(255 255 255 / .9)); transition: opacity .5s; }
/* Kaart 2 en 3 staan "op slot" tot de route erlangs komt */
.step .visual, .step .txt { transition: filter .9s ease, opacity .9s ease; }
.step.locked .visual, .step.locked .txt { filter: brightness(.45) saturate(.3); opacity: .55; }
.steps, .club-cta { position: relative; z-index: 1; }
/* Beeld zoomt langzaam in bij hover */
.step .visual img { transition: scale 1.8s ease-out; }
.step:hover .visual img { scale: 1.08; }
@media (max-width: 899px) { .club-cta { justify-content: center; } }
/* Schuin afgesneden achtergrond, net als de roze vlakken */
.club { padding: 150px 0 160px; }
.club .container { z-index: 4; } /* blokken boven de roze bumper */
.club-bg {
  position: absolute; inset: 0; z-index: 0; background: var(--blue-dark);
  clip-path: polygon(0 9%, 100% 0, 100% 88%, 0 100%);
}
.club-head { display: block; max-width: 900px; }
.club-head .lead { margin: 18px 0 0; max-width: 640px; }
.club-kicker { display: inline-block; margin: 0 0 14px; font: 400 20px/1 "Kalam", "Comic Sans MS", cursive; background: var(--white); color: var(--pink); padding: 6px 12px; border-radius: 8px; rotate: -3deg; }
.club-head h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; margin: 0; }
.step p { font-size: 17px; }
/* Getekend voorbeeld: een feed met jouw video ertussen */
.mock-phone { position: absolute; left: 50%; top: 10%; width: 34%; height: 110%; translate: -50% 0; background: var(--night); border-radius: 16px; border: 4px solid var(--night); display: grid; gap: 5px; padding: 6px; align-content: start; overflow: hidden; }
.mock-post { height: 38px; border-radius: 6px; background: #3a3f4a; animation: feedScroll 3.2s ease-in-out infinite; }
/* Jouw video springt eruit: disco-kleuren, gloed en een klein popje */
.mock-post.you {
  height: 56px; position: relative; z-index: 1;
  background: linear-gradient(120deg, #ff3b8d, #ffe03b, #36c9ff, #8a4bff, #ff3b8d); background-size: 300% 300%;
  box-shadow: 0 0 18px 4px rgb(255 59 141 / .55);
  animation: feedScroll 3.2s ease-in-out infinite, discoFlow 2.4s linear infinite, youPop 3.2s ease-in-out infinite;
}
@keyframes discoFlow { to { background-position: 300% 0; } }
@keyframes youPop { 0%, 55% { scale: 1; } 70% { scale: 1.12; } 85%, 100% { scale: 1.04; } }
.mock-post:not(.you) { opacity: .7; }
@keyframes feedScroll { 0%, 30% { translate: 0 0; } 60%, 100% { translate: 0 -44px; } }
/* Getekend voorbeeld: kijktijd-balk die volloopt */
.mock-player { position: absolute; left: 12%; right: 12%; top: 18%; bottom: 22%; background: var(--night); border-radius: 12px; }
.mock-play { position: absolute; left: 50%; top: 42%; translate: -50% -50%; border-left: 22px solid var(--white); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.mock-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px; border-radius: 99px; background: #3a3f4a; overflow: hidden; }
.mock-bar span { display: block; height: 100%; width: 0; background: var(--pink); border-radius: 99px; animation: watchFill 4s ease-out infinite; }
@keyframes watchFill { 0% { width: 4%; } 70%, 100% { width: 92%; } }
/* Pitch deck met een rond videobericht (jij, ingesproken) in de hoek */
.mock-bubble {
  position: absolute; right: 12%; bottom: 20%; width: 64px; height: 64px; border-radius: 50%;
  background: center 30% / cover url(assets/img/vac/sjoerd.jpg); border: 3px solid var(--white);
  box-shadow: 0 6px 16px rgb(0 0 0 / .35); animation: bubblePulse 2.4s ease-in-out infinite;
}
.mock-bubble span { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--pink); border: 2px solid var(--white); }
@keyframes bubblePulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.mock-q { position: absolute; right: 16%; top: 18%; font: 700 46px/1 var(--heading); color: var(--white); rotate: 12deg; text-shadow: 0 4px 12px rgb(0 0 0 / .3); }
.club-video:not(:empty) { margin-top: 40px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.step { background: var(--blue); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.step .visual { aspect-ratio: 16 / 9; background: var(--pink); position: relative; overflow: hidden; }
.step .txt { padding: 20px; }
.step .nr { font: 700 14px var(--body); color: var(--pink); background: var(--white); border-radius: 99px; padding: 2px 10px; }
.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.step h3 { font-size: 24px; margin: 0; }
.step p { margin: 0; font-size: 16px; }
/* Smaller: de drie blokken krimpen mee */
@media (max-width: 900px) {
  .steps { gap: 14px; }
  .step .txt { padding: 14px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 15px; line-height: 1.4; }
}
/* Telefoon: swipen tussen de blokken, het volgende blok piept erin */
@media (max-width: 640px) {
  .steps {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -16px; padding: 0 16px 24px; scroll-padding-inline: 16px;
  }
  .steps::-webkit-scrollbar { display: none; }
  .step { flex: 0 0 78%; scroll-snap-align: start; }
  .step h3 { font-size: 22px; }
  .step p { font-size: 16px; }
}
.steps-dots { display: none; justify-content: center; gap: 10px; margin-top: 4px; }
.steps-dots button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); background: none; cursor: pointer; padding: 0; }
.steps-dots button.active { background: var(--white); }
@media (max-width: 640px) { .steps-dots { display: flex; } }

/* Placeholder-visuals (vervang later door echte beelden van decks/storyboards) */
.mock { position: absolute; background: var(--white); border-radius: 6px; box-shadow: 0 8px 20px rgb(0 0 0 / .25); transition: transform .5s var(--bounce); }
.step:hover .mock:nth-child(1) { transform: rotate(-6deg) translateY(-6px); }
.step:hover .mock:nth-child(2) { transform: rotate(4deg) translateY(-4px); }
.mock.slide { width: 62%; aspect-ratio: 16/9; }
.mock.slide::before { content: ""; position: absolute; left: 8%; top: 14%; width: 44%; height: 12%; background: var(--night); border-radius: 2px; }
.mock.slide::after { content: ""; position: absolute; right: 8%; top: 14%; width: 34%; height: 70%; background: var(--blue); border-radius: 3px; }
.mock.frame { width: 26%; aspect-ratio: 4/3; border: 3px solid var(--night); }
.mock.frame::after { content: ""; position: absolute; inset: 20% 25%; border-radius: 50%; background: var(--blue); opacity: .5; }
.mock.sheet { width: 48%; height: 78%; padding: 10%; background: repeating-linear-gradient(#fff 0 12%, #dfe5ec 12% 14%); }
.mock.fmt { background: var(--night); border: 3px solid var(--white); }
.visual-label { position: absolute; left: 10px; bottom: 8px; font: 700 11px var(--body); text-transform: uppercase; background: rgb(0 0 0 / .45); padding: 2px 8px; border-radius: 99px; }

/* ---------- Behind the scenes-deurtje (easter egg in de footer) ---------- */
/* Het deurtje hangt links naast het adres; het adres blijft uitgelijnd met de Instagram-foto's */
.addr { position: relative; }
.bts-door {
  position: absolute; right: calc(100% + 26px); top: -14px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-decoration: none;
}
.bts-sign { /* bordje aan een touwtje */
  position: relative; margin: 14px 0 6px; padding: 2px 6px;
  font: 700 8px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: rgb(255 255 255 / .55); background: #1d1d22; border: 1px solid rgb(255 255 255 / .12); border-radius: 2px;
  transform-origin: 50% -12px; animation: sway 5s ease-in-out infinite;
}
.bts-sign::before, .bts-sign::after {
  content: ""; position: absolute; top: -12px; width: 1px; height: 14px; background: rgb(255 255 255 / .3); transform-origin: top center;
}
.bts-sign::before { left: 50%; rotate: 32deg; }
.bts-sign::after  { left: 50%; rotate: -32deg; }
@keyframes sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.bts-frame {
  position: relative; width: 30px; height: 46px; border: 2px solid #2a2a30; border-bottom: 0;
  border-radius: 3px 3px 0 0; background: #111; perspective: 200px;
}
.bts-light { /* de disco achter de deur */
  position: absolute; inset: 0; overflow: hidden; background: #1a0f24;
}
.bts-light::before {
  content: ""; position: absolute; inset: -60%;
  background:
    radial-gradient(circle at 30% 30%, #ff3b8d 0 14%, transparent 30%),
    radial-gradient(circle at 70% 40%, #36c9ff 0 13%, transparent 28%),
    radial-gradient(circle at 45% 75%, #ffe03b 0 12%, transparent 26%),
    radial-gradient(circle at 75% 75%, #8a4bff 0 13%, transparent 28%);
  filter: blur(3px); animation: discoSpin 4s linear infinite, discoHueLight 3.5s linear infinite;
}
/* Licht dat uit de deuropening op het zwart schijnt */
.bts-door::before {
  content: ""; position: absolute; left: 50%; bottom: -14px; width: 150px; height: 110px; z-index: -1;
  translate: -50% 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse at 35% 60%, rgb(255 59 141 / .55), transparent 55%),
    radial-gradient(ellipse at 65% 55%, rgb(54 201 255 / .5), transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgb(255 224 59 / .4), transparent 60%),
    radial-gradient(ellipse at 50% 40%, rgb(138 75 255 / .45), transparent 60%);
  filter: blur(14px); opacity: 0; scale: .5;
  transition: opacity .4s, scale .5s var(--bounce);
  animation: discoHueSpill 3.5s linear infinite;
}
.bts-door:hover::before, .bts-door:focus-visible::before { opacity: .55; scale: .8; }
.bts-door.opening::before { opacity: 1; scale: 1.6; transition-duration: .6s; }
.bts-panel {
  position: absolute; inset: 0; background: #1d1d22; border-radius: 1px 1px 0 0;
  transform-origin: left center; transition: transform .45s var(--bounce);
}
/* Matglas met een gedempte disco erachter */
.bts-glass {
  position: absolute; inset: 5px 5px 20px; overflow: hidden; border-radius: 1px;
  background: #14141a; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
}
.bts-glass::before { /* de discolichtjes */
  content: ""; position: absolute; inset: -60%;
  background:
    radial-gradient(circle at 25% 30%, #ff3b8d 0 12%, transparent 26%),
    radial-gradient(circle at 70% 35%, #36c9ff 0 11%, transparent 24%),
    radial-gradient(circle at 40% 75%, #ffe03b 0 10%, transparent 22%),
    radial-gradient(circle at 78% 72%, #8a4bff 0 11%, transparent 24%),
    radial-gradient(circle at 50% 50%, #3bff9b 0 7%, transparent 18%);
  filter: blur(2.5px); opacity: .5;
  animation: discoSpin 5s linear infinite, discoHue 3.5s linear infinite, discoPulse 1.1s ease-in-out infinite alternate;
}
.bts-glass::after { /* het matte glas */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgb(255 255 255 / .22), rgb(255 255 255 / .06) 55%, rgb(255 255 255 / .14));
}
@keyframes discoSpin { to { transform: rotate(360deg); } }
@keyframes discoHue { to { filter: blur(2.5px) hue-rotate(360deg); } }
@keyframes discoHueLight { to { filter: blur(3px) hue-rotate(360deg); } }
@keyframes discoHueSpill { to { filter: blur(14px) hue-rotate(360deg); } }
@keyframes discoHueStrip { to { filter: blur(1px) hue-rotate(360deg); } }
@keyframes discoPulse { from { opacity: .35; } to { opacity: .6; } }
.bts-door:hover .bts-glass { filter: brightness(1.5); }
/* een vleugje licht onder de deur door */
.bts-frame::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, #ff3b8d, #36c9ff, #ffe03b, #8a4bff);
  opacity: .35; filter: blur(1px); animation: discoHueStrip 3.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .bts-glass::before, .bts-frame::after { animation: none; } }
.bts-knob { position: absolute; right: 4px; top: 66%; width: 4px; height: 4px; border-radius: 50%; background: #9c8455; }
.bts-door:hover .bts-panel, .bts-door:focus-visible .bts-panel { transform: rotateY(-40deg); }
.bts-door:hover .bts-sign { color: rgb(255 255 255 / .8); }
.bts-door.opening .bts-panel { transform: rotateY(-105deg); transition-duration: .6s; }
.bts-door.opening .bts-frame { animation: doorGlow .75s ease-in forwards; }
@keyframes doorGlow { to { box-shadow: 0 0 40px 14px rgb(255 59 141 / .6), 0 0 90px 40px rgb(54 201 255 / .35); } }
@media (prefers-reduced-motion: reduce) { .bts-sign { animation: none; } }

/* ---------- Behind the scenes-pagina ---------- */
.bts-page, .bts-page .site-footer { background: var(--blue); }
.bts-page::before { /* je stapt vanuit het warme licht naar binnen */
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: radial-gradient(circle at 30% 40%, #ff3b8d, transparent 60%), radial-gradient(circle at 70% 60%, #36c9ff, transparent 60%), radial-gradient(circle at 50% 50%, #8a4bff, #1a0f24 80%);
  animation: enterLight .9s ease-out forwards;
}
@keyframes enterLight { to { opacity: 0; } }
.bts-hero { padding: 110px 0 120px; }
.bts-hero-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .bts-hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.bts-bg { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.bts-hero h1 { font-size: clamp(48px, 8vw, 88px); margin: 12px 0 20px; }
.bts-note { display: inline-block; font: 400 22px/1 "Kalam", "Comic Sans MS", cursive; rotate: -5deg; background: #f5d90a; color: var(--night); padding: 6px 12px; }
.bts-wall { padding-top: 0; margin-top: -40px; position: relative; z-index: 2; }
.bts-reel { position: relative; margin: 0; border-radius: 18px; overflow: hidden; cursor: pointer; box-shadow: 0 24px 60px rgb(0 0 0 / .45); background: #000; }
.bts-reel video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bts-sound { position: absolute; right: 16px; bottom: 16px; border: 0; border-radius: 999px; padding: 9px 16px; background: rgb(255 255 255 / .92); color: var(--night); font: 600 14px/1 Oswald, sans-serif; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: background .2s, color .2s; }
.bts-reel:hover .bts-sound { background: var(--pink); color: #fff; }
.bts-reel figcaption { position: absolute; left: 18px; top: 16px; font: 700 20px/1 "Kalam", "Comic Sans MS", cursive; color: #fff; rotate: -3deg; text-shadow: 0 2px 8px rgb(0 0 0 / .6); }
.bts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.bts-item {
  margin: 0; background: var(--white); color: var(--night); padding: 12px 12px 14px; rotate: var(--tilt);
  box-shadow: 0 14px 30px rgb(0 0 0 / .45); transition: rotate .4s var(--bounce), transform .4s var(--bounce);
}
.bts-item:hover { rotate: 0deg; transform: scale(1.03); }
.bts-item.is-video { cursor: url(assets/img/cursor-play.svg) 4 18, pointer; }
.bts-media { position: relative; aspect-ratio: 4 / 3; background: #1a1a1f; overflow: hidden; display: grid; place-items: center; }
.bts-media img, .bts-media video { width: 100%; height: 100%; object-fit: cover; }
.bts-media .play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgb(255 255 255 / .9); }
.bts-media .play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 17px solid var(--pink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.bts-item p, .bts-item figcaption { margin: 10px 0 0; font: 400 18px/1.2 "Kalam", "Comic Sans MS", cursive; text-align: center; }
.bts-item.empty .bts-media { color: rgb(255 255 255 / .5); font-weight: 700; text-transform: uppercase; font-size: 14px; gap: 10px; align-content: center; }
.slate { /* klapbordje */
  display: block; width: 54px; height: 40px; margin: 0 auto; background: #2c2c33; border-radius: 3px; position: relative;
  background-image: repeating-linear-gradient(135deg, #fff 0 8px, #2c2c33 8px 16px); background-size: 100% 11px; background-repeat: no-repeat;
}
.bts-footer { padding-top: 24px; }
@media (max-width: 900px) { .bts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .bts-grid { grid-template-columns: 1fr; } .addr { padding-left: 56px; } .bts-door { right: auto; left: 0; } }
@media (prefers-reduced-motion: reduce) { .bts-page::before { animation-duration: .01s; } }

/* ---------- Vacaturepagina ---------- */
.vac-hero { padding: 120px 0 170px; }
.vac-hero h1 { font-size: clamp(48px, 8vw, 88px); margin: 12px 0 24px; }
.vac-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vac-meta li { background: var(--white); color: var(--pink); font: 700 14px var(--body); text-transform: uppercase; letter-spacing: .06em; padding: 6px 14px; border-radius: 99px; }
.vac-body { padding-top: 40px; padding-bottom: 120px; }
.vac-intro { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; max-width: 760px; margin: 0 0 48px; }
.vac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vac-card { background: var(--blue-dark); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.vac-card .nr { font: 700 14px var(--body); color: var(--pink); background: var(--white); border-radius: 99px; padding: 2px 10px; }
.vac-card h3 { font-size: 26px; margin: 14px 0 8px; }
.vac-card p { margin: 0; }
.vac-apply { margin-top: 56px; background: var(--pink); border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: 0 16px 40px rgb(0 0 0 / .25); rotate: -1deg; }
.vac-apply h2 { font-size: 30px; margin-bottom: 10px; }
/* Beloning */
.vac-reward { margin-top: 20px; background: var(--blue-dark); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.reward-main { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; }
.reward-label { display: inline-block; font: 700 14px var(--body); color: var(--pink); background: var(--white); border-radius: 99px; padding: 2px 10px; text-transform: uppercase; }
.reward-salary strong { display: block; font: 700 clamp(30px, 3.6vw, 44px)/1.1 var(--heading); text-transform: uppercase; margin: 10px 0 4px; white-space: nowrap; }
.reward-salary small { font-size: 14px; opacity: .8; }
.reward-growth { margin: 0; font: 700 clamp(20px, 2.1vw, 26px)/1.3 var(--heading); text-transform: uppercase; color: var(--white); }
.vac-reward .gtk-extra { background: rgb(255 255 255 / .08); margin-top: 22px; }
.vac-reward .gtk-extra-tag { background: var(--pink); }
@media (max-width: 700px) { .reward-main { grid-template-columns: 1fr; gap: 16px; } }

/* Good to know */
.gtk {
  position: relative; margin-top: 64px; background: var(--white); color: var(--night);
  border-radius: 28px; padding: 56px 48px 44px; box-shadow: 0 20px 44px rgb(0 0 0 / .25);
}
.gtk-sticker {
  position: absolute; top: -18px; left: 40px; rotate: -4deg;
  font: 400 22px/1 "Kalam", "Comic Sans MS", cursive; background: #f5d90a; color: var(--night);
  padding: 8px 16px; border-radius: 8px; box-shadow: 0 6px 14px rgb(0 0 0 / .2);
}
.gtk-me { position: absolute; top: -56px; right: 36px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gtk-me img {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: center 25%;
  border: 4px solid var(--white); box-shadow: 0 8px 20px rgb(0 0 0 / .25); rotate: 3deg;
}
.gtk-me figcaption { font: 400 16px/1 "Kalam", "Comic Sans MS", cursive; color: var(--blue); rotate: -3deg; white-space: nowrap; }
.gtk-lead { font: 700 clamp(22px, 2.4vw, 28px)/1.25 var(--heading); text-transform: uppercase; margin: 0 0 32px; padding-right: 190px; color: var(--blue); }
.gtk-points { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
.gtk-point h3 { font-size: 22px; color: var(--pink); margin-bottom: 8px; }
.gtk-point p { margin: 0; font-size: 17px; }
.gtk-extra {
  display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 16px 20px;
  background: rgb(39 97 143 / .08); border-radius: 16px;
}
.gtk-extra-tag { flex: none; background: var(--blue); color: var(--white); font: 700 13px var(--body); text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border-radius: 99px; }
.gtk-extra p { margin: 0; font-size: 17px; }
@media (max-width: 700px) { .gtk-me { right: 16px; } .gtk-me { top: -44px; } .gtk-me img { width: 88px; height: 88px; } .gtk-lead { padding-right: 100px; } .gtk { padding: 44px 22px 28px; } .gtk-points { grid-template-columns: 1fr; } .gtk-extra { flex-direction: column; align-items: flex-start; } }

/* Foto naast de kop */
.vac-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.vac-hero-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%;
  border-radius: 24px; rotate: 2deg; box-shadow: 0 20px 44px rgb(0 0 0 / .3);
  transition: rotate .45s var(--bounce);
}
.vac-hero-photo img:hover { rotate: 0deg; }
/* Collage onderaan */
.vac-collage {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 210px 210px; gap: 18px; margin-top: 72px;
}
.vac-shot { position: relative; }
.vac-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 20px;
  box-shadow: 0 14px 30px rgb(0 0 0 / .3); rotate: var(--r, 0deg); transition: rotate .4s var(--bounce), scale .4s var(--bounce);
}
.vac-shot:hover { z-index: 2; }
.vac-shot:hover img { rotate: 0deg; scale: 1.04; }
.vac-shot:nth-child(1) { grid-column: 1 / 5;  grid-row: 1 / 3; --r: -2deg; }
.vac-shot:nth-child(2) { grid-column: 5 / 9;  grid-row: 1 / 2; --r: 1.5deg; }
.vac-shot:nth-child(3) { grid-column: 9 / 13; grid-row: 1 / 2; --r: -1deg; }
.vac-shot:nth-child(4) { grid-column: 5 / 8;  grid-row: 2 / 3; --r: -1.5deg; }
.vac-shot:nth-child(5) { grid-column: 8 / 13; grid-row: 2 / 3; --r: 2deg; }
.vac-apply p { max-width: 560px; margin: 0 auto 24px; font-size: 19px; }
.vac-actions { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.vac-apply .vac-btn { background: var(--white); color: var(--pink); font-size: 18px; padding: 12px 26px; text-decoration: none; }
.vac-dm { text-decoration: none; }
.vac-dm:hover { background: var(--white); color: var(--pink); }
@media (max-width: 700px) {
  .vac-grid, .vac-hero-grid { grid-template-columns: 1fr; } .vac-apply { padding: 28px 20px; }
  .vac-collage { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 150px; gap: 12px; }
  .vac-shot:nth-child(n) { grid-column: auto; grid-row: auto; }
  .vac-shot:nth-child(1) { grid-column: 1 / 3; }
}

/* ---------- Briefing (twee vragen + mailadres) ---------- */
/* Briefingpagina */
.brief-hero { padding: 110px 0 170px; }
.brief-hero h1 { font-size: clamp(48px, 7vw, 84px); margin-bottom: 18px; }
.brief-warm { padding-top: 40px; padding-bottom: 120px; }
.brief-warm h2 { text-align: center; }
.brief-how { list-style: none; padding: 0; margin: 32px 0 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.brief-how li { background: var(--blue-dark); border-radius: var(--radius); padding: 26px; box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.brief-how .nr { font: 700 14px var(--body); color: var(--pink); background: var(--white); border-radius: 99px; padding: 2px 10px; }
.brief-how h3 { font-size: 24px; margin: 14px 0 6px; }
.brief-how p { margin: 0; }
.brief-photos { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 280px; gap: 18px; }
.brief-shot { position: relative; min-height: 0; }
.brief-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 20px; box-shadow: 0 14px 30px rgb(0 0 0 / .3); rotate: var(--r, 0deg); transition: rotate .4s var(--bounce), scale .4s var(--bounce); }
.brief-shot:hover img { rotate: 0deg; scale: 1.04; }
.brief-shot:nth-child(1) { --r: -2deg; } .brief-shot:nth-child(2) { --r: 1.5deg; } .brief-shot:nth-child(3) { --r: -1deg; }
.brief-review { margin: 64px auto 0; max-width: 760px; text-align: center; }
.brief-review blockquote { margin: 0 0 18px; font-size: clamp(18px, 2vw, 22px); }
.brief-review cite { font: 700 16px var(--body); font-style: normal; text-transform: uppercase; background: var(--pink); padding: 4px 12px; border-radius: 99px; }
/* Knop onder "Meer dan een camera-crew" */
.club-cta { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 44px; flex-wrap: wrap; }
.club-cta .btn { font-size: 17px; padding: 12px 26px; text-decoration: none; }
.club-cta span { font: 700 18px/1 "Kalam", "Comic Sans MS", cursive; rotate: -3deg; }
@media (max-width: 700px) { .brief-how { grid-template-columns: 1fr; } .brief-photos { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 160px; } .brief-shot:nth-child(1) { grid-column: 1 / 3; } }
.briefing-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: center; }
.brief-card {
  background: var(--white); color: var(--night); border-radius: 28px; padding: 32px 36px;
  box-shadow: 0 20px 44px rgb(0 0 0 / .28); min-height: 300px;
}
.brief-progress { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; }
.brief-progress li {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px var(--body); background: #e8edf2; color: #7b8794; transition: background .3s, color .3s, scale .3s var(--bounce);
}
.brief-progress li.done { background: var(--blue); color: var(--white); }
.brief-progress li.now { background: var(--pink); color: var(--white); scale: 1.15; }
.brief-card h3 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 18px; animation: caseIn .45s cubic-bezier(.22, 1, .36, 1); }
.brief-hint { margin: -10px 0 14px; font-size: 14px; opacity: .6; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 2px solid #d5dde5; background: var(--white); color: var(--night); border-radius: 99px; padding: 10px 18px;
  font: 700 16px var(--body); cursor: pointer; transition: border-color .2s, background .2s, color .2s, scale .25s var(--bounce);
}
.chip:hover { border-color: var(--pink); scale: 1.04; }
.chip.on { background: var(--pink); border-color: var(--pink); color: var(--white); }
.brief-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.brief-back, .brief-wa { background: none; border: 0; cursor: pointer; color: var(--blue); font: 700 14px var(--body); text-transform: uppercase; }
.brief-back:hover, .brief-wa:hover { text-decoration: underline; }
.brief-card .btn { border: 0; cursor: pointer; font: 700 15px var(--body); text-transform: uppercase; color: var(--white); }
.brief-card .btn:disabled { opacity: .35; cursor: default; }
.brief-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brief-summary { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 4px; font-size: 15px; }
.brief-summary span { opacity: .55; margin-right: 6px; }
.brief-story { font-size: 20px; line-height: 1.45; margin: 0 0 22px; }
/* Titel met onze reactie op de deadline: gewone letters, want het is een hele zin */
.brief-card h3.brief-reactie { font-family: var(--body); text-transform: none; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; }
.brief-mailkop { font: 700 14px var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin: 0 0 4px; }
.brief-form { display: grid; gap: 10px; }
.brief-form label { font-weight: 700; font-size: 16px; }
.brief-mailrow { display: flex; gap: 10px; }
.brief-mailrow input { flex: 1; min-width: 0; }
.brief-form input, .brief-form textarea {
  font: 400 16px var(--body); padding: 12px 14px; border: 2px solid #d5dde5; border-radius: 14px; width: 100%; resize: vertical;
}
.brief-form input:focus, .brief-form textarea:focus { outline: none; border-color: var(--blue); }
.brief-form .err { border-color: var(--pink); }
.brief-done { text-align: center; padding: 30px 0; }
.brief-check { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #2ee66b; color: var(--white); font-size: 32px; margin-bottom: 16px; animation: bounceIn .8s both; }
@media (max-width: 900px) { .briefing-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 700px) { .brief-card { padding: 24px 18px; } .brief-mailrow { flex-direction: column; } }

/* ---------- Team ---------- */
.team { text-align: center; padding-bottom: 24px; }
.team-video { position: relative; border-radius: var(--radius); overflow: hidden; margin-top: 32px; box-shadow: 0 16px 40px rgb(0 0 0 / .3); }
.team-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--night); cursor: url(assets/img/sound.svg) 17 14, pointer; }
.team-video video.silent { cursor: default; }
.team-text { max-width: 620px; margin: 12px auto 0; font-size: 20px; text-wrap: balance; }
/* Geel labeltje achter de tekst, zelfde stijl als "Psst... je bent binnen!" */
.team-badge {
  display: inline-block; margin-left: 6px; vertical-align: 2px; rotate: -4deg; white-space: nowrap;
  font: 400 15px/1 "Kalam", "Comic Sans MS", cursive; background: #f5d90a; color: var(--night); padding: 4px 9px;
}
.mute {
  position: absolute; left: 16px; bottom: 16px; border: 0; cursor: pointer;
  background: var(--white); color: var(--pink); font: 700 14px var(--body); text-transform: uppercase;
  padding: 10px 16px; border-radius: 99px;
}

/* ---------- Reviews ---------- */
.reviews { text-align: center; padding-top: 40px; }
.reviews .container { position: relative; z-index: 4; } /* tekst boven de roze bumper */
.review-stage { display: grid; }
.review { grid-area: 1 / 1; opacity: 0; transform: translateX(40px); transition: opacity .5s, transform .6s var(--bounce); pointer-events: none; }
.review.active { opacity: 1; transform: none; pointer-events: auto; }
.review blockquote { margin: 0 0 20px; font-size: clamp(18px, 2.2vw, 22px); }
.review cite { font: 700 16px var(--body); font-style: normal; text-transform: uppercase; color: var(--white); background: var(--pink); padding: 4px 12px; border-radius: 99px; }
.review-dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.review-dots button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); background: none; cursor: pointer; padding: 0; }
.review-dots button.active { background: var(--white); }

/* ---------- Stories ---------- */
.stories { background: linear-gradient(var(--blue), var(--night) 80%); overflow-x: clip; }
.stories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.phone {
  width: min(320px, 80vw); aspect-ratio: 9 / 18.5; margin-inline: auto;
  border: 12px solid #111; border-radius: 44px; overflow: hidden; background: var(--night);
  box-shadow: 0 0 0 2px #333, 0 30px 60px rgb(0 0 0 / .5);
}
.phone video { width: 100%; height: 100%; object-fit: cover; }
/* Playknop in de telefoon (alleen mobiel, tijdens de intro): het Film Nomads-pijltje met gloed.
   Hij zweeft vloeiend langs de rechterrand, waar Sjoerd naartoe wijst: op en neer, heen en weer tot half op de rand
   van de telefoon, en af en toe draait hij een rondje. Drie bewegingen met verschillende duur, dus nooit twee keer hetzelfde. Daarom knipt .phone niet af; de video heeft zelf ronde hoeken. */
.phone { position: relative; overflow: visible; }
.phone video { border-radius: 32px; }
.story-play {
  display: none; position: absolute; z-index: 2; right: 14px; top: 26%; width: 66px; height: 66px;
  place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / .12); border-radius: 50%; cursor: pointer;
  background:
    radial-gradient(circle at 28% 22%, rgb(255 61 127 / .45), transparent 62%),
    radial-gradient(circle at 78% 82%, rgb(91 143 203 / .45), transparent 60%),
    #0d0c10;
  box-shadow: 0 0 30px rgb(255 61 127 / .55), 0 10px 26px rgb(0 0 0 / .5);
  animation: playIn .6s var(--bounce) .6s both,
    floatY 6.5s ease-in-out 1.2s infinite alternate, floatX 10.5s ease-in-out 1.2s infinite alternate, playTurn 13s 1.2s infinite;
}
.story-play img {
  width: 32px; height: auto; margin-left: 5px; transition: scale .15s;
  animation: playGlow 1.8s ease-in-out infinite alternate;
}
.story-play:active img { scale: .85; }
.story-play.nudge img { animation: playNudge .6s ease; }
.phone.playing .story-play { opacity: 0; pointer-events: none; transition: opacity .3s; }
@keyframes playIn { from { opacity: 0; scale: .3; } }
@keyframes playGlow {
  from { filter: drop-shadow(0 0 4px rgb(255 61 127 / .85)) drop-shadow(0 0 10px rgb(255 61 127 / .4)); }
  to   { filter: drop-shadow(0 0 7px rgb(255 61 127 / 1)) drop-shadow(0 0 20px rgb(255 61 127 / .7)); }
}
@keyframes floatY { from { top: 28%; } to { top: 58%; } }
@keyframes floatX { from { right: 16px; } to { right: -39px; } } /* -39px: half op de rand van de telefoon */
@keyframes playTurn { /* licht wiegen, dan één rondje */
  0%   { rotate: -6deg; animation-timing-function: ease-in-out; }
  20%  { rotate: 6deg; animation-timing-function: ease-in-out; }
  40%  { rotate: -6deg; animation-timing-function: ease-in-out; }
  60%  { rotate: 6deg; animation-timing-function: ease-in-out; }
  72%  { rotate: 0deg; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  90%  { rotate: 360deg; animation-timing-function: ease-in-out; }
  100% { rotate: 354deg; }
}
}
@keyframes playNudge { 40% { transform: translateX(6px) scale(1.2); } }
@media (max-width: 700px) { .story-play { display: grid; } }
@media (prefers-reduced-motion: reduce) { .story-play, .story-play img { animation: none !important; } }
.story-nav { list-style: none; padding: 0; margin: 0; }
.story-nav button {
  display: flex; align-items: center; gap: 14px; background: none; border: 0; color: var(--white);
  font: 400 25px var(--body); text-transform: uppercase; padding: 8px 0; cursor: pointer; text-align: left;
}
.story-nav button::before {
  content: ""; flex: none; width: 28px; height: 40px; margin-right: 6px;
  background: url(assets/img/arrow.svg) no-repeat left center / contain; transition: transform .3s ease;
}
.story-nav button:hover::before, .story-nav button.active::before { transform: rotate(90deg); }
.story-nav button.active { font-weight: 700; }

/* ---------- LinkedIn-knop ---------- */
.li-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px;
  border: 2px solid var(--white); font-weight: 700; text-transform: uppercase; font-size: 15px;
  transition: background .2s, color .2s, border-color .2s;
}
.li-btn svg { width: 18px; height: 18px; }
.site-footer .li-btn:hover { background: #0a66c2; border-color: #0a66c2; color: var(--white); }
.socials { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--white); transition: background .2s, color .2s, rotate .4s var(--bounce);
}
.icon-btn svg { width: 18px; height: 18px; }
.site-footer .icon-btn:hover { background: var(--white); color: var(--night); rotate: -12deg; }

/* ---------- Jobs in het menu (groen stipje = we zoeken iemand, doorgestreept = nu niet) ---------- */
.site-header nav { align-items: center; }
.site-header nav a.nav-tribe { display: inline-flex; align-items: center; gap: 7px; }
.site-header nav a.nav-tribe[hidden] { display: none; }
.tribe-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ee66b; box-shadow: 0 0 0 0 rgb(46 230 107 / .6); animation: tribePulse 2s infinite; }
.nav-tribe.closed { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; }
.nav-tribe.closed .tribe-dot { display: none; }
@keyframes tribePulse { 70% { box-shadow: 0 0 0 7px rgb(46 230 107 / 0); } 100% { box-shadow: 0 0 0 0 rgb(46 230 107 / 0); } }
@media (prefers-reduced-motion: reduce) { .tribe-dot { animation: none; } }

/* ---------- NIEUW: WhatsApp-knop ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 0; height: 58px; padding: 0 14px;
  background: #25d366; color: var(--white); border-radius: 99px; text-decoration: none;
  box-shadow: 0 8px 24px rgb(0 0 0 / .3);
  opacity: 0; transform: translateY(120px) scale(.6); pointer-events: none;
  transition: opacity .3s, transform .6s var(--bounce), gap .3s;
}
.wa-float.show { opacity: 1; transform: none; pointer-events: auto; animation: waWiggle 5s 2s infinite; }
.wa-float svg { width: 30px; height: 30px; flex: none; }
.wa-label { max-width: 0; overflow: hidden; white-space: nowrap; font: 700 16px var(--body); text-transform: uppercase; transition: max-width .4s var(--bounce); }
.wa-float:hover { gap: 10px; }
.wa-float:hover .wa-label { max-width: 140px; }
@keyframes waWiggle { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -10deg; } 94% { rotate: 8deg; } 97% { rotate: -4deg; } }
@media (prefers-reduced-motion: reduce) { .wa-float.show { animation: none; } }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--night); padding: 0 0 24px; overflow-x: clip; }
.footer-top { position: relative; padding: 120px 0 110px; }
.footer-bg { top: 2rem; }
.footer-grid h4 { color: var(--pink); }
.site-footer .container { z-index: 4; }
.site-footer .btn { background: var(--white); color: var(--pink); }
.insta { margin-bottom: 0; }
.insta-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.insta-head h3 { margin: 0; font-size: clamp(30px, 4vw, 44px); }
.insta-feed { position: relative; min-height: 120px; border-radius: var(--radius); overflow: hidden; }
/* Plakt het Elfsight-labeltje onder de feed af met een roze strook */
.insta-feed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; background: var(--pink); z-index: 5; }
.footer-grid { display: grid; grid-template-columns: repeat(3, max-content) 1fr; gap: 32px 80px; padding-top: 24px; }
.footer-brief { justify-self: end; }
.footer-brief .btn { margin-top: 4px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--pink); }
.btn { display: inline-block; background: var(--pink); padding: 10px 20px; border-radius: 99px; font-weight: 700; text-transform: uppercase; }
.btn:hover { filter: brightness(1.1); }
.copyright { position: relative; z-index: 4; text-align: center; font-size: 14px; text-transform: uppercase; opacity: .5; margin-top: 56px; }

/* ---------- Video pop-up ---------- */
.video-modal { border: 0; padding: 0; background: none; width: min(1100px, 94vw); max-height: 90vh; overflow: visible; }
.video-modal::backdrop { background: rgb(4 2 3 / .88); }
.video-modal video, .video-modal iframe { width: 100%; max-height: 86vh; border-radius: 12px; background: #000; border: 0; }
.video-modal iframe { aspect-ratio: 16 / 9; }
.video-modal.portrait { width: fit-content; max-width: 94vw; margin: auto; }
.video-modal.portrait video { width: auto; max-width: 94vw; height: 86vh; }
.video-modal .close {
  position: absolute; top: -48px; right: 0; background: none; border: 0; color: var(--white);
  font-size: 40px; line-height: 1; cursor: pointer;
}

/* ---------- Scroll-animaties (zelfde bounce als de huidige site) ---------- */
[data-anim] { opacity: 0; }
[data-anim].in { opacity: 1; animation: var(--anim) 1s both; }
[data-anim="up"]    { --anim: bounceInUp; }
[data-anim="down"]  { --anim: bounceInDown; }
[data-anim="left"]  { --anim: bounceInLeft; }
[data-anim="right"] { --anim: bounceInRight; }
[data-anim="zoom"]  { --anim: bounceIn; }
[data-anim="behind"] { --anim: slideFromBehind; }
[data-anim="phone"] { --anim: slideFromPhone; }
[data-anim="phone"].in { animation-duration: 1s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes slideFromPhone {
  0%  { transform: translateX(var(--from, -300px)); }
  70% { transform: translateX(12px); }
  to  { transform: none; }
}
[data-anim="behind"].in { animation-duration: 1.1s; animation-delay: .6s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes slideFromBehind {
  0%  { opacity: 0; transform: translateX(calc(-100% - 32px)); }
  15% { opacity: 1; }
  70% { transform: translateX(14px); }
  to  { transform: none; }
}
@keyframes bounceInUp {
  0%, 60%, 75%, 90%, to { animation-timing-function: var(--bounce); }
  0%  { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
  75% { transform: translate3d(0, 10px, 0) scaleY(.95); }
  90% { transform: translate3d(0, -5px, 0) scaleY(.985); }
  to  { transform: none; }
}
@keyframes bounceInDown {
  0%, 60%, 75%, 90%, to { animation-timing-function: var(--bounce); }
  0%  { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(.9); }
  75% { transform: translate3d(0, -10px, 0) scaleY(.95); }
  90% { transform: translate3d(0, 5px, 0) scaleY(.985); }
  to  { transform: none; }
}
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to { animation-timing-function: var(--bounce); }
  0%  { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(-10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(5px, 0, 0) scaleX(.995); }
  to  { transform: none; }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, to { animation-timing-function: var(--bounce); }
  0%  { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(-5px, 0, 0) scaleX(.995); }
  to  { transform: none; }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to { animation-timing-function: var(--bounce); }
  0%  { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to  { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; }
  [data-anim].in { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Mobiel / tablet ---------- */
@media (max-width: 900px) {
  .club-head { grid-template-columns: 1fr; }
  .club-bg { clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
}
@media (max-width: 700px) {
  .block { padding: 64px 0; }
  .site-header { grid-template-columns: auto 1fr; padding: 12px 16px; }
  .site-header .logo { grid-column: 1; }
  .site-header .logo img { height: 36px; }
  .site-header nav { grid-column: 2; gap: 14px; }
  .site-header nav a { font-size: 14px; }

  .intro-grid, .stories-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-brief { justify-self: start; }
  .intro-grid .text { order: -1; padding: 0; }
  .shake { position: relative; right: auto; bottom: auto; margin: 0 auto; }
  [data-anim="behind"] { --anim: bounceInUp; }
  [data-anim="phone"] { --anim: bounceInUp; }
  .pink-bg { clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%); }
  .intro .pink-bg { clip-path: polygon(0 0, 100% 30px, 100% 100%, 0 98%); }
  .footer-bg { clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); }
  .intro { margin-top: -40px; padding: 112px 0 120px; }
  .clients { height: auto; margin-top: -60px; }
  /* bovenkant valt onder het roze vlak (dat loopt schuin af), dus de logo's pas daaronder */
  .clients-row { margin-left: 28%; padding: 76px 0 18px; }
  .clients-row::before { left: -120px; width: 140px; }
  .belt-set { gap: 40px; padding-right: 40px; }
  .belt-note-text { font-size: 8px; }
        .logo-text { font-size: 18px; }
  .bumper { scale: .5; }
  .bumper[class*="left"] { left: -60px; }
  .bumper[class*="right"] { right: -60px; }
  .hero-right, .right-blue-02 { display: none; }
  .story-nav button { font-size: 20px; }
}

/* ---------- Smallere schermen: deurtje, shake-knop en roze vlak footer ---------- */
/* Het roze vlak loopt schuin af op vaste hoogte, zodat de strook onder de Instagram-feed er nooit onderuit steekt */
.footer-bg { clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 calc(100% - 70px)); }
/* Is er links naast het adres geen ruimte meer, dan hangt het deurtje in de kolom zelf */
@media (max-width: 1320px) { .addr { padding-left: 80px; } .bts-door { right: auto; left: 0; } }
/* Shake-knop blijft binnen beeld */
@media (max-width: 1220px) { .shake { right: 0; } }
@media (max-width: 700px) { .footer-bg { clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 calc(100% - 50px)); } }
/* Telefoon: deurtje rechts naast het adres, adres weer gewoon links uitgelijnd */
@media (max-width: 700px) { .addr { padding-left: 0; padding-right: 96px; justify-self: start; } .bts-door { left: auto; right: 0; } }

/* ---------- Case-pop-up ---------- */
/* Liggende video bovenaan, daaronder een roze tekstvlak met witte tekst.
   Blauw als accent: briefingknop donkerblauw, pijltjes wit met blauw.
   Raster: Inzet naast De vraag, Onze rol naast De verrassing.
   Staande video (portrait): video links, tekst rechts in één kolom. */
.case-modal {
  border: 0; padding: 0; width: min(1100px, 94vw); max-height: 94vh; overflow: visible;
  background: var(--pink); color: var(--white); border-radius: 18px; box-shadow: 0 30px 80px rgb(0 0 0 / .5);
}
.case-modal[open] { display: flex; flex-direction: column; animation: caseModalIn .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes caseModalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.case-modal::backdrop { background: rgb(4 2 3 / .88); }
.case-modal-video { position: relative; flex: none; background: #000; border-radius: 18px 18px 0 0; overflow: hidden; }
.case-modal-video > video, .case-modal-video > img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: max(240px, calc(94vh - 470px)); object-fit: contain; /* lage schermen: video krimpt, tekst past altijd */ background: #000; }
.case-modal-text { display: flex; flex-direction: column; padding: 32px 44px 28px; overflow-y: auto; border-radius: 0 0 18px 18px; }

.case-modal-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; margin-bottom: 28px; }
.case-modal-head h2 { font-size: clamp(36px, 3.8vw, 54px); margin: 0; color: var(--white); }
.case-modal-head .case-title { font: 400 26px/1.2 var(--body); text-transform: none; margin: 0; color: var(--white); opacity: .92; }
.case-modal-head .case-via { flex-basis: 100%; margin: 8px 0 0; font-size: 16px; font-style: italic; opacity: .8; }

.case-grid {
  display: grid; grid-template-columns: minmax(220px, 1fr) 1.7fr; gap: 26px 60px;
  grid-template-areas: "soort vraag" "rollen aanpak";
}
.case-cell h3 { font: 700 14px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--white); opacity: .72; margin: 0 0 6px; }
.case-cell p { margin: 0; font-size: 20px; line-height: 1.45; }
.case-cell .tbd { font-style: italic; opacity: .55; }

.case-modal-foot { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.case-modal-foot .btn { background: var(--blue-dark); color: var(--white); text-decoration: none; font-size: 18px; padding: 12px 26px; }
.case-modal-foot .btn:hover { background: var(--blue); filter: none; }
/* Bladeren: alleen de punt van de pijl (chevron), dik en zonder rondje */
.case-nav { display: flex; align-items: center; gap: 14px; font: 700 16px var(--body); color: var(--white); }
.case-nav button { width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; transition: transform .25s var(--bounce), color .2s; }
.case-nav svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.case-nav .case-prev svg { transform: scaleX(-1); }
.case-nav .case-next:hover { transform: translateX(4px); color: var(--blue-dark); }
.case-nav .case-prev:hover { transform: translateX(-4px); color: var(--blue-dark); }
.case-modal .close {
  position: absolute; top: 8px; right: 14px; z-index: 2; background: none; border: 0; color: var(--white);
  font-size: 40px; line-height: 1; cursor: pointer; text-shadow: 0 2px 10px rgb(0 0 0 / .7);
}
/* Het voorfilmpje blijft schoon. Linksonder staat meteen een klein rond playknopje;
   na 6 seconden schuift het uit tot "Bekijk de video". Klikken op het beeld zelf start de video ook. */
.case-modal-teaser { cursor: url(assets/img/cursor-play.svg) 4 18, pointer; }
.case-modal-play {
  position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center;
  height: 48px; padding: 0 17px 0 18px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--white); color: var(--pink); font: 700 17px var(--body); text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35); transition: transform .25s var(--bounce);
}
.case-modal-play::before { content: ""; flex: none; border-left: 14px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.case-modal-play span { display: block; max-width: 0; opacity: 0; overflow: hidden; animation: playLabel .7s cubic-bezier(.22, 1, .36, 1) 6s forwards; }
@keyframes playLabel { to { max-width: 200px; opacity: 1; padding-left: 10px; padding-right: 6px; } }
.case-modal-play:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .case-modal-play span { animation-duration: .01s; } }
@media (max-width: 800px) { .case-modal-play { left: 12px; bottom: 12px; height: 40px; font-size: 14px; padding: 0 13px 0 14px; } }
/* Crew only-deurtje rechtsboven in het roze vlak (alleen bij cases met bts). Klik: deur open, de kaart klapt om. */
.case-modal-video, .case-modal-text { transition: transform .32s ease-in-out; }
.case-modal-video.flip-out, .case-modal-text.flip-out { transform: perspective(1400px) rotateY(90deg); }
.case-modal-video.flip-in, .case-modal-text.flip-in { transform: perspective(1400px) rotateY(-90deg); transition: none; }
.case-grid.is-bts { grid-template-columns: 1fr; grid-template-areas: "bts"; max-width: 760px; }
.case-crew {
  position: absolute; right: 40px; top: 18px; z-index: 2; display: flex; flex-direction: column; align-items: center;
  padding: 0; border: 0; background: none; cursor: pointer; scale: 1.15; transform-origin: top right;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .35));
  opacity: 0; visibility: hidden; /* pas zichtbaar na 10 seconden kijken (class show, daarna seen) */
}
.case-crew.show { animation: crewIn 5s ease-in-out both; } /* van 10 tot 15 seconden heel rustig in beeld */
.case-crew.seen { animation: none; opacity: 1; visibility: visible; }
.case-modal-text { position: relative; }
.case-modal-text:has(.case-crew) .case-modal-head { padding-right: 70px; }
/* Film uitgekeken: het bordje wiebelt en de deur licht even op */
.case-crew.nudge .bts-sign { animation: crewSwing .5s ease-in-out 5; color: rgb(255 255 255 / .9); }
.case-crew.nudge .bts-panel { transform: rotateY(-35deg); }
.case-crew.nudge .bts-frame { animation: doorGlow .8s ease-in-out 3 alternate; }
@keyframes crewSwing { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
@keyframes crewIn { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.case-crew:hover .bts-panel, .case-crew:focus-visible .bts-panel { transform: rotateY(-40deg); }
.case-crew:hover .bts-sign { color: rgb(255 255 255 / .85); }
.case-crew:hover .bts-glass { filter: brightness(1.5); }
.case-crew.opening .bts-panel { transform: rotateY(-105deg); transition-duration: .5s; }
.case-crew.opening .bts-frame { animation: doorGlow .55s ease-in forwards; }
.case-crew-back {
  position: absolute; left: 20px; top: 18px; z-index: 2; padding: 8px 16px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgb(4 2 3 / .7); color: var(--white); font: 700 14px var(--body); text-transform: uppercase;
}
.case-crew-back:hover { background: var(--pink); }
@media (prefers-reduced-motion: reduce) { .case-modal-video, .case-modal-text { transition: none; } }
@media (max-width: 800px) { .case-crew { scale: 1; right: 18px; top: 14px; } .case-crew-back { left: 12px; top: 12px; font-size: 12px; } }
/* BTS-foto’s op de achterkant van de kaart: zachte overgang, klik = volgende */
.bts-photos { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: max(240px, calc(94vh - 470px)); background: #000; cursor: pointer; }
.bts-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s ease; }
.bts-photos img.on { opacity: 1; }
/* Staande video: naast elkaar, tekst in één kolom */
.case-modal.portrait[open] { flex-direction: row; width: fit-content; max-width: 94vw; }
.case-modal.portrait .case-modal-video { border-radius: 18px 0 0 18px; }
.case-modal.portrait .case-modal-video > video, .case-modal.portrait .case-modal-video > img { width: auto; height: min(84vh, 760px); max-height: none; aspect-ratio: 4 / 5; }
.case-modal.portrait .case-modal-text { width: 540px; max-height: min(84vh, 760px); border-radius: 0 18px 18px 0; }
/* Staand: verhaal bovenaan, Inzet en Onze rol halverwege de vrije ruimte, knoppen onderaan */
.case-modal.portrait .case-grid { flex: 1 1 auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "vraag vraag" "aanpak aanpak" "soort rollen"; gap: 18px 32px; }
.case-modal.portrait .case-grid .case-cell[style*="soort"], .case-modal.portrait .case-grid .case-cell[style*="rollen"] { align-self: center; padding: 28px 0; }
.case-modal.portrait .case-modal-head h2 { font-size: clamp(32px, 3vw, 44px); }
.case-modal.portrait .case-cell p { font-size: 18px; }
.case-modal.portrait .case-modal-foot { margin-top: 0; padding-top: 24px; }
@media (max-width: 800px) {
  .case-modal, .case-modal.portrait { width: 94vw; max-height: 90vh; overflow-y: auto; }
  .case-modal[open], .case-modal.portrait[open] { flex-direction: column; }
  .case-modal.portrait .case-modal-video { border-radius: 18px 18px 0 0; }
  .case-modal.portrait .case-modal-video video { width: 100%; height: auto; max-height: 60vh; }
  .case-modal-text, .case-modal.portrait .case-modal-text { width: auto; max-height: none; overflow: visible; padding: 22px 20px 24px; }
  .case-grid { grid-template-columns: 1fr; grid-template-areas: "vraag" "aanpak" "soort" "rollen"; gap: 18px; }
  .case-modal .close { top: 4px; right: 10px; z-index: 2; text-shadow: 0 2px 8px rgb(0 0 0 / .6); }
}

/* ---------- Ondertitels in de stories (WebVTT) ---------- */
/* Huisstijl: wit, halfvet, zwarte rand, geen blok erachter */
#story-video::cue {
  font: 600 15px/1.3 "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif;
  color: #fff; background: transparent;
  text-shadow: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 0 4px rgb(0 0 0 / .8);
}

/* Melding na filmnomads.nl/#niet-tellen of #wel-tellen */
.telmelding {
  position: fixed; z-index: 100; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); translate: -50% 0;
  background: var(--night); color: var(--white); font: 700 15px var(--body); padding: 12px 20px; border-radius: 99px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .35); max-width: calc(100vw - 32px); text-align: center;
}