/* Sterling Cooper v4: black + silver, no red. Tokens first; everything else uses them. */
@font-face { font-family: "Bodoni Moda"; src: url(../fonts/BodoniModa-normal.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(../fonts/BodoniModa-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(../fonts/InterTight-normal.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/GeistMono-normal.woff2) format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

:root {
  --ink: #050505;
  --ink-2: #0e0e0f;
  --ink-3: #18181a;
  --paper: #f4f2ee;
  --mute: rgba(244, 242, 238, .58);
  --faint: rgba(244, 242, 238, .34);
  --line: rgba(244, 242, 238, .12);
  --silver: #c9ced6;
  --red: #ec2c24;   /* only for the inner word ring (Mohamed, 3 Nov 2026) */
  --silver-grad: linear-gradient(100deg, #8d939c 0%, #f5f6f8 42%, #a3a9b2 66%, #eceef1 100%);
  --glow: rgba(210, 218, 230, .28);
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font: 400 17px/1.5 var(--sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The 3D world (behind everything) ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; touch-action: pan-y; }
.no-gl #gl { display: none; }
.no-gl body, .no-gl .fallback { background: radial-gradient(60% 50% at 50% 38%, rgba(200, 208, 220, .14), transparent 70%), var(--ink); }
.fallback { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none; }
.no-gl .fallback { display: block; }
.fallback img { position: absolute; left: 50%; top: 34%; width: min(56vw, 360px); transform: translate(-50%, -50%); filter: invert(1) drop-shadow(0 0 40px var(--glow)); opacity: .9; }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 60; background: var(--ink);
  display: grid; place-items: center; transition: opacity .7s var(--ease), visibility .7s;
}
.loader__mark { width: min(44vw, 230px); height: auto; overflow: visible; }
.loader__mark path { fill: none; stroke: var(--silver); stroke-width: 1.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.loader__count { position: absolute; right: var(--pad); bottom: var(--pad); font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; }
.loader__line { position: absolute; left: var(--pad); bottom: var(--pad); margin: 0; font: 400 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 600px) { .loader__name { display: none; } }
.is-ready .loader, .no-intro .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- HUD (top bar) ---------- */
.hud {
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: calc(var(--pad) * .6 + env(safe-area-inset-top)) var(--pad) 0;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(180deg, rgba(5,5,5,.88), rgba(5,5,5,.55) 55%, transparent); pointer-events: none; z-index: -1; }
.hud__logo { display: flex; align-items: center; gap: 10px; }
.hud__logo img { width: 30px; height: auto; filter: invert(1); }
.hud__logo span { font: 500 13px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.label { font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* Tactile key buttons (Peaches) */
.key {
  position: relative; display: inline-grid; align-content: space-between; min-width: 132px; min-height: 64px; padding: 10px 12px 10px;
  border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, #1e1e21, #121214);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 #000, 0 10px 24px rgba(0, 0, 0, .5);
  font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper);
  transition: transform .12s, box-shadow .12s, border-color .3s;
}
.key:hover { border-color: rgba(255, 255, 255, .4); }
.key:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 0 #000, 0 4px 10px rgba(0, 0, 0, .5); }
.key i { justify-self: end; font-style: normal; color: var(--silver); font-size: 15px; line-height: 1; }
.key--light { background: linear-gradient(180deg, #f4f5f7, #b9bec6); color: #0b0b0c; border-color: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #55595f, 0 10px 30px rgba(200, 208, 220, .18); }
.key--light i { color: #0b0b0c; }

/* ---------- Content ---------- */
main { position: relative; z-index: 10; }
section { position: relative; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.eyebrow { font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 18px; }
.h2 {
  font: 400 clamp(44px, 9.4vw, 132px)/.92 var(--serif); letter-spacing: -.02em; margin: 0;
  font-variation-settings: "opsz" 96; text-wrap: balance;
}
.h2 em, .accent, .hero__slogan em { font-style: italic; color: var(--silver); background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.body { font: 400 clamp(16px, 1.25vw, 19px)/1.55 var(--sans); color: var(--mute); max-width: 34em; margin: 0; text-wrap: balance; }

/* Hero */
.hero { min-height: 100svh; display: grid; align-content: end; padding-bottom: calc(var(--pad) * 2.6 + env(safe-area-inset-bottom)); }
.bigname {
  margin: 0; font: 400 clamp(56px, 19vw, 180px)/.82 var(--serif); letter-spacing: -.03em; text-transform: uppercase;
  font-variation-settings: "opsz" 96; display: grid;
}
.bigname span { display: block; overflow: hidden; padding-bottom: .04em; }
.bigname span > i { display: inline-block; font-style: normal; will-change: transform; }
.hero__row { display: grid; gap: 18px; margin-top: 22px; }
.hero__slogan { font: 400 clamp(22px, 2.6vw, 34px)/1.1 var(--serif); margin: 0; letter-spacing: -.01em; }
.hero__lead { font: 400 15px/1.5 var(--sans); color: var(--mute); max-width: 30em; margin: 0; text-wrap: balance; }
.cue { position: absolute; left: 50%; bottom: calc(var(--pad) * .7 + env(safe-area-inset-bottom)); width: 22px; height: 22px; margin-left: -11px; color: var(--paper); filter: drop-shadow(0 0 10px var(--glow)); animation: cue 1.8s ease-in-out infinite; pointer-events: none; }
.cue svg { display: block; }
@keyframes cue { 0%, 100% { opacity: .35; transform: translateY(-3px); } 50% { opacity: 1; transform: translateY(4px); } }

/* Work flight */
.work__intro { min-height: 90svh; display: grid; align-content: center; gap: 22px; background: linear-gradient(180deg, transparent, rgba(5,5,5,.62) 28%, rgba(5,5,5,.62) 72%, transparent); }
.work__intro .h2, .work__intro .body { text-shadow: 0 2px 30px rgba(5,5,5,.9); }
.flight { position: relative; }
.flight__hud {
  position: sticky; top: 0; height: 100svh; display: grid; align-content: end; pointer-events: none;
  padding: 0 var(--pad) calc(var(--pad) * 2.6 + env(safe-area-inset-bottom));
}
.flight__hud::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .78) 42%, rgba(5, 5, 5, 0) 100%); pointer-events: none; }
.flight__meta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 8px 16px; pointer-events: auto; transition: opacity .35s; }
.flight__client { font: 400 clamp(30px, 3.4vw, 50px)/1 var(--serif); letter-spacing: -.01em; color: var(--paper); text-shadow: 0 2px 24px rgba(5, 5, 5, .8); white-space: nowrap; }
.flight__client.is-long { font-size: clamp(24px, 3vw, 46px); }
.flight__camp { font: 400 clamp(15px, 1.15vw, 17px)/1.3 var(--sans); color: rgba(244, 242, 238, .86); text-shadow: 0 2px 18px rgba(5, 5, 5, .9); }
.flight__keys { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 16px; }
.flight__sound .w1, .flight__sound .w2 { opacity: .25; transition: opacity .3s; }
.flight__sound[aria-pressed="true"] .w1, .flight__sound[aria-pressed="true"] .w2 { opacity: 1; animation: wave 1.4s ease-in-out infinite; }
.flight__sound[aria-pressed="true"] .w2 { animation-delay: .2s; }
.flight__sound[data-state="blocked"] { animation: askTap 1.6s ease-in-out infinite; }
@keyframes askTap {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 #000, 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(244, 242, 238, 0), 0 0 22px rgba(244, 242, 238, 0); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 #000, 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(244, 242, 238, .55), 0 0 22px rgba(244, 242, 238, .18); }
}
@keyframes wave { 50% { opacity: .35; } }
.flight__bar { position: absolute; left: var(--pad); right: var(--pad); top: calc(64px + env(safe-area-inset-top)); height: 1px; background: var(--line); display: none; }
.flight__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--paper); }
.flight__list { list-style: none; margin: 0; padding: 0; }
.no-gl .flight__hud { display: none; }
.no-gl .flight { height: auto !important; }
.no-gl .flight__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 0 var(--pad) 60px; }
.flight__list li { display: none; }
.no-gl .flight__list li { display: block; }
.flight__list img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }   /* one shape for every tile (square crops the films, reels and posters least), so rows stay even */
.flight__list img[alt^="Fawry,"], .flight__list img[alt^="Voila,"] { object-position: 50% 0; }   /* keep their logo, headline and faces in the square */
.flight__list img[alt^="Kemroc,"] { object-position: 50% 30%; }

/* Forces */
.forces { padding-block: 18svh 10svh; overflow-x: hidden; overflow-x: clip; }
.lit { font: 400 clamp(26px, 4.1vw, 58px)/1.14 var(--serif); letter-spacing: -.012em; margin: 34px 0 0; max-width: 21em; text-wrap: pretty; }
.lit .w { opacity: .16; transition: opacity .2s linear; }
.ring { position: relative; left: 50%; translate: -50% 0; width: min(110vw, 980px); aspect-ratio: 1; margin: 12svh 0 0; }
@media (min-width: 600px) { .ring { width: min(94vw, 980px, calc(100svh - 120px)); } }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring text { font: 400 15px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--paper); }
.ring .ring__in text { fill: var(--red); }
.ring__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring__center img { width: 23%; filter: invert(1); opacity: .9; }

/* Services */
.services { padding-block: 14svh; }

/* Clients */
.clients { padding-block: 14svh; }
.partner { display: flex; width: max-content; align-items: center; gap: 12px; margin: clamp(48px, 8vw, 80px) auto 0; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; }
.partner img { height: 16px; width: auto; }
.partner span { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* Contact */
.contact { padding-block: 16svh 8svh; min-height: 100svh; display: grid; align-content: center; }
.contact .h2 { font-size: clamp(54px, 12vw, 170px); }
@media (min-width: 1024px) { .contact .h2 { font-size: clamp(80px, 9vw, 150px); max-width: 9.5em; } }
.contact__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.offices { display: grid; gap: 14px; margin-top: 56px; }
.office { border-top: 1px solid var(--line); padding-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; }
.office h3 { margin: 0; font: 400 30px/1 var(--serif); }
.office time { font: 500 13px/1 var(--mono); color: var(--paper); font-variant-numeric: tabular-nums; align-self: center; }
.office p { margin: 0; grid-column: 1 / -1; color: var(--mute); font-size: 15px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.socials a { font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-block: 10px; }
.socials a:hover { color: var(--paper); }

footer { position: relative; z-index: 10; padding: 28px var(--pad) calc(80px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
footer p { margin: 0; font: 400 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
footer p span { white-space: nowrap; }
@media (max-width: 759px) { footer { flex-direction: column; } footer p span { display: block; } }
@media (min-width: 760px) { footer p span + span::before { content: "· "; } }

/* Text decode (Peaches) */
[data-decode] .d { display: inline; }

/* ---------- Bigger screens ---------- */
@media (min-width: 760px) {
  .offices { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero__row { grid-template-columns: 1fr auto; align-items: end; }
}
@media (min-width: 1024px) {
  .hud { grid-template-rows: minmax(32.2px, auto); }   /* "We are" removed (Mohamed, 3 Nov 2026); the bar keeps its height, so the logo, the fade and the lion's room stay exactly as before */
  .flight__bar { display: block; }
}

/* Reduced motion: no flight, no scramble, calm fades only */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .lit .w { opacity: 1; }
}

/* Reduced motion: the work becomes a simple grid (same as phones without 3D) */
.reduced .flight__hud { display: none; }
.reduced .flight { height: auto !important; }
.reduced .flight__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; padding: 0 var(--pad) 60px; }
.reduced .flight__list li { display: block; }
.flight__list figcaption { margin-top: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.flight__list figcaption b { display: block; font: 400 24px/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--paper); }
.flight { height: calc(var(--n) * 74vh + 40vh); height: calc(var(--n) * 74svh + 40svh); }
#gl { height: 100vh; height: 100lvh; }
.veil { position: fixed; inset: 0; z-index: 1; background: var(--ink); opacity: 0; pointer-events: none; }
.case__mediawrap video, .case__mediawrap img { width: 100%; max-height: 60svh; object-fit: contain; border-radius: 16px; background: #000; }

/* ---------- v2: the three forces, films playing inside giant words ---------- */
.forces3 { display: grid; gap: clamp(40px, 8vw, 96px); margin-top: clamp(36px, 6vw, 64px); }
.f3 { display: grid; gap: 16px; }
.f3__type { position: relative; overflow: hidden; line-height: 0; background: var(--ink); }   /* ink under the 1px edge bands, so the white letters never flash there while they slide in */
.f3__type::before { content: ""; position: absolute; inset: 1px 0; background: #9ca2ab; will-change: transform; }   /* the letters' grey before the film, on its own layer: Safari then clips it exactly like the film and the mask (as a plain background its edge peeked out as a faint line) */
.f3__type video { position: absolute; top: 1px; left: 0; width: 100%; height: calc(100% - 2px); object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); }   /* 1px inside the top and bottom edge: at fractional pixel densities (Windows 125/150%, many Androids) the box edge snaps and would show a film line */
.f3.is-on .f3__type video { opacity: 1; }
/* the black mask never fades (only the letters inside it fade and slide in), so the grey box and the film never show
   around the word; its black reaches 1px past the box edges (clipped there), and the grey and the film sit 1px inside
   the top and bottom edges, so no film line shows at whole or fractional pixel densities */
.f3__mask { display: block; position: relative; background: var(--ink); mix-blend-mode: multiply; box-shadow: 0 0 0 1px var(--ink); }
.f3__word {
  display: block; position: relative; color: #fff;
  font: 400 21vw/.8 var(--serif); font-variation-settings: "opsz" 96; text-transform: uppercase; letter-spacing: -.03em;
  white-space: nowrap; padding: .03em 0 .07em;
}
.f3__text { display: grid; gap: 8px; }
.f3__text h3 { margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1.05 var(--serif); letter-spacing: -.01em; }
.f3__text p { margin: 0; color: var(--mute); max-width: 32em; font-size: 16px; line-height: 1.5; }
@media (min-width: 760px) { .f3__text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; gap: 24px; } }

/* ---------- v2: clients as two slow moving rows (always full, no empty tiles) ---------- */
.marquee { margin-top: clamp(36px, 6vw, 60px); display: grid; gap: clamp(10px, 2vw, 22px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__row { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.marquee__row.is-drag { cursor: grabbing; }
.marquee__track { display: flex; align-items: center; gap: clamp(44px, 6vw, 92px); width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.marquee li { flex: none; height: clamp(72px, 8vw, 110px); display: flex; align-items: center; justify-content: center; }
.marquee img { display: block; max-width: none; opacity: .88; pointer-events: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__row { cursor: auto; }
  .marquee__track { flex-wrap: wrap; width: auto; justify-content: center; column-gap: clamp(32px, 5vw, 72px); row-gap: 0; transform: none !important; }
  .marquee li[aria-hidden="true"] { display: none; }
}

/* ---------- v4: case viewer ---------- */
.case { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--paper); z-index: 80; }
.case::backdrop { background: rgba(0, 0, 0, .7); }
.case[open] { display: block; animation: caseIn .5s var(--ease); }
@keyframes caseIn { from { opacity: 0; transform: translateY(14px); } }
.case__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(78px + env(safe-area-inset-top)) var(--pad) calc(56px + env(safe-area-inset-bottom)); }
.case__head, .case__stage, .case__line, .case__story, .case__results, .case__more { max-width: 1180px; margin-left: auto; margin-right: auto; }
.case__num { margin: 0 0 10px; font: italic 400 20px/1 var(--serif); color: var(--silver); }
.case h3 { margin: 0; font: 400 clamp(42px, 7vw, 96px)/.95 var(--serif); letter-spacing: -.02em; }
.case__camp { margin: 10px 0 0; font: 400 clamp(15px, 1.3vw, 18px)/1.4 var(--sans); color: var(--mute); }
.case__stage { margin-top: 26px; border-radius: 16px; overflow: hidden; background: #000; }
.case__stage video, .case__stage img { display: block; width: 100%; max-height: 72svh; object-fit: contain; background: #000; }
.case__line { margin-top: 24px; margin-bottom: 0; font: 400 clamp(22px, 2.6vw, 34px)/1.2 var(--serif); letter-spacing: -.01em; max-width: 30em; text-wrap: balance; }
.case__story { display: grid; gap: 22px; margin-top: 30px; }
.case__story:empty, .case__results:empty { display: none; }
.case__story h4 { margin: 0 0 8px; font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.case__story p { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--mute); max-width: 34em; }
@media (min-width: 900px) { .case__story { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
.case__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; border-block: 1px solid var(--line); }
.case__results div { padding: 18px 10px 18px 0; display: grid; gap: 6px; }
.case__results b { font: 400 clamp(34px, 5vw, 64px)/.9 var(--serif); letter-spacing: -.02em; }
.case__results span { font: 400 13px/1.3 var(--sans); color: var(--mute); }
.case__more { margin-top: 38px; }
.case__more:has(.case__gallery:empty) { display: none; }
/* square thumbnails; the column count is chosen in JS so rows come out full (nothing sits alone) */
.case__gallery { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.case__gallery button { aspect-ratio: 1; }
@media (min-width: 900px) { .case__gallery { gap: 14px; } }
.case__gallery button { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #111; border: 1px solid transparent; transition: border-color .3s; }
.case__gallery button.is-on { border-color: rgba(255, 255, 255, .7); }
.case__gallery img { width: 100%; height: 100%; object-fit: cover; }
.case__gallery .play { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(5, 5, 5, .72); font: 400 11px/1 var(--mono); letter-spacing: .06em; color: var(--paper); }
.case__close { position: fixed; right: var(--pad); top: calc(16px + env(safe-area-inset-top)); min-width: 0; min-height: 0; padding: 12px 14px; z-index: 2; }

/* ---------- v6: review fixes ---------- */
.nw { white-space: nowrap; }
.case h3 { text-wrap: balance; }
.case h3.is-long { font-size: clamp(34px, 6vw, 84px); }
.f3__text p, .case__story p, .case__results span { text-wrap: balance; }
.case__stage video, .case__stage img { max-height: min(72svh, calc(100svh - 250px)); }
.case__line:empty { display: none; }
.case__line { margin-left: max(0px, (100% - 1180px) / 2); }
@media (min-width: 1024px) { .offices { max-width: 62%; } }
@media (min-width: 760px) { footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); } }
@media (max-width: 359px) { .flight__client { font-size: 26px; } .flight__client.is-long { font-size: 21px; } }
.flight__list .tile { display: block; width: 100%; text-align: left; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
.reduced .f3__type video { opacity: 1; }
/* phones held sideways: the case film may use almost the whole screen height */
@media (orientation: landscape) and (max-height: 500px) { .case__stage video, .case__stage img { max-height: calc(100svh - 40px); } }
/* wider than tall: the name sits on one line; taller than wide: two lines of equal width (main.js fitName uses the same rule) */
@media (min-aspect-ratio: 1/1) { .bigname { display: block; white-space: nowrap; } .bigname span { display: inline-block; } }