/* Redivider — Design System
 * Story-first, directorial. Sans + mono with optional serif display.
 * Black-first, cinematic. Subtle directorial chrome.
 */

:root {
  /* color */
  --bg: #0a0a0a;
  --bg-2: #111111;
  --fg: #f4f1ec;
  --fg-2: #b8b3aa;
  --fg-3: #6b665e;
  --line: #232323;
  --line-2: #2e2a25;
  --accent: #ff4a14; /* Redivider orange */

  /* type — overridable by tweaks */
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display-font: var(--sans);
  --display-weight: 200;
  --display-style: normal;

  /* scale */
  --pad: clamp(20px, 3vw, 48px);
  --pad-x: clamp(24px, 4vw, 80px);

  --t-meta: 11px;
  --t-body: 15px;
  --t-lead: clamp(18px, 1.5vw, 22px);
  --t-h3: clamp(22px, 2vw, 32px);
  --t-h2: clamp(36px, 5vw, 72px);
  --t-h1: clamp(48px, 8vw, 132px);
  --t-display: clamp(64px, 12vw, 220px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: rgba(255, 74, 20, 0.22); color: inherit; text-shadow: none; }
::-moz-selection { background: rgba(255, 74, 20, 0.22); color: inherit; text-shadow: none; }

/* film grain — overlays a reel/video. Pure CSS: a single large noise tile
   that hard-jumps to a new background-position 24 times per second. Each
   jump shows a fresh patch of the tile, reading as photographic grain.
   No layer overlaps, no gaps, no JS — flicker-free. */
.film-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: var(--grain-intensity, 0.27);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='960' height='960'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 480px 480px;
  background-repeat: repeat;
  /* 24 frames @ 24fps = 1s loop. steps(24) hard-cuts position so each frame
     reveals a different region of the tile. */
  animation: filmGrainJump 1s steps(24) infinite;
  will-change: background-position;
}
.film-grain > span { display: none; } /* legacy span layers — no longer used */

@keyframes filmGrainJump {
  /* Pseudo-random walk over the tile. Steps(24) snaps to each frame. */
  0%   { background-position: 0px 0px; }
  100% { background-position: -480px 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-grain { animation-duration: 4s; }
}
@media (max-width: 700px) {
  .film-grain { background-size: 360px 360px; }
}

/* directorial chrome */
.mono { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.04em; text-transform: uppercase; }
.mono-sm { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.dim { color: var(--fg-2); }
.dimmer { color: var(--fg-3); }
/* Was: .slash::before { content: "/ "; ... } — global slash motif retired
   in favour of the dot (·). Span now renders its own glyph; this rule was
   stacking a literal "/" before it in the nav. Kept commented as a
   tombstone so it doesn't get reintroduced. */
.hr { height: 1px; background: var(--line); width: 100%; }

/* shell */
.site { min-height: 100dvh; position: relative; overflow-x: hidden; }

/* shader-style background canvas (full viewport, very subtle) */
.bg-shader {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* nav */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 18px var(--pad-x);
  color: #fff;
  pointer-events: none;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 70px;
  background: linear-gradient(180deg, rgba(10,10,10,0.32) 0%, rgba(10,10,10,0.20) 50%, rgba(10,10,10,0) 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
}
.nav.scrolled::before { opacity: 1; }
.nav > * { pointer-events: auto; }
.nav-l, .nav-r { display: flex; gap: 18px; align-items: center; }
.nav-l { flex-shrink: 0; }
.nav-l .wordmark-img, .nav-l img[src*="submark"] { flex-shrink: 0; }
.nav-r { justify-content: flex-end; }
.nav-c { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; color: #fff; transition: color .25s ease, opacity .2s ease; }
.nav a:hover { opacity: 1; color: #ff4a14; }
.nav a.active { color: #ff4a14; opacity: 1; }
.nav .slash {
  color: rgba(255,255,255,0.3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
/* Nav center tagline collides with the right-side links once the viewport
   gets tight — drop it earlier so the slashes never appear to float. When
   it's hidden, collapse the grid so nav-r stays pinned right (otherwise the
   empty centre column pulls it toward the middle). */
@media (max-width: 1180px) {
  .nav-c { display: none; }
  .nav { grid-template-columns: 1fr auto; }
}
/* Very narrow viewports: hide the wordmark PNG (keep the icon) so it can't
   collide with the right-side nav links. */
@media (max-width: 600px) {
  /* Below this width the right-side nav links would crowd the wordmark.
     Hide the wordmark cleanly — the icon stays full-size to the left of
     the nav links. */
  .nav-l .wordmark-img { display: none !important; }
}

/* footer */
.foot {
  position: relative;
  z-index: 5;
  padding: 40px var(--pad-x) 24px;
  background: var(--bg);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}
/* Minimal footer variant: wordmark + strapline on the left, contact + socials on the right. */
.foot-grid-minimal {
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
}
.foot-col-contact { align-self: start; }
/* Single-row footer: wordmark+logo on the left, social icons on the right,
   all aligned on a single horizontal baseline — mirrors the top nav. */
.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 32px;
}
.foot-l, .foot-r { display: flex; align-items: center; gap: 18px; }
.foot-l a { padding: 0 !important; }
.foot .foot-soc-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color .2s, border-color .2s, background .2s;
}
.foot .foot-soc-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.foot-soc-fallback {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}
@media (max-width: 800px) {
  .foot-grid-minimal { grid-template-columns: 1fr; gap: 40px; }
}
.foot-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; font-weight: 400; }
.foot-col a { display: block; padding: 4px 0; color: var(--fg-2); transition: color .2s; }
.foot-col a:hover { color: var(--fg); }
.foot-bot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  flex-wrap: wrap;
  gap: 16px;
}

/* ribbon — static one-liner above the footer */
.ribbon {
  overflow: hidden;
  padding: 14px var(--pad-x);
  white-space: nowrap;
  position: relative;
  z-index: 5;
  background: var(--bg);
}
.ribbon-track {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.2;
  text-align: left;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* partners — quieter, but readable. Bumped speed + brightness per design notes.
   When the marquee sits inside the work section it should read as a single
   divider line below the hero, so the top border is suppressed there. */
.partners {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 18px 0;
  position: relative;
  z-index: 5;
  background: var(--bg);
}
.work-section .partners {
  /* sits between section title and filter bar — constrained to content
     width with side fades, lower-profile padding, no bordering. */
  margin: 0 0 32px;
  padding: 8px 0;
  border-top: none;
  border-bottom: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.partners-track {
  display: inline-flex;
  align-items: center;
  animation: marquee var(--marquee-duration, 60s) linear infinite;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  will-change: transform;
}
.partners-run {
  display: inline-flex;
  gap: 36px;
  align-items: center;
  padding-right: 36px; /* keeps spacing across the seam between runs */
}
.partners-track .pdot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); display: inline-block; flex-shrink: 0; }
.partners-track .partner-link {
  color: var(--fg-2);
  transition: color .25s ease;
}
.partners-track .partner-btn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 11px;
  font-family: var(--mono);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}
.partners-track .partner-link:hover { color: var(--accent); }

/* placeholder media */
.ph {
  position: relative;
  background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 15px);
}
.ph-meta {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
  border: 1px solid var(--line);
  z-index: 2;
}
.ph-corner-tr, .ph-corner-bl {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  z-index: 2;
}
.ph-corner-tr { top: 12px; right: 12px; }
.ph-corner-bl { bottom: 12px; left: 12px; }
.ph-center {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  z-index: 2;
}

/* scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* sections */
.section {
  position: relative;
  z-index: 5;
  padding: clamp(80px, 10vw, 160px) var(--pad-x);
}
.section-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 32px;
}
/* Work section sits close to the reel \u2014 trim the default top padding so
   "/ Selected Work" reads as a continuation of the showreel, not a new chapter. */
#work.section { padding-top: clamp(28px, 3vw, 48px); }

/* button */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: all .25s; cursor: pointer; background: transparent; color: var(--fg);
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn .arrow { display: inline-block; width: 16px; height: 1px; background: currentColor; position: relative; }
.btn .arrow::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* uline link */
.uline { position: relative; display: inline-block; }
.uline::after {
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1px; background:currentColor;
  transform-origin: right; transform: scaleX(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.uline:hover::after { transform-origin: left; transform: scaleX(1); }

/* reveal */
.reveal { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { transform: translateY(0); } }

/* —— page-specific layout helpers —— */

/* hero (home) */
.hero { position: relative; height: 100dvh; min-height: 700px; overflow: hidden; border-bottom: 1px solid var(--line); }
/* Hero is decorative chrome — strapline, meta, center logo. Suppress the
   text-selection I-beam cursor and prevent click-drag selection. The
   scroll hint anchor and any explicit hero buttons keep their own
   cursors and interactivity since we target only the decorative elements. */
.hero-strapline,
.hero-strapline *,
.hero-meta,
.hero-meta-l, .hero-meta-r,
.hero-fps,
.hero-info-bar,
.hero-info-bar * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
.hero img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Hero scroll-progress fade \u2014 once the user is approaching the work index,
   damp the showreel video and ambient chrome so the index reads as primary.
   --hero-progress is set on <html> by HomePage useEffect (0 = at top, 1 =
   fully settled in work section). */
.hero > video {
  transition: filter .35s linear, opacity .35s linear;
  filter: contrast(1.05) saturate(calc(0.95 - 0.6 * var(--hero-progress, 0))) brightness(calc(1 - 0.6 * var(--hero-progress, 0))) blur(calc(4px * var(--hero-progress, 0))) !important;
}
.hero-info-bar,
.hero-meta-l,
.hero-meta-r {
  transition: opacity .35s linear;
  opacity: calc(1 - var(--hero-progress, 0));
}
.hero-overlay { position: absolute; inset: 0; pointer-events: none; }
.hero-grid-cell { display: grid; place-items: center; }
.hero-strapline {
  position: absolute;
  bottom: clamp(80px, 12vw, 160px);
  left: var(--pad-x); right: var(--pad-x);
  z-index: 6;
  pointer-events: none;
}
.hero-strapline h1 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.hero-meta {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 6;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.hero-meta-l { left: 16px; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.hero-meta-r { right: 16px; writing-mode: vertical-rl; }

/* Hide the vertical reel/studio side rails on narrow viewports so the
   centered logo + slogan get the full width. */
@media (max-width: 720px) {
  .hero-meta-l, .hero-meta-r { display: none; }
}

.hero-fps {
  position: absolute;
  bottom: 24px; right: var(--pad-x);
  z-index: 6;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}

/* Hero info bar — sits at the very bottom of the hero. Two-column flex
   keeps NOW SHOWING (left) and the live timecode (right) on one baseline.
   Pointer-events disabled on the bar so the dot/timecode read as ambient
   chrome, not a clickable element. */
.hero-info-bar {
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  bottom: 24px;
  z-index: 6;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}
.hero-info-fps {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}

/* work grid */
.work-grid { display: grid; gap: clamp(40px, 6vw, 80px); }
.work-grid[class*="layout-"]:not(.layout-flat) { grid-auto-flow: dense; }
.work-grid.cols-1 { grid-template-columns: 1fr; }
.work-grid.cols-2 { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.work-grid.cols-3 { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 36px) clamp(18px, 2vw, 32px); }
.work-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 36px) clamp(14px, 1.4vw, 22px); }
.work-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2vw, 32px) clamp(12px, 1.2vw, 18px); }

/* —— Asymmetric layouts (hero card spans extra cells) —— */
/* Hero card base styling */
.work-card.hero-card { position: relative; }
.work-card.hero-card .hero-thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.work-card.hero-card .hero-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.work-card.hero-card .hero-card-tag {
  position: absolute; top: 16px; left: 18px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
}
.work-card.hero-card .hero-meta-row { margin-top: 14px; font-size: 11px; letter-spacing: 0.08em; }
.work-card.hero-card .hero-card-title {
  font-size: clamp(28px, 2.6vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 10px;
}
.work-card.hero-card .hero-card-desc {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 12px;
  max-width: 64ch;
}
.work-card.hero-card .hero-card-desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Ellipsis is automatic with -webkit-line-clamp; no extra char needed. */
}
.work-card.hero-card .hero-card-readmore {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  transition: opacity .2s ease, transform .2s ease;
}
.work-card.hero-card:hover .hero-card-readmore {
  opacity: 1;
  transform: translateX(2px);
}
.work-card.hero-card .hero-thumb::after { display: none; } /* hide /num corner on hero */

/* —— Hero card overview + BTS preview row ——
   When the hero project has a Behind The Scenes section, the post-thumb
   content splits into two columns: main overview on the left, compact
   BTS teaser on the right (small tile + clamped intro). Without BTS,
   the wrap collapses back to a single column. */
.work-card.hero-card .hero-card-overview-wrap.has-bts {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  margin-top: 14px;
}
.work-card.hero-card .hero-card-overview-wrap.has-bts .hero-card-desc { margin-top: 0; }
.work-card.hero-card .hero-card-overview-wrap.has-bts .hero-card-overview-main {
  display: flex; flex-direction: column;
  /* Push the "Read full case study" link to the bottom of the overview
     column so its baseline aligns with the bottom of the BTS column on
     the right (which has its own intro paragraph extending lower). */
  height: 100%;
}
.work-card.hero-card .hero-card-overview-wrap.has-bts .hero-card-readmore {
  margin-top: auto;
}
.work-card.hero-card .hero-card-bts {
  display: flex; flex-direction: column;
  gap: 14px;
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 2vw, 32px);
}
.work-card.hero-card .hero-card-bts-tag {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.work-card.hero-card .hero-card-bts-row {
  display: flex; gap: 16px; align-items: stretch;
}
.work-card.hero-card .hero-card-bts-tile {
  flex: 0 0 auto;
  position: relative;
  width: 110px;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
}
.work-card.hero-card .hero-card-bts-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.55) blur(0.5px);
  transition: filter .3s ease, transform .4s ease;
}
.work-card.hero-card:hover .hero-card-bts-tile img {
  filter: brightness(0.7) blur(0);
  transform: scale(1.04);
}
.work-card.hero-card .hero-card-bts-tile-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.work-card.hero-card .hero-card-bts-tile .play-tri-lg {
  border-width: 6px 0 6px 10px;
}
.work-card.hero-card .hero-card-bts-intro {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  /* Match the same clamp as the overview body so the two columns
     end at compatible heights (3 lines under the small tile). */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .work-card.hero-card .hero-card-overview-wrap.has-bts {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .work-card.hero-card .hero-card-bts {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
}

/* Hover preview video on small tiles */
.work-card.compact .hover-preview {
  animation: hoverFade .35s ease forwards;
  z-index: 2;
}
@keyframes hoverFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Layout: hero-grid — hero spans 2×2 anchored to the RIGHT edge.
   Using `grid-column-end: -1` keeps the hero anchored right at every breakpoint,
   even when responsive media queries collapse cols-5 → 4 → 3 → 2. */
.work-grid.layout-hero-grid.cols-3 .hero-card,
.work-grid.layout-hero-grid.cols-4 .hero-card,
.work-grid.layout-hero-grid.cols-5 .hero-card {
  grid-column: span 2 / -1;
  grid-row: span 2;
}

/* Layout: hero-sidebar — hero spans full left half (rows 1–2), small cards stack right.
   On a 4-col grid: hero takes cols 1–2 row span 1, then 3 small cards fill row 1 col 3,
   row 1 col 4, row 2 col 3 — and the rest flow normally below. We approximate with a
   2× wide, 1× tall hero (3-up sidebar appears naturally on right). */
/* Layout: hero-sidebar — hero on the RIGHT, anchored via -1 end. */
.work-grid.layout-hero-sidebar.cols-3 .hero-card,
.work-grid.layout-hero-sidebar.cols-4 .hero-card { grid-column: span 2 / -1; grid-row: span 1; }
.work-grid.layout-hero-sidebar.cols-5 .hero-card { grid-column: span 3 / -1; grid-row: span 1; }

/* Layout: bento — hero 2×2 anchored RIGHT, plus a wide breaker tile rhythm */
.work-grid.layout-bento.cols-3 .hero-card,
.work-grid.layout-bento.cols-4 .hero-card,
.work-grid.layout-bento.cols-5 .hero-card {
  grid-column: span 2 / -1;
  grid-row: span 2;
}
/* Every 5th non-hero compact card spans 2 cols for visual rhythm */
.work-grid.layout-bento .work-card.compact:nth-of-type(6n + 4) {
  grid-column: span 2;
}
/* Wide breaker tile spans 2 cols but should match the HEIGHT of a single
   16/9 tile in the row below the hero. Two 16/9 tiles side-by-side at 2W
   width would be 32/9, but the column gap inflates the dual's actual
   width to ~(2W + gap), making 32/9 about 10-15px too tall. ~33/9
   compensates for typical gap widths and lands the dual within a couple
   of pixels of the single's height across viewports. */
.work-grid.layout-bento .work-card.compact:nth-of-type(6n + 4) .work-thumb { aspect-ratio: 33/9; }
/* The FIRST bento dual (3rd compact = 4th <a> sibling) sits BESIDE the
   hero on row 2 of the hero's 2-row span — it needs to be taller so
   that row 2 fills the bottom half of hero cleanly. Revert it to 8/3,
   which is the height the bento layout was tuned for. Other duals
   (10th, 16th, ...) sit BELOW the hero and use 33/9 from the rule above. */
.work-grid.layout-bento .work-card.compact:nth-of-type(4) .work-thumb { aspect-ratio: 8/3; }

/* Mobile: collapse asymmetry (and reset right-anchoring so it stacks naturally) */
@media (max-width: 800px) {
  .work-grid[class*="layout-"] .hero-card,
  .work-grid[class*="layout-"] .work-card.compact:nth-of-type(6n + 4) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .work-grid[class*="layout-"] .work-card.compact:nth-of-type(6n + 4) .work-thumb { aspect-ratio: 4/3; }
}

@media (max-width: 1280px) {
  .work-grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .work-grid.cols-4, .work-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .work-grid.cols-2, .work-grid.cols-3, .work-grid.cols-4, .work-grid.cols-5 { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .nav-c { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .work-grid.cols-2, .work-grid.cols-3, .work-grid.cols-4, .work-grid.cols-5 { grid-template-columns: 1fr; }
}

/* Compact card variant for 3+ col grids */
.work-card.compact h3 { font-size: clamp(16px, 1.15vw, 20px); margin-top: 6px; letter-spacing: -0.01em; line-height: 1.15; }
.work-card.compact .work-card-meta { margin-top: 12px; padding-bottom: 10px; font-size: 10px; letter-spacing: 0.06em; }
.work-card.compact .work-desc { display: none; }
.work-card.compact .work-thumb { aspect-ratio: 16/9; }

/* Related-projects footer on case-study pages — scaled-down compact card.
   Reads as a footer/index, not another hero. Uses cols-4 grid so four
   tiles fit comfortably below the case study without dominating. */
.work-card.related-card h3 { font-size: clamp(13px, 0.95vw, 16px); margin-top: 4px; }
.work-card.related-card .work-card-meta { margin-top: 8px; padding-bottom: 6px; font-size: 9px; }
.work-card.related-card .work-thumb-cap { font-size: 9px; }

/* Carousel paging controls inside the Related Projects header. */
.related-nav { display: flex; align-items: center; gap: 4px; }
.related-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--fg-3);
  color: var(--fg-1);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  padding: 0;
}
.related-arrow:hover:not(:disabled) { background: var(--accent); color: #000; border-color: var(--accent); }
.related-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.filter-bar .fb-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-right: 4px;
}
.filter-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.filter-chip:hover { color: var(--fg); border-color: var(--fg-3); }
.filter-chip.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filter-chip .count { opacity: 0.55; font-size: 9px; }
.filter-chip.active .count { opacity: 0.7; }

/* —— Showreel scroll hint ——
   Subtle bottom-center cue that replaces the old "View Work / Services"
   buttons. Stays nearly invisible by default; fades up to mono-dim
   when the cursor enters the bottom band of the hero, then drops a
   small bouncing chevron to invite a click. Click target is a real
   anchor (#work) so the global smooth-scroll interceptor handles it. */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(64px, 7vw, 96px);
  transform: translateX(-50%) translateY(8px);
  z-index: 7;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 0.9vw, 14px);
  /* Fluid scale: 9px on phones up to ~13px on a 1920+ desktop. Hero
     reads as a slightly bolder "WORK" cue at large window sizes. */
  font-size: clamp(9px, 0.78vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, color .25s ease;
}
.scroll-hint.is-visible {
  opacity: 0.7;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.scroll-hint:hover { color: var(--accent); opacity: 1; }
/* The "WORK" label inherits 0.32em letter-spacing which adds visual
   whitespace after the final K. Without compensation the label's box
   extends past the visible glyphs on the right, so the arrow (centered
   under the box) appears offset right of the actual word. Padding-left
   equal to the letter-spacing pushes the visible glyphs back so they
   center directly under the arrow. */
.scroll-hint-label { padding-left: 0.32em; }
.scroll-hint-arrow {
  display: inline-flex;
  animation: scroll-hint-bounce 2.2s ease-in-out infinite;
  color: currentColor;
}
/* Arrow scales with the label — fluid width on desktop, fixed minimum
   on mobile. SVG aspect 12:18 (2/3) is preserved by setting height
   proportionally. */
.scroll-hint-arrow svg {
  display: block;
  width: clamp(12px, 1vw, 17px);
  height: auto;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* —— Contact-sheet thumbnail chrome ——
   Minimalist treatment for project tiles across the site:
   - Orange ● glyph (top-left) signals "featured" without the verbose
     chip — same showreel-meta typography as the home reel overlay.
   - Project title (bottom-left) reads like a contact-sheet frame label.
   Matches the showreel meta typography on the home hero (mono, dim,
   wide letter-spacing) so the whole site shares one ambient font for
   chrome / index labels. */
/* Render the dot as a real CSS disc rather than the ● glyph — the unicode
   bullet has weird baseline metrics that won't optically center against
   small mono caps. A flat 5px square with border-radius is half the
   previous visual size and aligns predictably via flex. */
.work-thumb-glyph {
  position: absolute;
  bottom: 12px;
  right: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  color: transparent;
  font-size: 0;
  pointer-events: none;
  z-index: 3;
}

/* Hero card variant — same glyph plus a "FEATURED" caps label so the
   biggest tile reads as the editor's pick. Title is omitted on the
   hero because the display title is printed below the frame.
   Sits bottom-right, mirroring the bottom-left title on compact tiles. */
.work-thumb-featured {
  position: absolute;
  bottom: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  pointer-events: none;
  z-index: 3;
}
.work-thumb-featured .work-thumb-glyph {
  /* Reset the absolute positioning so the disc flows inside the inline
     group; flex align-items: center on the parent handles vertical centering. */
  position: static;
}
.work-thumb-name {
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Subtle scrim so the label stays legible over bright frames
     without painting a hard chip. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  /* Matches .work-thumb-desc transition exactly so the pair moves as
     one block on hover. */
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

/* Hover description — sits flush *underneath* the title (just below
   the frame edge so it's clipped out of view) and rides up by the
   exact same 22px the title rises, in lockstep timing + easing.
   Sans family at small size reads softer than the geometric mono so
   the body copy doesn't fight the all-caps label above it. */
.work-thumb-desc {
  position: absolute;
  left: 14px;
  right: 14px;
  /* Sits at the title's resting position. Initially translated down +
     faded out so it reads as "tucked underneath" the title. On hover it
     slides up to its natural position (translateY 0) while the title
     rises one line above it. */
  bottom: 12px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--fg-2);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1);
  /* Clamp to two lines so long descriptions don't overflow the frame. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Soft bottom-up scrim that appears on hover so the title + desc read
   clearly without permanently darkening the frame. */
.work-thumb-scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 18%;
  background: linear-gradient(to top, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.14) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s ease;
}

/* Reveal on hover: scrim fades in, title lifts to make room for the
   description sliding up underneath it. */
.work-card:hover .work-thumb-scrim { opacity: 1; }
.work-card:hover .work-thumb-name {
  transform: translateY(calc(-1em - 12px));
  color: var(--fg);
}
.work-card:hover .work-thumb-desc {
  opacity: 1;
  transform: translateY(0);
}

/* When a project tile falls back to <Placeholder> (no image yet), the
   placeholder paints its own corner labels — title top-left and the
   word "PLACEHOLDER" bottom-left. Inside a .work-thumb those duplicate
   our new contact-sheet chrome (glyph top-left, title bottom-left), so
   we hide the placeholder's internal labels and let .work-thumb-glyph /
   .work-thumb-name carry the frame instead. */
.work-thumb .ph .ph-meta,
.work-thumb .ph .ph-center,
.work-thumb .ph .ph-corner-bl { display: none; }

/* Legacy class kept for any out-of-scope consumers still rendering the
   old "/ Featured" chip. New consumers should use .work-thumb-glyph +
   .work-thumb-name (or .work-thumb-featured on the hero) instead. */
.work-thumb-cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  pointer-events: none;
  z-index: 3;
}

/* Client-filter pill — matches normal chip; just adds an × to dismiss */
.filter-chip.client .chip-tag { display: none; }
.filter-chip.client .chip-x {
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  margin-left: 4px;
  opacity: 0.55;
  transition: opacity .15s ease;
}
.filter-chip.client:hover .chip-x { opacity: 1; }
.filter-bar .fb-spacer { flex: 1; }
/* Partners marquee inlined in the filter bar — fills the space between
   the last filter chip and the right-side "Showing" count. Hairline
   side-borders separate it visually from both. Mask fade keeps the
   edges from clipping mid-name. */
.work-section .filter-bar .partners {
  /* flex-basis 0 + grow=1 + shrink=1 + min-width 0 = takes the leftover
     space between chips and count, never forces a wrap to its own row. */
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0 14px;
  height: 36px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.work-section .filter-bar .partners .partners-track {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.work-section .filter-bar .partners .partners-run {
  gap: 24px;
  padding-right: 24px;
}
.filter-bar .fb-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.filter-bar .fb-count em { font-style: normal; color: var(--accent); }

.fb-search {
  font-family: var(--mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 4px 6px;
  min-width: 150px;
  outline: none;
}
.fb-search::placeholder { color: var(--fg-3); }
.fb-search:focus { border-bottom-color: var(--accent); }
@media (max-width: 720px) {
  .fb-search { flex: 1 1 100%; min-width: 0; }
}

/* Card hover detail (corner ID) — removed in the contact-sheet redesign.
   Kept the selector so any legacy data-num markup renders nothing. */
.work-card.compact .work-thumb::after {
  display: none;
}

/* Empty state for filters */
.fb-empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg-3);
  font-size: 22px;
}

/* Cards use a flex column so each card row stays consistent vertically:
   the thumb grows to fill whatever cell height the grid hands it (driven
   by the tallest sibling in the row), and the meta strip sits flush at
   the card's bottom edge. The `aspect-ratio` declarations elsewhere
   become the *natural* size — the thumb still respects them when the
   card row would otherwise be shorter, but it stretches to fill when a
   neighbour in the row pushes the row taller. */
.work-card { display: flex; flex-direction: column; cursor: pointer; }
.work-card .work-thumb { aspect-ratio: 16/9; overflow: hidden; position: relative; flex: 1 1 auto; min-height: 0; }
.work-card .work-thumb video, .work-card .work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.work-card:hover .work-thumb video, .work-card:hover .work-thumb img { transform: scale(1.03); }
.work-card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-3);
}
.work-card h3 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.work-card .work-desc { color: var(--fg-2); margin-top: 10px; max-width: 60ch; line-height: 1.55; }
.work-card h3 { transition: color .25s ease; }
.work-card:hover h3 { color: #ff4a14; }

/* Tagline — single-line short description shown on every project card. */
.work-card-tagline {
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 8px;
  max-width: 56ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-card.compact .work-card-tagline {
  font-size: 12px;
  margin-top: 6px;
  -webkit-line-clamp: 2;
}
.work-card.hero-card .hero-card-tagline {
  color: var(--fg-2);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.4;
  margin-top: 6px;
  max-width: 56ch;
  /* Single-line clamp — the full sentence lives in the overview block below;
     this is just a beat between title and overview, not a paragraph. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* full-bleed work row */
.work-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.work-row .work-thumb { aspect-ratio: 21/9; }

/* case study */
.cs-hero { position: relative; height: 100dvh; min-height: 600px; }
.cs-hero .ph, .cs-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.95) 100%); z-index: 2; pointer-events: none; }
.cs-hero-content {
  position: absolute; bottom: var(--pad-x); left: var(--pad-x); right: var(--pad-x);
  z-index: 3;
}
.cs-meta-row { display: flex; gap: 32px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 16px; flex-wrap: wrap; }
.cs-meta-row span:not(:last-child)::after { content: " ·"; color: var(--fg-3); }
.cs-title {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.cs-sub { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.5vw, 24px); color: var(--fg-2); margin-top: 14px; max-width: 50ch; }

.cs-section { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 96px); }
@media (max-width: 800px) { .cs-section { grid-template-columns: 1fr; } }
.cs-section h2 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cs-section .body { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.cs-section .body p + p { margin-top: 18px; }

/* —— Stills mosaic ——
   Uniform 4-up grid on desktop. The previous `.wide` / `.full` modifiers
   (and the auto-rhythm 6n+1/6n+5 promotion) made some stills 2x wider OR
   21:9 full-bleed, which read as "hero feature" rather than gallery —
   especially when a project only had a few stills and one of them
   dominated the row. Now: every still is the same size, 16:9, no
   exceptions. Editorial tag fields (`full`, `wide`) still survive in
   the data but are visually no-ops. */
.cs-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-gallery .ph { aspect-ratio: 16/9; }

/* Stills with captions */
.cs-still { margin: 0; display: flex; flex-direction: column; cursor: zoom-in; }
.cs-still:hover img { filter: brightness(0.92); }
.cs-still img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #0e0e0e; transition: filter 0.2s ease; }
.cs-still figcaption {
  display: flex; gap: 16px; align-items: baseline;
  padding: 10px 2px 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-2);
  text-transform: uppercase;
}
.cs-still figcaption .dimmer { color: var(--fg-3); flex-shrink: 0; }
@media (max-width: 1100px) {
  .cs-gallery { grid-template-columns: repeat(2, 1fr); }
  /* On the 2-col grid, force every item to a single column — never a lonely
     full-row still. Pairs of 2 are the minimum at every breakpoint above
     mobile, so users always see at least two stills side-by-side. */
  .cs-gallery > .cs-still { grid-column: auto; }
  .cs-gallery > .cs-still img { aspect-ratio: 16/9; }
}
@media (max-width: 800px) {
  .cs-gallery { grid-template-columns: 1fr; }
  .cs-gallery > .cs-still { grid-column: 1 / -1 !important; }
}

/* Film embed — 16:9 responsive iframe with the Framer player. */
.cs-film-section { margin-top: 16px; }
/* Hero \"Play Film\" CTA \u2014 right-aligned over the case-study hero, baseline
   matching the bottom-left content block. Lives outside .cs-hero-content
   so it can be anchored to the right edge of the section. */
.cs-hero-cta-right {
  position: absolute;
  right: var(--pad-x);
  bottom: var(--pad-x);
  z-index: 4;
  display: flex;
  gap: 12px;
}
/* A small CSS-drawn play triangle so we don\u2019t need an icon set just for
   one button. Sized to sit on the .btn baseline (uppercase mono 11px). */
.play-tri {
  display: inline-block;
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-1px);
}
.cs-film-frame {
  position: relative;
  /* ~15% smaller than full width — keeps the player from feeling like a
     wall of pixels and gives the surrounding section breathing room.
     Centered with auto margins. */
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.cs-film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 48px; }
@media (max-width: 800px) { .credits { grid-template-columns: 1fr 1fr; } }
.credit-row { padding: 14px 0; border-top: 1px solid var(--line); }
.credit-row .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
.credit-row .name { font-size: 14px; color: var(--fg); }

/* —— Overview + BTS as parallel two-column sections —— */
/* Two full sections sit side by side at the top of a case study, each
   acting as its own "/ ..." labelled section. Overview on the LEFT,
   BTS (or Quote) on the RIGHT. They share the page padding via the
   row container — the inner sections drop their own horizontal padding
   so the columns align with the page gutter and section dividers. */
.cs-overview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* Vertical padding lives on each child section (so each gets the
     full section rhythm). Horizontal padding lives on the row so
     columns align with the page gutter. */
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.cs-overview-row > .section {
  padding-left: 0;
  padding-right: 0;
  border-top: 0;
}
.cs-overview-row > .section + .section {
  border-left: 1px solid var(--line);
  padding-left: clamp(32px, 4vw, 72px);
}
.cs-overview-row > .section:first-child {
  padding-right: clamp(32px, 4vw, 72px);
}
@media (max-width: 1280px) {
  .cs-overview-row {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
  }
  .cs-overview-row > .section {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
  .cs-overview-row > .section + .section {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

.cs-overview-col,
.cs-bts-col,
.cs-quote-col {
  display: flex;
  flex-direction: column;
}

.cs-overview-body { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); max-width: 64ch; }
.cs-overview-body p + p { margin-top: 16px; }
.cs-overview-body p { text-wrap: pretty; }

.cs-watch-btn { margin-top: 32px; }

.cs-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
.cs-quote p { text-wrap: balance; }
.cs-quote-attrib {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 18px;
}

/* —— BTS column (right side of the overview row) —— */
/* No longer a sticky sidebar — it's a full sibling section. Internal
   layout (intro + watch tile, thumbnail strip, pager) is unchanged.
   No flex gap on the column itself — section-meta already has margin-bottom
   matching .cs-overview-col, so body copy aligns vertically across the
   parallel Overview/BTS columns. Spacing between BTS sub-blocks is set
   explicitly via margin-top on each. */
.cs-bts-col {
  gap: 0;
}
.cs-bts-col > .cs-bts-top + *,
.cs-bts-col > .cs-bts-thumbs,
.cs-bts-col > .cs-bts-foot {
  margin-top: 28px;
}
.cs-bts-nav {
  display: flex; align-items: center; gap: 8px;
}
.cs-bts-pageno { font-size: 9px; letter-spacing: 0.14em; }
.cs-bts-intro { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); max-width: 88ch; margin: 0; }
.cs-bts-para { font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); max-width: 88ch; margin: 0; }
.cs-bts-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  /* Soft fade-in when paging — tied to the React `key={page}` swap. */
  animation: csBtsFade 0.45s ease both;
}
@keyframes csBtsFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cs-bts-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #111;
  margin: 0;
  cursor: zoom-in;
  outline: none;
}
.cs-bts-thumb.is-empty {
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.06);
  cursor: default;
}
.cs-bts-thumb:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.cs-bts-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}
.cs-bts-thumb:hover img { transform: scale(1.04); }
.cs-bts-thumb figcaption {
  position: absolute; left: 6px; bottom: 6px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55);
  padding: 3px 6px;
}

/* Description + Watch BTS tile sit side-by-side at the top of the
   BTS column. Tile pins to the RIGHT edge of the column; copy reaches
   toward it from the left, filling available width up to its 88ch cap.
   Tile height matches copy height (width derived via aspect-ratio).
   Collapses under 540px. */
.cs-bts-top {
  display: flex;
  gap: clamp(20px, 4vw, 48px);
  align-items: flex-start;
  justify-content: space-between;
}
.cs-bts-top > .cs-bts-copy {
  flex: 1 1 0;
  min-width: 0;
  max-width: 88ch;
}
.cs-bts-top > .cs-bts-watch-tile {
  /* Width-driven, not height-driven. Sits at ~46% of the row up to 520px so
     the tile can't outgrow itself when the copy column wraps. */
  flex: 0 1 46%;
  max-width: 520px;
  min-width: 280px;
  width: auto;
  height: auto;
  aspect-ratio: 4/3;
}
/* Below 720px the side-by-side gets too cramped — stack instead. */
@media (max-width: 720px) {
  .cs-bts-top { flex-direction: column; align-items: stretch; }
  .cs-bts-top > .cs-bts-watch-tile {
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}
.cs-bts-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Dedicated Watch BTS tile — now sized to fit a column, not full width. */
.cs-bts-watch-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  color: #fff;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cs-bts-watch-tile:hover { border-color: var(--accent); }
.cs-bts-watch-tile:hover img { transform: scale(1.04); filter: brightness(0.6) blur(2px); }
.cs-bts-watch-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.45) blur(1px);
  transition: filter 0.4s ease, transform 0.5s ease;
}
.cs-bts-watch-tile-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.cs-bts-watch-tile-label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
}
.cs-bts-watch-tile-sub {
  font-size: 8px; letter-spacing: 0.14em;
}
.play-tri-lg {
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
/* Compact tile uses a smaller triangle — the lg size is meant for hero CTAs. */
.cs-bts-watch-tile .play-tri-lg {
  border-width: 6px 0 6px 10px;
}

/* Carousel footer — page counter + arrow controls under the mosaic. */
.cs-bts-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

/* Multi-button CTA row in Overview — Play Film + Watch BTS side by side. */
.cs-overview-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Secondary button variant — same shape as .btn but a thinner, outlined
   feel so Watch BTS reads as a sibling to Play Film, not a competitor. */
.btn-secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--fg);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-secondary .play-tri {
  border-left-color: var(--fg);
  transition: border-left-color 0.15s ease;
}
.btn-secondary:hover .play-tri {
  border-left-color: var(--accent);
}

/* Hero CTA cluster — Play Film + Watch BTS sit side by side. */
.cs-hero-cta-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* —— Lightbox / image viewer —— */
.cs-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(40px, 6vw, 80px);
  animation: csLbFade 0.2s ease both;
}
@keyframes csLbFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cs-lb-figure {
  margin: 0;
  /* Display at natural resolution, capped only by the viewport itself
     (with breathing room for the close/arrow buttons + caption strip).
     The img inside uses `width: auto` so it scales down to fit, never
     up — preserves intrinsic resolution on large screens. */
  max-width: calc(100vw - 120px);
  max-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
  animation: csLbZoom 0.25s ease both;
}
@keyframes csLbZoom {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.cs-lb-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  background: #000;
}
.cs-lb-figure figcaption {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
}
.cs-lb-close, .cs-lb-arrow {
  position: absolute;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cs-lb-close:hover, .cs-lb-arrow:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
}
.cs-lb-close { top: 24px; right: 24px; }
.cs-lb-arrow { top: 50%; transform: translateY(-50%); }
.cs-lb-prev { left: 24px; }
.cs-lb-next { right: 24px; }
@media (max-width: 720px) {
  .cs-lb-arrow { width: 36px; height: 36px; }
  .cs-lb-prev { left: 12px; }
  .cs-lb-next { right: 12px; }
  .cs-lb-close { top: 12px; right: 12px; }
  .cs-lightbox { padding: 60px 12px 80px; }
}

/* —— Compact 2-col credits list —— */
.cs-credits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5vw, 80px);
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  .cs-credits-grid { grid-template-columns: 1fr; }
}
.cs-credit-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.cs-credit-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.4;
}
.cs-credit-name {
  font-size: 14px;
  color: var(--fg);
  line-height: 1.4;
}

.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.award { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 24px 1fr auto; gap: 16px; align-items: baseline; }
.award:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 32px; }
.award:nth-child(even) { padding-left: 32px; }
.award .num { font-family: var(--mono); font-size: 10px; color: var(--fg-3); }
.award .title { font-family: var(--serif); font-style: italic; font-size: 18px; }
.award .meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }

/* studio */
.studio-lead {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(40px, 5.2vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 18ch;
  text-wrap: balance;
}
.studio-lead em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent); }

.mission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  margin-top: 80px;
  align-items: start;
}
@media (max-width: 1100px) {
  .mission-row { grid-template-columns: 1fr; }
  .mission-row .team-photo { max-width: 600px; margin-top: 8px; }
}
@media (max-width: 700px) {
  .mission-row .team-photo { max-width: 100%; }
}
.mission-meta { margin-bottom: 28px; }
.mission-copy { font-size: var(--t-lead); color: var(--fg-2); line-height: 1.6; max-width: 60ch; }
.mission-copy p + p { margin-top: 18px; }

/* Team photo (in mission row) */
.team-photo { margin: 0; display: flex; flex-direction: column; max-width: 640px; justify-self: center; width: 100%; }
.team-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  background: #0e0e0e;
}
.team-photo figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.team-photo figcaption .mono { font-size: 12px; }
.team-photo figcaption span:last-child { color: var(--fg-3); letter-spacing: 0.1em; font-size: 11px; }

/* Studio hero variant — sits inside .svc-hero-grid right column.
   Mid-size, centered in its column so it feels balanced without dominating. */
/* Studio hero variant — sits inside .svc-hero-grid right column.
   Mid-size, centered in its column so it feels balanced without dominating. */
.team-photo--hero { max-width: 640px; width: 100%; justify-self: center; }
.team-photo--hero img { aspect-ratio: 4/3; filter: grayscale(1) contrast(1.05); }

/* Team slideshow — used on the studio page hero.
   Single editorial frame with crossfade between photos. Prev/next chevrons
   appear on hover at the left/right edges; small frame counter sits in the
   bottom-left corner. No thumbnails — keeps the imagery the focus. */
.team-slideshow { display: block; }
.team-slideshow-stage {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #0e0e0e;
  border: 1px solid var(--line);
}
.team-slideshow-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.team-slideshow-frame.is-active { opacity: 1; }
.team-slideshow-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(10,10,10,0.45);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background 200ms ease;
  backdrop-filter: blur(4px);
}
.team-slideshow-nav.prev { left: 16px; }
.team-slideshow-nav.next { right: 16px; }
.team-slideshow:hover .team-slideshow-nav,
.team-slideshow:focus-within .team-slideshow-nav { opacity: 1; }
.team-slideshow-nav:hover { background: rgba(10,10,10,0.85); }
.team-slideshow-counter {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: 11px;
  color: var(--fg);
  letter-spacing: 0.15em;
  background: rgba(10,10,10,0.55);
  padding: 4px 8px;
  backdrop-filter: blur(4px);
}

.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1100px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } }
.pillar { background: var(--bg); padding: 28px 24px; min-height: 220px; display: flex; flex-direction: column; gap: 18px; }
.pillar .num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fg-3); }
.pillar h3 { font-family: var(--display-font); font-weight: var(--display-weight); font-style: var(--display-style); font-size: clamp(20px, 1.6vw, 26px); letter-spacing: -0.015em; line-height: 1.1; }
.pillar p { color: var(--fg-2); line-height: 1.5; font-size: 14px; }

.founders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Three shared row tracks (portrait / heading / bio) so all founder cards
     align row-by-row via subgrid. Heading row sizes to the tallest name. */
  grid-template-rows: auto auto auto;
  gap: 0 clamp(40px, 5vw, 96px);
  align-items: start;
}
@media (max-width: 1280px) {
  .founders { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(40px, 5vw, 80px); }
}
@media (max-width: 800px) {
  .founders { display: block; }
  .founder { margin-bottom: 80px; }
}

/* Leadership + Artists — one shared 4-column grid so every person card
   (3 founders + 1 artist) gets identical column width. The two section
   headers each span their portion (3 / 1) of the grid above the cards.
   Each card uses subgrid for portrait / heading / bio rows so they all
   align across the row regardless of which group they belong to.
   ≤1280px: drops to 2 cols, headers each span the full row, cards flow
   in source order (3 founders + 1 artist).
   ≤800px: everything stacks single-column. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Row 1: section headers. Rows 2-4: shared portrait/heading/bio
     sub-tracks for the cards (subgrid). Auto-expands when stacked. */
  grid-auto-rows: auto;
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 0;
}
.people-grid__head { grid-row: 1; margin-bottom: 0; }
.people-grid__head--leadership { grid-column: 1 / span 3; }
.people-grid__head--artists    { grid-column: 4 / span 1; }
.people-grid > .founder { grid-row: 2 / span 3; }
@media (max-width: 1280px) {
  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Explicit rows at narrow widths:
       row 1 — leadership header
       rows 2-3 — 3 founders (2 + 1)
       row 4 — artists header
       row 5 — artist */
    grid-template-rows: auto auto auto auto auto;
    row-gap: 64px;
  }
  .people-grid__head--leadership { grid-column: 1 / -1; grid-row: 1; }
  .people-grid__head--artists    { grid-column: 1 / -1; grid-row: 4; }
  /* Drop subgrid choreography — each card stands alone in flow */
  .people-grid > .founder {
    grid-row: auto;
    grid-template-rows: none;
    display: block;
  }
  /* Pin the artist explicitly below its header */
  .people-grid > .founder--artist { grid-row: 5; grid-column: 1; }
  .people-grid > .founder .founder-portrait-img,
  .people-grid > .founder .founder-heading { margin-bottom: 24px; }
}
@media (max-width: 800px) {
  /* Switch to flex column with explicit order so the artists header sits
     directly above the artist card (not stacked at the top with leadership). */
  .people-grid { display: flex; flex-direction: column; row-gap: 0; }
  .people-grid > * { width: 100%; }
  .people-grid__head--leadership { order: 1; margin-bottom: 24px; }
  .people-grid > .founder:not(.founder--artist) { order: 2; margin-bottom: 80px; }
  .people-grid__head--artists { order: 3; margin-bottom: 24px; }
  .people-grid > .founder--artist { order: 4; margin-bottom: 0; }
}
.founder {
  display: grid;
  grid-template-columns: 1fr;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 28px;
  align-items: start;
}
.founder-portrait { aspect-ratio: 3/4; max-width: 240px; }
.founder-portrait-img {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  background: #0e0e0e;
}
.founder-heading .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.founder-heading h3 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  /* Slightly smaller upper bound so "Dieuwer Feldbrugge" fits on one line at
     desktop widths — keeps all three bios aligned across the row. */
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 24px;
  /* Reserve exactly one line of space so single- and multi-word names align. */
  min-height: 1em;
  /* Allow names to wrap when the column is too narrow to fit them on one
     line — prevents overflow into adjacent columns. */
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
.founder .bio { color: var(--fg-2); line-height: 1.65; max-width: 64ch; font-size: 15px; }
.founder .bio p + p { margin-top: 14px; }

/* —— Contact page (Studio Card concept) —— */
.contact-page {
  min-height: calc(100dvh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 30px var(--pad-x) 60px;
  position: relative;
  z-index: 5;
  isolation: isolate;
}

/* Editorial CTA above the card — mirrors the Services Start-A-Conversation
   block. Two columns on wide screens (headline + supporting paragraph),
   stacks on narrow. Constrained to the same max-width as the card so they
   read as one composition. */
.contact-cta {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1320px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
}
.contact-cta-title {
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  max-width: 16ch;
  color: #fff;
}
.contact-cta-body {
  color: var(--fg-2);
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
}
@media (max-width: 800px) {
  .contact-cta { grid-template-columns: 1fr; gap: 24px; }
  .contact-page { gap: 16px; }
}

/* Reel video sitting behind the contact card — same recipe as
   .svc-hero-video but constrained to the contact section. Faded with a
   gradient mask top + bottom so it bleeds into the page. */
.contact-page-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  --reel-opacity: 0.20;
  filter: grayscale(1) contrast(1.05) brightness(0.5) blur(3px);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0.7) 18%,
    rgba(0,0,0,0.9) 50%,
    rgba(0,0,0,0.6) 82%,
    rgba(0,0,0,0)   100%);
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0.7) 18%,
    rgba(0,0,0,0.9) 50%,
    rgba(0,0,0,0.6) 82%,
    rgba(0,0,0,0)   100%);
}

/* The card itself — sits centred, hairline frame, slate panel feel */
.contact-card {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  background: rgba(14, 14, 14, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  grid-template-rows: auto auto auto auto;
}

/* Studio column — heading on top; address (left) and map (right) sit in
   a row below it, top-aligned to each other so the minimap aligns with
   the first line of the address. */
.contact-col--studio { min-width: 0; }
.contact-col--studio .contact-col-studio-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.contact-col--studio .contact-col-studio-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.contact-col--studio .contact-map {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.contact-col--studio .contact-map-cap { font-size: 9px; }

/* Make the map a clickable link to the same Google Maps location.
   Hover tints the SVG strokes + caption to the brand orange. */
.contact-map-link {
  display: block;
  flex-shrink: 0;
  text-decoration: none !important;
  border-bottom: 0 !important;
  width: auto !important;
  color: var(--fg);
  transition: color 200ms ease;
}
.contact-map-link:hover { color: var(--accent); }
.contact-map-link:hover .contact-map-cap { color: var(--accent); }

/* Address as a Google-Maps-linked block. Sits below the map header so it
   gets the full column width — no awkward narrow wrap next to the pin. */
.contact-address {
  display: block;
  text-decoration: none;
  border-bottom: 0 !important;
  width: auto !important;
  color: var(--fg);
  transition: color 200ms ease;
}
.contact-address p {
  padding: 0 !important;
  font-size: 14px;
  line-height: 1.55;
}
.contact-address p + p { margin-top: 2px; }
.contact-address p:first-child {
  border-bottom: 1px solid transparent;
  display: inline-block;
  transition: border-color 200ms ease, color 200ms ease;
}
.contact-address:hover p:first-child {
  border-bottom-color: transparent;
}
/* Hover lights up the full address (street + postcode) in orange,
   but keeps "The Netherlands" muted so it stays as a quiet locator. */
.contact-address:hover p:not(.dim) { color: var(--accent); }

/* Brand wordmark inside the legal footer line — full Redivider Studio B.V.
   in orange, mono caps, slight tracking bump. */
.contact-card-foot .contact-brand {
  color: var(--accent);
  letter-spacing: 0.18em;
  font-weight: 500;
}

/* Header strip — meta on left, map pin on right */
.contact-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.contact-card-clock { white-space: nowrap; }

/* Map pin — small SVG block diagram in the corner */
.contact-map {
  width: 110px;
  height: 110px;
  position: relative;
  color: var(--fg);
}
.contact-map svg { display: block; }
.contact-map-cap {
  position: absolute;
  bottom: -18px; right: 0;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}

/* Lede — big email moment */
.contact-card-lede {
  padding: 56px 40px 48px;
  border-bottom: 1px solid var(--line);
}
.contact-email {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  display: inline-block;
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 500ms cubic-bezier(.2,.7,.2,1), color 500ms cubic-bezier(.2,.7,.2,1);
  padding-bottom: 4px;
}
.contact-email:hover { background-size: 100% 1px; color: var(--accent); }
/* Only the "redivider" wordmark in the email reads as the brand colour;
   "hello@" and ".studio" stay white so the email line still scans easily. */
.contact-email-brand { color: var(--accent); }
.contact-card-tagline {
  margin-top: 28px;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 520px;
}

/* Three columns split by hairlines. Studio column gets a touch more
   width because its content (street + map) is the densest. */
.contact-card-cols {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.contact-col {
  padding: 32px 40px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.contact-col:last-child { border-right: 0; }
.contact-col h4 {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 400;
  margin-bottom: 18px;
}
.contact-col p, .contact-col a {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  text-decoration: none;
  display: block;
}
.contact-col a {
  border-bottom: 1px solid transparent;
  width: fit-content;
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}
.contact-col a:hover { border-bottom-color: transparent; }
/* /Follow links light up in the brand orange on hover, no underline. */
.contact-col:not(.contact-col--studio) a:hover { color: var(--accent); border-bottom-color: transparent; }
.contact-col .dim { color: var(--fg-3); }

/* Follow column on contact card uses the same circular SVG icons as the
   site footer. Lay them out in a horizontal row, neutralise the inherited
   .contact-col a styling (which targets text links), and let the
   foot-soc-icon ruleset (line ~210) drive the disc + hover treatment. */
.contact-col .contact-follow-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
}
.contact-col .contact-follow-icons .foot-soc-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--fg-1);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.contact-col .contact-follow-icons .foot-soc-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Footer strip — registration line in mono */
.contact-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 18px 40px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-2);
}
.contact-card-foot .dimmer { color: var(--fg-3); }

@media (max-width: 800px) {
  .contact-page { padding: 120px var(--pad-x) 60px; }
  .contact-card-head, .contact-card-lede, .contact-col, .contact-card-foot {
    padding-left: 24px; padding-right: 24px;
  }
  .contact-card-head { grid-template-columns: 1fr; }
  .contact-map { width: 88px; height: 88px; justify-self: end; }
  .contact-card-cols { grid-template-columns: 1fr; }
  .contact-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-col:last-child { border-bottom: 0; }
}

/* Legacy contact styles (kept for any old refs, harmless) */
.contact-page-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.contact-hero {
  min-height: 70dvh;
  display: grid;
  align-items: center;
  padding: 0 var(--pad-x);
}
.contact-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(48px, 10vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.contact-display em { font-family: var(--serif); font-style: italic; color: var(--accent); }
.contact-display a { color: inherit; position: relative; }
.contact-display a::after {
  content:""; position:absolute; left:0; right:0; bottom: 0.05em;
  height: 2px; background: currentColor;
  transform-origin: right; transform: scaleX(0);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.contact-display a:hover::after { transform-origin: left; transform: scaleX(1); }

.contact-grid {
  display: grid;
  /* Studio column gets more width so the address wraps gracefully
     (avoids "Eerste Passeerders-/dwarsstraat 124-1" splitting awkwardly).
     Hours and Follow stay narrow since their content is short. */
  grid-template-columns: 2.4fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-cell { background: var(--bg); padding: 40px var(--pad-x); }
.contact-cell h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; font-weight: 400; }
.contact-cell a, .contact-cell p { display: block; padding: 4px 0; color: var(--fg); font-size: 16px; }

/* —— Services page —— */
.svc-lead {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(40px, 5.2vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 18ch;
  text-wrap: balance;
}
.svc-lead em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent); }

/* —— Reel video fade-in ——
   <ReelVideo> shared component starts at opacity 0 and fades in to its
   per-class target (`--reel-opacity`) over 2s once metadata is loaded
   and the playhead has been seeked to the handoff position from
   localStorage. We also animate the filter — starting darker and more
   blurred, then easing to the per-class final filter — so the reveal
   reads as a clear cinematic fade-in even though the final opacity is
   already quite low (~0.2). Without animating the filter, fading only
   from opacity 0 → 0.22 against a dark page reads as nearly instant.

   IMPORTANT: the `filter` here is the START state. The per-class rules
   (`.svc-hero-video`, `.contact-page-bg`) set the END filter; both rules
   have specificity 1, so we use `:not(.is-ready)` here to scope this
   block to the pre-fade state — once `.is-ready` is added, the per-class
   filter wins automatically and transitions in over 2s. */
.reel-video {
  opacity: 0;
  transition:
    opacity 2000ms cubic-bezier(.2,.7,.2,1),
    filter  2000ms cubic-bezier(.2,.7,.2,1);
}
.reel-video:not(.is-ready) {
  filter: grayscale(1) contrast(1.05) brightness(0) blur(8px);
}
.reel-video.is-ready {
  opacity: var(--reel-opacity, 1);
}
.svc-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.svc-hero-video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  max-height: 900px;
  object-fit: cover;
  z-index: -2;
  --reel-opacity: 0.22;
  filter: grayscale(1) contrast(1.05) brightness(0.55) blur(2px);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%);
}
.svc-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  max-height: 900px;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.25) 40%,
    rgba(0,0,0,0.15) 70%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* Format cards — what we work on */
.formats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1024px) { .formats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .formats { grid-template-columns: 1fr; } }

/* Mode cards — featured & lifted, with breathing space */
.modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.6vw, 26px);
  background: transparent;
  border: none;
  max-width: 1480px;
  margin: 0 auto;
}

/* Stacked vertical layout (when paired with Approach) */
.modes.modes-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  margin: 0;
  gap: clamp(14px, 1.2vw, 20px);
}
.modes.modes-stack .mode {
  display: flex;
  flex-direction: column;
}
.modes.modes-stack .mode .format-thumb {
  order: 2;
  border-top: 1px solid var(--line);
  border-left: none;
  aspect-ratio: 16/9;
}
.modes.modes-stack .mode .format-body {
  order: 1;
  padding: 22px 22px 18px;
}
.modes.modes-stack .mode .format-body h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.modes.modes-stack .mode .format-body p {
  font-size: 14px;
  line-height: 1.55;
}
.modes.modes-stack .mode .tag-row { margin-top: 12px; gap: 5px; }
.modes.modes-stack .mode .tag-row .tag { font-size: 9px; padding: 3px 6px; }

/* Medium widths: stack to 1 column but lay each card text|featured side-by-side */
@media (max-width: 1500px) {
  .modes.modes-stack { grid-template-columns: 1fr; gap: 14px; }
  .modes.modes-stack .mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: initial;
  }
  .modes.modes-stack .mode .format-thumb {
    order: 2;
    border-top: none;
    border-left: 1px solid var(--line);
    aspect-ratio: auto;
    height: 100%;
    align-self: stretch;
  }
  .modes.modes-stack .mode .format-thumb video,
  .modes.modes-stack .mode .format-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .modes.modes-stack .mode .format-body {
    order: 1;
    padding: 22px 24px 20px;
  }
  .modes.modes-stack .mode .format-body p { font-size: 14px; }
}

/* Narrow: stack everything top/bottom */
@media (max-width: 600px) {
  .modes.modes-stack .mode {
    display: flex;
    flex-direction: column;
  }
  .modes.modes-stack .mode .format-thumb {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

/* Approach + Modes side-by-side block */
.svc-approach-block {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 5vw, 80px);
  margin-top: 80px;
  align-items: start;
}
.svc-approach-col {
  position: sticky;
  top: 100px;
}
.svc-approach-text {
  font-size: var(--t-lead);
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 52ch;
}
@media (max-width: 1024px) {
  .svc-approach-block { grid-template-columns: 1fr; }
  .svc-approach-col { position: static; }
}

/* Hero grid: title on left, modes on right */
.svc-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: start;
  gap: clamp(40px, 5vw, 96px);
}
.svc-hero-left { padding-right: 0; }
.svc-hero-right { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.svc-hero-right > .team-photo--hero { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; }
.svc-hero-right > .team-photo--hero .team-slideshow-stage { aspect-ratio: 16/10; height: auto; }
@media (max-width: 1100px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 60px; }
}

.svc-approach-inline {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
  max-width: 64ch;
}
.svc-approach-text {
  font-size: var(--t-lead);
  color: var(--fg-2);
  line-height: 1.6;
}
.modes .mode-filler { display: none; }
@media (max-width: 1024px) {
  .modes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .modes { grid-template-columns: 1fr; }
}

/* Mode tile = its own card */
.modes .mode {
  background: #131313;
  border: 1px solid var(--line-2);
  position: relative;
  isolation: isolate;
  transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.modes .mode::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  z-index: 2;
  pointer-events: none;
}
.modes .mode:hover {
  background: #181818;
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-3px);
}
.modes .mode:hover::before { transform: scaleX(1); }

/* Mode tiles: featured BELOW description */
.modes .mode .format-thumb { order: 2; border-top: 1px solid var(--line); aspect-ratio: 16/9; }
.modes .mode .format-body { order: 1; padding: 28px 28px 22px; }

/* Mode step label — featured, not just a num caption */
.modes .mode .format-body .num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  margin-bottom: 16px;
}
.modes .mode .format-body h3 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.modes .mode .format-body p {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
}
.modes .mode .tag-row { gap: 6px; margin-top: 16px; }
.modes .mode .tag-row .tag { font-size: 9.5px; padding: 4px 8px; }
.format {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background .3s ease;
  color: inherit;
  text-decoration: none;
}
.format:hover { background: #0e0e0e; }
.format-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
  border-bottom: 1px solid var(--line);
}
.format-thumb video, .format-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.format:hover .format-thumb video,
.format:hover .format-thumb img { transform: scale(1.04); }
.format-thumb-ph {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 15px);
}
.format-thumb-ph .ph-meta {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--fg-2);
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
  border: 1px solid var(--line);
}
.format-thumb-ph .ph-corner-tr {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--fg-3);
}
.format-thumb-cap {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  z-index: 2;
  pointer-events: none;
}
.format-thumb-cap .mono { color: var(--accent); font-size: 9px; letter-spacing: 0.16em; }
.format-thumb-cap span:last-child { font-family: var(--sans); font-size: 13px; letter-spacing: -0.005em; text-transform: none; }
.format-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.format-body {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px;
}
.format .num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fg-3); }
.format.mode .num {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 18px;
}
.format .glyph {
  height: 56px; width: 56px;
  margin: 4px 0 28px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
}
.format h3 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.format h3 { transition: color .25s ease; }
.format h3 em { font-style: normal; color: inherit; }
.format:hover h3 { color: var(--accent); }
.format p { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.format .tag-row {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.format .tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 8px;
  border: 1px solid var(--line-2);
}

/* Capabilities — 2-column tile grid */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1200px) { .caps-grid { grid-template-columns: 1fr; } }
.cap-filler {
  background: var(--bg);
}
@media (max-width: 1200px) { .cap-filler { display: none; } }
.cap-tile {
  background: var(--bg);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  transition: background .25s ease;
  text-decoration: none;
  color: inherit;
}
.cap-tile:hover { background: #0e0e0e; }
.cap-tile-text {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.cap-tile-thumb {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  align-self: stretch;
  min-width: 0;
}

/* 2-col grid is too narrow for side-by-side inside each tile —
   force featured-on-top, text-below stack at that range */
@media (max-width: 1700px) and (min-width: 1200px) {
  .cap-tile {
    grid-template-columns: 1fr;
  }
  .cap-tile-thumb {
    border-left: none;
    border-bottom: 1px solid var(--line);
    order: -1;
  }
}

/* Narrow viewports — single column grid, force stacked tile too */
@media (max-width: 720px) {
  .cap-tile {
    grid-template-columns: 1fr;
  }
  .cap-tile-thumb {
    border-left: none;
    border-bottom: 1px solid var(--line);
    order: -1;
  }
}
.cap-tile-thumb video,
.cap-tile-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.cap-tile:hover .cap-tile-thumb video,
.cap-tile:hover .cap-tile-thumb img { transform: scale(1.04); }
.cap-tile-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.cap-thumb-ph {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 15px);
}
.cap-thumb-ph .ph-meta {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  color: var(--fg-3);
  padding: 4px 7px;
  border: 1px solid var(--line);
}
.cap-thumb-ph .ph-corner-tr {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--fg-3);
}
.cap-thumb-cap {
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--fg);
  z-index: 2;
  pointer-events: none;
}
.cap-thumb-cap .mono { color: var(--accent); font-size: 9px; letter-spacing: 0.16em; }
.cap-thumb-cap span:last-child { font-family: var(--sans); font-size: 13px; letter-spacing: -0.005em; text-transform: none; }
@media (max-width: 720px) {
  .cap-tile-thumb { aspect-ratio: 16/9; }
}
.cap-tile-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.cap-tile .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-3);
  flex: 0 0 auto;
}
.cap-tile h3 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  transition: color .25s ease;
}
.cap-tile h3 em { font-style: normal; color: inherit; }
.cap-tile:hover h3 { color: var(--accent); }
.cap-tile-body {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}
.cap-tile-tags {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cap-tile-tags span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line-2);
  padding: 4px 8px;
}

/* Engagement / care strip */
.engagements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 800px) { .engagements { grid-template-columns: 1fr; } }
.engagement {
  background: var(--bg);
  padding: 36px 32px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.engagement .step { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 24px; }
.engagement h4 {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.engagement p { color: var(--fg-2); line-height: 1.55; font-size: 14px; }

/* Big italic flex pull-quote */
.svc-pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 26ch;
  text-wrap: balance;
}
.svc-pull em { color: var(--accent); }

/* CTA strip */
.svc-cta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(60px, 8vw, 120px) var(--pad-x);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 5; background: var(--bg);
}
@media (max-width: 800px) { .svc-cta { grid-template-columns: 1fr; } }

/* tweaks panel small adjustments */
.tweaks-shell .tweak-section { padding: 12px 0; }

/* —— Services page: simplified card grid (post-redesign) ——
   Single-column hero (modes A/B/C removed), then two grids:
     · What We Do (capabilities) — thumb on top, meta strip below.
     · Where We Work (formats)   — meta strip on top, thumb below (flipped).
   Both grids reuse the home work-card chrome: poster with orange dot
   bottom-right, title bottom-left lifting on hover, description sliding
   up underneath. */
.svc-hero-single {
  max-width: 980px;
}
.svc-grid {
  display: grid;
  /* 4 columns at full width — matches original .formats grid; the
     thinner card with chrome reads better than 5-up at this size.
     Children use grid-template-rows: subgrid so equivalent tracks
     align across a row. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: min-content;
  /* Hairline gutter (1px) so card edges read as a connected sheet of
     panels — same visual language as the original .formats grid which
     used `gap: 1px; background: var(--line);`. The cards paint their
     own background so the parent line shows through as a rule. */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1280px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .svc-grid { grid-template-columns: 1fr; } }

/* What We Do (capabilities) — 5 columns at full width. */
.svc-grid.svc-grid--caps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1500px) { .svc-grid.svc-grid--caps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .svc-grid.svc-grid--caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .svc-grid.svc-grid--caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .svc-grid.svc-grid--caps { grid-template-columns: 1fr; } }

/* Where We Work (formats) — 4 columns, sized to match the per-card
   width of caps (which is 1/5 of the section width). 4 of those = 80%,
   centered. We constrain the section header and the grid to 80%; the
   footer paragraph uses margin-left auto / margin-right auto so its
   left edge aligns with the grid's left edge but the text itself stays
   left-anchored within its 70ch max-width. */
/* Where We Work (formats) — 4 columns, sized to match the per-card
   width of caps. The whole section's contents (header + grid) sit in
   an 80% centered band so each format card matches the per-card width
   of a What We Do card. The footer paragraph aligns its left edge to
   the band but lets the text wrap to ~70ch (multi-line). */
.svc-section--formats > .section-meta,
.svc-section--formats > .svc-grid--formats { width: 80%; margin-left: auto; margin-right: auto; }
.svc-section--formats > .svc-section-footer {
  margin-left: 10%;
  margin-right: 10%;
  max-width: 70ch;
  width: auto;
}
@media (max-width: 1500px) {
  .svc-section--formats > .section-meta,
  .svc-section--formats > .svc-grid--formats { width: 100%; }
  .svc-section--formats > .svc-section-footer { margin-left: 0; margin-right: 0; }
}

/* Footer paragraph default — full-width section just caps text width. */
.svc-section-footer { max-width: 70ch; }

/* Service card — restored to the original .format card chrome.
   Solid bg, generous interior padding, glyph icon, hover lifts to a
   slightly brighter bg + accent on the heading. Uses subgrid so heading
   / desc / tags / meta / thumb tracks align across the row, but each
   card now has its OWN background and padding, not a bare cell. */
.svc-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  text-decoration: none;
  color: inherit;
  position: relative;
  background: var(--bg);
  transition: background .25s ease;
}
.svc-card:hover { background: #0e0e0e; }
.svc-card .work-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.svc-card--flip .work-thumb {
  border-bottom: none;
  border-top: 1px solid var(--line);
}
.svc-card .work-thumb video,
.svc-card .work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.svc-card:hover .work-thumb video,
.svc-card:hover .work-thumb img { transform: scale(1.04); }
/* Featured-project meta strip — sits at the bottom of the card (or top,
   when flipped). Reads as a small caption pointing at a real case
   study. */
.svc-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 28px 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.svc-card-meta .dimmer { color: var(--fg-3); opacity: 0.7; }

/* Hover: same accent shift as home cards. The .work-thumb internal
   chrome (scrim, name lift, desc reveal) already has its own :hover
   rules keyed to .work-card / .svc-card via the parent; we add the
   svc-card hook below. */
.svc-card:hover .work-thumb-scrim { opacity: 1; }
.svc-card:hover .work-thumb-name {
  transform: translateY(calc(-1em - 12px));
  color: var(--fg);
}
.svc-card:hover .work-thumb-desc {
  opacity: 1;
  transform: translateY(0);
}
.svc-card:hover .work-thumb video,
.svc-card:hover .work-thumb img {
  transform: scale(1.03);
}

/* Restored descriptive content sections — each is now a DIRECT child of
   .svc-card so the subgrid can place it on its own row track. The 5
   tracks per card row are: thumb, meta, heading, desc, tags. (Or
   heading, desc, tags, meta, thumb when .svc-card--flip.) */
/* Glyph icon — sits above the heading on flipped (formats) cards.
   Same size as the original .format .glyph (56×56). Stroke uses fg-3
   so it reads as supporting chrome, not a primary element. */
/* Glyph — floats at the top-right of the description column so the
   description text wraps around it. Aligned to the same horizontal
   padding as the description (28px). Sized to read clearly without
   crowding the body copy. */
.svc-card-glyph {
  float: right;
  margin: 0 0 8px 16px;
  height: 56px;
  width: 56px;
  color: var(--fg-3);
  pointer-events: none;
  transition: color .25s ease;
}
.svc-card-glyph svg { display: block; width: 100%; height: 100%; }
.svc-card:hover .svc-card-glyph { color: var(--accent); }
.svc-card-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-3);
  padding: 28px 28px 0;
  margin: 0;
}
/* (Glyph + num combo no longer needed — glyph is absolute-positioned.) */
.svc-card-heading {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  padding: 14px 28px 0;
  text-wrap: pretty;
  transition: color .25s ease;
}
.svc-card:hover .svc-card-heading { color: var(--accent); }
/* Heading italic span — user removed the orange/italic alternation;
   keep the <em> tag in place but render it as plain inheriting style. */
.svc-card-heading em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
.svc-card-desc {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  padding: 12px 28px 0;
  text-wrap: pretty;
}
.svc-card-tags {
  list-style: none;
  margin: 0;
  padding: 22px 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
}
.svc-card-tags li {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  line-height: 1.2;
}

/* Layout: when the thumb is on top (capabilities), the meta strip sits
   directly under it (track 2). When flipped (formats), the meta strip
   becomes track 4 and is pulled tight against the thumb at the bottom. */
.svc-card:not(.svc-card--flip) .svc-card-meta { padding: 14px 28px 22px; }
.svc-card:not(.svc-card--flip) .svc-card-tags { padding-bottom: 28px; }
.svc-card--flip .svc-card-tags { padding-bottom: 22px; }
.svc-card--flip .svc-card-meta { padding: 0 28px 22px; }


/* —— Mobile typography pass ——
   The fluid type-scale uses clamp(min, vw, max) with mins tuned for ~500px
   (where desktop Chrome bottoms out). iPhones render at ~390-430 CSS px, so
   the mins pin everywhere and the layout reads ~30% oversized vs the same
   site in narrow desktop Chrome. This block tightens the floors for narrow
   viewports so mobile reads at the same proportions PC-narrow does. */
@media (max-width: 520px) {
  :root {
    --pad: clamp(14px, 4vw, 24px);
    --pad-x: clamp(16px, 5vw, 28px);
    --t-lead: clamp(15px, 4vw, 18px);
    --t-h3: clamp(18px, 5vw, 22px);
    --t-h2: clamp(26px, 7vw, 36px);
    --t-h1: clamp(32px, 9vw, 48px);
    --t-display: clamp(40px, 14vw, 64px);
  }

  /* Page hero displays (home / studio / services / case-study / contact) */
  .hero-strapline h1 { font-size: clamp(26px, 7.5vw, 36px); }
  .studio-lead      { font-size: clamp(28px, 8vw, 40px); }
  .svc-lead         { font-size: clamp(28px, 8vw, 40px); }
  .cs-display       { font-size: clamp(32px, 10vw, 48px); }
  .contact-display  { font-size: clamp(32px, 10vw, 48px); }

  /* Contact page email + CTA */
  .contact-email    { font-size: clamp(22px, 7vw, 36px); }
  .contact-cta-title { font-size: clamp(24px, 7.5vw, 36px); }

  /* Mid-level headings that have desktop-tuned mins */
  .work-card.hero-card .hero-card-title { font-size: clamp(20px, 6vw, 28px); }
  .modes.modes-stack .mode .format-body h3 { font-size: clamp(18px, 5vw, 22px); }

  /* Tighten the contact-cell padding so the address column doesn't crush
     against the map crosshair on narrow viewports */
  .contact-cell { padding: 28px var(--pad-x); }

  /* Nav: tighten the right-side links so the top-left submark gets room
     to breathe. Smaller mono, less letter-spacing, half the inter-link gap. */
  .nav-r { gap: 10px; }
  .nav a, .nav .slash { font-size: 10px; letter-spacing: 0.1em; }
}

/* —— Work card hover-reveal: clamp description on touch + narrow ——
   The hover animation (title slides up, desc fades in beneath it) lifts
   the title by exactly one line. A 2-line description is taller than
   that lift, so the description's second line overlaps the new title
   position — visible on iOS (where :hover sticks after a tap) and on
   narrow desktop browsers. Clamp the description to a single line in
   those contexts so it fits in the gap the title vacates; long copy
   gets truncated with the line-clamp ellipsis. */
@media (hover: none), (max-width: 700px) {
  /* Target .work-thumb-desc directly (also catches .svc-card variants and
     any other reuse of .work-thumb chrome). Lift the title further so even
     a single line of desc has clean clearance. */
  .work-thumb-desc { -webkit-line-clamp: 1; }
  .work-card:hover .work-thumb-name,
  .svc-card:hover .work-thumb-name { transform: translateY(calc(-1em - 22px)); }
}

/* —— Mobile hero alignment fixes ——
   At narrow viewports the case-study hero and home info bar both have
   absolute-positioned siblings that collide on small screens. */
@media (max-width: 700px) {
  /* Case study: meta line above the title spreads with awkward 32px gaps
     when the viewport is narrow — tighten so segments sit close together. */
  .cs-meta-row { gap: 12px; margin-bottom: 12px; }

  /* Case study: PLAY FILM / WATCH BTS sit absolute at bottom-right and were
     overlapping the italic tagline. Reserve ~72px of bottom-padding inside
     .cs-hero-content so the visible text sits above the CTA strip, then
     stretch the CTAs full-width and left-align so they read as a row below
     the content rather than a floating right-corner cluster. */
  .cs-hero-content { padding-bottom: 72px; }
  .cs-hero-cta-right {
    left: var(--pad-x);
    right: var(--pad-x);
    justify-content: flex-start;
  }

  /* Home: NOW SHOWING / SHOWREEL on the left and the FPS·TC timecode on the
     right both wrap to two lines on narrow viewports — force single-line +
     smaller type so each stays glued to its corner. */
  .hero-info-bar { gap: 16px; bottom: 18px; }
  .hero-now-showing,
  .hero-info-fps {
    font-size: 9px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .hero-now-showing {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}