/* ============================================================
   TO KILL FOR LABS · SITE STYLESHEET
   Derived from Visual Identity v4 (2026)
   Font stack: Tanker (display) · Instrument Serif (sub-headlines) · Instrument Sans (body)
   ============================================================ */

/* Tanker — drop the woff2 into assets/fonts/ to activate.
   Free download: https://pangrampangram.com/products/tanker
   Until the file is present, the cascade falls back to Anton. */
@font-face {
  font-family: 'Tanker';
  src: url('assets/fonts/Tanker-Regular.woff2') format('woff2'),
       url('assets/fonts/Tanker-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary */
  --void:    #07080D;
  --abyss:   #0C1A3D;
  --chrome:  #C2CDD8;
  /* Secondary */
  --steel:   #1C2940;
  --slate:   #6B7E93;
  --ice:     #ECF0F5;
  /* Accent */
  --signal:  #1A6FFF;
  --signal-glow: rgba(26,111,255,0.35);
  --signal-dim:  rgba(26,111,255,0.10);
  --signal-edge: rgba(26,111,255,0.30);

  /* Borders / surfaces */
  --line-soft:   rgba(194,205,216,0.08);
  --line-mid:    rgba(194,205,216,0.12);
  --line-bright: rgba(194,205,216,0.2);
  --surface-up:  rgba(255,255,255,0.03);
  --surface-up2: rgba(255,255,255,0.05);

  /* Type — per Visual Identity v4 */
  --f-display: 'Tanker', 'Anton', 'Bebas Neue', sans-serif;
  --f-serif:   'Instrument Serif', Georgia, serif;
  --f-mono:    'Instrument Sans', system-ui, sans-serif;
  --f-body:    'Instrument Sans', system-ui, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --gutter: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--void);
  color: var(--chrome);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* ============================================================
   ATMOSPHERIC BACKDROP
   Two fixed layers behind every page, each slowly "breathing".
   Different cycle lengths (22s / 17s) so they never sync up —
   over time the combined motion never quite repeats, giving an
   organic sense of something alive underneath.
   ::before  = top navy wash (the "ambient light from above")
   ::after   = bottom-right Signal Blue glow (subtle brand accent)
   ============================================================ */
body::before,
body::after {
  content: '';
  position: fixed;
  /* -50% inset = element spans 200vw × 200vh, centered on viewport.
     With this much room around the gradient, the element's bounding box
     never crosses the viewport during animation — so the gradient never
     gets clipped at a hard edge. */
  inset: -50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

body::before {
  background: radial-gradient(ellipse 60% 50% at 50% 25%, rgba(12,26,61,0.55) 0%, transparent 70%);
  transform-origin: 50% 25%;
  /* Slow lateral drift of the upper atmospheric wash. 28s cycle. */
  animation: drift-top 28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

body::after {
  /* True circle (not ellipse) with 3 opacity stops for a soft, organic falloff.
     Sized in vw so the radius is predictable across screen sizes. */
  background: radial-gradient(
    circle 65vw at 50% 50%,
    rgba(26,111,255,0.09) 0%,
    rgba(26,111,255,0.05) 22%,
    rgba(26,111,255,0.02) 50%,
    transparent 80%
  );
  /* Signal Blue glow wanders across the viewport. Translate uses vw/vh
     so the motion is independent of the element's huge box — predictable
     and contained to the visible area. 38s cycle. */
  animation: wave-glow 38s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Upper wash drifts gently left/right with mild breathing — feels like
   the room's ambient light source shifting slowly. Small translate
   percentages stay well within the enlarged element bounds. */
@keyframes drift-top {
  0%, 100% { transform: scale(1.04) translate(0, 0);          opacity: 0.93; }
  33%      { transform: scale(1.10) translate(3%, 0.8%);      opacity: 1; }
  66%      { transform: scale(1.08) translate(-2.5%, 1%);     opacity: 0.96; }
}

/* The wandering wave — the Signal Blue circle traces a slow loop around
   the viewport. Translate values are in vw/vh so motion is predictable
   regardless of the (now-huge) element box. */
@keyframes wave-glow {
  0%, 100% { transform: translate(28vw, 30vh) scale(1);       opacity: 0.55; }
  25%      { transform: translate(-8vw, 18vh) scale(1.1);     opacity: 0.85; }
  50%      { transform: translate(-26vw, -12vh) scale(1.2);   opacity: 1; }
  75%      { transform: translate(18vw, -22vh) scale(1.05);   opacity: 0.7; }
}

/* Respect visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

main, header, footer { position: relative; z-index: 1; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  /* Hidden by default — reveals on scroll via JS */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  /* Blur/tint only computed while the nav is actually shown — this sits
     directly over the hero's live WebGL scene, and backdrop-filter forces
     a per-frame resample of whatever's behind it even when the element
     itself is opacity:0. Gating it here means that cost only exists once
     the user has scrolled the hero mostly out of view anyway. */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7,8,13,0.72);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ice);
}

.nav-brand img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-brand-text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
}

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  align-items: center;
}

.nav-links a {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active { color: var(--ice); }

/* Higher specificity (.nav-links a.nav-cta) so this rule beats the generic
   .nav-links a color — otherwise the CTA text inherits slate and becomes
   nearly invisible against the Signal Blue background. */
.nav-links a.nav-cta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice);
  background: var(--signal);
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  box-shadow: 0 6px 20px var(--signal-glow);
}
.nav-links a.nav-cta:hover {
  color: var(--ice);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px var(--signal-glow);
}

.nav-links a:focus-visible {
  outline: none;
  color: var(--ice);
  box-shadow: 0 0 0 2px rgba(26,111,255,0.5);
  border-radius: 3px;
}

/* Skip-to-main accessibility link */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  background: var(--signal);
  color: var(--ice);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-main:focus { top: 16px; }

/* Mobile nav toggle */
.nav-toggle { display: none; }

/* Scrim behind the mobile nav dropdown — dims the page so the open menu
   reads as an overlay instead of colliding visually with content beneath it. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(7,8,13,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .nav-scrim { transition: none; }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 96px 0;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 72px; /* offset for sticky nav when jumping to anchors */
}

.section:last-of-type { border-bottom: none; }

/* Mildly tighten the vertical gaps across the pain → services → process →
   about run only (reel→pain and about→contact are left at full spacing). */
#pain { padding-bottom: 64px; }
#services, #process { padding-top: 64px; padding-bottom: 64px; }
#about { padding-top: 64px; }

/* Hero is also a scroll target */
.hero { scroll-margin-top: 72px; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--signal);
}

h1, h2 {
  font-family: var(--f-display);
  color: var(--ice);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}

h3, h4 {
  font-family: var(--f-serif);
  color: var(--ice);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(52px, 7.5vw, 96px); }
h2 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 16px; }
h3 { font-size: 26px; line-height: 1.25; margin-bottom: 12px; }
h4 { font-size: 17px; line-height: 1.3; }

p { color: var(--chrome); text-wrap: pretty; }
.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--chrome);
  max-width: 640px;
}

.muted { color: var(--slate); }

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 500;
}

.btn-primary {
  background: var(--signal);
  color: var(--ice);
  box-shadow: 0 8px 24px var(--signal-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--signal-glow); text-decoration: none; }

.btn-ghost {
  border-color: var(--line-mid);
  color: var(--ice);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--chrome); background: var(--surface-up); text-decoration: none; }

.btn-arrow::after {
  content: '→';
  font-family: var(--f-body);
  font-size: 14px;
  margin-left: 4px;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,111,255,0.4);
}

/* Shared tag row utility — replaces repeated inline flex declarations */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* Full viewport — Spline scene is the focus, content anchors at the bottom */
  min-height: 100vh;
  padding: 60px 0 80px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(26,111,255,0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner { position: relative; z-index: 2; max-width: 900px; pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }

/* Hero heading: the Spline scene renders the wordmark visually at every
   breakpoint, so this stays screen-reader-only everywhere — it exists
   purely so the page has a real, accessible/SEO-visible <h1>. */
.hero-heading {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Hero-only lede override — smaller, centered. Other sections' .lede unchanged. */
.hero .lede {
  font-size: 16px;
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto 20px;  /* buttons below carry the remaining clearance above scroll-cue */
  text-align: center;
}
/* Two lede variants: a shorter one for mobile so it wraps to 2 lines instead
   of 3 at a normal reading size, instead of shrinking the full sentence. */
.lede--mobile { display: none; }

/* ============================================================
   SCROLL-CUE — vertical Chrome dots, cascading opacity fade.
   Anchored bottom-center of the hero. Pure visual whisper to
   pull the eye downward — no arrow, no label.
   ============================================================ */
.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.scroll-cue span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--chrome);
  opacity: 0.2;
  animation: scroll-cue-pulse 2s ease-in-out infinite;
}
/* Staggered delays create the cascading "drip" wave traveling down */
.scroll-cue span:nth-child(1)  { animation-delay: 0.00s; }
.scroll-cue span:nth-child(2)  { animation-delay: 0.10s; }
.scroll-cue span:nth-child(3)  { animation-delay: 0.20s; }
.scroll-cue span:nth-child(4)  { animation-delay: 0.30s; }
.scroll-cue span:nth-child(5)  { animation-delay: 0.40s; }
.scroll-cue span:nth-child(6)  { animation-delay: 0.50s; }
.scroll-cue span:nth-child(7)  { animation-delay: 0.60s; }
.scroll-cue span:nth-child(8)  { animation-delay: 0.70s; }
.scroll-cue span:nth-child(9)  { animation-delay: 0.80s; }
.scroll-cue span:nth-child(10) { animation-delay: 0.90s; }

/* 10 dots on desktop, 9 on mobile. */
@media (max-width: 720px) {
  .scroll-cue-desktop-only { display: none; }
}

@keyframes scroll-cue-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; opacity: 0.5; }
}

/* ============================================================
   SPLINE 3D HERO SCENE
   Ambient background — the "Liquid Chrome" scene, rendered live via the
   <spline-viewer> runtime web component (see .hero-scene--desktop in
   index.html) rather than an iframe embed, so it shares this page's own
   process and can be unloaded/reloaded on scroll via `unload-scene`.
   Sits between the gradient glow (z:0) and the hero content (z:2).
   ============================================================ */
.hero-spline {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  /* aria-hidden: this is decorative. The wrapper itself stays click-through —
     spline-viewer re-enables pointer-events below, so the scene's
     mouse-follow parallax works. */
  pointer-events: none;
}
.hero-spline spline-viewer {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Oversized relative to its box for two reasons: (1) mouse-follow
     parallax needs room to shift the camera without exposing the
     element's clipped edge (see .hero-spline's overflow:hidden), and
     (2) it crops the "Built with Spline" badge Spline renders in the
     scene's own bottom-right corner. 119% is the empirically-verified
     minimum that still clips the badge at the narrowest desktop width
     (viewports just above the 720px mobile breakpoint, where the fixed-
     size badge eats into a smaller container) — tested down to 108%,
     where the badge became fully visible. Every extra % beyond this is
     wasted WebGL fragment work, so don't round this up "for safety"
     without re-testing at that boundary width. Carried over unchanged
     from the old iframe embed — the badge is positioned the same way. */
  width: 119%;
  height: 119%;
  transform: translate(-50%, -50%);
  border: 0;
  display: block;
  background: transparent;
  /* Fade in once the scene finishes loading — index.html listens for the
     `load` event and adds .loaded. */
  opacity: 0;
  transition: opacity 1.2s ease;
  /* Mouse-follow parallax needs real pointer events on the scene. A small
     shield (.hero-spline-shield, below) sits above this in the corner
     where Spline renders its "Built with Spline" badge, so that link
     stays unclickable. This now sits same-origin in our own page rather
     than a sandboxed iframe, so an unshielded click could navigate the
     whole tab to spline.design instead of just breaking an embedded
     sub-frame — if anything, the shield matters more here than it did
     with the iframe. */
  pointer-events: auto;
}
.hero-spline spline-viewer.loaded { opacity: 0.9; }

/* Dead-zone over the Spline badge's corner (bottom-right of the scene).
   Sized generously since the exact badge position can vary by scene. */
.hero-spline-shield {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 220px;
  height: 64px;
  z-index: 1;
  pointer-events: auto;
}

/* Mobile hero video: a pre-rendered export of the same scene, standing in
   for live WebGL (which repeatedly crashed mobile Safari — see index.html
   for the full story). Hidden on desktop; spline-viewer carries the scene
   there. */
.hero-scene--mobile { display: none; }

@media (max-width: 720px) {
  /* .hero-spline spline-viewer (base rule, above) sets display:block with a
     class+tag selector — higher specificity than .hero-scene--desktop alone,
     so it would otherwise silently win the cascade regardless of this media
     query and render (invisibly opaque) on top of the video. Matching
     .hero-spline as an ancestor class here outweighs it unambiguously. */
  .hero-spline .hero-scene--desktop { display: none; }
  .hero-spline-shield { display: none; } /* only relevant to the desktop scene's badge */

  /* Mobile uses the exact same overlay model as desktop now — .hero,
     .hero-spline, .hero-inner and .scroll-cue all use their base (desktop)
     rules unchanged: .hero is min-height:100vh with justify-content:flex-
     end, .hero-spline is position:absolute;inset:0 filling the whole hero
     behind the copy. Nothing here overrides that layout, only which scene
     element is visible (video vs spline-viewer) and how the video fills its box.
     mobile-scene.mp4 itself is the raw, unpadded export — its bottom edge
     is exactly where the real footage ends, flush with the next section,
     nothing artificial added. */
  .hero-scene--mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* bottom, not center — anchors the crop window to the bottom of the
       source, so as the video's height varies by device, cropping only
       ever eats into the empty margin ABOVE the logo — the logo itself
       stays anchored in place near the bottom, never the part that moves. */
    object-position: center bottom;
  }
  /* Shorter lede for phones, at a normal reading size, instead of shrinking
     the full sentence down to fit. */
  .lede--desktop { display: none; }
  .lede--mobile { display: block; }
  .hero .lede { max-width: none; }

  /* Tightened from the base 80px — every pixel reclaimed here shrinks how
     much of the video the legibility scrim below has to cover before it
     reaches the copy block, which is what actually determines how much of
     the logo stays visible on the shortest phones. */
  .hero { padding-bottom: 40px; }
}

.hero-cta-row {
  justify-content: center;
  margin-top: 0;
  /* Clears the absolutely-positioned scroll-cue below (bottom:32px). */
  margin-bottom: 88px;
}

/* .hero-cta-row's margin-bottom above exists to clear the scroll-cue, which
   is absolutely positioned (bottom:32px) independent of .hero's own
   padding — so mobile's reduced .hero padding-bottom (40px, above) does NOT
   reduce how much clearance the CTA row needs; it still needs
   padding-bottom(40) + this margin >= scroll-cue's bottom offset (32) +
   its own height (~112) = ~144px, or the dots start overlapping the CTA
   button. Bumped up from the base 88px to 110px to keep that math working.
   Must come after the base rule above to win the cascade (same selector/
   specificity, source order decides — see the .hero-scene--desktop fix
   above for the same gotcha). */
@media (max-width: 720px) {
  .hero-cta-row { margin-bottom: 110px; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================================
   GRIDS / CARDS
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.card {
  background: linear-gradient(160deg, rgba(28,41,64,0.4) 0%, rgba(12,26,61,0.2) 100%);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 36px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.card:hover {
  border-color: var(--line-bright);
  transform: translateY(-4px);
}

.card-number {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--signal);
  margin-bottom: 14px;
}

.card h3 {
  font-size: 24px;
  margin-bottom: 14px;
}

.card p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 16px;
}
.card p:last-child { margin-bottom: 0; }

.card .tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chrome);
  background: var(--surface-up2);
  border: 1px solid var(--line-mid);
  padding: 4px 10px;
  border-radius: 20px;
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-head {
  margin-bottom: 56px;
  max-width: 720px;
}
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--slate); font-size: 17px; }

/* ============================================================
   PROCESS SECTION — 5-column vertical marquee
   ============================================================ */
#process {
  position: relative;
}


#services .wrap { position: relative; z-index: 1; }
#process .wrap {
  position: relative;
  z-index: 1;
}

.process-bg {
  position: absolute;
  inset: -280px 0 -280px 0;
  pointer-events: none;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 80%, transparent 100%);
}

.pbg-col {
  overflow: hidden;
  position: relative;
}

.pbg-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  will-change: transform;
}

/* Odd columns scroll up, even columns scroll down */
.pbg-col:nth-child(odd)  .pbg-inner { animation: pbg-up   28s linear infinite; }
.pbg-col:nth-child(even) .pbg-inner { animation: pbg-down 32s linear infinite; }

@keyframes pbg-up {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--pbg-shift, -50%)); }
}
@keyframes pbg-down {
  from { transform: translateY(var(--pbg-shift, -50%)); }
  to   { transform: translateY(0); }
}

.pbg-col img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  opacity: 0.13;
  filter: grayscale(20%);
}

@media (prefers-reduced-motion: reduce) {
  .pbg-inner { animation: none !important; }
}

@media (max-width: 768px) {
  .process-bg { grid-template-columns: repeat(3, 1fr); }
  .pbg-col:nth-child(n+4) { display: none; }
}

/* ============================================================
   PROCESS STEPS (horizontal strip)
   ============================================================ */
.process-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-up);
}
.process-step {
  padding: 28px 24px;
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.process-step:last-child { border-right: none; }
.process-step .step-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--signal);
  margin-bottom: 14px;
}
.process-step h4 {
  font-family: var(--f-display);
  font-size: 16px;
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0;
}
.process-step p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
}

/* ============================================================
   PAIN POINTS
   ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pain {
  background: var(--surface-up);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 24px 26px;
  transition: border-color 0.2s ease;
}
.pain:hover { border-color: var(--line-bright); }
.pain h4 {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.pain p { font-size: 13px; color: var(--slate); }

/* ============================================================
   PRICING TIERS (services page)
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tier {
  background: linear-gradient(165deg, rgba(28,41,64,0.4), rgba(12,26,61,0.15));
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 36px 32px;
  position: relative;
}
.tier.featured {
  border-color: var(--signal-edge);
  box-shadow: 0 0 0 1px var(--signal-edge), 0 20px 60px rgba(26,111,255,0.12);
}
.tier .tier-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 10px;
}
.tier h3 {
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.tier .tier-price {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--chrome);
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.tier ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tier li {
  font-size: 14px;
  color: var(--chrome);
  padding-left: 22px;
  position: relative;
}
.tier li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--signal);
  font-weight: 700;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, rgba(12,26,61,0.6), rgba(26,111,255,0.08));
  border: 1px solid var(--signal-edge);
  border-radius: 18px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(26,111,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.cta-band h2 { margin-bottom: 12px; position: relative; }
.cta-band p { color: var(--chrome); max-width: 560px; margin: 0 auto 28px; position: relative; }
.cta-band .btn-row { justify-content: center; position: relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: 56px 0 36px;
  background: var(--void);
  position: relative;
  z-index: 1;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 16px;
}
.footer-col p,
.footer-col a {
  font-size: 13px;
  color: var(--chrome);
  text-decoration: none;
  display: block;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--signal); }
.footer-brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.footer-brand img { height: 32px; }
.footer-tag {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice);
}
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--gutter) 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.08em;
}

/* ============================================================
   FORM
   ============================================================ */
.form {
  display: grid;
  gap: 18px;
  max-width: 640px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.field input,
.field textarea,
.field select {
  background: var(--surface-up);
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--ice);
  font-family: var(--f-body);
  font-size: 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Cross-browser select — remove native chrome, add custom arrow */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B7E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.field select option {
  background: #0C1A3D;
  color: var(--ice);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--signal);
  background: rgba(26,111,255,0.05);
}
.field textarea { min-height: 140px; resize: vertical; }

/* ============================================================
   PHILOSOPHY (about page)
   ============================================================ */
/* Philosophy — numbered editorial layout */
.philosophy-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.philosophy-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--line-soft);
  align-items: center;
}
.philosophy-item:last-child { border-bottom: 1px solid var(--line-soft); }
.philosophy-item h3 {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.01em;
  color: var(--ice);
}
.philosophy-item p {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.65;
}

/* ============================================================
   AUDIENCE LIST (who we work with)
   ============================================================ */
.audience-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.audience-card {
  background: var(--surface-up);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 24px 26px;
}
.audience-card h4 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ice);
  margin-bottom: 8px;
}
.audience-card p { font-size: 14px; color: var(--slate); margin-bottom: 12px; }
.audience-card .tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.audience-card .tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chrome);
  background: var(--surface-up2);
  border: 1px solid var(--line-mid);
  padding: 4px 10px;
  border-radius: 20px;
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-header {
  padding: 100px 0 70px;
  border-bottom: 1px solid var(--line-soft);
}
.page-header h1 { font-size: clamp(40px, 5.5vw, 72px); margin-bottom: 20px; }
.page-header .lede { color: var(--chrome); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .grid-3, .grid-4, .pain-grid, .pricing-grid,
  .audience-list, .process-strip { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .process-strip { display: grid; }
  .process-step { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .process-step:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .philosophy-item { padding: 28px 0; }
  .grid-2, .grid-3, .grid-4, .pain-grid, .pricing-grid,
  .audience-list, .process-strip { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .section { padding: 72px 0; }
  .nav-links { display: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; margin-left: auto;
    background: transparent; border: 1px solid var(--line-mid);
    color: var(--ice); padding: 8px 16px; border-radius: 6px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer;
  }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(7,8,13,0.96); backdrop-filter: blur(18px);
    padding: 24px var(--gutter); border-bottom: 1px solid var(--line-soft);
  }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; }
}

/* ============================================================
   HOME PAGE — section header centering
   Scoped via body.home so other pages stay untouched.
   Only the section-head block (eyebrow + h2 + intro) is centered;
   the rest of each section keeps its original left-aligned layout.
   ============================================================ */
body.home .section-head {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.home .section-head .eyebrow {
  justify-content: center;
}
/* Intro paragraph: the section-head box stays centered on the page,
   but the paragraph text reads left-to-right for readability. */
body.home .section-head p {
  text-align: left;
}

/* Process section: center the timeline (cards) and the italic tagline beneath.
   Cards themselves keep their internal left-aligned layout. */
body.home .timeline {
  margin-left: auto;
  margin-right: auto;
}
body.home .timeline + .muted {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* About section: center the manifesto block on the page.
   Text inside the manifesto stays left-aligned. */
body.home .manifesto {
  margin-left: auto;
  margin-right: auto;
}

/* About section noise texture */
#about .wrap { position: relative; z-index: 1; }

/* About pull-quote */
.about-pullquote {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ice);
  margin: 48px 0;
  max-width: 14ch;
}
body.home .about-pullquote { margin-left: auto; margin-right: auto; text-align: center; max-width: none; }

/* Manifesto scroll-reveal */
.manifesto p {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.manifesto p.is-visible { opacity: 1; transform: translateY(0); }
.manifesto .accent {
  color: var(--signal);
  transition: text-shadow 0.5s ease;
}
.manifesto p.is-visible .accent {
  text-shadow: 0 0 28px color-mix(in srgb, var(--signal) 35%, transparent);
}

/* Section-title glow — activates once scrolled into view, matches the
   subtle Signal Blue glow used on primary buttons. */
.glow-on-scroll {
  transition: text-shadow 0.8s ease;
}
.glow-on-scroll.is-visible {
  text-shadow: 0 0 28px color-mix(in srgb, var(--signal) 35%, transparent);
}

/* Philosophy items scroll-reveal */
.philosophy-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.philosophy-item.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .manifesto p, .philosophy-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* About section: center the standalone "Our Philosophy" and "Who We Work With"
   header pairs that aren't wrapped in .section-head divs. */
body.home #about > .wrap > .eyebrow {
  justify-content: center;
}
body.home #about > .wrap > h2 {
  text-align: center;
}

/* ============================================================
   WORK PAGE — sidebar + main stage + hover preview
   ============================================================ */

/* Hide the body::before/::after atmospheric pulse layers on the work page —
   the brand hero gradient is the visual focus here. */
.work-body::before,
.work-body::after {
  opacity: 0;
}

/* Work page: nav is permanently pinned + visible (no scroll-reveal behavior).
   Overrides the default hidden-at-top transform from .nav. Also needs its
   own backdrop-filter/background — .nav.is-visible normally supplies those,
   but this page's nav never gets that class (it's forced visible here
   instead), and case-study content scrolls directly under it from the
   start, so the blur/tint can't be conditional the way it is on the
   homepage hero. */
.work-body .nav {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7,8,13,0.72);
}

.work-page {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 0px);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  padding-top: 80px; /* room for the (always-visible) nav on this page */
}

/* SIDEBAR */
.work-sidebar {
  padding: 56px 32px 56px 48px;
  border-right: 1px solid var(--line-soft);
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  align-self: start;
  display: flex;
  flex-direction: column;
}

.work-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome);
  background: var(--surface-up);
  border: 1px solid var(--line-mid);
  padding: 8px 14px;
  border-radius: 100px;
  margin-bottom: 32px;
  align-self: flex-start;
}
.work-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
  animation: pulse 2s ease-in-out infinite;
}

.brand-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.brand-pill {
  /* Same DNA as the original hero-tag pill */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--surface-up);
  border: 1px solid var(--line-soft);
  padding: 12px 18px;
  border-radius: 100px;
  cursor: pointer;
  text-align: left;
  width: fit-content;
  max-width: 100%;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.brand-pill:hover {
  color: var(--ice);
  border-color: var(--chrome);
  background: var(--surface-up2);
  transform: translateX(4px);
}
.brand-pill.is-active {
  color: var(--ice);
  border-color: var(--signal-edge);
  background: rgba(26,111,255,0.10);
  transform: translateX(8px);
}
.brand-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26,111,255,0.5);
}
.brand-pill-marker {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate);
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.brand-pill:hover .brand-pill-marker { background: var(--chrome); }
.brand-pill.is-active .brand-pill-marker {
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
}
.brand-pill-text { white-space: nowrap; }

.work-sidebar-foot {
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* MAIN STAGE */
.work-stage {
  padding: 56px 64px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  transition: opacity 0.22s ease;
  /* Without this, a grid item's content (e.g. a large intrinsically-sized image)
     can force this "1fr" track wider than the page, spilling past the viewport. */
  min-width: 0;
}
.work-stage.is-switching { opacity: 0; }

.brand-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-mid);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* Real media layer — video or slideshow — sits beneath the gradient tint */
.brand-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.brand-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Crossfading slideshow for Hampton Sun hero */
.brand-hero-slideshow {
  position: absolute;
  inset: 0;
}

.brand-hero-slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  animation: crossfade 9s ease-in-out infinite both;
}

/* First slide starts already-visible by shifting it 1s into the cycle */
.brand-hero-slideshow .slide:nth-child(1) { animation-delay: -1s;  }
.brand-hero-slideshow .slide:nth-child(2) { animation-delay: 2s;   }
.brand-hero-slideshow .slide:nth-child(3) { animation-delay: 5s;   }

@keyframes crossfade {
  0%   { opacity: 0; }
  11%  { opacity: 1; }
  44%  { opacity: 1; }
  56%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Three-up hero for Miu Miu — all videos playing side by side */
.brand-hero-triptych {
  position: absolute;
  inset: 0;
  display: flex;
}

.brand-hero-triptych-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
}
.brand-hero-triptych-panel + .brand-hero-triptych-panel {
  border-left: 1px solid var(--line-mid);
}

.brand-hero-triptych-panel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-hero-play--panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.brand-hero-triptych-panel:hover .brand-hero-play--panel {
  opacity: 1;
}
.brand-hero-triptych-panel .brand-hero-play-icon {
  width: 56px;
  height: 56px;
}

/* Clickable hero — cursor + hover play icon */
.brand-hero--clickable {
  cursor: pointer;
}

.brand-hero--clickable .brand-hero-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.brand-hero--clickable:hover .brand-hero-play {
  opacity: 1;
}

.brand-hero-play-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(7,8,13,0.55);
  border: 1.5px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ice);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.brand-hero--clickable:hover .brand-hero-play-icon {
  background: rgba(7,8,13,0.72);
  border-color: rgba(255,255,255,0.55);
  transform: scale(1.06);
}

.brand-hero-play-icon svg {
  width: 26px;
  height: 26px;
  margin-left: 3px; /* optical center for play triangle */
}

/* Gradient tint — full coverage when no media, subtle wash when media present */
.brand-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.5s ease;
  /* Decorative tint only — let clicks pass through to the media/panels beneath */
  pointer-events: none;
}

.brand-hero--has-media .brand-hero-gradient {
  opacity: 0.18;
}

.brand-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  background: linear-gradient(180deg, transparent 50%, rgba(7,8,13,0.6) 100%);
  /* Decorative label/hint layer only — let clicks pass through to the media/panels beneath */
  pointer-events: none;
}
.brand-hero-mark {
  display: none;
}

.brand-hero-click-hint {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: none;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
/* Only meaningful when the hero is actually clickable (video heroes) —
   the Hampton Sun slideshow hero, for example, has nothing to click through to. */
.brand-hero--clickable .brand-hero-click-hint {
  display: flex;
}
.brand-hero--clickable:hover .brand-hero-click-hint {
  color: rgba(255,255,255,0.85);
}
.brand-hero-click-hint::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* META */
.brand-meta {
  max-width: 720px;
}
.brand-meta-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}
.brand-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 4vw, 56px);
  color: var(--ice);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
  margin-bottom: 20px;
}
.brand-summary {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 19px;
  line-height: 1.55;
  color: var(--chrome);
  margin-bottom: 24px;
}
.brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.brand-tags .tag {
  font-family: var(--f-serif);
  font-style: italic;
}

/* HOVER PREVIEW — floats next to cursor */
.brand-preview {
  position: fixed;
  /* Position via CSS vars updated from JS */
  top: var(--cursor-y, 50%);
  left: var(--cursor-x, 50%);
  transform: translate(20px, -50%);
  width: 280px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-mid);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100;
}
.brand-preview.is-visible { opacity: 1; }
.brand-preview-media { position: absolute; inset: 0; }
.brand-preview-media img,
.brand-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brand-preview-label {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--ice);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}

/* ============================================================
   REEL STRIP — horizontal marquee of work samples
   ============================================================ */
.reel-strip {
  height: 320px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.reel-track {
  position: relative;
  height: 200px;
  width: 100%;
  user-select: none;
}

.reel-items {
  position: relative;
}

.reel-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--surface-up);
  transform-origin: center center;
  will-change: transform;
}

.reel-item img,
.reel-item video {
  height: 100%;
  width: auto;
  display: block;
  pointer-events: none;
}

/* On mobile the reel scrolls at a uniform size (no center size-curve — see the
   reel script's uniformScale branch), so the band just needs to hug the fixed
   item height with a little breathing room. The edge fade mask is dropped here:
   without the size-curve making edge items recede, a fade over the dark
   background just darkens the full-size images (reads as a dark overlay). Let
   the media stay full-brightness and clip cleanly at the edges instead. */
@media (max-width: 720px) {
  .reel-strip {
    height: 200px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .reel-track { height: 176px; }
  .reel-item  { height: 176px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-strip { height: auto; overflow-x: auto; }
  .reel-track { display: flex; align-items: center; gap: 6px; height: auto; width: max-content; }
  .reel-items { display: flex; align-items: center; gap: 6px; }
  .reel-item { position: static; transform: none !important; opacity: 1 !important; flex-shrink: 0; }
}

/* ============================================================
   BRAND PLACEHOLDER GRADIENTS — one per brand, brand-evocative
   ============================================================ */

/* Tom Ford — noir base + warm amber-gold, sensual fragrance aesthetic */
.gradient-tomford {
  background:
    radial-gradient(ellipse 70% 60% at 35% 30%, rgba(185,135,55,0.62) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 75% 70%, rgba(105,65,20,0.52) 0%, transparent 65%),
    radial-gradient(circle at 55% 18%, rgba(225,180,80,0.28) 0%, transparent 45%),
    linear-gradient(145deg, #100C06 0%, #1E1408 50%, #0A0804 100%);
}

/* Audemars Piguet — cool chrome, brushed steel, deep cool shadow */
.gradient-ap {
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, rgba(220,228,238,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(110,130,155,0.5) 0%, transparent 60%),
    radial-gradient(circle at 75% 60%, rgba(180,195,215,0.35) 0%, transparent 50%),
    linear-gradient(160deg, #1A1F2A 0%, #2E3849 40%, #14181F 100%);
}

/* Hampton Sun — warm amber, sun-bleached coral, golden hour */
.gradient-hampton {
  background:
    radial-gradient(ellipse 70% 60% at 70% 30%, rgba(255,180,80,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 25% 75%, rgba(220,90,50,0.55) 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(255,225,150,0.3) 0%, transparent 45%),
    linear-gradient(155deg, #3A1F12 0%, #6A3622 50%, #2A1408 100%);
}

/* Miu Miu — vivid magenta, electric pink, playful violet */
.gradient-miumiu {
  background:
    radial-gradient(ellipse 65% 55% at 30% 35%, rgba(255,90,165,0.75) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 75% 70%, rgba(150,50,180,0.55) 0%, transparent 65%),
    radial-gradient(circle at 60% 25%, rgba(255,180,220,0.4) 0%, transparent 45%),
    linear-gradient(140deg, #2A0B22 0%, #4A1638 50%, #160510 100%);
}

/* Gentle Monster — midnight, deep violet-blue, surreal dream */
.gradient-gentle {
  background:
    radial-gradient(ellipse 75% 65% at 60% 35%, rgba(100,85,155,0.7) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 25% 75%, rgba(50,40,90,0.6) 0%, transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(140,120,200,0.35) 0%, transparent 45%),
    linear-gradient(155deg, #0A0820 0%, #1A1538 50%, #050316 100%);
}

/* Arc'teryx — alpine cool: glacial blue + steel + icy highlight + dark mountain base */
.gradient-arcteryx {
  background:
    radial-gradient(ellipse 70% 60% at 35% 30%, rgba(140,180,210,0.65) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 80% 75%, rgba(55,95,135,0.55) 0%, transparent 65%),
    radial-gradient(circle at 60% 20%, rgba(210,225,240,0.35) 0%, transparent 45%),
    linear-gradient(160deg, #0C1622 0%, #1A2A3C 50%, #060D18 100%);
}

/* ============================================================
   WORK PAGE — media grid
   ============================================================ */
.brand-media {
  margin-top: 64px;
  min-width: 0; /* grid item of .work-stage — see note there */
}

/* ── Showcase layout ───────────────────────────────────── */
.showcase {
  display: flex;
  flex-direction: column;
  gap: 72px;
  min-width: 0;
}

/* Featured item — alternating left/right */
.sc-feature {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 48px;
  align-items: center;
  min-width: 0; /* flex item of .showcase — prevents a large image forcing this wider */
}
.sc-feature--right {
  grid-template-columns: 1fr 3fr;
}

.sc-feature-media {
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  transition: border-color 0.2s ease;
  position: relative;
  min-width: 0; /* grid item of .sc-feature — same overflow guard */
}
.sc-feature-media:hover { border-color: var(--line-mid); }
.sc-feature-media video,
.sc-feature-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Aside panels */
.sc-feature-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sc-aside-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

.sc-aside-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Scroll cue in aside — reuse base dots, orient inline */
.scroll-cue--inline {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  align-self: center;
}

.sc-aside--scroll {
  align-items: center;
  justify-content: center;
}

/* Horizontal scroll strip */
.sc-strip-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sc-strip {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  min-width: 0; /* flex item of .sc-strip-wrap — lets it shrink and scroll internally instead of forcing the page wider */
}
.sc-strip::-webkit-scrollbar { display: none; }
.sc-strip:active { cursor: grabbing; }

.sc-strip-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  /* flex-start, not center — centering an overflowing scrollable flex row pushes the
     first items off-canvas to the left with no way to scroll back to them. */
  justify-content: flex-start;
  padding-bottom: 4px;
}

.sc-strip-item {
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  position: relative;
  transition: border-color 0.2s ease;
}
.sc-strip-item:hover { border-color: var(--line-mid); }
.sc-strip-item img,
.sc-strip-item video {
  height: 200px;
  width: auto;
  display: block;
}

/* Tom Ford opener — single row, infinite marquee (JS-driven translateX, no scale) */
.tf-reel {
  position: relative;
  height: 320px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.tf-reel-track {
  position: relative;
  height: 100%;
  width: 100%;
}
.tf-reel-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 320px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  background: var(--surface-up);
  will-change: transform;
  transition: border-color 0.2s ease;
}
.tf-reel-item:hover { border-color: var(--line-mid); }
.tf-reel-item img,
.tf-reel-item video {
  height: 100%;
  width: auto;
  display: block;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tf-reel { height: auto; overflow-x: auto; }
  .tf-reel-track { display: flex; align-items: center; gap: 16px; height: auto; width: max-content; }
  .tf-reel-item { position: static; transform: none !important; flex-shrink: 0; }
}

/* Sparse treatment — 1–2 items, full-width centered */
.sc-sparse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  min-width: 0;
}
.sc-sparse-item {
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line-soft);
  position: relative;
  transition: border-color 0.2s ease;
}
.sc-sparse-item:hover { border-color: var(--line-mid); }
.sc-sparse-item video,
.sc-sparse-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sparse item paired with a caption aside */
.sc-sparse-row {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 48px;
  align-items: center;
}
.sc-sparse-row .sc-sparse-item { width: auto; }
.sc-sparse-caption {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--chrome);
}

.media-click-hint {
  position: absolute;
  bottom: 16px;
  left: 18px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  z-index: 2;
}
.media-click-hint::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.sc-feature-media:hover .media-click-hint,
.sc-strip-item:hover .media-click-hint,
.sc-sparse-item:hover .media-click-hint {
  opacity: 1;
  color: rgba(255,255,255,0.85);
}

.media-item {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-up);
  border: 1px solid var(--line-soft);
  transition: border-color 0.2s ease, transform 0.25s ease;
}

.media-item:hover {
  border-color: var(--line-mid);
  transform: scale(1.02);
}

.media-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26,111,255,0.5);
}

.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,8,13,0.35);
  color: var(--ice);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-play-icon svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.media-item:hover .media-play-icon { opacity: 1; }

/* Lightbox */
.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(7,8,13,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reserve space for the always-visible work-page nav so content never renders under it */
  padding: 100px 24px 24px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.work-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

#lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

#lightbox-content img,
#lightbox-content video {
  /* Viewport-relative cap (not %) — a % here would need the flex wrapper's "height"
     (not just max-height) to be definite, which it isn't. Matches the .work-lightbox
     padding (100px top + 24px bottom) reserved for the nav. */
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 124px);
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--surface-up2);
  border: 1px solid var(--line-mid);
  color: var(--ice);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-family: var(--f-body);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lightbox-close:hover {
  background: var(--surface-up);
  border-color: var(--line-bright);
}

.lightbox-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26,111,255,0.5);
}

/* ============================================================
   WORK PAGE — responsive
   ============================================================ */
@media (max-width: 920px) {
  .work-page {
    grid-template-columns: 1fr;
  }
  .work-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding: 32px 24px;
  }
  .brand-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .brand-pill:hover,
  .brand-pill.is-active { transform: none; }
  .work-stage { padding: 32px 24px 60px; }
  .work-sidebar-foot { display: none; }
  .brand-preview { display: none; }
  .brand-media { grid-template-columns: repeat(2, 1fr); }
  .sc-sparse-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 560px) {
  .brand-media { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION — comprehensive override
   Covers hover lifts, transforms, and pulse animations not
   already handled by the inline blocks above.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Suppress hover lifts on cards and buttons */
  .card:hover { transform: none; }
  .btn:hover  { transform: none; }
  .nav-links a.nav-cta:hover { transform: none; }

  /* Suppress pulse on the live-indicator dots */
  .hero-tag .dot,
  .work-eyebrow .dot { animation: none; opacity: 1; }

  /* Suppress the Spline scene's fade-in — just show it immediately */
  .hero-spline spline-viewer { opacity: 1; transition: none; }

  /* Suppress nav slide-in transition */
  .nav { transition: none; }

  /* Suppress work-stage fade-out during brand switching */
  .work-stage { transition: none; }

  /* Show only first slide, no animation */
  .brand-hero-slideshow .slide { animation: none; opacity: 0; }
  .brand-hero-slideshow .slide:nth-child(1) { opacity: 1; }
}