/* client brand display face — Akira is wide/bold/UPPERCASE-only, no italic */
@font-face{
  font-family:"Akira Expanded";
  src:url("/fonts/akira-expanded-bold.woff2") format("woff2"),
      url("/fonts/akira-expanded-bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}
/* ============ TOKENS ============ */
/* Palette matched to the client's own system (m3tamedia.io + the 2026 deck):
   near-black navy, cool lavender text, blue accent. NOT a literal match — their
   saturated blue (#002BFF / #2E3BFF) measures 2.5-2.9:1 on a near-black ground and
   fails WCAG at every size, and their small muted label colour #6C7499 is 4.35:1,
   already below AA. So the hue family is theirs; the LUMINANCE is chosen per role,
   exactly as their own site does it (light periwinkle chips, white buttons, and the
   saturated blue kept for glows where contrast does not apply). Every value below
   was measured, not eyeballed — ratios in the comments are against that theme's bg.
   The accent names stay --teal/--teal-deep: 39 CSS sites and 4 JS fallbacks key off
   them, and renaming buys nothing but churn. */
:root{
  --bone:#f0f1f7;              /* cool white, was warm #f2f1ec */
  --bone-2:#e7e9f2;
  --ink:#070816;               /* 17.65:1 */
  --navy:#070816;
  --navy-2:#141833;
  --peri:#bdc4e6;
  --peri-2:#4a5170;            /* 6.89:1 on the LIGHT page ground */
  --peri-2-navy:#8e97c6;       /* the always-dark bands need the dark-context value in BOTH themes */
  --teal:#8b99ff;              /* accent for the always-dark bands — matches dark mode */
  --teal-deep:#2e3bff;         /* accent on the light canvas — 5.85:1 */
  --accent-rgb:46,59,255;      /* glows/washes; rgba() cannot take a hex var */
  --cta-bg:#2e3bff;            /* CTA fill: brand blue is safe as a fill... */
  --cta-ink:#ffffff;           /* ...but only with white on it — 6.59:1 (navy is 2.90) */
  --rule:rgba(7,8,22,.16);
  --rule-navy:rgba(189,196,230,.18);
  --ink-rgb:7,8,22;            /* muted text tints derive from this so dark can flip them */
  --nav-glass:rgba(240,241,247,.86);
  --nav-menu-bg:rgba(240,241,247,.97);
  --hero-scrim:rgba(240,241,247,.94);
  --hero-scrim-0:rgba(240,241,247,0);
  --blob-hi:rgba(240,241,247,.95);
  --precover:#f0f1f7;
  --hero-side-c:var(--bone);   /* difference-blend base; dark inverts the blend base */
  --on-navy:var(--bone);       /* light text on the always-navy bands (reel/stats/creators/contact) — must NOT flip in dark */
  --serif:"Akira Expanded","Arial Black",sans-serif;
  --sans:"Archivo",Helvetica,Arial,sans-serif;
  --pad:clamp(1.25rem,4vw,4.5rem);
}
/* ============ DARK MODE (opt-in, persisted) ============ */
:root[data-theme="dark"]{
  --bone:#070816;              /* the client's exact page ground */
  --bone-2:#0d0f22;
  --navy:#141833;             /* lift the navy bands off the canvas so the section rhythm survives in dark */
  --navy-2:#1b2044;
  --ink:#d5dcff;              /* their heading lavender — 14.70:1 */
  --ink-rgb:213,220,255;      /* flips every muted rgba(var(--ink-rgb),a) tint */
  --peri:#bdc4e6;             /* 11.56:1 */
  --peri-2:#8e97c6;           /* 7.00:1 — lifted from their #6C7499, which is 4.35:1 and fails AA */
  --peri-2-navy:#8e97c6;
  --teal:#8b99ff;             /* 7.67:1. Their eyebrow periwinkle #bec2ff measures 11.70 but sits
                                 only ~35 perceptual units from --ink, so the headline em vanished.
                                 This is the same hue family pushed toward their blue until the
                                 accent separates (~100 units) while still clearing AA at 12px. */
  --teal-deep:#8b99ff;        /* on a dark canvas the accent must come from the LIGHT end */
  --accent-rgb:139,153,255;
  --cta-bg:#2e3bff;
  --cta-ink:#ffffff;
  --rule:rgba(213,220,255,.16);
  --nav-glass:rgba(7,8,22,.72);
  --nav-menu-bg:rgba(7,8,22,.94);
  --hero-scrim:rgba(7,8,22,.94);
  --hero-scrim-0:rgba(7,8,22,0);
  --blob-hi:rgba(189,196,230,.5);
  --precover:#070816;
  --hero-side-c:var(--navy);  /* difference over a light-ink blend → reads on dark blob */
  --on-navy:#d5dcff;          /* navy bands stay navy in dark: keep their text light */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* theme cross-fade — gated: class added by JS after load so it never fires on initial paint */
/* theme toggle snaps instantly — transitioning bg + text together produced a
   grey-on-grey midpoint and, with the canvas fade, a janky multi-state flash */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--teal);color:var(--navy)}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3{font-weight:400}
em{font-style:italic}

/* ============ MICRO / UTILITY ============ */
.micro{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.serif{font-family:var(--serif);font-optical-sizing:auto}
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1680px;margin:0 auto}

/* underline reveal for inline links */
.u-link{position:relative;padding-bottom:2px}
.u-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.u-link:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ============ NAV ============ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--pad);
  pointer-events:none;
}
.nav>*{pointer-events:auto}
/* a11y: difference-blend went illegible over blob mid-tones — bone chips read everywhere */
.nav-blend{
  display:flex;align-items:center;color:var(--ink);
  background:var(--nav-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(var(--ink-rgb),.08);
  border-radius:99px;padding:.45rem 1.15rem;
}
.skip{
  position:fixed;left:1rem;top:1rem;z-index:200;transform:translateY(-300%);
  background:var(--ink);color:var(--bone);padding:.9em 1.4em;border-radius:99px;
  font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;transition:transform .25s;
}
.skip:focus-visible{transform:none}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}
.sec-reel :focus-visible,.sec-stats :focus-visible,.sec-creators :focus-visible,
.sec-contact :focus-visible,.m3ov :focus-visible,.skip:focus-visible{outline-color:var(--teal)}
.brand{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:.01em}
.brand .three{font-style:italic;font-weight:300}
.brand-img{display:block;height:1.5rem;width:auto}
:root[data-theme="dark"] .nav .brand-img{filter:invert(1)} /* dark nav glass: wordmark reads light */
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.btn-pill{
  display:inline-block;background:var(--cta-bg);color:var(--cta-ink);
  font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  padding:.85em 1.7em;border-radius:99px;border:none;cursor:pointer;
  transition:background .3s,color .3s;white-space:nowrap;flex:none;
}
.btn-pill:hover{background:#fff;color:var(--cta-bg)}  /* invert. Was background:#fff alone, which
   with --cta-ink now white left white-on-white and erased the label on all three CTAs. */
.nav-toggle{display:none;font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.theme-toggle{cursor:pointer;font-size:1rem;line-height:1;padding:.5rem .7rem;color:var(--ink)}
.theme-toggle span{display:block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
:root[data-theme="dark"] .theme-toggle span{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.theme-toggle span{transition:none}}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  /* ---- full-screen menu -------------------------------------------------
     z-index:-1 keeps it behind the nav's own pills inside the header's stacking
     context, so the wordmark, theme toggle, MENU and the CTA all stay floating on
     top and MENU doubles as the close button — no second close affordance needed.
     The header is z-index 50, so the whole thing still sits above the page. */
  .nav-links.open{
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    gap:clamp(.35rem,1.4vh,.9rem);
    position:fixed;inset:0;z-index:-1;
    padding:6rem var(--pad);
    overflow:hidden;
    border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    counter-reset:m;
    outline:none;   /* focused programmatically on open; links keep their own ring */
    /* always the dark treatment, both themes — hence --on-navy for the type */
    background:
      radial-gradient(95% 60% at 15% 10%,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),0) 62%),
      linear-gradient(165deg,#141833 0%,#070816 58%,#04050c 100%);
  }
  /* slow drifting aurora — oversized and transform-animated, so compositor only */
  .nav-links.open::before{
    content:"";position:absolute;left:-30%;top:-30%;width:160%;height:160%;
    pointer-events:none;
    background:
      radial-gradient(34% 34% at 28% 30%,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),0) 70%),
      radial-gradient(30% 30% at 74% 66%,rgba(48,141,202,.20),rgba(48,141,202,0) 70%),
      radial-gradient(26% 26% at 60% 18%,rgba(189,196,230,.12),rgba(189,196,230,0) 70%);
    animation:menuDrift 22s ease-in-out infinite alternate;
  }
  /* the brand's signature glyph, ghosted — the deck's recurring motif */
  .nav-links.open::after{
    content:"3";position:absolute;right:-.1em;bottom:-.3em;pointer-events:none;
    font-family:var(--serif);font-weight:700;font-size:58vh;line-height:.78;
    color:rgba(213,220,255,.05);
  }
  .nav-links.open a{
    position:relative;z-index:1;counter-increment:m;
    font-family:var(--serif);font-weight:700;text-transform:uppercase;
    font-size:clamp(1.8rem,9.5vw,3rem);letter-spacing:-.01em;line-height:1.04;
    color:var(--on-navy);
    opacity:0;transform:translateY(20px);
    animation:menuIn .6s cubic-bezier(.22,1,.36,1) forwards;
  }
  .nav-links.open a::before{
    content:"0" counter(m);
    font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.24em;
    color:var(--teal);vertical-align:super;margin-right:.7rem;
  }
  .nav-links.open a:nth-child(1){animation-delay:.05s}
  .nav-links.open a:nth-child(2){animation-delay:.11s}
  .nav-links.open a:nth-child(3){animation-delay:.17s}
  .nav-links.open a:nth-child(4){animation-delay:.23s}
  .nav-links.open a:nth-child(5){animation-delay:.29s}
  @keyframes menuIn{to{opacity:1;transform:none}}
  @keyframes menuDrift{
    from{transform:translate3d(-4%,-3%,0) scale(1)}
    to{transform:translate3d(5%,4%,0) scale(1.12)}
  }
  @media (prefers-reduced-motion:reduce){
    .nav-links.open::before{animation:none}
    .nav-links.open a{animation:none;opacity:1;transform:none}
  }
}
/* menu open: freeze the page behind it */
html.menu-open,html.menu-open body{overflow:hidden}
/* Phones. The bar is brand + theme + menu + CTA on one row; at 390px that came to
   461px of content against a 390px viewport and the CTA was clipped clean off the
   right edge. Everything tightens rather than the CTA being dropped — it is the
   only persistent conversion point once the hero has scrolled away. */
@media (max-width:560px){
  .nav{padding:.8rem .7rem;gap:.3rem}
  .nav-blend{padding:.38rem .6rem}
  .brand-img{height:1.05rem}
  .theme-toggle{font-size:.85rem;padding:.35rem .4rem}
  .nav-toggle{font-size:.62rem;letter-spacing:.1em}
  .nav .btn-pill{font-size:.62rem;letter-spacing:.08em;padding:.8em 1em}
}

/* ============ HERO ============ */
#gl{
  position:fixed;inset:0;z-index:0;width:100%;height:100vh;
  pointer-events:none;display:block;
}
.blob-fallback{
  position:absolute;z-index:0;pointer-events:none;
  width:min(58vw,44rem);aspect-ratio:1;
  right:-6vw;top:50%;transform:translateY(-52%);
  border-radius:44% 56% 58% 42%/52% 44% 56% 48%;
  background:
    radial-gradient(38% 38% at 32% 28%,var(--blob-hi),rgba(240,241,247,0) 70%),
    radial-gradient(60% 60% at 70% 75%,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),0) 72%),
    radial-gradient(120% 120% at 50% 40%,#2f3566 0%,#141833 55%,#070816 100%);
  filter:blur(1px);
  opacity:1;transition:opacity .8s;
}
html.webgl-on .blob-fallback{opacity:0}
.hero{
  position:relative;z-index:1;
  background:transparent; /* lets the fixed WebGL canvas show through */
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:6.5rem var(--pad) clamp(2rem,5vh,4rem); /* top: fixed-nav clearance for when the stack overflows the viewport */
  overflow:hidden;
}
.hero-title,.hero-foot{position:relative;z-index:1}
/* a11y: blob's dark core passes behind the headline on narrow screens — bone scrim under text zone */
@media (max-width:980px){
  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:0;pointer-events:none;
    background:linear-gradient(to top,var(--hero-scrim) 42%,var(--hero-scrim-0));
  }
}
/* Phones: the 3 is centred and full-bleed rather than off to the right, so it runs
   straight through the copy. The 980px scrim had faded to ~45% opacity by the time
   it reached the stat strip, leaving it sitting legibly-ambiguous on the glyph.
   Taller, and solid until below the strip, so every line of hero copy has an opaque
   base — the 3 fades out behind the text instead of competing with it. */
@media (max-width:760px){
  .hero::after{height:80%;background:linear-gradient(to top,var(--hero-scrim) 64%,var(--hero-scrim-0))}
}
.hero-label{
  position:relative;z-index:1;
  margin-bottom:clamp(.9rem,2vh,1.6rem);
  color:var(--teal-deep);
}
.hero-title{
  font-family:var(--serif);
  font-size:clamp(2rem,6.6vw,7.2rem);
  line-height:1;
  letter-spacing:-.005em;
  font-weight:700;text-transform:uppercase;
  max-width:16ch;
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero-title .line-inner{display:inline-block;will-change:transform}
.hero-title em{font-style:normal;font-weight:700;color:var(--teal-deep);letter-spacing:-.005em}
.hero-foot{
  margin-top:clamp(1.6rem,4vh,3.2rem);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:2rem 4rem;
  justify-content:space-between;
}
.hero-sub{max-width:36ch;font-size:clamp(.95rem,1.15vw,1.1rem);color:rgba(var(--ink-rgb),.78)}
.hero-cta-row{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap}
.btn-big{
  font-size:.75rem;padding:1.15em 2.4em;
}
.hero-side{
  /* in-flow stat strip ABOVE the eyebrow — clear space on the left, never over the animation */
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;
  margin-bottom:clamp(.9rem,2.2vh,1.5rem);
  color:rgba(var(--ink-rgb),.6);
}
.hero-side span:not(:last-child)::after{content:"\00b7";margin:0 .9rem;color:var(--teal);opacity:.9}
@media (max-width:560px){.hero-side{font-size:.62rem}}
/* short windows: the bottom-anchored headline rises into the label/stats zone — yield the garnish */

.scroll-cue{color:rgba(var(--ink-rgb),.7)}

/* ============ SHOWREEL ============ */
/* full-bleed navy band; styled to look intentional with no JS —
   the reel module injects its canvas under .reel-ui */
.sec-reel{background:var(--navy);color:var(--peri)}
.reel-stage{
  position:relative;overflow:hidden;
  width:100%;height:80vh;height:80svh;min-height:24rem;
  background:
    radial-gradient(58% 90% at 78% 16%,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),0) 70%),
    radial-gradient(70% 110% at 12% 92%,rgba(189,196,230,.1),rgba(189,196,230,0) 65%),
    linear-gradient(160deg,var(--navy-2),var(--navy) 62%);
}
/* ---- VHS grade over the showreel ----------------------------------------
   Every moving layer is oversized and animated with transform only, so this is
   compositor work and never repaints the band. Restrained on purpose: enough
   texture to read as tape, not so much that the posters look damaged. */
.reel-vhs{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  /* tube vignette — corners fall off, centre stays clean for the imagery */
  background:radial-gradient(115% 95% at 50% 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%);
}
.reel-vhs span{position:absolute;left:0;right:0;display:block;pointer-events:none}
/* scanlines: 1px on, 2px off, drifting down slowly like a mistracked tape */
.vhs-lines{
  top:-100%;height:300%;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.34) 0 1px,rgba(0,0,0,0) 1px 3px);
  animation:vhsRoll 9s linear infinite;
}
/* tape grain — a stitched turbulence tile, nudged in steps so it crawls */
.vhs-noise{
  top:-50%;height:200%;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:130px 130px;
  animation:vhsJitter .45s steps(3,end) infinite;
}
/* head-switching band sweeping down the frame */
.vhs-track{
  top:0;height:18%;opacity:.75;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.045) 38%,
    rgba(var(--accent-rgb),.075) 50%,rgba(255,255,255,.045) 62%,rgba(255,255,255,0) 100%);
  animation:vhsTrack 8.5s linear infinite;
}
@keyframes vhsRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,3px,0)}}
@keyframes vhsJitter{
  0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-2%,1.5%,0)}
  66%{transform:translate3d(1.5%,-1%,0)}100%{transform:translate3d(0,0,0)}
}
@keyframes vhsTrack{
  0%{transform:translate3d(0,-120%,0)}
  70%,100%{transform:translate3d(0,660%,0)}
}
/* decorative: drop the animation for reduced-motion, and the grain entirely on
   weak hardware (it is the most expensive layer and the least missed) */
@media (prefers-reduced-motion:reduce){.reel-vhs span{animation:none}.vhs-track{opacity:0}}
:root.tier-low .vhs-noise{display:none}
:root.tier-low .vhs-lines,:root.tier-low .vhs-track{animation:none}

.reel-ui{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;justify-content:flex-start;gap:.7rem;align-items:flex-start;
  padding:clamp(1.4rem,3.2vw,2.8rem) var(--pad);
}
/* a11y: caption/label scrims — posters vary, worst case is the bone-editorial slide */
.reel-ui::before{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none;top:0;height:12rem;background:linear-gradient(to bottom,rgba(7,8,22,.78),rgba(7,8,22,0))}
.reel-label{color:var(--teal)}
/* running-sentence caption: stays Archivo (Akira has no lowercase/italic) */
.reel-caption{
  font-family:var(--sans);font-weight:400;letter-spacing:0;
  font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.3;
  color:var(--peri);max-width:36ch;
}
.reel-caption em{color:var(--teal);font-style:normal;font-weight:600}
/* per-slide context, bottom-left. margin-top:auto pushes it down without
   disturbing the label/caption group above it. */
.reel-meta{
  margin-top:auto;display:flex;flex-direction:column;gap:.4rem;
  filter:drop-shadow(0 1px 10px rgba(7,8,22,.5));
  /* .reel-meta is a shrink-to-fit flex item. The old min(48ch,94%) capped it at
     ~384px, far narrower than a client name set at 4.1rem, so the name had to
     break. The 48ch reading measure now sits on .reel-meta-stat, the running
     text that actually wanted it, and the box is free to fit its heading. */
  max-width:94%;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.reel-meta.is-in{opacity:1;transform:none}
.reel-meta-idx{color:var(--case-accent,var(--teal));font-size:.72rem;letter-spacing:.3em}
.reel-meta-name{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.75rem,4.8vw,4.1rem);line-height:.98;letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(7,8,22,.55);
  color:var(--on-navy);
  /* break-word, not anywhere: anywhere splits a word even when it would fit on a
     line of its own, which is how "MCLAREN AUTOMOTIVE" came out as AUTOMOTI/VE.
     This still stops an unbreakable CMS-entered name from overflowing. */
  overflow-wrap:break-word;
}
.reel-meta-tag{color:var(--case-accent,var(--teal));font-size:.78rem;letter-spacing:.24em}
.reel-meta-stat{
  font-family:var(--sans);color:var(--ink);font-weight:500;
  font-size:clamp(.95rem,1.35vw,1.2rem);line-height:1.45;
  display:flex;flex-wrap:wrap;column-gap:.55rem;row-gap:.1rem;
  max-width:48ch;
}
/* Separator TRAILS the figure it follows rather than leading the next one. Either way
   a wrap can only fall between figures, but a trailing '·' at the end of a line is the
   conventional treatment — a leading one reads as a typo. */
.reel-stat-seg:not(:last-child)::after{content:"·";margin-left:.55rem;opacity:.5}
/* bottom scrim mirrors the top one: posters vary and the stat line is small */
.reel-ui::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  height:19rem;background:linear-gradient(to top,rgba(7,8,22,.92),rgba(7,8,22,.55) 45%,rgba(7,8,22,0));
}
@media (prefers-reduced-motion:reduce){.reel-meta{transition:none}}
@media (max-width:760px){
  /* posters are 16:9 — match the band aspect so the whole poster shows, no side-crop */
  .reel-stage{height:auto;aspect-ratio:16/9;min-height:0}
  /* PAUSE lived bottom-right, which forced a max-width on the stat line and made
     it wrap into 3 cramped lines. The top of the band is empty on a phone, so the
     control moves there and the copy gets the full width back. */
  .reel-pause{top:clamp(.8rem,3vw,1.4rem)!important;bottom:auto!important}
  .btn-pill{padding:.7em 1.05em;font-size:.7rem;letter-spacing:.16em}

  /* The band is only ~219px tall on a phone and the copy stack was taller than
     that — it overflowed and buried the poster. The image is the point here, so
     the standing caption goes (the per-slide block below says more), and what is
     left is compressed into a bottom strip so the poster reads clean and centred. */
  .reel-caption{display:none}
  .reel-ui{padding:.85rem var(--pad) .9rem}
  .reel-ui::before{height:5rem}
  .reel-meta{gap:.15rem;max-width:100%}
  .reel-meta-name{font-size:clamp(1.5rem,8.2vw,2.6rem)}
  .reel-meta-stat{font-size:.82rem;line-height:1.3;column-gap:.45rem}
  .reel-meta-tag{font-size:.66rem;letter-spacing:.18em}
  .reel-meta-idx{font-size:.66rem;letter-spacing:.24em}
  /* full width now that PAUSE is out of the way — this max-width was what forced
     the separator onto its own line */
  .reel-meta-stat{max-width:100%}
}

/* ============ SECTION SCAFFOLD ============ */
section{position:relative;z-index:1;background:var(--bone)}
.sec{padding:clamp(5rem,11vw,9.5rem) 0}
#stats,#services{position:relative;overflow:hidden}
.sec-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
/* Services sits on --bone, which goes light — the teal shader reads muddy there, so the
   aurora is dark-only. Stats is a navy band in BOTH themes, so its dot-field always runs. */
.sec-bg[data-mode="mesh"]{opacity:0}
:root[data-theme="dark"] .sec-bg[data-mode="mesh"]{opacity:1}
#stats>.wrap,#services>.wrap{position:relative;z-index:1}
.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:2rem;align-items:start;margin-bottom:clamp(2.5rem,6vw,5rem);
}
.sec-label{color:var(--teal-deep);padding-top:.9rem}
.sec-title{
  font-family:var(--serif);
  font-size:clamp(1.55rem,3.4vw,3.4rem);
  line-height:1.08;letter-spacing:-.005em;font-weight:700;text-transform:uppercase;
}
.sec-title em{color:var(--teal-deep);font-style:normal;font-weight:700}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;gap:1.2rem}.sec-label{padding-top:0}}

/* ============ ABOUT ============ */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1.6rem,3vw,3.2rem);align-items:center;
}
.about-video{margin:0;border-radius:1rem;overflow:hidden;border:1px solid var(--rule);box-shadow:0 24px 60px rgba(var(--ink-rgb),.16);align-self:center}
.about-video-el{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--navy)}
.about-copy{max-width:56ch;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.55;color:rgba(var(--ink-rgb),.86)}
.about-copy p+p{margin-top:1.4em}
.about-copy strong{font-weight:600;color:var(--ink)}
.about-facts{
  display:flex;gap:3rem;flex-wrap:wrap;margin-top:3rem;color:rgba(var(--ink-rgb),.6);
}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}.about-video{margin-bottom:.4rem}}

/* marquee */
.marquee{
  overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:clamp(3rem,7vw,6rem);padding:1.6rem 0;
}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marquee 30s linear infinite}
.marquee-set{display:flex;align-items:center;gap:3.5rem;padding-right:3.5rem;flex:none}
.mq-name{
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.9rem);
  font-weight:700;letter-spacing:0;text-transform:uppercase;white-space:nowrap;color:rgba(var(--ink-rgb),.85);
}
.mq-name em{font-style:normal;font-weight:700;color:var(--teal-deep)}
.mq-logo{height:clamp(1.8rem,3vw,2.8rem);width:auto;filter:brightness(0)}
:root[data-theme="dark"] .mq-logo{filter:brightness(0) invert(1)}   /* silhouette, then flip for dark */
.mq-dot{color:var(--teal);font-size:.8rem}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;width:auto;flex-wrap:wrap}
  .marquee-set:last-child{display:none}
}

/* ============ STATS (navy) ============ */
.sec-stats{background:var(--navy);color:var(--peri)}
.sec-stats .sec-label{color:var(--teal)}
.sec-stats .sec-title{color:var(--on-navy)}
.sec-stats .sec-title em{color:var(--teal)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-navy);
}
.stat{
  padding:2.4rem 2rem 2.6rem 0;
  border-bottom:1px solid var(--rule-navy);
}
.stat-num{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:1;letter-spacing:-.01em;
  color:var(--on-navy);
}
.stat-num .accent{color:var(--teal);font-style:normal}
.stat-label{margin-top:.9rem;color:var(--peri-2)}
.stats-strip{
  display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;
  padding-top:2rem;color:var(--peri-2);
}
.stats-strip strong{color:var(--teal);font-weight:600}
@media (max-width:1020px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stats-grid{grid-template-columns:1fr}}

/* ============ SERVICES ============ */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,6rem)}
.svc{
  border-top:1px solid var(--rule);
  padding:2.2rem 0 2.6rem;
  display:grid;grid-template-columns:auto 1fr;gap:1.6rem;
  transition:border-color .3s;
}
.svc:hover{border-top-color:var(--teal-deep)}
.svc-num{color:var(--teal-deep);padding-top:.55rem}
.svc-title{
  font-family:var(--serif);font-size:clamp(1rem,1.7vw,1.5rem);
  font-weight:700;letter-spacing:-.005em;line-height:1.14;text-transform:uppercase;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.svc:hover .svc-title{transform:translateX(.35rem)}
.svc-title em{color:var(--teal-deep);font-style:normal;font-weight:700}
.svc-copy{margin-top:.85rem;max-width:44ch;color:rgba(var(--ink-rgb),.68);font-size:.95rem}
.svc-angles{
  margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule);
  padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem 2.4rem;
  color:rgba(var(--ink-rgb),.74);
}
.svc-angles .tick{color:var(--teal-deep)}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}}

/* ============ CASE INDEX ============ */
.case-list{border-top:1px solid var(--rule);--case-inset:clamp(.7rem,1.6vw,1.4rem)}
/* Each case row is themed to its own client. --case-accent is written per <li> by
   render.js; the fallback keeps rows without a colour on the site accent. The wash is
   a colour-mix so it works on both the light and dark ground without a second rule. */
.case{border-bottom:1px solid var(--rule);transition:background .35s ease}
@supports (background:color-mix(in oklab,red 10%,blue)){
  .case:hover,.case:focus-within{background:color-mix(in oklab,var(--case-accent,var(--teal)) 9%,transparent)}
}
.case:focus-visible{outline:2px solid var(--teal-deep);outline-offset:-2px}
.case-row{
  display:grid;
  grid-template-columns:calc(clamp(3rem,7vw,6.5rem) - var(--case-inset)) 1fr auto clamp(2rem,4vw,3.5rem);
  align-items:baseline;gap:1rem;
  padding:1.9rem var(--case-inset) 1.7rem;cursor:pointer;
}
.case-num{
  font-family:var(--serif);font-style:normal;font-weight:700;
  font-size:clamp(1rem,2vw,1.6rem);line-height:1;
  color:rgba(var(--ink-rgb),.35);
  transition:color .35s;
}
.case:hover .case-num,.case:focus-within .case-num{color:var(--case-accent,var(--teal-deep))}
.case-name{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2.9vw,2.6rem);line-height:1.02;letter-spacing:-.01em;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.case:hover .case-name,.case:focus-within .case-name{transform:translateX(clamp(.3rem,1vw,1rem))}
.case-name em{font-style:normal;font-weight:700;color:var(--teal-deep)}
.case-tag{
  font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--ink-rgb),.7);text-align:right;
}
.case-arrow{
  font-family:var(--sans);font-size:1.3rem;color:rgba(var(--ink-rgb),.4);
  justify-self:end;transition:transform .4s cubic-bezier(.22,1,.36,1),color .3s;
}
.case:hover .case-arrow,.case:focus-within .case-arrow{transform:rotate(-45deg);color:var(--case-accent,var(--teal-deep))}
.case-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1);
}
.case-panel-in{overflow:hidden;min-height:0}
.case-panel-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:2rem;
  padding:0 0 2.4rem clamp(3rem,7vw,6.5rem);
}
.case-desc{max-width:42ch;color:rgba(var(--ink-rgb),.7);font-size:.95rem}
.case-logo{max-height:2.2rem;width:auto;margin-bottom:1rem;display:block;filter:brightness(0)}
:root[data-theme="dark"] .case-logo{filter:brightness(0) invert(1)}
.case-stats{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;align-items:flex-start}
.cs strong{
  display:block;font-family:var(--serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.9rem);line-height:1.04;letter-spacing:-.005em;
  color:var(--teal-deep);
}
.cs span{display:block;margin-top:.45rem;font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--ink-rgb),.74)}
@media (hover:hover){
  .case:hover .case-panel,.case:focus-within .case-panel{grid-template-rows:1fr}
}
@media (hover:none){
  .case-panel{grid-template-rows:1fr}
  .case-row{cursor:default}
}
@media (max-width:860px){
  .case-tag{display:none}
  .case-row{grid-template-columns:calc(clamp(2.4rem,9vw,4rem) - var(--case-inset)) 1fr 2rem}
  .case-panel-grid{grid-template-columns:1fr;padding-left:clamp(2.4rem,9vw,4rem);gap:1.2rem}
}

/* ============ CREATORS (navy) ============ */
.sec-creators{background:var(--navy);color:var(--peri);overflow:hidden}
.sec-creators .sec-label{color:var(--teal)}
.creators-giant{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,5.4vw,5.6rem);line-height:1;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.5px rgba(189,196,230,.85);
  white-space:nowrap;
}
.creators-giant .solid{color:var(--on-navy);-webkit-text-stroke:0}
.creators-soon{
  font-family:var(--serif);font-style:normal;font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,2.1vw,1.9rem);color:var(--teal);letter-spacing:-.005em;
  margin-top:.7rem;
}
.creators-copy{max-width:52ch;margin-top:2.2rem;color:var(--peri-2);font-size:1.02rem}
.creators-copy strong{color:var(--peri);font-weight:600}
@media (max-width:640px){.creators-giant{white-space:normal}}

/* ============ CONTACT / FOOTER (navy) ============ */
.sec-contact{background:var(--navy);color:var(--peri);border-top:1px solid var(--rule-navy)}
.sec-contact .sec-title{color:var(--on-navy)}
.sec-contact .sec-title em{color:var(--teal)}
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(3rem,7vw,7rem);align-items:start;
}
.book-line{
  display:inline-block;font-family:var(--serif);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,5.8rem);line-height:1.02;letter-spacing:-.01em;
  color:var(--on-navy);
}
.book-line em{color:var(--teal);font-style:normal;font-weight:700}
.book-line .arrow{
  display:inline-block;font-style:normal;color:var(--teal);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.book-line:hover .arrow{transform:translate(.12em,-.12em)}
.contact-note{margin-top:2rem;color:var(--peri-2);max-width:40ch}
.contact-note a{color:var(--peri)}
/* form */
.form{display:flex;flex-direction:column;gap:2rem;padding-top:1rem}
.field{display:flex;flex-direction:column;gap:.7rem}
.field label{font-size:.75rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--peri-2)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule-navy);
  color:var(--on-navy);font-family:var(--sans);font-size:1.05rem;
  padding:.5rem 0 .8rem;border-radius:0;outline:none;
  transition:border-color .3s;
}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.field select option{color:var(--ink);background:var(--bone)}
.field textarea{resize:vertical;min-height:5.5rem}
.field input::placeholder,.field textarea::placeholder{color:rgba(189,196,230,.78)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--teal)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.form-done{color:var(--teal);font-family:var(--sans);font-weight:600;font-size:1.15rem}
.footer-bottom{
  margin-top:clamp(4rem,9vw,8rem);border-top:1px solid var(--rule-navy);
  padding-top:2rem;
  display:flex;flex-wrap:wrap;gap:1.2rem 3rem;align-items:baseline;justify-content:space-between;
  color:var(--peri-2);font-size:.8rem;
}
.footer-brand{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--on-navy)}
.footer-brand .three{color:var(--teal);font-style:italic;font-weight:300}
.footer-brand .brand-img{height:1.3rem;filter:invert(1)}
.footer-links{display:flex;gap:1.8rem}
.footer-links a{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--peri-2)}
.footer-links a:hover{color:var(--teal)}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr}}

/* ---- perf: weak hardware drops the nav glass blur (solid chip, same hue) ---- */
html.tier-low .nav-blend{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--nav-glass)}
:root[data-theme="dark"].tier-low .nav-blend{background:rgba(7,8,22,.92)}

/* ---- perf: skip layout/paint of below-fold sections until near view (NOT .hero/.sec-reel) ---- */
@supports (content-visibility:auto){
  #about,#stats,#services,#work,#creators,#contact{content-visibility:auto;contain-intrinsic-size:auto 1100px}
  #creators{contain-intrinsic-size:auto 700px}
}