/* Concept Booth · huisstijl in CSS (brand book 2026)
   Kleuren: Imperial Red #F94646 · Default White #FFFFFF · Dark Charcoal #1A1A1A · lichtgrijs #F3F3F3 (bestaande site)
   Typografie: Poppins (lokaal, woff2). Koppen in kapitalen, bold/black, krappe regelafstand; paragrafen regular 135 %.
   Vormen: pills en afgeronde rechthoeken met dikke zwarte stroke; de ster (✦) als accent. */

@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/poppins-regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/poppins-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/poppins-bold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal; font-display: swap; src: url('/fonts/poppins-black.woff2') format('woff2'); }

:root {
  --red: #F94646; --ink: #1A1A1A; --white: #FFFFFF; --grey: #F3F3F3; --grey-2: #E6E6E6; --mut: #6B6B6B;
  --stroke: 3px; --radius: 28px; --radius-sm: 18px;
  --wrap: 1280px; --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 76px;
  /* Typografische schaal: zeven stappen, niets daarbuiten (12 · 14 · 18 · 24 · 32 · 56 · 112 op desktop; de grote stappen schalen mee met het scherm). */
  --fs-1: 0.75rem;                        /* 12: eyebrows, kickers, hints, taalcodes, formulierlabels, kleine footertekst */
  --fs-2: 0.875rem;                       /* 14: knoppen, filters, functies, bijschriften, navigatie */
  --fs-3: 1.125rem;                       /* 18: broodtekst */
  --fs-4: clamp(1.25rem, 1.8vw, 1.5rem);  /* 24: kaarttitels, marquee, labels bij cijfers */
  --fs-5: clamp(1.5rem, 2.6vw, 2rem);     /* 32: dienstentitels, waardenkaarten, cijfers in cases */
  --fs-6: clamp(2rem, 4.5vw, 3.5rem);     /* 56: sectietitels, scorebord, hero-pills, mobiel menu */
  --fs-7: clamp(2.75rem, 8vw, 7rem);      /* 112: display (hero, contact, 404) */
}
@media (min-width: 900px) { :root { --stroke: 4px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 400; line-height: 1.35; color: var(--ink); background: var(--white); }
/* Nooit breder dan het scherm (anders kan je op gsm uitzoomen en krijg je rechts een witte strook): clip op html én body, plus op de footer voor de David die er rechts uitsteekt. */
html, body { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--white); padding: 8px 16px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: clamp(96px, 14vw, 208px); }

/* Typografie */
.display, .h2, h1, h2, h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }
.display { font-size: var(--fs-7); line-height: .95; }
.h2 { font-size: var(--fs-6); line-height: 1; margin-bottom: .5em; }
h3 { font-size: var(--fs-4); line-height: 1.05; }
.eyebrow { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-1); margin: 0 0 14px; color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; flex: 0 0 10px; width: 10px; height: 10px; background: currentColor; border-radius: 50%; }
.lead { font-size: var(--fs-3); max-width: 66ch; margin: 0 0 32px; color: var(--mut); text-wrap: pretty; }
p { text-wrap: pretty; }
.h2, h3, .display { text-wrap: balance; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-2); text-decoration: none; border: var(--stroke) solid var(--ink); background: var(--white); color: var(--ink); transition: transform .35s var(--spring), background .25s, color .25s, box-shadow .25s; will-change: transform; }
.pill:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 10px 0 -4px var(--ink); }
.pill:active { transform: translateY(0) scale(.98); box-shadow: none; }
.pill-red { background: var(--red); border-color: var(--red); color: var(--white); }
.pill-red:hover { box-shadow: 0 10px 0 -4px var(--ink); }
.pill-black { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pill-black:hover { box-shadow: 0 10px 0 -4px var(--red); }
.pill-outline-white { background: transparent; border-color: var(--white); color: var(--white); }
.pill-outline-white:hover { box-shadow: 0 10px 0 -4px var(--red); }
.pill svg { width: 1em; height: 1em; }

/* Navigatie */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; height: var(--nav-h); padding-inline: var(--gutter); background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.is-scrolled { border-bottom-color: var(--grey-2); }
.nav-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.nav-logo .mark { width: 44px; height: 44px; display: block; transition: transform .2s var(--ease); }
.nav-logo .mark svg { width: 100%; height: 100%; }
.nav-logo .word { width: 132px; color: var(--ink); }
.nav-logo .word svg { width: 100%; height: auto; }
.nav-links { display: none; align-items: center; gap: 4px; }
.nav-links a { text-decoration: none; font-weight: 700; font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .02em; padding: 10px 16px; border-radius: 999px; transition: background .2s; }
.nav-links a:not(.pill):hover { background: var(--grey); }
.nav-links .pill { padding: 10px 20px; margin-left: 8px; }
.langs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--grey); }
.lang { font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; padding: 6px 10px; border-radius: 999px; text-decoration: none; color: var(--mut); transition: background .2s, color .2s; }
.lang:hover { color: var(--ink); }
.lang.is-active { background: var(--ink); color: var(--white); }
.burger { width: 44px; height: 44px; border: var(--stroke) solid var(--ink); border-radius: 50%; background: var(--white); padding: 0; position: relative; }
.burger span:not(.sr) { position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; margin: -1.5px 0 0 -9px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease); }
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 1000px) { .nav-links { display: inline-flex; } .burger { display: none; } .nav .langs { display: inline-flex; } }
@media (max-width: 999px) { .nav .langs { display: none; } }
.menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: var(--red); color: var(--white); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--gutter); animation: menu-in .35s var(--ease); }
.menu[hidden] { display: none; }
.menu > a { font-weight: 900; text-transform: uppercase; font-size: var(--fs-6); line-height: 1; text-decoration: none; padding: 8px 0; transition: transform .3s var(--spring); }
.menu > a:hover { transform: translateX(12px); }
.menu-langs { margin-top: 32px; }
.menu-langs .langs { background: rgba(0,0,0,.18); }
.menu-langs .lang { color: rgba(255,255,255,.75); }
.menu-langs .lang.is-active { background: var(--white); color: var(--red); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
/* Menu open: de pagina staat vast (ook op iPhone) en de balk met logo en kruisje blijft altijd bovenaan staan. */
html.menu-open { overflow: hidden; }
html.menu-open body { position: fixed; left: 0; right: 0; width: 100%; padding-top: var(--nav-h); }
html.menu-open .nav { position: fixed; top: 0; left: 0; right: 0; background: var(--white); }
.menu { overscroll-behavior: contain; touch-action: none; }

/* Hero */
.hero { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(24px, 4vw, 48px) var(--gutter) 0; position: relative; z-index: 2; }
.hero-copy { width: 100%; max-width: 100%; margin-block: auto; padding-block: clamp(16px, 3vw, 40px); display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { justify-content: center; }

.hero .display .line { display: block; white-space: nowrap; }
.swap { color: var(--red); position: relative; display: block; }
.swap-word { display: inline-block; white-space: nowrap; }
/* slide (oude stijl) */
.swap[data-mode="slide"] .swap-word { transition: transform .5s var(--spring), opacity .35s; }
.swap[data-mode="slide"] .swap-word.is-out { transform: translateY(-.35em) rotate(-2deg); opacity: 0; transition-duration: .25s; }
.swap[data-mode="slide"] .swap-word.is-in { transform: translateY(.35em) rotate(2deg); opacity: 0; transition: none; }
/* roll: als een slotmachine, van onder naar boven */
.swap[data-mode="roll"] { overflow: hidden; height: 1em; line-height: 1; }
.swap[data-mode="roll"] .swap-reel { display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.swap[data-mode="roll"] .swap-reel > span { display: block; height: 1em; line-height: 1; white-space: nowrap; }
/* scramble: letters flikkeren tot het nieuwe woord staat */
.swap[data-mode="scramble"] .swap-word { font-variant-ligatures: none; }
.swap[data-mode="scramble"] .swap-word .g { opacity: .55; }
.hero .intro { max-width: 84ch; font-size: var(--fs-3); color: var(--mut); margin: 32px auto 36px; text-wrap: pretty; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 0; }
@media (max-width: 699px) { .hero .eyebrow { display: inline; } .hero .eyebrow::before { display: inline-block; vertical-align: 0; margin-right: 8px; } .hero-cta { gap: 8px; } .hero-cta .pill { padding: 12px 18px; } .hero .intro { margin: 16px auto 20px; } .hero-copy { padding-block: 8px; } .play { height: 150px; } .play-hint { display: none; } }
.play { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); height: clamp(190px, 22vw, 260px); margin-top: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.play-hint { position: absolute; right: var(--gutter); top: 0; font-size: var(--fs-1); color: var(--mut); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.pill-body, .star-body { position: absolute; left: 0; top: 0; will-change: transform; cursor: grab; }
.pill-body:active, .star-body:active { cursor: grabbing; }
.pill-body { display: grid; place-items: center; height: 1.85em; padding-inline: .9em; border-radius: 999px; font-weight: 900; text-transform: uppercase; font-size: var(--fs-6); letter-spacing: -.01em; border: var(--stroke) solid var(--ink); background: var(--white); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
.pill-body { transition: box-shadow .25s; }
.pill-body:hover, .pill-body.pill-red:hover { box-shadow: 0 10px 0 -4px var(--ink); }
.pill-body.pill-black:hover { box-shadow: 0 10px 0 -4px var(--red); }
.pill-body.pill-red { background: var(--red); border-color: var(--red); color: var(--white); }
.pill-body.pill-black { background: var(--ink); color: var(--white); }
.pill-body.pill-outline { background: var(--white); }
.star-body { width: clamp(44px, 6vw, 72px); height: clamp(44px, 6vw, 72px); color: var(--ink); }
.star-body.star-red { color: var(--red); }
.star-body.star-small { width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px); }
.star-body svg { width: 100%; height: 100%; }
.play.is-static .pill-body, .play.is-static .star-body { position: static; }
.play.is-static { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; height: auto; padding-block: 40px; }

/* Marquee */
.marquee { overflow: hidden; background: var(--red); color: var(--white); padding: 14px 0; border-block: var(--stroke) solid var(--ink); }
.marquee-track { display: flex; gap: 40px; white-space: nowrap; width: max-content; will-change: transform; font-weight: 900; text-transform: uppercase; font-size: var(--fs-4); align-items: center; }
.marquee-track i { display: inline-flex; width: 1em; height: 1em; }
.marquee-track i svg { width: 100%; height: 100%; }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Services */
.service-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.service { position: relative; border-radius: var(--radius); padding: clamp(28px, 3vw, 44px); border: var(--stroke) solid var(--ink); background: var(--white); min-height: 0; display: flex; flex-direction: column; overflow: hidden; transition: transform .4s var(--spring), box-shadow .3s; }
.service:hover, .service-outline:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 16px 0 -6px var(--ink); }
.service h3 { font-size: var(--fs-5); }
.service-tag { font-weight: 600; margin: 8px 0 20px; opacity: .8; }
.service ul { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 8px; }
.service li { padding-left: 22px; position: relative; font-weight: 600; transform: translateX(0); transition: transform .35s var(--spring); }
.service li::before { content: '✦'; position: absolute; left: 0; }
.service:hover li { transform: translateX(6px); }
.service:hover li:nth-child(2) { transition-delay: 40ms; } .service:hover li:nth-child(3) { transition-delay: 80ms; } .service:hover li:nth-child(4) { transition-delay: 120ms; }
.service-star { position: absolute; right: -10px; top: -10px; width: 96px; height: 96px; opacity: .14; transition: transform .6s var(--spring), opacity .3s; }
.service:hover .service-star { transform: rotate(90deg) scale(1.15); opacity: .35; }
.service-star svg { width: 100%; height: 100%; }
.service-red { background: var(--red); border-color: var(--red); color: var(--white); }
.service-red .service-star { color: var(--white); opacity: .3; }
.service-red:hover .service-star { opacity: .7; }
.service-red:hover { box-shadow: 0 16px 0 -6px var(--ink); }
.service-black { background: var(--ink); color: var(--white); }
.service-black:hover { box-shadow: 0 16px 0 -6px var(--red); }

/* Cases */
.cases { background: var(--grey); }
.cases-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eyebrow eyebrow" "title arrows" "lead lead"; column-gap: 24px; margin-bottom: 32px; }
.cases-head .eyebrow { grid-area: eyebrow; }
.cases-head .h2 { grid-area: title; }
.cases-head .lead { grid-area: lead; }
.cases-arrows { grid-area: arrows; align-self: center; }
.cases-head .h2 { margin-bottom: 0; }
.cases-head .lead { margin-top: 20px; }
.cases-arrows { display: none; gap: 8px; }
@media (min-width: 800px) { .cases-arrows { display: inline-flex; } }
.arrow { width: 56px; height: 56px; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--white); font-weight: 900; font-size: var(--fs-4); transition: transform .3s var(--spring), background .2s, color .2s; }
.arrow:hover { background: var(--ink); color: var(--white); transform: scale(1.08); }
/* Carrousel: de zichtbare kaarten staan gecentreerd, links en rechts steekt altijd een stuk van de volgende kaart uit; --edge wordt door app.js berekend. Klonen vooraan en achteraan maken hem oneindig. */
.cases-track { --gap: 20px; --edge: var(--gutter); display: flex; gap: var(--gap); overflow: auto hidden; scroll-snap-type: x mandatory; padding: 8px var(--edge); scroll-padding-inline: var(--edge); scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.cases-track.no-snap { scroll-snap-type: none; }
.cases-track::-webkit-scrollbar { display: none; }
.cases-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cases-track.is-dragging .case { pointer-events: none; }
.case { flex: 0 0 min(82vw, 560px); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--white); border: var(--stroke) solid var(--ink); overflow: hidden; text-decoration: none; }
.case-media { aspect-ratio: 16 / 10; background: var(--ink); overflow: hidden; }
.case-media video, .case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.case:hover .case-media video, .case:hover .case-media img { transform: scale(1.04); }
.case-body { padding: 24px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 10px; flex: 1; }
.case-body h3 { font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) { .case-body h3 { white-space: normal; min-height: 2.1em; } }
.case-kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-kicker { margin: 0; font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.case-stat { margin: 8px 0 0; display: flex; flex-direction: column; }
.case-stat .num { font-weight: 900; font-size: var(--fs-5); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-stat-label { color: var(--mut); font-size: var(--fs-2); }
.case-open { align-self: end; justify-self: start; padding: 10px 18px; }
/* De kaart zelf beweegt niet; enkel de knop reageert, zoals elke andere knop, met een rode slagschaduw. */
.case:hover .case-open { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 10px 0 -4px var(--ink); }

/* Scores */
.scores { background: var(--ink); color: var(--white); }
.scores .eyebrow { color: var(--red); }
.score-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; }
.score { border-top: var(--stroke) solid var(--red); padding-top: 20px; }
.score dt { font-weight: 900; font-size: var(--fs-6); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score dd { margin: 10px 0 0; color: rgba(255,255,255,.7); max-width: 26ch; font-size: var(--fs-2); text-wrap: pretty; }

/* Brand book */
.values { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); position: relative; padding-bottom: 36px; }
@media (min-width: 900px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value { position: relative; aspect-ratio: 1; border: 0; background: none; padding: 0; perspective: 1200px; text-align: left; }
.value-face { position: absolute; inset: 0; border-radius: var(--radius); display: grid; place-items: center; padding: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--spring); border: var(--stroke) solid var(--ink); background: var(--white); color: var(--ink); }
.value-front span { font-weight: 900; text-transform: uppercase; font-size: var(--fs-5); }
.value-back { transform: rotateY(180deg); align-content: center; gap: 10px; font-size: var(--fs-2); line-height: 1.4; }
.value-back strong { text-transform: uppercase; font-weight: 900; }
.value[aria-pressed="true"] .value-front { transform: rotateY(180deg); }
.value[aria-pressed="true"] .value-back { transform: rotateY(360deg); }
.value:hover .value-face { box-shadow: 0 14px 0 -6px var(--ink); }
.value-precise:hover .value-face { box-shadow: 0 14px 0 -6px var(--red); }
.value-precise .value-front { background: var(--ink); color: var(--white); }
.value-rebellious .value-front { background: var(--red); border-color: var(--red); color: var(--white); }
.value-rebellious .value-back { background: var(--red); border-color: var(--red); color: var(--white); }
.value-precise .value-back { background: var(--ink); color: var(--white); }
@media (max-width: 599px) { .value { aspect-ratio: 1; } .value-face { padding: 12px; } .value-back { font-size: var(--fs-1); line-height: 1.3; gap: 6px; } }
@media (max-width: 359px) { .value { aspect-ratio: 5 / 6; } } /* heel smalle gsm's: iets hoger zodat de achterkant blijft passen */
.flip-hint { position: absolute; right: 0; bottom: 0; margin: 0; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--mut); }
.brand-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; border: var(--stroke) solid var(--ink); background: var(--white); font-weight: 600; font-size: var(--fs-2); transition: transform .3s var(--spring); }
.chip:hover { transform: translateY(-3px); }
.chip-swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.chip-hex { color: var(--mut); font-variant-numeric: tabular-nums; }
.chip-copied { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--white); opacity: 0; transition: opacity .2s; font-weight: 700; }
.chip.is-copied .chip-copied { opacity: 1; }
.gallery { overflow: hidden; margin-top: clamp(48px, 6vw, 96px); }
.gallery-track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.gallery-track img { height: clamp(180px, 26vw, 360px); width: auto; border-radius: var(--radius-sm); }

/* Team */
.team { background: var(--grey); }
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.team-tools { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.team-tools .pill { padding-block: 0; min-height: 50px; display: inline-flex; align-items: center; }
.filters { position: relative; display: flex; gap: 6px; flex-wrap: nowrap; padding: 4px; background: var(--white); border-radius: 999px; border: var(--stroke) solid var(--ink); align-items: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filters::-webkit-scrollbar { display: none; }
.chip-filter { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 699px) { .team-tools { width: 100%; } .filters { width: 100%; } }
.filter-thumb { position: absolute; left: 0; top: 0; height: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform .45s var(--spring), width .45s var(--spring), height .45s var(--spring); pointer-events: none; }
.chip-filter { position: relative; z-index: 1; border: 0; background: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: var(--fs-2); transition: background .2s, color .25s; }
.chip-filter:hover { background: var(--grey); }
.chip-filter.is-active { color: var(--white); }
.chip-filter.is-active:hover { background: transparent; }
.filters.no-thumb .chip-filter.is-active { background: var(--ink); }
.team-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); } }
.member { margin: 0; border-radius: var(--radius-sm); border: var(--stroke) solid var(--ink); background: var(--white); overflow: hidden; transition: transform .45s var(--spring), box-shadow .3s, opacity .3s; }
.member.is-moving { transition: none; }
.member.is-leaving { pointer-events: none; }
.member:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 14px 0 -6px var(--red); }
.member.is-hidden { display: none; }
.member-photo { aspect-ratio: 1; background: radial-gradient(120% 90% at 20% 0%, #F94646 0%, #4a0f0f 45%, #1A1A1A 100%); overflow: hidden; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.member:hover .member-photo img { transform: scale(1.06); }
.member-placeholder { display: grid; place-items: center; width: 100%; height: 100%; padding: 30%; }
.member-placeholder svg { width: 100%; height: auto; opacity: .9; }
.member figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member figcaption strong, .member figcaption span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member figcaption strong { font-weight: 700; font-size: var(--fs-2); line-height: 1.2; }
.member figcaption span { color: var(--mut); font-size: var(--fs-1); }
@media (max-width: 699px) { .member figcaption { padding: 10px 10px 12px; } .member figcaption strong { font-size: var(--fs-1); } }

/* Contact */
.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .service { min-height: 360px; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }
.contact .display { margin-bottom: 20px; }
.contact-alt { margin: 0 0 20px; font-weight: 600; }
.contact-alt a { color: var(--red); text-decoration: none; border-bottom: 2px solid currentColor; }
.contact-address { font-style: normal; color: var(--mut); line-height: 1.5; }
.contact-address strong { color: var(--ink); }
.form { display: grid; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); border: var(--stroke) solid var(--ink); background: var(--grey); }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; }
.form input, .form textarea { font: inherit; font-size: var(--fs-3); font-weight: 400; padding: 14px 16px; border-radius: 16px; border: var(--stroke) solid var(--ink); background: var(--white); color: var(--ink); width: 100%; text-transform: none; letter-spacing: 0; transition: box-shadow .2s; }
.form input:focus, .form textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(249,70,70,.35); }
.form textarea { resize: vertical; min-height: 140px; }
.form .hp { position: absolute; left: -9999px; }
.form-submit { justify-self: start; }
.form-status { margin: 0; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--red); }
.form.is-busy .form-submit { opacity: .6; pointer-events: none; }

/* Footer */
/* De footer is minstens zo hoog als het zichtbare stuk van de David min wat boven de rode lijn uitsteekt; de inhoud zakt naar onder. */
.footer { --david-w: 400px; --david-up: calc(var(--david-w) * .34); --david-crop: .9; background: var(--ink); color: var(--white); border-top: var(--stroke) solid var(--ink); position: relative; padding-bottom: 32px; overflow-x: clip; min-height: calc(var(--david-w) * 1.2027 * var(--david-crop) - var(--david-up)); display: flex; flex-direction: column; }
.footer > .wrap { flex: 1; display: flex; flex-direction: column; }
.footer::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--stroke)); height: var(--stroke); background: var(--red); }
/* De David komt uit de footer: de buste (met transparantie) steekt boven de rode lijn uit en wordt op de onderrand van de pagina afgesneden net onder de bovenkant van de schouders (90% van de hoogte, --david-crop; lijn van Mathias 01/10); enkel de brilband is video.
   Desktop: bovenkant --david-up boven de rode lijn, onderkant op de onderrand; de buste is 1/.9 zo hoog als dat vak en loopt eronder weg (overflow: hidden, dus geen extra scrollruimte). Is de footer hoger, dan wordt de David iets groter. */
.david { position: absolute; top: calc(-1 * var(--david-up)); bottom: 0; left: 50%; transform: translateX(-50%); overflow: hidden; z-index: 1; }
.david-bust { height: calc(100% / var(--david-crop)); width: auto; display: block; }
.david-band { position: absolute; left: var(--band-l); top: calc(var(--band-t) / var(--david-crop)); width: var(--band-w); height: calc(var(--band-h) / var(--david-crop)); object-fit: fill; -webkit-mask-image: url(/assets/david/band-mask.png); mask-image: url(/assets/david/band-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.contact { padding-bottom: calc(clamp(96px, 14vw, 208px) + 136px); } /* 136px = --david-up op desktop */
.footer-grid { flex: 1; display: grid; gap: 48px; grid-template-columns: 1fr calc(var(--david-w) * 1.2) 1fr; align-items: end; padding-block: 40px 32px; }
.footer-right { grid-column: 3; }
.footer-copy { max-width: calc((100% - var(--david-w) * 1.2) / 2 - 24px); }
.footer-col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding-bottom: 8px; }
.footer-right { align-items: flex-end; text-align: right; }
@media (max-width: 1199px) {
  /* Gsm en tablet: baseline en knoppen over de volle breedte, daaronder het adres links en de David rechtsonder (vaste breedte, een kwart buiten beeld, onderaan verankerd en daar afgesneden net onder de bovenkant van de schouders). */
  .footer { --david-w: min(72vw, 440px); min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .footer-col:first-child { grid-column: 1 / -1; }
  .footer-right { grid-column: 1; grid-row: 2; align-items: flex-start; text-align: left; }
  .david { top: auto; left: auto; right: calc(-.25 * var(--david-w)); transform: none; width: var(--david-w); height: calc(var(--david-w) * 1.2027 * var(--david-crop)); }
  .david-bust { width: 100%; height: auto; }
  .footer-copy { max-width: calc(100vw - .75 * var(--david-w) - var(--gutter) - 12px); } /* links van de David */
  .contact { padding-bottom: clamp(96px, 14vw, 208px); }
}
.footer-col h4 { margin: 0; font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.footer-baseline { margin: 0; max-width: 28ch; font-size: var(--fs-3); font-weight: 600; color: var(--white); }
.footer-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.footer-links .pill { padding: 10px 20px; }
.footer address { font-style: normal; line-height: 1.5; font-size: var(--fs-3); font-weight: 600; white-space: nowrap; } /* straat en huisnummer op één lijn, ook naast de David op gsm */
.footer-langrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.footer-right .footer-langrow { justify-content: flex-end; }
.footer .langs { background: rgba(255,255,255,.1); }
.footer .lang { color: rgba(255,255,255,.7); }
.footer .lang.is-active { background: var(--white); color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: var(--fs-2); color: rgba(255,255,255,.6); }
.footer-copy { margin: 0; }
.totop { color: rgba(255,255,255,.7); text-decoration: none; font-weight: 600; font-size: var(--fs-2); }
.totop:hover { color: var(--white); }
/* Gsm: geen tekstlink "terug naar boven" onderaan, maar een ronde pijlknop (zoals bij de cases) onder de taalkeuze. */
.totop-arrow { display: none; text-decoration: none; color: var(--ink); place-items: center; line-height: 1; margin-top: 24px; } /* 16px kolomruimte + 24px = 40px, evenveel als tussen de footerblokken */
@media (max-width: 1199px) { .totop { display: none; } .totop-arrow { display: grid; } } /* zelfde grens als de gestapelde footer */

/* Cases-overzicht en casepagina's (spoor 2). Zelfde tokens als de homepage: zeven tekststappen, pills, dikke stroke, harde slagschaduw. */
.cases-foot { display: flex; justify-content: center; margin-top: 32px; }
.cases-overview { background: var(--grey); padding-top: clamp(48px, 7vw, 104px); }
.cases-overview .display { margin-bottom: 20px; }
.cases-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 800px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
.cases-grid .case { flex: none; }
.case:hover { box-shadow: 0 16px 0 -6px var(--ink); }
.cases-track .case:hover { box-shadow: none; }

/* Hero van een case: woorden schuiven een voor een omhoog, tags vallen erna binnen, het beeld kantelt recht bij het scrollen. */
.case-hero { padding: clamp(32px, 5vw, 72px) 0 0; position: relative; z-index: 1; }
.case-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--mut); margin-bottom: clamp(24px, 4vw, 48px); transition: color .2s, transform .3s var(--spring); }
.back:hover { color: var(--ink); transform: translateX(-4px); }
.case-title { margin: 4px 0 18px; max-width: 16ch; }
.case-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.case-title .w > span { display: inline-block; transform: translateY(105%); animation: word-in .9s var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 90ms); }
@keyframes word-in { to { transform: none; } }
.case-lede { font-size: var(--fs-4); font-weight: 700; margin: 0 0 22px; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: var(--fs-2); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 8px 16px; border-radius: 999px; border: var(--stroke) solid var(--ink); opacity: 0; transform: translateY(12px) rotate(-3deg); animation: tag-in .6s var(--spring) forwards; animation-delay: calc(500ms + var(--i) * 70ms); }
@keyframes tag-in { to { opacity: 1; transform: none; } }
.case-hero-media { margin-top: clamp(32px, 5vw, 64px); border-radius: var(--radius); overflow: hidden; background: var(--ink); transform: scale(var(--scale, .96)); transform-origin: 50% 0; will-change: transform; }
.case-hero-media video, .case-hero-media img { width: 100%; height: auto; }
@media (max-width: 699px) { .case-title { max-width: none; } }

/* Scorebord van een case: grote teller, groei als rode badge, twee balken (voor en na) die vollopen. */
.case-score { background: var(--ink); color: var(--white); margin-top: calc(-1 * clamp(80px, 12vw, 180px)); padding-top: calc(clamp(96px, 14vw, 208px) + clamp(80px, 12vw, 180px)); }
.case-scores { display: grid; gap: 24px 32px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; }
.cscore { border-top: var(--stroke) solid var(--red); padding-top: 20px; }
.cscore dt { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cscore-num { font-weight: 900; font-size: var(--fs-6); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cscore-growth { font-size: var(--fs-2); font-weight: 700; background: var(--red); color: var(--white); padding: 4px 10px; border-radius: 999px; white-space: nowrap; transform: rotate(-4deg); margin-top: 2px; }
.cscore dd { margin: 12px 0 0; display: grid; gap: 10px; }
.cscore-label { color: rgba(255,255,255,.8); font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cscore-was { color: rgba(255,255,255,.55); font-size: var(--fs-2); }
.cscore-was::before { content: '↗ '; color: var(--red); font-weight: 700; }

/* Verhaal: links een kleverige inhoudstafel met voortgang, rechts de hoofdstukken. */
.story-grid { display: grid; gap: 48px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .story-grid { grid-template-columns: 240px 1fr; gap: 72px; } }
.story-nav { display: none; }
@media (min-width: 1000px) { .story-nav { display: block; position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; } }
.story-nav ol { list-style: none; margin: 0; padding: 0 0 0 20px; display: grid; gap: 4px; }
.story-nav a { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; text-decoration: none; font-weight: 700; font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .02em; color: var(--mut); transition: color .2s, transform .3s var(--spring); }
.story-nav a .n { font-size: var(--fs-1); color: var(--red); font-variant-numeric: tabular-nums; }
.story-nav a:hover { color: var(--ink); }
.story-nav a.is-active { color: var(--ink); transform: translateX(6px); }
.story-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 999px; background: var(--grey-2); overflow: hidden; }
.story-progress i { position: absolute; inset: 0; background: var(--red); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
.story { display: grid; gap: clamp(72px, 10vw, 144px); min-width: 0; }
.chapter { scroll-margin-top: calc(var(--nav-h) + 24px); }
.chapter-label { margin-bottom: 18px; }
.chapter-label .n { font-variant-numeric: tabular-nums; }
.chapter-label::before { display: none; }
.chapter-label .n::after { content: '·'; margin-left: 8px; }
.chapter-title { font-size: var(--fs-5); line-height: 1.05; max-width: 22ch; margin-bottom: 24px; hyphens: manual; overflow-wrap: normal; } /* woorden nooit afbreken; hou titels dus zonder extreem lange woorden */
.chapter { min-width: 0; }
.chapter-body { max-width: 66ch; }
.chapter-body p { font-size: var(--fs-3); line-height: 1.55; margin: 0 0 1em; color: #3a3a3a; }
.chapter-media { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 700px) { .chapter-media.n-2 { grid-template-columns: repeat(2, 1fr); } .chapter-media.n-3 { grid-template-columns: repeat(3, 1fr); } }
.shot { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--grey); transition: transform .45s var(--spring), box-shadow .3s, opacity .7s var(--ease); }
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform .8s var(--ease); }
.shot[data-reveal] { transform: translateY(28px) rotate(1.5deg); }
.shot[data-reveal].is-in { transform: none; }
.shot:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 14px 0 -6px var(--red); }
.shot:hover img { transform: scale(1.04); }
.chapter-media.n-1 .shot img { aspect-ratio: auto; }
.shot-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* Lightbox: beeld op volle grootte, pijlen naar het vorige en volgende beeld, sluiten met het kruisje, Esc of een klik ernaast. */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(26,26,26,.94); display: grid; place-items: center; padding: clamp(16px, 4vw, 64px); animation: lb-in .25s var(--ease); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 2 * clamp(16px, 4vw, 64px)); border-radius: var(--radius-sm); animation: lb-img .35s var(--spring); }
.lightbox .arrow { position: absolute; }
.lightbox-close { top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); }
.lightbox-prev { left: clamp(12px, 2vw, 24px); top: 50%; margin-top: -28px; }
.lightbox-next { right: clamp(12px, 2vw, 24px); top: 50%; margin-top: -28px; }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { display: none; }
@media (max-width: 699px) { .lightbox-prev, .lightbox-next { top: auto; bottom: 16px; margin-top: 0; } }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-img { from { transform: scale(.94); opacity: 0; } }
html.lightbox-open { overflow: hidden; }
.chapter-link { margin: 28px 0 0; }

/* Film met geluid: poster met een grote rode knop; na een klik speelt de video met bediening. */
.film { position: relative; margin-top: 32px; border-radius: var(--radius); overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg); font-size: var(--fs-2); padding: 16px 28px; white-space: nowrap; }
.film-play:hover { transform: translate(-50%, calc(-50% - 3px)) rotate(-3.5deg); }
.film.is-playing .film-play { opacity: 0; pointer-events: none; }

/* Gastenwand (Studio GG) */
.guests-head { margin-top: clamp(48px, 6vw, 80px); }
.guests-title { font-size: var(--fs-5); margin: 0 0 20px; }
.guests { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .guests { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .guests { grid-template-columns: repeat(5, 1fr); } }
.guest { margin: 0; border-radius: var(--radius-sm); border: var(--stroke) solid var(--ink); background: var(--white); overflow: hidden; transition: transform .45s var(--spring), box-shadow .3s, opacity .7s var(--ease); }
.guest:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 14px 0 -6px var(--red); }
.guest-photo { aspect-ratio: 1; overflow: hidden; background: var(--ink); margin: -1px -1px 0; } /* 1px over de rand, zodat er geen wit lijntje overblijft naast de afgeronde stroke */
.guest-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1.02); transition: filter .4s, transform .6s var(--ease); }
.guest:hover .guest-photo img { filter: none; transform: scale(1.06); }
@media (hover: none) { .guest-photo img { filter: none; } }
.guest figcaption { padding: 12px 14px 14px; display: grid; gap: 4px; }
.guest figcaption strong { font-size: var(--fs-2); line-height: 1.2; }
.guest figcaption span { font-size: var(--fs-1); color: var(--mut); line-height: 1.35; }

/* Volgende case: compacte rode band met één lopende titel en een pijl; de band loopt altijd even snel. */
.next-case { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); background: var(--red); color: var(--white); text-decoration: none; border-block: var(--stroke) solid var(--ink); padding: 18px var(--gutter); overflow: hidden; }
.next-label { flex: 0 0 auto; font-size: var(--fs-1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 8px; }
.next-label::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.next-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.next-track { display: flex; gap: 32px; width: max-content; align-items: center; font-weight: 900; text-transform: uppercase; font-size: var(--fs-6); line-height: 1; white-space: nowrap; animation: next-run 30s linear infinite; }
.next-track i { display: inline-flex; width: .5em; height: .5em; color: var(--ink); }
.next-track i svg { width: 100%; height: 100%; }
@keyframes next-run { to { transform: translateX(-50%); } }
.next-arrow { display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--white); color: var(--ink); border-color: var(--ink); }
.next-case:hover .next-arrow { transform: translateX(6px) scale(1.08); background: var(--ink); color: var(--white); }
/* Gsm: bovenaan het label links en de pijl rechts, daaronder de lopende titel over de volle breedte. */
@media (max-width: 599px) {
  .next-case { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label arrow" "ticker ticker"; align-items: center; row-gap: 12px; padding-block: 16px 20px; }
  .next-label { grid-area: label; }
  .next-arrow { grid-area: arrow; width: 44px; height: 44px; font-size: var(--fs-3); }
  .next-marquee { grid-area: ticker; margin-inline: calc(-1 * var(--gutter)); -webkit-mask-image: none; mask-image: none; }
}

/* Afsluiter vóór de footer (met ruimte voor de David die uit de footer steekt) */
.case-cta { padding-bottom: calc(clamp(96px, 14vw, 208px) + 136px); } /* 136px = --david-up op desktop */
.case-cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
@media (max-width: 1199px) { .case-cta { padding-bottom: clamp(96px, 14vw, 208px); } }

/* 404 */
.gameover { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); background: var(--ink); color: var(--white); }

.gameover .lead { color: rgba(255,255,255,.7); margin-inline: auto; }
.gameover video { width: min(360px, 70vw); margin: 0 auto 24px; mix-blend-mode: lighten; }
.gameover .langs { margin-top: 24px; background: rgba(255,255,255,.1); }
.gameover .lang { color: rgba(255,255,255,.7); }

/* Coming soon */
.soon { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); background: var(--red); color: var(--white); }
.soon .mark { width: 96px; margin: 0 auto 24px; }

/* Minder beweging */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pill, .service, .case, .member, .chip, .value-face, .swap-word { transition: none !important; }
  .marquee-track, .gallery-track { transform: none !important; }
  .case-title .w > span, .tags li { animation: none; opacity: 1; transform: none; }
  .case-hero-media { transform: none; }
  .next-track { animation: none; }
  .lightbox, .lightbox img { animation: none; }
}