/* ============================================================
   STUDIO — cinematic AI-studio site
   Design system: black canvas, condensed black display type,
   mono body, glass surfaces, fluid artboard-rem scale.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'DisplayCond';
  src: url('../fonts/anton-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FonoMono';
  src: url('../fonts/chivo-mono-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #000;
  --fg: #fff;
  /* White accent: the work carries the colour, the interface does not. */
  --accent: #fff;
  --accent-fg: #000;
  --dark-shade: #0c0e0f;
  --border: rgba(255, 255, 255, 0.05);
  --radius: 8px;

  --font-display: 'DisplayCond', 'Arial Narrow', Impact, sans-serif;
  --font-mono: 'FonoMono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: 20px;                 /* page gutter */
  --header-safe: 60px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);   /* the site's signature easing */
  --dur: 0.6s;

  /* grain texture */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.55'/></svg>");
}
@media (min-width: 768px) {
  :root { --pad: 32px; --header-safe: 80px; }
}
@media (min-width: 1024px) { :root { --pad: 40px; } }
@media (min-width: 1280px) { :root { --pad: 48px; } }

/* ---------- Fluid artboard rem ----------
   1rem = 10 artboard-units. Mobile artboard 393, desktop 1600. */
html {
  font-size: calc(100vw / 393 * 10);
}
@media (min-width: 768px) {
  html { font-size: calc(100vw / 1600 * 10); }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  min-height: 100vh;
}
@media (min-width: 768px) { body { font-size: 18px; } }

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

img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea { font: inherit; color: inherit; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Type scale (exact) ---------- */
.type-heading-2xl, .type-heading-xl, .type-heading-lg, .type-heading-md,
.type-heading-sm, .type-heading-xs {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
}
.type-heading-2xl { font-size: 4.8rem; letter-spacing: -0.03em; text-transform: uppercase; }
.type-heading-xl  { font-size: 4.8rem; letter-spacing: -0.03em; text-transform: uppercase; }
.type-heading-lg  { font-size: 3.2rem; letter-spacing: -0.02em; text-transform: uppercase; }
.type-heading-md  { font-size: 2.4rem; letter-spacing: -0.02em; }
.type-heading-sm  { font-size: 2rem;   letter-spacing: -0.01em; }
.type-heading-xs  { font-size: 1.6rem; }
@media (min-width: 768px) {
  .type-heading-2xl { font-size: 16rem; }
  .type-heading-xl  { font-size: 12rem; }
  .type-heading-lg  { font-size: 8rem; }
  .type-heading-md  { font-size: 4.8rem; }
  .type-heading-sm  { font-size: 3.2rem; }
  .type-heading-xs  { font-size: 2.4rem; }
}

.type-label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
}
.type-base { font-size: 18px; line-height: 1.6; }
.type-sm   { font-size: 14px; line-height: 1.6; }

.text-balance { text-wrap: balance; }
.text-accent { color: var(--accent); }
.text-dim { color: rgba(255,255,255,.55); }
.text-dim-2 { color: rgba(255,255,255,.35); }

/* 4px section rule — the site's signature divider */
.rule-t { border-top: 4px solid var(--border); }
hr { border: 0; border-top: 1px solid var(--border); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  padding-left: var(--pad);
  padding-right: var(--pad);
  margin-inline: auto;
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
}
@media (min-width: 768px)  { .grid-12 { column-gap: 32px; } }
@media (min-width: 1280px) { .grid-12 { column-gap: 48px; } }

/* ---------- Glass surfaces (exact recipe) ---------- */
.glass {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  box-shadow: 0 0 4px #00000012, 0 0 16px #00000005;
}
.glass-effect {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px) brightness(1.2) saturate(1.2);
  backdrop-filter: blur(8px) brightness(1.2) saturate(1.2);
}
.glass-content {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  height: 100%;
  overflow: hidden;
}
/* 12° blended hairline, 2px, brightest mid-edge */
.border-shine::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(12deg, #ffffff1a 10%, #ffffff33 50%, #ffffff1a 90%);
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: content-box, padding-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: content-box, padding-box;
  mask-composite: exclude;
}

/* ---------- Sheen sweep (hover light pass over dark media) ---------- */
@property --sheen-pos {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
.sheen-overlay { position: relative; }
.sheen-overlay::before {
  --sheen-pos: 0;
  content: '';
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top right,
    transparent,
    rgba(255, 255, 255, calc(0.25 - 0.5 * max(var(--sheen-pos) - 0.5, 0.5 - var(--sheen-pos)))) calc(var(--sheen-pos) * 100%),
    transparent
  );
  transition: --sheen-pos 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.sheen-overlay:hover::before,
a:hover .sheen-overlay::before,
.is-hover-active .sheen-overlay::before { --sheen-pos: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color .3s var(--ease-out), opacity .3s var(--ease-out), transform .3s var(--ease-out);
  cursor: pointer;
  user-select: none;
}
.btn-glass { background: rgba(255,255,255,0.1); }
.btn-glass:hover { background: rgba(255,255,255,0.2); }
.btn-dark { background: rgba(0,0,0,0.1); }

/* A 64px pill is a desktop button. On a phone it eats the composition, so
   both sizes come down and the gap inside them closes up with it. */
.btn-md { height: 48px; padding: 0 18px; gap: 12px; }
.btn-lg { height: 52px; padding: 0 20px; gap: 12px; }
@media (min-width: 600px) {
  .btn-md { height: 56px; padding: 0 20px; gap: 16px; }
  .btn-lg { height: 64px; padding: 0 24px; gap: 16px; }
}
@media (min-width: 768px) {
  .btn-lg { padding-left: 32px; }
  .btn-md { padding-left: 24px; }
}
.btn-ghost {
  height: 56px;
  padding: 0 16px;
  gap: 12px;
  border-radius: var(--radius);
  background: transparent;
}
.btn-ghost:hover { opacity: 0.75; }

.btn-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  flex: 0 0 auto;
}
.btn-chip svg { width: 7px; height: 8px; fill: currentColor; }

.btn-accent { background: var(--accent); color: var(--accent-fg); }
.btn-accent:hover { background: #eeff70; }
.btn-accent .btn-chip { background: rgba(0,0,0,0.12); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  z-index: 60;
  top: 20px;
  left: var(--pad);
  right: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
@media (min-width: 1024px) { .site-header { top: 24px; } }
.site-header > * { pointer-events: auto; }

.header-logo {
  display: block;
  margin-right: 12px;
  color: var(--fg);
  transition: opacity .3s var(--ease-out);
}
.header-logo:hover { opacity: .8; }
.header-logo svg { height: 44px; width: auto; }
@media (min-width: 768px) { .header-logo svg { height: 48px; } }

/* stacked glitch logotype */
.logo-stack {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  user-select: none;
}
@media (min-width: 768px) { .logo-stack { font-size: 23px; } }
.logo-stack span { display: block; }
.logo-stack span:last-child {
  margin-left: 2px;
  position: relative;
}
.logo-stack span:last-child::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 2px;
  width: 4px;
  height: 4px;
  background: var(--accent);
}
.loader-logo .logo-stack { font-size: 44px; align-items: center; }

.header-nav { display: none; }
@media (min-width: 900px) {
  .header-nav { display: flex; height: 56px; }
}
.header-nav .glass-content {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(0,0,0,0.1);
}
.header-nav a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity .3s var(--ease-out);
  position: relative;
}
@media (min-width: 1280px) { .header-nav a { padding: 0 12px; } }
.header-nav a:hover { opacity: .7; }
.header-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 8px;
  height: 1px;
  background: var(--accent);
}

.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: block; margin-left: 8px; } }
.header-cta .btn { height: 56px; }

.header-menu-btn { display: block; }
@media (min-width: 900px) { .header-menu-btn { display: none; } }
.header-menu-btn .btn { height: 44px; padding: 0 18px; gap: 10px; }
.header-menu-btn svg { width: 14px; height: 10px; stroke: currentColor; }

/* ---------- Mobile menu overlay ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,0.75);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility 0s .45s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s var(--ease-out);
}
.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: var(--pad);
}
.mobile-menu-close .btn { height: 44px; padding: 0 18px; }
.mobile-menu nav ul { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: 5.2rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  display: inline-block;
  transition: color .3s;
}
.mobile-menu nav a:active { color: var(--accent); }
.mobile-menu .menu-item {
  overflow: hidden;
}
.mobile-menu .menu-item > * {
  transform: translateY(110%);
  transition: transform .7s var(--ease-out);
  will-change: transform;
}
.mobile-menu.is-open .menu-item > * { transform: translateY(0); }
.mobile-menu .menu-foot {
  margin-top: 40px;
  display: flex;
  gap: 20px;
  opacity: 0;
  transition: opacity .5s var(--ease-out) .35s;
}
.mobile-menu.is-open .menu-foot { opacity: 1; }

/* ---------- Page loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: progress;
}
.loader-logo { opacity: 0; }
.loader-logo svg { height: 64px; width: auto; }
.loader-count {
  position: absolute;
  bottom: calc(var(--pad) + 4px);
  right: var(--pad);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
}
body.is-loading { overflow: hidden; }

/* Page transition veil (between pages) */
.veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease-out;
  will-change: opacity;
}
.veil.is-active { opacity: 1; pointer-events: auto; }

/* return-visit loader: quick fade, no counter ceremony */
.loader-fade {
  transition: opacity .3s ease-out;
  will-change: opacity;
}
.loader-fade .loader-count { display: none; }

/* ---------- Cinematic scene art (video stand-ins) ---------- */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--dark-shade);
}
.scene-art {
  position: absolute;
  inset: -12%;
  will-change: transform;
  animation: scene-drift 36s var(--ease-inout) infinite alternate;
}
.scene--still .scene-art { animation: none; }
@keyframes scene-drift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  100% { transform: translate3d(1.5%, 2%, 0) scale(1.12); }
}
/* film grain */
.scene::after {
  content: '';
  position: absolute;
  inset: -110px;
  background-image: var(--grain);
  opacity: .07;
  animation: grain-shift 0.9s steps(4) infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes grain-shift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-38px, 22px); }
  50% { transform: translate(24px, -30px); }
  75% { transform: translate(-16px, -42px); }
  100% { transform: translate(0,0); }
}
/* vignette + bottom legibility gradient */
.scene-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
}

/* Scene palettes — layered gradient "worlds" */
.scene-art--showreel {
  background:
    radial-gradient(52% 70% at 68% 38%, rgba(255,171,64,.5), transparent 62%),
    radial-gradient(70% 90% at 22% 78%, rgba(24,84,110,.85), transparent 70%),
    radial-gradient(40% 52% at 82% 82%, rgba(120,40,20,.55), transparent 70%),
    linear-gradient(200deg, #0a1418 0%, #050607 55%, #120b06 100%);
}
.scene-art--forest {
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(38,92,66,.7), transparent 65%),
    radial-gradient(50% 60% at 78% 68%, rgba(10,42,30,.9), transparent 75%),
    radial-gradient(30% 36% at 60% 20%, rgba(180,220,170,.28), transparent 70%),
    linear-gradient(180deg, #04110b 0%, #020604 60%, #061109 100%);
}
.scene-art--heist {
  background:
    radial-gradient(46% 60% at 70% 30%, rgba(186,32,40,.55), transparent 64%),
    radial-gradient(70% 85% at 18% 76%, rgba(60,8,14,.9), transparent 72%),
    radial-gradient(26% 30% at 46% 52%, rgba(255,210,150,.22), transparent 70%),
    linear-gradient(215deg, #160406 0%, #050304 55%, #10060a 100%);
}
.scene-art--city {
  background:
    radial-gradient(56% 72% at 30% 34%, rgba(124,58,237,.55), transparent 66%),
    radial-gradient(48% 58% at 80% 72%, rgba(236,72,153,.42), transparent 68%),
    radial-gradient(30% 30% at 62% 24%, rgba(56,189,248,.3), transparent 70%),
    linear-gradient(190deg, #0b0616 0%, #05040a 55%, #130617 100%);
}
.scene-art--pop {
  background:
    radial-gradient(52% 66% at 64% 40%, rgba(255,90,60,.55), transparent 66%),
    radial-gradient(60% 74% at 20% 70%, rgba(140,20,26,.8), transparent 70%),
    radial-gradient(24% 30% at 44% 22%, rgba(255,230,190,.3), transparent 68%),
    linear-gradient(205deg, #180505 0%, #070303 55%, #150804 100%);
}
.scene-art--pastel {
  background:
    radial-gradient(52% 66% at 32% 36%, rgba(255,160,190,.44), transparent 66%),
    radial-gradient(52% 62% at 76% 66%, rgba(120,160,255,.4), transparent 68%),
    radial-gradient(30% 36% at 58% 22%, rgba(255,244,214,.3), transparent 70%),
    linear-gradient(195deg, #120a10 0%, #060507 55%, #0a0c14 100%);
}
.scene-art--golden {
  background:
    radial-gradient(54% 70% at 62% 42%, rgba(255,196,60,.55), transparent 66%),
    radial-gradient(60% 76% at 18% 72%, rgba(120,70,10,.75), transparent 72%),
    radial-gradient(26% 32% at 40% 20%, rgba(255,250,220,.3), transparent 70%),
    linear-gradient(210deg, #171004 0%, #070502 55%, #140c03 100%);
}
.scene-art--engine {
  background:
    radial-gradient(50% 64% at 70% 34%, rgba(65,0,245,.28), transparent 64%),
    radial-gradient(64% 80% at 24% 74%, rgba(20,60,60,.8), transparent 72%),
    radial-gradient(30% 36% at 48% 18%, rgba(140,255,220,.18), transparent 70%),
    linear-gradient(200deg, #071010 0%, #040606 55%, #0c1206 100%);
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s var(--ease-expo),
    transform 1s var(--ease-expo);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-inview { opacity: 1; transform: translateY(0); }

/* Masked line reveal (hero display type) */
.line-mask { display: block; overflow: hidden; }
.line-mask > .line-inner {
  display: block;
  transform: translateY(112%);
  will-change: transform;
}

/* ---------- Logotype marquee (edge-faded, continuous drift) ---------- */
.marquee-band {
  position: relative;
  padding-block: 32px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
@media (min-width: 768px)  { .marquee-band { padding-block: 48px; } }
@media (min-width: 1024px) { .marquee-band { padding-block: 64px; } }
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
}
.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  width: max-content;
  animation: marqueeLoop var(--marquee-duration, 30s) linear infinite;
}
@keyframes marqueeLoop {
  0%  { transform: translate(0); }
  to  { transform: translate3d(var(--marquee-content-width, -50%), 0, 0); }
}
.marquee-set {
  display: inline-flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
}
@media (min-width: 768px)  { .marquee-set { gap: 80px;  padding-right: 80px; } }
@media (min-width: 1024px) { .marquee-set { gap: 120px; padding-right: 120px; } }
.marquee-item {
  font-family: var(--font-display);
  font-size: 2.8rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}

/* ---------- Home reel ---------- */
.reel-panel {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  /* offscreen panels skip paint entirely — keeps scroll at 60fps */
  content-visibility: auto;
  contain-intrinsic-size: auto 100vh;
  contain-intrinsic-size: auto 100lvh;
}
/* first + last stay rasterized at all times so the loop teleport
   lands on an already-painted, pixel-identical frame — zero flash */
.reel-panel:first-of-type,
.reel-panel:last-of-type {
  content-visibility: visible;
}
.reel-panel-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}
.reel-panel article {
  position: relative;
  width: 100%;
  z-index: 4;
}

.panel-copy {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .panel-copy {
    grid-column: 3 / span 10;
    align-items: flex-start;
    text-align: left;
  }
}
.panel-eyebrow {
  font-family: var(--font-display);
  font-size: 2.4rem;
  margin-bottom: 8px;
  display: block;
}
@media (min-width: 1024px) { .panel-eyebrow { font-size: 4rem; } }
.panel-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .panel-actions { justify-content: flex-start; margin-top: 32px; }
}
.panel-actions .btn-ghost { display: none; }
@media (min-width: 768px) { .panel-actions .btn-ghost { display: inline-flex; } }

.hero-title { max-width: 20ch; font-size: 5rem; }
.hero-title .line { display: block; }
@media (min-width: 768px) {
  .hero-title { font-size: 12rem; letter-spacing: -0.03em; max-width: none; }
}
.hero-para {
  margin-top: 12px;
  max-width: 72ch;
}
@media (min-width: 1024px) {
  .hero-para { margin-top: 20px; font-size: 20px; line-height: 1.6; }
}
.hero-cta { margin-top: 16px; }
@media (min-width: 768px) { .hero-cta { margin-top: 32px; } }

/* Left thumbnail rail */
.reel-rail {
  position: fixed;
  z-index: 40;
  top: 50%;
  left: var(--pad);
  transform: translateY(-50%);
  display: none;
  opacity: 0;
  transition: opacity .6s var(--ease-out) .2s;
}
@media (min-width: 900px) { .reel-rail { display: block; } }
.reel-rail.is-ready { opacity: 1; }
.reel-rail ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reel-rail button {
  display: block;
  width: 64px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  opacity: .45;
  transition: opacity .35s var(--ease-out), outline-color .35s;
  outline: 1px solid transparent;
  outline-offset: 2px;
}
.reel-rail button:hover { opacity: 1; }
/* Follows the accent token - it was the old purple, hardcoded. */
.reel-rail button.is-active { opacity: 1; outline-color: var(--accent); }
.reel-rail .scene { position: absolute; inset: 0; }
.reel-rail .scene::after { display: none; }
.reel-rail .scene-art { animation: none; inset: 0; }

/* progress dots (mobile) */
.reel-dots {
  position: fixed;
  z-index: 40;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 900px) { .reel-dots { display: none; } }
.reel-dots button {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: background .3s, transform .3s;
}
.reel-dots button.is-active { background: var(--accent); transform: scale(1.4); }

/* ---------- Inner pages ---------- */
.page-main {
  position: relative;
  z-index: 1;
}
.page-hero {
  padding-top: calc(var(--header-safe) + 80px);
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .page-hero { padding-top: calc(var(--header-safe) + 128px); padding-bottom: 80px; }
}
.page-hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: rgba(255,255,255,.6);
}
.page-hero .kicker::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
.section {
  padding-block: 64px;
}
@media (min-width: 768px) { .section { padding-block: 104px; } }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
@media (min-width: 768px) { .section-head { margin-bottom: 56px; } }

.statement {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1.1;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  max-width: 30ch;
}
@media (min-width: 768px) { .statement { font-size: 4.8rem; } }
.statement .word { opacity: .16; display: inline-block; }

/* ---------- Work index (grid / carousel / list views) ----------
   Card anatomy: centered column — 5:4 media with sheen sweep that
   SHRINKS + TILTS on hover (scale .95, rotate 1.5°, 1s expo), then
   dim client line + title that flips to accent. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
}
@media (min-width: 768px)  { .work-grid { column-gap: 32px; } }
@media (min-width: 1280px) { .work-grid { column-gap: 48px; } }
.work-cell { grid-column: 1 / -1; margin-bottom: 40px; }
@media (min-width: 640px)  { .work-cell { grid-column: span 6; } }
@media (min-width: 1024px) { .work-cell { grid-column: span 4; margin-bottom: 48px; } }

.work-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.work-card .media {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-expo);
  will-change: transform;
}
.work-card:hover .media { transform: scale(0.95) rotate(1.5deg); }
.work-card .media-inner {
  position: relative;
  /* It is a span, so without this the width and height below are ignored,
     it collapses to nothing and the artwork inside never renders. */
  display: block;
  width: 100%;
  height: 100%;
  background: var(--dark-shade);
  border-radius: var(--radius);
  overflow: hidden;
}
.work-card .copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.work-card .client {
  display: block;
  margin-top: 16px;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 768px) { .work-card .client { margin-top: 20px; } }
.work-card .title {
  text-transform: uppercase;
  transition: color 0.3s;
}
/* Products carry a line of what they do; films do not need one, their
   client and title say enough. */
.work-card .blurb {
  display: block;
  margin-top: 10px;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.45);
}
.work-card:hover .title { color: var(--accent); }

/* full-width banner card (careers / callouts) */
.banner-card {
  position: relative;
  display: block;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--dark-shade);
  isolation: isolate;
}
@media (min-width: 768px) { .banner-card { aspect-ratio: 21 / 9; } }
.banner-card .scene { transition: transform 1s var(--ease-expo); }
.banner-card:hover .scene { transform: scale(1.04); }
.banner-copy {
  position: absolute;
  z-index: 4;
  left: 24px; right: 24px; bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.banner-copy .client {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.66);
}
.banner-copy .title {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  text-transform: uppercase;
}
.banner-copy .btn-chip {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.banner-card:hover .btn-chip { opacity: 1; transform: none; }
.banner-copy .btn-chip svg { width: 10px; height: 12px; }

/* team grid */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } }
.team-card .portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--dark-shade);
}
.team-card .portrait .scene { transition: transform .8s var(--ease-out), filter .8s var(--ease-out); filter: saturate(.35); }
.team-card:hover .portrait .scene { transform: scale(1.05); filter: saturate(1); }
.team-card .initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 6rem;
  color: rgba(255,255,255,.24);
  z-index: 3;
}
.team-card h3 { font-family: var(--font-display); font-size: 2.6rem; text-transform: uppercase; letter-spacing: .01em; }
.team-card .role { color: var(--accent); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }
.team-card p { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.55); }

/* news cards */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.news-card .thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--dark-shade);
}
.news-card .thumb .scene { transition: transform .8s var(--ease-out); }
.news-card:hover .thumb .scene { transform: scale(1.05); }
.news-card time { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.news-card h3 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1.1;
  margin-top: 8px;
  text-transform: uppercase;
}
.news-card .more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  transition: color .3s;
}
.news-card:hover .more { color: var(--accent); }

/* capability blocks */
.cap-block {
  border-top: 1px solid var(--border);
  padding-block: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .cap-block { grid-template-columns: 4fr 6fr; gap: 48px; padding-block: 64px; }
}
.cap-block:last-child { border-bottom: 1px solid var(--border); }
.cap-block h3 { font-family: var(--font-display); font-size: 3.6rem; text-transform: uppercase; line-height: 1.05; }
.cap-block p { color: rgba(255,255,255,.6); max-width: 56ch; }
.cap-block .cap-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cap-tag {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.66);
}

/* FAQ accordion */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 2.4rem;
  text-transform: uppercase;
  letter-spacing: .005em;
  transition: color .3s;
}
.faq-q:hover { color: var(--accent); }
.faq-q .faq-x {
  position: relative;
  width: 18px; height: 18px; flex: 0 0 auto;
}
.faq-q .faq-x::before, .faq-q .faq-x::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform .4s var(--ease-out);
}
.faq-q .faq-x::before { width: 100%; height: 1.5px; }
.faq-q .faq-x::after { width: 1.5px; height: 100%; }
.faq-item.is-open .faq-x::after { transform: rotate(90deg) scaleY(0); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: 24px; color: rgba(255,255,255,.6); max-width: 68ch; }

/* stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  border-top: 1px solid var(--border);
  padding-top: 40px;
}
@media (min-width: 768px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 6.4rem;
  line-height: 1;
  font-weight: 400;
}
.stat span { color: rgba(255,255,255,.5); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  padding-top: 72px;
  overflow: hidden;
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: 4.4rem;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
@media (min-width: 768px) { .footer-tagline { font-size: 6.4rem; } }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 56px;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; }
}
.footer-col h4 {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255,255,255,.75); font-size: 14px; transition: color .3s; }
.footer-col a:hover { color: var(--accent); }
.footer-col .mail { font-size: 13px; color: rgba(255,255,255,.55); }

.newsletter { display: flex; flex-direction: column; gap: 10px; }
.newsletter-field {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
  transition: border-color .3s;
}
.newsletter-field:focus-within { border-color: rgba(65,0,245,.7); }
.newsletter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
  color: var(--fg);
}
.newsletter input::placeholder { color: rgba(255,255,255,.35); }
.newsletter .btn { height: 44px; padding: 0 20px; }
.newsletter-note { font-size: 12px; color: rgba(255,255,255,.35); }
.newsletter .success { color: var(--accent); font-size: 13px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-block: 28px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.4);
}
.footer-bottom .legal { display: flex; gap: 20px; }
.footer-bottom a:hover { color: var(--fg); }
.footer-mark {
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display);
  font-size: 22vw;
  line-height: .8;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.05);
  text-align: center;
  margin-top: 40px;
  margin-bottom: -0.16em;
  white-space: nowrap;
}

/* socials */
.socials { display: flex; gap: 10px; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  transition: border-color .3s, background .3s, color .3s;
}
.socials a:hover { border-color: var(--accent); color: var(--accent); }
.socials svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- Project detail ---------- */
.project-hero {
  position: relative;
  height: 86vh;
  height: 86lvh;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.project-hero .container { position: relative; z-index: 5; padding-bottom: 56px; }
.project-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
@media (min-width: 768px) { .project-meta { grid-template-columns: repeat(4, 1fr); } }
.project-meta h5 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 8px; font-weight: 500; }
.project-meta p { font-size: 14px; }
.media-block {
  position: relative;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--dark-shade);
}
.media-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) { .media-row { grid-template-columns: 1fr 1fr; gap: 32px; } }


/* play badge */
.play-badge {
  position: absolute;
  z-index: 5;
  inset: 0;
  margin: auto;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  transition: transform .4s var(--ease-out), background .4s;
}
.play-badge svg { width: 22px; height: 26px; fill: #fff; margin-left: 4px; }
a:hover .play-badge, button:hover .play-badge { transform: scale(1.08); background: rgba(255,255,255,.16); }

/* ---------- Cursor spotlight ---------- */
.cursor-glow {
  position: fixed;
  z-index: 45;
  top: 0; left: 0;
  width: min(44vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(227, 255, 57, 0.028) 32%,
    rgba(255, 255, 255, 0.015) 52%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: transform, opacity;
}
.cursor-glow.is-on { opacity: 1; }

/* ---------- Work index: Grid / Carousel / List tab pill ---------- */
.view-switch {
  display: flex;
  height: 48px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: 32px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
@media (min-width: 640px) { .view-switch { height: 56px; } }
.view-switch button {
  display: inline-flex;
  height: calc(100% - 1px);
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s linear;
  cursor: pointer;
}
@media (min-width: 640px) { .view-switch button { padding: 0 16px; } }
.view-switch button:hover { color: var(--accent); }
.view-switch button.is-active {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

/* — List view: typographic rows — */
.work-index[data-view="list"] .work-grid { display: block; border-top: 1px solid var(--border); }
.work-index[data-view="list"] .work-cell { grid-column: auto; margin: 0; }
.work-index[data-view="list"] .work-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  padding: 26px 12px;
  transition: background-color 0.35s var(--ease-out), padding-left 0.35s var(--ease-out);
}
.work-index[data-view="list"] .work-card:hover { background: rgba(255,255,255,.045); padding-left: 28px; }
.work-index[data-view="list"] .work-card .media { display: none; }
.work-index[data-view="list"] .work-card .copy {
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.work-index[data-view="list"] .work-card .client { margin: 0; min-width: 200px; }
.work-index[data-view="list"] .work-card .title { font-size: 3.6rem; }
.work-index[data-view="list"] .work-card .row-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.1);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  flex: 0 0 auto;
}
.work-index[data-view="list"] .work-card:hover .row-chip { opacity: 1; transform: none; }
.work-card .row-chip { display: none; }
.work-card .row-chip svg { width: 8px; height: 10px; fill: currentColor; }

/* floating scene preview riding the cursor over list rows */
.work-preview {
  position: fixed;
  z-index: 48;
  top: 0; left: 0;
  width: 360px;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  will-change: transform, opacity;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.work-preview.is-on { opacity: 1; }
.work-preview .scene { position: absolute; inset: 0; }
.work-preview .scene::after { display: none; }

/* floating scene preview that rides the cursor over list rows */
.work-preview {
  position: fixed;
  z-index: 48;
  top: 0; left: 0;
  width: 360px;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  will-change: transform, opacity;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.work-preview.is-on { opacity: 1; }
.work-preview .scene { position: absolute; inset: 0; }
.work-preview .scene::after { display: none; }

/* — Carousel view: circular wheel filmstrip —
   Each slide rotates toward ±24° and sinks up to 52% of its height as it
   leaves center, so the strip bends like a wheel. */
.work-index[data-view="carousel"] .work-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  padding: 8px 4px calc(min(46vw, 720px) * 0.15);
}
.work-index[data-view="carousel"] .work-grid::-webkit-scrollbar { display: none; }
.work-index[data-view="carousel"] .work-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.work-index[data-view="carousel"] .work-cell {
  grid-column: auto;
  margin: 0;
  flex: 0 0 min(46vw, 720px);
  scroll-snap-align: center;
}
.work-index[data-view="carousel"] .work-card {
  will-change: transform;
}
.work-index[data-view="carousel"] .work-card .media { aspect-ratio: 3 / 2; }
.work-index[data-view="carousel"] .work-card:hover .media { transform: scale(0.95) rotate(2deg); }
.work-index[data-view="carousel"] .work-grid.is-dragging .work-card { pointer-events: none; }
.carousel-nav { display: none; gap: 8px; }
.work-index[data-view="carousel"] .carousel-nav { display: inline-flex; }
.carousel-nav button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s, background .3s;
}
.carousel-nav button:hover { border-color: var(--accent); background: rgba(65,0,245,.08); }
.carousel-nav svg { width: 9px; height: 11px; fill: currentColor; }
.carousel-nav .prev svg { transform: rotate(180deg); }


/* ---------- Focus visibility ---------- */
:focus-visible {
  outline: 2px solid rgba(227, 255, 57, 0.7);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 2px; }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: revert; } }
.only-mobile { display: revert; }
@media (min-width: 768px) { .only-mobile { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .line-mask > .line-inner { transform: none; }
  html { scroll-behavior: auto; }
}


/* toogood logo override */
.logo-stack { text-transform: none; }


/* ===== TEST BUILD overrides ===== */
/* Liquid glass: SVG distortion warps what passes behind the nav (from reference site) */
.site-header .glass-effect { filter: url(#glass-distortion); }


/* return visit: skip the arrival overlay entirely - the page is already dark,
   the text entrance is the single visible load event */
html.return-visit .loader { display: none; }

/* Mobile: persistent get-in-touch pill, bottom center. Desktop keeps the header CTA. */
.mobile-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  z-index: 65;
  border-radius: 999px;
}
.mobile-cta .btn { height: 50px; padding: 0 22px; border-radius: 999px; }
@media (min-width: 900px) { .mobile-cta { display: none; } }


/* ===== Typography v2: deliberate weight contrast ===== */

/* Menu: heavier, wider-tracked - reads as a control, not a caption */
.header-nav a { font-weight: 700; letter-spacing: .09em; }


/* Micro-labels: punchier */
.type-label { font-weight: 600; letter-spacing: .1em; }

/* Buttons: confident */
.btn { font-weight: 700; letter-spacing: .08em; }




/* ===== Header clearance + mobile logo glass ===== */

/* Reel panels: centered content starts below the fixed nav, never under it */
.reel-panel-inner { padding-top: calc(var(--header-safe) + 24px); }

/* Glass capsule behind the wordmark on every screen size, matching the
   nav pill, so the logo never sits raw on top of scrolling content */
.header-logo {
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(10px) brightness(1.15) saturate(1.2);
  backdrop-filter: blur(10px) brightness(1.15) saturate(1.2);
}
@media (min-width: 900px) {
  .header-logo { padding: 12px 20px; }
}

/* ===== Accent text highlights ===== */
.header-nav a.is-active { color: var(--accent); }
.mobile-menu nav a.is-active { color: var(--accent); }
.kicker { color: var(--accent); }
.panel-eyebrow { color: var(--accent); }
.role { color: var(--accent); }
.news-card:hover h3 { color: var(--accent); }
.news-card h3 { transition: color .3s; }

/* ===== Logo image (white wordmark, transparent, negative space baked in) ===== */
.header-logo .logo-img { display: block; height: 38px; width: auto; }
@media (min-width: 900px) { .header-logo .logo-img { height: 44px; } }
.loader-logo .logo-img { display: block; height: 84px; width: auto; margin: 0 auto; }

/* Get-in-touch: accent-filled so it pops */
.btn-accent:hover { filter: brightness(1.07); }
.btn-accent .btn-chip { background: rgba(0, 0, 0, 0.14); }

/* Accent loader: neon orange flash with the charcoal mark */
.loader { background: var(--accent); }
.loader .loader-count { color: rgba(255,255,255,.9); }

/* Logo capsule: identical glass construction to the menu bar (liquid
   distortion comes from the .site-header .glass-effect rule) */
.header-logo {
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header-logo .glass-content { display: block; padding: 5px 14px; }
@media (min-width: 900px) { .header-logo .glass-content { padding: 7px 16px; } }

/* purple lab: light content on the deep accent */
.btn-accent .btn-chip { background: rgba(255, 255, 255, 0.18); }

/* Reel panels will hold real footage: labels read white over media,
   never accent-tinted */
.reel-panel .panel-eyebrow { color: #fff; }

/* ===== Contact page (minimal) ===== */
.contact-main { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; }
.contact-ghost {
  display: block;
  margin: calc(var(--header-safe) + 40px) 0 0;
  font-family: var(--font-display);
  font-size: 16.6vw;
  line-height: .8;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgba(255,255,255,.075);
  pointer-events: none;
  user-select: none;
}
.contact-grid {
  display: grid;
  gap: 40px 32px;
  padding-top: 48px;
  padding-bottom: 64px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
}
@media (min-width: 640px)  { .contact-grid { grid-template-columns: repeat(2, 1fr); padding-top: 64px; } }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 0.7fr 1.7fr 1.3fr; padding-top: 80px; padding-bottom: 120px; } }
.contact-col { display: flex; flex-direction: column; align-items: flex-start; }
.contact-name { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; text-transform: uppercase; }
.contact-desc { margin-top: 10px; color: rgba(255,255,255,.55); max-width: 26ch; }
.contact-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.contact-label + .contact-label, .contact-line + .contact-label { margin-top: 22px; }
.contact-list { display: flex; flex-direction: column; gap: 6px; }
.contact-list a, .contact-line { color: var(--fg); transition: color .3s; }
.contact-list a:hover, .contact-line:hover { color: var(--accent); }
.contact-line {
  /* These are the two things someone came to this page for, so they read at
     roughly twice the body size rather than at label scale. */
  display: block;
  margin-top: 6px;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* An address is read as one thing - never split it across a line. It
     shrinks to fit instead, which is why the size is capped rather than fixed. */
  white-space: nowrap;
}
@media (max-width: 900px) { .contact-line { font-size: 19px; white-space: normal; } }
@media (max-width: 720px) { .contact-line { font-size: 18px; } }

.contact-form { width: 100%; max-width: 320px; }
.form-fields { display: flex; flex-direction: column; gap: 8px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  outline: 0;
  transition: border-color .3s, background .3s;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.35); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); background: rgba(255,255,255,.06); }
.contact-form textarea { resize: vertical; min-height: 84px; }
.contact-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.contact-form .btn { align-self: flex-start; height: 40px; padding: 0 18px; margin-top: 4px; }
.form-error { display: none; font-size: 12px; color: var(--accent); }
.form-success { display: none; }
.contact-form.is-error .form-error { display: block; }
.contact-form.is-sent .form-fields { display: none; }
.contact-form.is-sent .form-success { display: block; }

/* Footer: Follow left, Contact right, full-width row */
@media (min-width: 768px) {
  .footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    margin-top: 48px;
  }
  .footer-col:last-child { text-align: right; }
  .footer-col:last-child ul { align-items: flex-end; }
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--fg);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 16px; }
.footer-col .mail { font-size: 15px; }
.footer-col .socials { gap: 14px; }

/* ---------- Panel background film ----------
   Sits above the gradient scene-art and below the vignette. Fades in once
   the clip can actually play, so a slow connection shows the poster and
   then the gradient rather than a black hole. */
.scene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity .8s var(--ease-inout);
  pointer-events: none;
}
.scene-video.is-ready { opacity: 1; }

/* The gradient underneath keeps drifting; the film should not. */
.scene:has(.scene-video.is-ready) .scene-art { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .scene-video { display: none; }
}

/* ---------- Work cards: loop preview on hover ---------- */
.work-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Visible from the start: the poster paints without the clip being
     fetched, so a card is never a black hole while it waits. */
  transition: transform .8s var(--ease-inout);
}
.work-card:hover .work-video,
.work-card:focus-visible .work-video { transform: scale(1.04); }

/* ---------- Full film player ---------- */
.film-player {
  position: fixed;
  inset: 0;
  z-index: 300;            /* above the fixed site header */
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 6, 8, .92);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-inout);
}
.film-player.is-open { opacity: 1; pointer-events: auto; }
.film-player-stage {
  width: min(1200px, 100%);
  transform: translateY(12px) scale(.985);
  transition: transform .5s var(--ease-inout);
}
.film-player.is-open .film-player-stage { transform: none; }
.film-player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  border-radius: 10px;
}
.film-player-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.film-player-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.film-player-close:hover { background: rgba(255, 255, 255, .2); }
body.film-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .work-video, .film-player, .film-player-stage { transition: none; }
}


/* ---------- Project page: the full film ---------- */
.film-stage {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.film-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}
/* The project hero runs its loop behind the title. It shares a class with the
   home panels, whose rule keeps them hidden until their own script marks them
   ready - that script does not run here, so opt back out of it. */
.project-hero .scene-video {
  opacity: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Floating list-view preview carries a running clip, not a still. */
.work-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Project page: hero still, then the film ---------- */
.hero-still,
.project-hero .hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-hero .hero-film { opacity: 0; pointer-events: none; z-index: 1; }
.project-hero.is-playing .hero-film { opacity: 1; pointer-events: auto; object-fit: contain; background: #000; }
.project-hero.is-playing .hero-still,
.project-hero.is-playing .scene-vignette,
.project-hero.is-playing .play-badge { opacity: 0; pointer-events: none; }
.project-hero.is-playing .container { opacity: 0; pointer-events: none; }
.project-hero .hero-still,
.project-hero .scene-vignette,
.project-hero .play-badge,
.project-hero .container { transition: opacity .45s var(--ease-inout); }

/* ---------- Frame showcase ---------- */
.still-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.still {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--dark-shade);
}
.still img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .9s var(--ease-expo);
}
.still:hover img { transform: scale(1.04); }
/* First frame runs full width - it sets the tone for the rest. */
.still-grid .still:first-child { grid-column: 1 / -1; }
.still-grid .still:first-child img { aspect-ratio: 21 / 9; }

@media (prefers-reduced-motion: reduce) {
  .still img, .project-hero .hero-still { transition: none; }
}

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--border); max-width: 80ch; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  position: relative;
  font-size: 1.5rem;
  transition: color .4s var(--ease-inout);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 22px;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, .45);
  transition: transform .35s var(--ease-inout);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a { padding: 0 40px 26px 0; }
.faq-a p { margin: 0; color: rgba(255, 255, 255, .62); max-width: 68ch; }

@media (prefers-reduced-motion: reduce) { .faq-q, .faq-q::after { transition: none; } }

/* ---------- Offerings / Product rows ----------
   Compact rows, closed until clicked. Click, not hover, so the behaviour is
   identical on desktop, tablet and phone. */
.offer-panel {
  position: relative;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.offer-panel:last-of-type { border-bottom: 1px solid var(--border); }

.pan-inner { position: relative; z-index: 2; max-width: 1100px; }

.pan-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 24px;
  width: 100%;
  padding: 30px 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.pan-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .35);
  transition: color .4s var(--ease-inout);
}
.offer-panel.is-open .pan-num { color: var(--accent); }

.pan-title {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  transition: color .4s var(--ease-inout);
}
.offer-panel.is-open .pan-title,
.offer-panel:hover .pan-title { color: #fff; }
.pan-title .line-mask { display: block; overflow: hidden; }
.pan-title .line-inner { display: block; }

.pan-mark {
  width: 13px;
  height: 13px;
  position: relative;
  opacity: .45;
  transition: opacity .4s var(--ease-inout), transform .5s var(--ease-expo);
}
.pan-mark::before,
.pan-mark::after { content: ""; position: absolute; background: currentColor; inset: 0; }
.pan-mark::before { height: 1px; top: 6px; }
.pan-mark::after { width: 1px; left: 6px; }
.offer-panel.is-open .pan-mark { opacity: 1; transform: rotate(135deg); }

/* 0fr to 1fr animates height without needing to know the content's size. */
.pan-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-expo);
}
.offer-panel.is-open .pan-wrap { grid-template-rows: 1fr; }
.pan-detail { overflow: hidden; min-height: 0; padding-left: 80px; }
.offer-panel.is-open .pan-detail { padding-bottom: 34px; }

/* Each piece slides up in turn, replayed on every open. */
.pan-detail > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease-inout), transform .55s var(--ease-expo);
}
.pan-detail.is-in > * { opacity: 1; transform: none; }
.pan-detail.is-in .pan-lead { transition-delay: .06s; }
.pan-detail.is-in .pan-body { transition-delay: .12s; }
.pan-detail.is-in .pan-tags { transition-delay: .18s; }

.pan-lead {
  margin: 0 0 8px;
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.4;
  color: #fff;
}
.pan-body {
  margin: 0 0 20px;
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}
.pan-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pan-tag {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  transition: border-color .35s var(--ease-inout), color .35s var(--ease-inout),
              background-color .35s var(--ease-inout);
}
.pan-tag:hover { border-color: var(--accent); color: var(--accent-fg); background: var(--accent); }

.pan-motif {
  position: absolute;
  right: 5%;
  top: 50%;
  width: clamp(46px, 5vw, 68px);
  height: clamp(46px, 5vw, 68px);
  z-index: 1;
  color: #fff;
  opacity: .085;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .5s var(--ease-inout);
}
.pan-motif svg { width: 100%; height: 100%; display: block; }
.offer-panel.is-open .pan-motif,
.offer-panel:hover .pan-motif { opacity: .2; }

/* Light gathers from the left on the open row. */
.offer-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 48%);
  transition: opacity .5s var(--ease-inout);
}
.offer-panel.is-open::after { opacity: 1; }
.offer-panel:hover::after { opacity: .55; }

@media (max-width: 720px) {
  .pan-head { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 12px; padding: 22px 0; }
  .pan-motif { display: none; }
  .pan-title { font-size: clamp(26px, 8vw, 40px); }
  .pan-detail { padding-left: 46px; }
  .offer-panel.is-open .pan-detail { padding-bottom: 26px; }
  .pan-lead { font-size: 15px; }
  .pan-body { font-size: 13.5px; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pan-wrap, .pan-detail > *, .pan-motif, .offer-panel::after, .pan-mark,
  .pan-title, .pan-num, .pan-tag { transition: none; }
}

/* ---------- FAQ, inside Offerings ----------
   A supporting section, not a second page title. Ten questions split into
   three named groups so the block reads as three short lists rather than one
   long one, with room between them. */
.faq-head-title {
  /* Small, so it needs an edge to register as a section marker rather than
     stray label text: a short accent rule above it and full-strength white. */
  padding-top: 96px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  margin-bottom: 40px;
  position: relative;
}
.faq-head-title::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 18px;
}

.faq-list { padding-bottom: 96px; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group-label {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}
.faq-group-rows { border-top: 1px solid var(--border); }

/* Rows here are plain: no full-bleed hover wash, no motif. */
.faq-panel { border-top: 0; border-bottom: 1px solid var(--border); overflow: visible; }
.faq-panel:last-of-type { border-bottom: 1px solid var(--border); }
.faq-panel::after { content: none; }
.faq-panel .pan-inner { max-width: none; padding: 0; }

.faq-panel .pan-head {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 18px;
  padding: 22px 0;
}
.faq-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .3);
  padding-top: 4px;
  transition: color .4s var(--ease-inout);
}
.faq-panel.is-open .faq-num { color: var(--accent); }

.faq-panel .pan-title {
  font-family: inherit;
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .76);
}
.faq-panel.is-open .pan-title,
.faq-panel:hover .pan-title { color: #fff; }
.faq-panel .pan-mark { margin-top: 6px; }

.faq-panel .pan-detail { padding-left: 58px; padding-right: 56px; }
.faq-panel.is-open .pan-detail { padding-bottom: 26px; }
.faq-panel .pan-body { margin: 0; max-width: 72ch; font-size: 14.5px; line-height: 1.65; }
.faq-panel .pan-detail.is-in .pan-body { transition-delay: 0s; }

@media (max-width: 720px) {
  .faq-head-title { padding-top: 64px; margin-bottom: 28px; }
  .faq-list { padding-bottom: 64px; }
  .faq-group + .faq-group { margin-top: 40px; }
  .faq-panel .pan-head { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 12px; padding: 18px 0; }
  .faq-panel .pan-title { font-size: 14.5px; }
  .faq-panel .pan-detail { padding-left: 40px; padding-right: 28px; }
  .faq-panel .pan-body { font-size: 13.5px; }
}

/* ---------- Team ----------
   Two people, kept small. A portrait at this size sits beside the copy
   rather than dominating the page. The initials show through until a
   photograph is dropped in, and the image removes itself if missing. */
.crew-label {
  margin: 0 0 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, .45);
}
.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  gap: 44px 56px;
}
.crew-card { margin: 0; max-width: 300px; }
.crew-portrait {
  position: relative;
  width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--dark-shade);
  border: 1px solid rgba(255, 255, 255, .08);
}
.crew-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  filter: grayscale(1) contrast(1.05);
  transition: filter .7s var(--ease-inout), transform .9s var(--ease-expo);
}
.crew-card:hover .crew-portrait img { filter: none; transform: scale(1.04); }
.crew-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 42px;
  color: rgba(255, 255, 255, .2);
  z-index: 1;
}
.crew-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
}
.crew-role {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.crew-bio {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}

@media (max-width: 720px) {
  .crew-grid { grid-template-columns: 1fr; gap: 34px; }
  .crew-portrait { width: 110px; margin-bottom: 14px; }
  .crew-name { font-size: 22px; }
  .crew-bio { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .crew-portrait img { transition: none; } }

/* The contact column uses the footer's icon set; it just needs the gap the
   text list used to get from its list styling. */
.contact-col .socials { margin-top: 14px; }

/* Client logos in the Work marquee. All supplied at one height and recoloured
   white, so they only need a cap here and a little optical breathing room. */
.marquee-logo {
  /* Marks are trimmed of their margin, so height alone sets how big they
     read. The width cap stops a very wide wordmark taking over the row. */
  height: 54px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  opacity: .7;
  transition: opacity .4s var(--ease-inout);
}
.marquee-item:hover .marquee-logo { opacity: 1; }
.marquee-item { display: inline-flex; align-items: center; }
@media (max-width: 720px) { .marquee-logo { height: 38px; max-width: 140px; } }

/* The production note under each project: same size, quieter, so the two
   paragraphs read as story then fact rather than one block. */
.project-note {
  color: rgba(255, 255, 255, .42);
  font-size: 14px;
  line-height: 1.6;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  max-width: 62ch;
}


/* ================================================================
   Product page.

   The argument is the artifact, not a diagram of it. So the page is
   mostly the real thing: the message that arrives, the avatar
   speaking, one scrappy input beside its finished output. The flow
   diagram is the caption underneath, drawn small and thin.
   ================================================================ */

/* Until a demo film is in the repo, a hero sits black rather than offering
   a play button that does nothing. */
.project-hero.no-film .play-badge,
.prod-hero-film.no-film .play-badge { display: none; }

/* Below the two-column breakpoint the film centres on its own and the words
   stay left, the way every other page on the site sets its type. */
.prod-hero { display: grid; gap: 36px; align-items: center; }
.prod-hero-copy .prod-sub { margin-top: 20px; max-width: 38ch; }
@media (min-width: 900px) {
  .prod-hero { grid-template-columns: 1fr minmax(260px, 340px); gap: 72px; }
  .prod-hero-copy .prod-sub { max-width: 44ch; }
}
.prod-hero-film {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.9);
  max-width: min(300px, 72vw);
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 900px) { .prod-hero-film { max-width: 340px; } }
.prod-hero-film > img,
.prod-hero-film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod-hero-film > video { opacity: 0; pointer-events: none; }
.prod-hero-film.is-playing > video { opacity: 1; pointer-events: auto; }
.prod-hero-film > img,
.prod-hero-film .play-badge { transition: opacity .45s var(--ease-inout); }
.prod-hero-film.is-playing > img,
.prod-hero-film.is-playing .play-badge { opacity: 0; pointer-events: none; }
.prod-hero-film .play-badge { width: 72px; height: 72px; }
.prod-hero-film .play-badge svg { width: 17px; height: 20px; }

/* Section eyebrows. Long pages read as one undifferentiated scroll without
   them, and this one has five distinct arguments in it. */
.sec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 18px;
}

.prod-lede {
  max-width: 24ch;
  margin-top: 28px;
}
.prod-sub {
  max-width: 62ch;
  margin-top: 20px;
  color: rgba(255,255,255,.55);
}

/* ---- the four steps ---------------------------------------------
   These were labels ticking alongside a played conversation. The
   conversation is gone; they are the section now, so they read as a
   list rather than a progress indicator, with the last one carrying
   the accent because it is the promise.
   ------------------------------------------------------------------ */
/* The step the thread is on takes the accent, filled - which on this site
   means white with black on it, the same move as the buttons. A rail with
   a dot on it was legible and completely ignorable; this cannot be missed,
   and no colour enters the interface to do it. */
.phases {
  position: relative;
  margin-top: 36px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.phase {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .4s var(--ease-out), border-color .4s, transform .45s var(--ease-out);
}
.phase-num {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  color: rgba(255,255,255,.32); padding-top: 4px;
  transition: color .4s;
}
.phase-text { display: flex; flex-direction: column; gap: 5px; }
/* Label stays readable at every state; only its weight in the eye changes.
   Dimming a line to a third of its contrast does not read as "later", it
   reads as broken. */
.phase-text b {
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  color: rgba(255,255,255,.6);
  transition: color .4s;
}
.phase-text small {
  font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,.4);
  transition: color .4s;
}
/* Steps already gone past: outlined, so the list reads as progress rather
   than four identical rows with one lit. */
.phase.is-done { border-color: rgba(255,255,255,.14); }
.phase.is-done .phase-num { color: rgba(255,255,255,.5); }
.phase.is-done .phase-text b { color: rgba(255,255,255,.78); }

/* The step it is on. */
.phase.is-on {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(6px);
}
.phase.is-on .phase-num { color: rgba(0,0,0,.45); }
.phase.is-on .phase-text b { color: var(--accent-fg); }
.phase.is-on .phase-text small { color: rgba(0,0,0,.68); }
.chat-scroll.is-static .phase { opacity: 1; }

/* ---- how it works, sideways ----------------------------------------
   Four drawn steps on a track that moves with the scroll rather than
   between fixed states. Each drawing animates only while its panel is
   the one in front of you, so the page is never doing four things at
   once out of view.
   -------------------------------------------------------------------- */
.journey { position: relative; }
.journey-head { padding-top: 72px; padding-bottom: 4px; text-align: center; }
@media (min-width: 900px) { .journey-head { padding-top: 96px; padding-bottom: 0; } }
.journey-head h2 { margin-inline: auto; }
/* It is the title for the whole section, so it carries the weight of one
   rather than sitting at the size of a subhead. */
.journey-title { max-width: 15ch; line-height: .95; }
@media (min-width: 900px) { .journey-title { max-width: 18ch; } }

/* The stage is a screen tall at every width. Phones and tablets get the
   same sideways run as desktop: one step in front of you and nothing else
   on the screen, which is the entire point of the section and was lost the
   moment it collapsed into a list. */
.journey-stage {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
}
.journey-track { display: flex; height: 100%; will-change: transform; }

.jstep {
  flex: none;
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Both of these. align-content centres the rows in the panel; align-items
     centres each item against its neighbour. Without the second the words sit
     at the top of a cell stretched to the height of the drawing beside them,
     which is what pushed the desktop steps up the screen. */
  align-content: center;
  align-items: center;
  justify-items: center;
  text-align: center;
  gap: 26px;
  padding: 0 26px;
}
@media (min-width: 600px) { .jstep { gap: 34px; padding: 0 48px; } }
@media (min-width: 900px) {
  .jstep {
    grid-template-columns: minmax(240px, 380px) minmax(0, 460px);
    align-content: center;
    align-items: center;
    justify-items: stretch;
    text-align: left;
    gap: 80px;
    justify-content: center;
    padding: 0 64px;
  }
}

/* Each step is a live canvas, not an icon. A glow sits behind it so the
   dots have something to be lit against, which is most of why this reads as
   depth rather than as a diagram on a flat black page. */
.jart {
  position: relative;
  width: 100%;
  max-width: min(230px, 58vw);
  aspect-ratio: 1;
  margin-inline: auto;
}
@media (min-width: 600px) { .jart { max-width: 270px; } }
@media (min-width: 900px) { .jart { max-width: 380px; } }
.jart::before {
  content: '';
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.09), rgba(255,255,255,0) 62%);
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.is-live .jart::before { opacity: 1; }
.art-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* A Lottie panel is whatever shape the file is, so it gets its own ratio
   and sits inside the same glow as the canvases. */
.jart--lottie { aspect-ratio: 4 / 5; }
.jart--lottie svg { display: block; width: 100%; height: 100%; }

.jtext { max-width: 30ch; }
@media (min-width: 900px) { .jtext { max-width: 46ch; } }
.jnum {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  color: rgba(255,255,255,.35); margin-bottom: 12px;
}
.jstep h3 {
  font-family: var(--font-display);
  font-size: 2.4rem; line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase; margin-bottom: 14px;
}
@media (min-width: 600px) { .jstep h3 { font-size: 3rem; } }
@media (min-width: 900px) { .jstep h3 { font-size: 3.2rem; margin-bottom: 18px; } }

/* One line each, so it can be set large enough to read from across a room.
   These were paragraphs, which on a panel this size reads as homework. */
.jstep p { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.62); }
@media (min-width: 600px) { .jstep p { font-size: 19px; } }
@media (min-width: 900px) { .jstep p { font-size: 21px; max-width: 24ch; } }

/* The text arrives just behind its drawing rather than with it. */
.jstep .jtext > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.is-live .jtext > * { opacity: 1; transform: none; }
.is-live .jtext > *:nth-child(2) { transition-delay: .08s; }
.is-live .jtext > *:nth-child(3) { transition-delay: .16s; }

/* --- the last panel --- */
/* The closing panel has fewer elements than the others, so the same centring
   leaves more black around it. Its drawing runs larger to take some of that
   back rather than leaving a hole under the button. */
.jstep--end { grid-template-columns: 1fr; gap: 26px; }
.jstep--end .jart { max-width: min(270px, 70vw); }
@media (min-width: 900px) { .jstep--end .jart { max-width: 380px; } }
/* The button carried an inline margin of 8px, which read as attached to the
   sentence above it rather than as the thing to do next. */
.jcta { display: inline-flex; border-radius: 999px; margin-top: 28px; }
@media (min-width: 900px) { .jcta { margin-top: 22px; } }
@media (min-width: 900px) { .jstep--end { grid-template-columns: minmax(260px, 400px) minmax(0, 440px); } }

/* --- how far along you are --- */
.journey-rail { padding-block: 10px 0; }
@media (min-width: 900px) { .journey-rail { padding-block: 28px 8px; } }
.journey-bar { display: block; height: 1px; background: rgba(255,255,255,.12); position: relative; }
.journey-bar i {
  position: absolute; inset: 0; display: block;
  background: #fff; transform: scaleX(0); transform-origin: left;
}
.journey.is-stacked .journey-rail { display: none; }

/* --- the fallback ------------------------------------------------------
   Only reached with JavaScript off, GSAP missing, or reduced motion asked
   for. Everything is shown at once, stacked, with nothing moving.
   ----------------------------------------------------------------------- */
.journey.is-stacked .journey-stage { height: auto; display: block; overflow: visible; }
.journey.is-stacked .journey-track { display: block; transform: none !important; }
.journey.is-stacked .jstep {
  width: auto;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  text-align: left;
  gap: 20px;
  padding: 26px var(--pad);
  border-top: 1px solid var(--border);
  transform: none !important;
  opacity: 1 !important;
}
.journey.is-stacked .jart, .journey.is-stacked .jart--lottie { max-width: 104px; margin: 0; }
.journey.is-stacked .jart::before { opacity: 1; }
.journey.is-stacked .jtext { max-width: none; transform: none !important; }
.journey.is-stacked .jtext > * { opacity: 1; transform: none; }
.journey.is-stacked .jstep h3 { font-size: 2rem; }
.journey.is-stacked .journey-rail { display: none; }

/* ---- the persona section ---- */
/* The journey ends on a full screen of its own, so the section after it does
   not need another 64px of air before it starts. */
.journey + .section { padding-top: 12px; }
@media (min-width: 900px) { .journey + .section { padding-top: 64px; } }

.moat { border-top: 1px solid var(--border); padding-top: 36px; }
@media (min-width: 900px) { .moat { padding-top: 56px; } }
.moat-body { max-width: 60ch; margin-top: 24px; color: rgba(255,255,255,.55); display: flex; flex-direction: column; gap: 16px; }
.moat-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }