/* TBK shared stylesheet: obsidian ground, matte surfaces, and spoke identities. */

/* Latin-only, variable WOFF2 builds. The corresponding OFL 1.1 texts ship
   beside each font file under /assets/fonts/. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3/source-sans-3-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora/lora-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/jost/jost-latin-500-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------------------
   DESIGN TOKENS — TBK MASTER SITE
   ----------------------------------------------------------------------- */
:root {
  /* Grounds */
  --ground:       #0F0F0F;
  --surface:      #1A1A1A;

  /* Text */
  --sage:         #E2E9DE;

  /* Accents */
  --gold:         #FFD700;
  --purple:       #7F3FBF;  /* structural secondary only */
  --purple-label: #A87FD6;  /* AA-contrast tint of --purple for ~10px eyebrow labels (>=4.5:1 on ground and surface) */

  /* Navy link-out card identity (venture card, currently unused) */
  --bl-navy:      #1A2B4A;
  --bl-peach:     #E8A87C;
  --bl-cream:     #FAF7F2;

  /* CKoS identity — live-mirror spoke uses TBK-dark bones */
  --ckos-violet:  #8000FF;
  --ckos-cyan:    #00BFFF;

  /* MiaG directional */
  --miag-ice:     #D4E8F0;
  --miag-fog:     #F8F8F8;

  /* Typography */
  --font-display: 'Jost', 'Avenir Next', Avenir, system-ui, Arial, sans-serif;
  --font-body:    'Source Sans 3', Arial, sans-serif;

  /* Spacing base unit: 8px */
  --u1: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u6: 48px;
  --u10: 80px;

  /* Layout */
  --max-width: 1280px;
  --side-margin: 5vw;

  /* MATTE GRAIN — MONOCHROME, MULTI-SCALE, LOW-CONTRAST
     Root cause of "construction paper": raw feTurbulence outputs COLORED RGB noise.
     Fix: feColorMatrix type=saturate values=0 → pure luminance.
     Then feComponentTransfer feFuncA slope=0.55 → cuts contrast to "whisper."
     Multi-scale: fine base (bf=0.09 0.09) + faint large structure (bf=0.04 0.06).
     Anisotropy: asymmetric x/y baseFrequency → woven/brushed direction hint.
     Result register: "fine handmade paper / honed stone / pressed linen."
     Applied character B (honed stone) per texture-study.html — selected 2026-06-10. */

  /* SLATE (B — honed stone, selected 2026-06-10): main panel grain, ~28% opacity layer
     Recipe: coarse turbulence bf=0.055×0.042 (5oct seed 41) + fractalNoise bf=0.022×0.035
     (2oct seed 17) → saturate=0 → gamma amp=0.52 exp=0.75 offset=0.20. Tile 500×500px.
     Replaced Character A (fine-paper) per texture-study.html selection. */
  --grain-slate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='gs' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.055%200.042' numOctaves='5' seed='41' result='t1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022%200.035' numOctaves='2' seed='17' result='t2'/%3E%3CfeMerge result='merged'%3E%3CfeMergeNode in='t1'/%3E%3CfeMergeNode in='t2'/%3E%3C/feMerge%3E%3CfeColorMatrix type='saturate' values='0' result='grey'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' amplitude='0.52' exponent='0.75' offset='0.20'/%3E%3CfeFuncG type='gamma' amplitude='0.52' exponent='0.75' offset='0.20'/%3E%3CfeFuncB type='gamma' amplitude='0.52' exponent='0.75' offset='0.20'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gs)'/%3E%3C/svg%3E");

  /* Generated honed-charcoal replacement for small tactile surfaces. */
  --surface-texture-charcoal: url('/assets/surface-texture-charcoal.webp');

  /* CRACKLE (fine accent): smaller card surfaces, ~20% opacity layer */
  --grain-crackle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='gc' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12%200.10' numOctaves='3' seed='7' result='t1'/%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05%200.04' numOctaves='2' seed='31' result='t2'/%3E%3CfeMerge result='merged'%3E%3CfeMergeNode in='t1'/%3E%3CfeMergeNode in='t2'/%3E%3C/feMerge%3E%3CfeColorMatrix type='saturate' values='0' result='grey'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' amplitude='0.50' exponent='0.75' offset='0.24'/%3E%3CfeFuncG type='gamma' amplitude='0.50' exponent='0.75' offset='0.24'/%3E%3CfeFuncB type='gamma' amplitude='0.50' exponent='0.75' offset='0.24'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gc)'/%3E%3C/svg%3E");

  /* In-element parallax: matte elements consume --para-y (set by JS rAF scroll handler).
     Factor 0.08 means 8px drift per 100px scroll. iOS-safe: no fixed attachment. */
  --para-y: 0px;

  /* FUNCTIONAL-ONLY color — NOT one of the five locked TBK swatches. Scoped
     solely to inline form-validation error states (border/text) + the error
     status banner. Brand-reviewed and approved for ship 2026-07-18
     (brand review §1: muted warm rose, functional state only). */
  --error: #E2665C;
}

/* -----------------------------------------------------------------------
   OBSIDIAN GROUND — CLEAN GLOSS (no grain pseudo-elements)
   The ground is pure lacquer. Grain lives only on matte elements.
   Verbatim gradient stack from prototype hero-composition-v2.html .scr:
     1. gloss sweep (top-left specular highlight)
     2. purple depth (upper-right architectural bloom)
     3. warm-centered obsidian radial (approved brainstorm basis)
   ----------------------------------------------------------------------- */
body {
  background-color: #0d0c0b;  /* warm near-black fallback */
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 25%),
    linear-gradient(300deg, rgba(127,63,191,.09) 0%, transparent 45%),
    radial-gradient(130% 110% at 50% 28%, #1b1a18 0%, #0d0c0b 65%, #050505 100%);
  color: var(--sage);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* FIX 4: prevent horizontal drift — belt + suspend root cause */
  overflow-x: hidden;
}

/* BR-47 — one dark photographic texture, tuned by route rather than repeated
   as a flat grey wash. A real fixed layer is used instead of
   background-attachment so the treatment remains stable on mobile Safari. */
.page-shell {
  --page-ground-wash: rgba(7, 7, 9, 0.30);
  --page-ground-end: rgba(5, 5, 7, 0.54);
  --page-ground-bloom: rgba(127, 63, 191, 0.10);
  isolation: isolate;
}

.page-ground {
  display: none;
}

.page-shell > .page-ground {
  display: block;
  position: fixed;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, var(--page-ground-wash), var(--page-ground-end)),
    radial-gradient(90% 70% at 18% 14%, var(--page-ground-bloom), transparent 66%),
    url('/assets/page-texture-mineral.webp');
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(1.08) brightness(1.06);
}

.page-shell > main,
.page-shell > .footer {
  position: relative;
  z-index: 1;
}

.page-shell--home { --page-ground-wash: rgba(8, 7, 11, 0.28); --page-ground-bloom: rgba(127, 63, 191, 0.20); }
.page-shell--work { --page-ground-wash: rgba(12, 10, 8, 0.34); --page-ground-bloom: rgba(255, 215, 0, 0.12); }
.page-shell--services { --page-ground-wash: rgba(7, 10, 13, 0.34); --page-ground-bloom: rgba(80, 144, 176, 0.18); }
.page-shell--ventures { --page-ground-wash: rgba(10, 7, 13, 0.32); --page-ground-bloom: rgba(127, 63, 191, 0.21); }
.page-shell--sas { --page-ground-wash: rgba(7, 9, 13, 0.32); --page-ground-bloom: rgba(80, 144, 176, 0.18); }
.page-shell--memory { --page-ground-wash: rgba(4, 8, 13, 0.34); --page-ground-end: rgba(5, 8, 13, 0.64); --page-ground-bloom: rgba(80, 144, 176, 0.20); }
.page-shell--about { --page-ground-wash: rgba(7, 11, 9, 0.38); --page-ground-bloom: rgba(108, 140, 112, 0.16); }
.page-shell--contact { --page-ground-wash: rgba(13, 7, 9, 0.40); --page-ground-bloom: rgba(154, 74, 92, 0.14); }

/* MiaG uses its approved hero image as the full-page photographic layer. The
   canvas remains beneath it as the final fallback, so every route shares the
   same bottom-most material surface. */
.page-shell--memory > .page-ground {
  background-image:
    linear-gradient(180deg, var(--page-ground-wash), var(--page-ground-end)),
    radial-gradient(90% 70% at 18% 14%, var(--page-ground-bloom), transparent 66%),
    url('/assets/miag-hero-desktop.webp'),
    url('/assets/page-texture-mineral.webp');
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
}

@media (max-width: 720px) {
  .page-shell--memory > .page-ground {
    background-image:
      linear-gradient(180deg, var(--page-ground-wash), var(--page-ground-end)),
      radial-gradient(90% 70% at 18% 14%, var(--page-ground-bloom), transparent 66%),
      url('/assets/miag-hero-mobile.webp'),
      url('/assets/page-texture-mineral.webp');
  }
}

.page-shell .section--surface {
  background-color: rgba(20, 20, 22, 0.70);
}

.page-about {
  --font-body: 'Lora', Georgia, serif;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* BR-01: `clip` guards h-drift WITHOUT making html/body scroll containers, which is
   what killed sticky nav. `hidden` above stays as the pre-Safari-16 fallback. */
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* -----------------------------------------------------------------------
   OBSIDIAN GLOW — GOLD BREATH ONLY (z:10000)
   Clean gold exhale from lower-right; counterweight to the purple depth.
   pointer-events:none — never intercepts clicks/touches.
   ----------------------------------------------------------------------- */
#obsidian-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  background:
    radial-gradient(ellipse 55% 35% at 85% 95%, rgba(255,215,0,0.05) 0%, transparent 70%);
}

/* -----------------------------------------------------------------------
   MATTE SURFACE MIXIN
   Applied to any element that should have baked-in grain.
   Grain is layered INTO the element's background-image stack.
   background-blend-mode:overlay blends it within the element only.
   NO mix-blend-mode on the element — that would bleed through stacking.

   Two texture classes:

   .mat-slate — big panels, cards (coarse granite/slate grain)
     background-image: var(--grain-slate), <element gradient or color>
     background-blend-mode: overlay
     background-size: 380px 380px, cover

   .mat-crackle — small craft accents (fine analog crackle grain)
     background-image: var(--grain-crackle), <element gradient or color>
     background-blend-mode: overlay
     background-size: 280px 280px, cover

   These are combined with per-element background-color as the base.
   The trick: when background-image has multiple layers AND background-color
   is set, the blend operates between layers and ultimately over the color.
   background-blend-mode applies per-layer, so:
     layer 0 (grain SVG) blends overlay onto layer 1 (gradient or solid)
   This keeps grain strictly within the element's own paint.
   ----------------------------------------------------------------------- */

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

a {
  color: var(--sage);
  text-decoration: none;
  transition: color 150ms ease;
}

a:hover {
  color: var(--gold);
}

img {
  max-width: 100%;
  display: block;
}

/* -----------------------------------------------------------------------
   LAYOUT HELPERS
   ----------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-margin);
}

.section {
  padding: var(--u10) 0;
}

.section--surface {
  background-color: var(--surface);
}

/* -----------------------------------------------------------------------
   GLOBAL NAV — hamburger menu on ≤720px
   Desktop nav unchanged (all 5 links visible).
   Mobile: sigil mark + two-line menu glyph → full-screen overlay.
   ----------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10001;
  background-color: rgba(15, 15, 15, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(226, 233, 222, 0.06);
  padding: var(--u2) 0;
}

.nav__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u4);
}

/* Sigil mark — replaces Zapfino text */
.nav__sigil {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}

.nav__sigil img {
  height: 96px;
  width: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Hide legacy wordmark class if any remain */
.nav__wordmark { display: none; }

/* Desktop links */
.nav__links {
  display: flex;
  gap: var(--u4);
  list-style: none;
}

.nav__links a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--gold);
  transition: width 150ms ease;
}

.nav__links a:hover::after,
.nav__links a.active::after {
  width: 100%;
}

.nav__links a:hover { color: var(--sage); }
.nav__links a.active { color: var(--gold); }

/* -----------------------------------------------------------------------
   HAMBURGER GLYPH — two thin gold lines (minimal, art-book)
   Hidden on desktop; shown on mobile (≤720px).
   ----------------------------------------------------------------------- */
.nav__menu-btn {
  display: none;           /* desktop: hidden */
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav__menu-btn span {
  display: block;
  height: 1px;
  background-color: var(--gold);
  transition: width 150ms ease;
}

.nav__menu-btn span:nth-child(1) { width: 24px; }
.nav__menu-btn span:nth-child(2) { width: 16px; }  /* asymmetric — art-book */

.nav__menu-btn:hover span { width: 24px; }
.nav__menu-btn[aria-expanded="true"] span:nth-child(1) { width: 20px; }
.nav__menu-btn[aria-expanded="true"] span:nth-child(2) { width: 20px; }

/* -----------------------------------------------------------------------
   MOBILE NAV OVERLAY — full-screen, art-book vertical menu
   Covers entire viewport; z above everything (z:20000).
   Body scroll locked while open via JS (overflow:hidden on <body>).
   One-word items, big Avenir Next, generous tap targets ≥44px.
   ----------------------------------------------------------------------- */
.nav-overlay {
  display: none;           /* JS sets display:flex when open */
  position: fixed;
  inset: 0;
  z-index: 20000;
  background-color: #0d0c0b;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 30%),
    radial-gradient(130% 110% at 50% 28%, #1b1a18 0%, #0d0c0b 65%, #050505 100%);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--side-margin);
}

.nav-overlay.is-open {
  display: flex;
}

/* Close button — top-right of the overlay */
.nav-overlay__close {
  position: absolute;
  top: 20px;
  right: var(--side-margin);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-overlay__close::before {
  content: '×';
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
}

.nav-overlay__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.nav-overlay__links li {
  border-bottom: 1px solid rgba(226, 233, 222, 0.06);
}

.nav-overlay__links li:first-child {
  border-top: 1px solid rgba(226, 233, 222, 0.06);
}

.nav-overlay__links a {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sage);
  text-decoration: none;
  min-height: 72px;      /* generous tap target well above 44px */
  padding: var(--u2) 0;
  transition: color 120ms ease;
  position: relative;
}

.nav-overlay__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background-color: var(--gold);
  transition: width 200ms ease;
}

.nav-overlay__links a:hover,
.nav-overlay__links a.active {
  color: var(--gold);
}

.nav-overlay__links a:hover::after,
.nav-overlay__links a.active::after {
  width: 100%;
}

/* Footer inside overlay — small social links */
.nav-overlay__footer {
  position: absolute;
  bottom: 28px;
  left: var(--side-margin);
  right: var(--side-margin);
  display: flex;
  gap: var(--u4);
  flex-wrap: wrap;
}

.nav-overlay__footer a {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.55;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: opacity 120ms ease, color 120ms ease;
}

.nav-overlay__footer a:hover {
  opacity: 0.9;
  color: var(--gold);
}

/* -----------------------------------------------------------------------
   GLOBAL FOOTER
   ----------------------------------------------------------------------- */
.footer {
  background-color: var(--ground);
  border-top: 1px solid rgba(226, 233, 222, 0.06);
  padding: var(--u6) 0 var(--u4);
  margin-top: var(--u10);
  position: relative;
  z-index: 1;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--side-margin);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--u4);
}

.footer__col-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-label);
  margin-bottom: var(--u2);
}

.footer__col a {
  display: block;
  font-size: 0.8rem;
  color: var(--sage);
  opacity: 0.65;
  margin-bottom: var(--u1);
  transition: opacity 150ms ease, color 150ms ease;
}

.footer__col a:hover {
  opacity: 1;
  color: var(--gold);
}

.footer__col--socials a {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer__col--socials a::before {
  content: '↗';
  font-size: 0.6rem;
  opacity: 0.4;
}

.footer__legal {
  max-width: var(--max-width);
  margin: var(--u4) auto 0;
  padding: var(--u3) var(--side-margin) 0;
  border-top: 1px solid rgba(226, 233, 222, 0.05);
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--sage);
  opacity: 0.6;
}

/* -----------------------------------------------------------------------
   ECLIPSE HERO
   Recomposition: sigil ABOVE the waveform (separated, both on screen).
   Sigil: upper ~third of viewport. Wave field: lower ~half.
   Entrance choreography handled by JS on homepage.html.
   Levitation continues after entrance as before.
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;    /* fallback — browsers without svh/dvh */
  min-height: 100svh;   /* small viewport — no URL-bar reflow jump */
  min-height: 100dvh;   /* B4: dynamic viewport progressive enhancement */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  /* selection hygiene: the hero is an animation surface, not
     a text region. Suppress text-selection so a fingerpress/drag can't select
     "the entire animation area". The track buttons remain clickable. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Waveform canvas — tight against sigil's resting crest line */
.hero__wave-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* Canvas starts invisible; entrance JS fades layers in */
}

#hero-canvas {
  position: absolute;
  /* FULL-BLEED HERO CANVAS (spatial cohesion).
     B2 fixed the TOP clip by extending the band upward (top:28% height:60%),
     but the band still ENDED at viewport 88% → the wave TROUGH (and any
     downward touch deflection) clipped at the band's bottom edge, behind the
     track-button bar = the "footer menu bar across the bottom of the hero"
     + "animation in its own window". Fix: the canvas BITMAP now fills the
     ENTIRE hero (inset:0) — exactly like #hero-dust — so crests AND troughs
     render anywhere a wave pixel wants to draw and all elements share one
     space. The DRAWING MIDLINE (baseMidY = H * MID_FRAC, MID_FRAC≈0.712) keeps
     the RESTING wave at the same viewport position (~71%) as accepted; only
     the bitmap grew. Top is bounded by CREST_CLAMP_PX (can never leave bitmap);
     bottom is now the true hero floor (no band edge to clip against).
     z-index:1 — under sigil (z:3) and track buttons (z:10), over tint (z:0).
     <canvas> is a REPLACED element: inset:0 alone does NOT stretch it; explicit
     width/height fill the hero box. */
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;    /* hidden until entrance choreography completes */
}

/* Entrance state — added by JS after choreography completes */
#hero-canvas.entrance-done {
  opacity: 1;
}

/* Static fallback waveform — prefers-reduced-motion */
.hero__static-wave {
  display: none;
  position: absolute;
  top: 52%;   /* matches new canvas top */
  left: 0;
  width: 100%;
  height: 36%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q60 70 120 100 Q180 130 240 100 Q300 70 360 95 Q420 120 480 90 Q540 60 600 100 Q660 140 720 100 Q780 60 840 100 Q900 140 960 105 Q1020 70 1080 100 Q1140 130 1200 100' stroke='%23E2E9DE' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* Hero sigil — JUST above the waveform crest line.
   Repositioned from top:10% → top:22% so it floats tight above the wave band.
   z-index 3 (above canvas z-index 1).
   Starts invisible; entrance JS fades in first, then canvas layers.
   After entrance: levitation + buoyancy spring both active.
   Buoyancy offset applied via JS as CSS transform translateY on top of lev. */
.hero__sigil-wrap {
  position: absolute;
  left: 50%;
  top: 22%;          /* tighter to wave — sigil hovers just above crest */
  transform: translateX(-50%);
  z-index: 3;
  width: 64%;
  max-width: 520px;
  opacity: 0;        /* hidden until entrance choreography */
  /* No animation initially — JS adds .entrance-done class after entrance */
  will-change: transform;  /* promote for buoyancy spring compositing */
}

/* Entrance done state — levitation resumes.
   animation uses translateY only (margin-top retired).
   Buoyancy JS adds additional translateY on top via inline style.
   We apply both via a CSS custom property + JS-driven var:
     --lev-y  = idle levitation offset (animated by keyframe)
     --buoy-y = buoyancy spring offset (written by JS each RAF frame)
   Combined via transform: translateX(-50%) translateY(calc(var(--lev-y,0px) + var(--buoy-y,0px)))
   BUT: CSS keyframe can't animate a custom property on the element itself cleanly
   in all browsers. Simpler solution used: levitation runs as JS-controlled sine
   after entrance (same RAF loop), combined with buoyancy in drawFrame().
   The .entrance-done class just removes opacity:0 and enables will-change. */
.hero__sigil-wrap.entrance-done {
  opacity: 1;
}

.hero__sigil-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,0.7));
  /* the sigil renders like an image that iOS lets you
     press-drag / long-press-callout / select. Kill all three. The sigil is
     NOT a tap target (gyro permission is requested from the track buttons,
     not the sigil), so pointer-events:none is safe and also lets touch-warp
     gestures pass THROUGH the sigil to the canvas underneath. */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* levitation is now JS-driven (combined with buoyancy spring in same RAF).
   Keeping keyframe definition for reduced-motion fallback reference only. */
@keyframes sigil-lev {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50%       { transform: translateX(-50%) translateY(-14px); }
}

/* -----------------------------------------------------------------------
   IN-ELEMENT PARALLAX — matte surfaces only
   iOS-safe: rAF handler writes --para-y on :root; consumed here as
   background-position-y offset on the grain SVG layer.
   Factor: grain layer shifts at ~8% of scroll (subtle material depth).
   The element's own gradient layer stays fixed — only grain drifts.
   ----------------------------------------------------------------------- */
.honors,
.work-teaser,
.routing-door,
.pillar,
.work-project-card,
.prose-card,
.form-card,
.picker-card,
.cta-form-card,
.venture-card--dark,
.venture-card--navy,
.venture-card--miag,
.venture-card--ckos,
.ckos-testimonial,
.ckos-program-card,
.linkout-block {
  /* in-element parallax — grain layer drifts subtly relative to element.
     --para-y = scrollY (px), set by JS rAF handler.
     background-position is relative to the element's own box.
     Since the element scrolls with the page at rate 1.0, and we shift the grain
     background-position by (para-y * 0.08), the net visual drift of the grain
     within the element is 8% of scroll distance. Subtle material depth.
     Factor 0.08 = ~8px per 100px scroll. iOS-safe: no fixed attachment. */
  background-position: calc(50% + var(--para-y, 0px) * 0.08) calc(50% + var(--para-y, 0px) * 0.08),
                       0% 0%;
}

/* Reduced-motion: static, no choreography */
@media (prefers-reduced-motion: reduce) {
  .hero__sigil-wrap {
    animation: none !important;
    opacity: 1 !important;  /* appear immediately, no entrance */
  }
  #hero-canvas {
    display: none;
  }
  .hero__static-wave {
    display: block;
    opacity: 1;
  }
  .honors,
  .work-teaser,
  .routing-door,
  .pillar,
  .work-project-card,
  .prose-card,
  .form-card,
  .picker-card,
  .cta-form-card,
  .venture-card--dark,
  .venture-card--navy,
  .venture-card--miag,
  .venture-card--ckos,
  .ckos-testimonial,
  .ckos-program-card,
  .linkout-block {
    background-position: 50% 50%, 0% 0%;
  }
}

/* -----------------------------------------------------------------------
   HONORS SECTION — translucent room over the route-wide canvas
   ----------------------------------------------------------------------- */
.honors {
  background-color: rgba(20, 20, 22, 0.70);
  background-image: linear-gradient(180deg, rgba(12,13,16,0.10), rgba(12,13,16,0.34));
  position: relative;
  overflow: hidden;
}

/* Faint purple ambient — top-left decorative glow (remains as ::before) */
.honors::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 40%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(127,63,191,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.honors__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--u10) var(--side-margin);
  display: flex;
  gap: var(--u6);
  align-items: flex-start;
  position: relative;
}

/* Vertical "HONORS" label — editorial asymmetry
   FIX 4: contains to a fixed-width column to prevent overflow */
.honors__vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
  flex-shrink: 0;
  width: 20px;   /* FIX 4: explicit width containing the rotated label */
  align-self: stretch;
  display: flex;
  align-items: center;
  overflow: hidden;   /* FIX 4: contain within column */
}

.honors__grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;    /* FIX 4: flex child can shrink below content width */
}

.honors__row {
  display: flex;
  align-items: center;
  gap: var(--u2);
  min-height: 132px;
  padding: var(--u3);
  border-bottom: 1px solid rgba(226, 233, 222, 0.07);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.honors__row::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(7, 7, 8, 0.84) 0%, rgba(7, 7, 8, 0.62) 48%, rgba(7, 7, 8, 0.34) 100%);
  pointer-events: none;
}

.honors__media {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-image: var(--honors-image);
  background-size: cover;
  background-position: center;
  opacity: 0.72;
  transform: translate3d(0, var(--image-tile-shift, 0px), 0) scale(1.02);
  will-change: transform;
}

.honors__row:last-child {
  border-bottom: none;
}

.honors__num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 0.92;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  min-width: 2ch;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

.honors__name {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.8;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82);
}

.work-teasers__cta {
  margin-top: var(--u4);
  text-align: center;
}

.work-teasers__cta a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  opacity: 0.85;
}

/* honors__body wraps the counter grid + attribution caption so the
   caption stacks BELOW the counters (honors__inner is a flex row: label | body). */
.honors__body {
  flex: 1;
  min-width: 0;
}

/* honors caption (pick e): duo attribution beneath the counters. */
.honors__caption {
  margin-top: var(--u4);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--sage);
  opacity: 0.55;
}

/* visually-hidden utility (F8: SEO/a11y h1 on index + memory).
   Zero visual footprint; readable by assistive tech + crawlers. Standard recipe. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------
   A11Y — skip link + site-wide focus-visible ring (palette-consistent)
   ----------------------------------------------------------------------- */
/* Skip-to-main-content: off-screen until it receives keyboard focus, then it
   pins to the top-left over the sticky nav (z above nav's 10001). */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--u2);
  z-index: 10002;
  padding: var(--u1) var(--u2);
  background-color: var(--gold);
  color: var(--ground);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  border-radius: 3px;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus {
  top: var(--u2);
  color: var(--ground);
}

/* Site-wide keyboard focus ring — gold, matches the interactive-hover accent.
   :focus-visible only paints for keyboard/AT focus, so pointer clicks stay clean.
   Form inputs keep their own gold-border focus treatment (higher specificity). */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}
/* main landmark is programmatically focusable (skip-link target) but is not an
   interactive control — suppress its focus ring so the skip does not paint one. */
#main-content:focus,
#main-content:focus-visible {
  outline: none;
}

/* -----------------------------------------------------------------------
   WORK TEASERS — MATTE surfaces (granite/slate grain)
   ----------------------------------------------------------------------- */
.work-teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--u3);
  margin-top: var(--u4);
}

.work-teaser {
  /* MATTE: slate grain baked in */
  background-image:
    var(--grain-slate),
    linear-gradient(to top, rgba(10,10,10,0.90) 0%, rgba(30,28,26,0) 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, 100% 100%;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--u3);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 200ms ease;
  text-decoration: none;
  color: var(--sage);
}

.work-teaser:hover {
  box-shadow: 0 0 0 1px var(--gold);
  color: var(--sage);
}

.work-teaser__label {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.work-teaser__category {
  position: relative;
  font-size: 0.7rem;
  color: var(--sage);
  opacity: 0.55;
  margin-top: 4px;
}

.work-teaser__hover-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--gold);
  transition: width 200ms ease;
}

.work-teaser:hover .work-teaser__hover-line {
  width: 100%;
}

/* -----------------------------------------------------------------------
   ROUTING DOORS — MATTE panels (slate grain, more dimensional)
   ----------------------------------------------------------------------- */
.routing-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: rgba(226, 233, 222, 0.06);
  margin-top: var(--u10);
}

.routing-door {
  /* MATTE: slate grain baked in */
  background-image:
    var(--grain-slate),
    linear-gradient(160deg, #1e1c1a 0%, #141312 100%);
  background-color: var(--ground);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  padding: var(--u10) var(--side-margin);
  display: flex;
  flex-direction: column;
  gap: var(--u3);
  transition: background-color 200ms ease;
  text-decoration: none;
  color: var(--sage);
}

.routing-door:hover {
  background-color: #1a1816;   /* slightly lighter warm dark */
  color: var(--sage);
}

.routing-door__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-label);
}

.routing-door__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--sage);
  line-height: 1.05;
}

.routing-door__desc {
  font-size: 0.85rem;
  color: var(--sage);
  opacity: 0.55;
  line-height: 1.6;
  max-width: 320px;
}

.routing-door__arrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: var(--u1);
  position: relative;
}

.routing-door__arrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 0;
  background-color: var(--gold);
  transition: width 200ms ease;
}

.routing-door:hover .routing-door__arrow::after {
  width: 32px;
}

/* -----------------------------------------------------------------------
   QUIET CLOSE
   ----------------------------------------------------------------------- */
.quiet-close {
  text-align: center;
  padding: var(--u10) var(--side-margin);
}

/* BR-07: the case-study return path shares this voice by selector rather than
   duplicating it; only its own geometry (top of shell, left, tight) differs. */
.quiet-close a,
.work-return a {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  color: var(--sage);
  opacity: 0.5;
  border-bottom: 1px solid rgba(226, 233, 222, 0.15);
  padding-bottom: 2px;
  transition: opacity 150ms ease, color 150ms ease;
}

.quiet-close a:hover,
.work-return a:hover {
  opacity: 1;
  color: var(--gold);
}

.work-return {
  margin-bottom: var(--u4);
}

/* -----------------------------------------------------------------------
   /WORK/ — PORTFOLIO GRID — MATTE cards
   ----------------------------------------------------------------------- */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u1);
  margin-bottom: var(--u4);
}

.work-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--u2);
  margin-bottom: var(--u4);
}

.work-lane {
  border-left: 1px solid rgba(127, 63, 191, 0.82);
  padding: var(--u2);
  background: rgba(15, 15, 15, 0.54);
}

.work-lane__name {
  color: var(--purple-label);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.work-lane__subhead {
  color: var(--sage);
  font-size: 1rem;
  line-height: 1.55;
  margin-top: 6px;
}

/* BR-16: pill → sharp chip (999px → 0); min-height + inline-flex clear the 44px tap
   floor (L4) independent of inherited line-height. Size/tracking/state unchanged. */
.work-filter {
  appearance: none;
  border: 1px solid rgba(226, 233, 222, 0.34);
  background: transparent;
  color: var(--sage);
  border-radius: 0;
  padding: 9px 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.work-filter:hover,
.work-filter:focus-visible,
.work-filter.is-active {
  border-color: var(--gold);
  color: var(--gold);
}

.work-filter:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--u3);
}

.work-project-card {
  /* MATTE: slate grain baked in */
  background-image:
    var(--grain-slate),
    linear-gradient(to top, rgba(10,10,10,0.90) 0%, rgba(30,28,26,0) 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, 100% 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--u4);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: var(--sage);
}

.work-project-card__hover-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: var(--gold);
  transition: width 220ms ease;
}

.work-project-card:hover .work-project-card__hover-bar {
  width: 100%;
}

.work-project-card__meta {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.3;
  margin-bottom: var(--u2);
}

.work-project-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sage);
  line-height: 1.2;
}

.work-project-card__summary {
  font-size: 0.75rem;
  color: var(--sage);
  opacity: 0.72;
  margin-top: var(--u2);
  line-height: 1.65;
}

.work-project-card__action {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin-top: var(--u3);
}

.work-empty {
  max-width: 680px;
  margin-top: var(--u3);
  line-height: 1.8;
}

/* BR-03: sharp corner only — .prose-card material (grain, border, padding, shadow)
   survives in full; compound selector beats the 12px radius on specificity. */
.work-empty.prose-card {
  border-radius: 0;
}

.work-empty[hidden] {
  display: none;
}

/* -----------------------------------------------------------------------
   /SERVICES/ — PILLARS (MATTE) + PROOF STRIP (CRACKLE accent)
   ----------------------------------------------------------------------- */
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u4);
  margin-bottom: var(--u10);
}

.proof-callout {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: flex-start;
  gap: var(--u2);
}

/* Gold left-border credential blocks — crackle grain texture */
.proof-callout__rule {
  width: 3px;
  min-height: 48px;
  background-color: var(--gold);
  flex-shrink: 0;
  margin-top: 4px;
  /* MATTE crackle: texture the gold rule itself */
  background-image:
    var(--grain-crackle),
    linear-gradient(to bottom, #FFD700, #E8B800);
  background-blend-mode: overlay, normal;
  background-size: 280px 280px, cover;
}

.proof-callout__text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--sage);
  opacity: 0.65;
  text-transform: uppercase;
}

.proof-callout__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sage);
  display: block;
  margin-bottom: 4px;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--u3);
  margin-top: var(--u4);
}

.pillar {
  /* MATTE: slate grain baked in */
  background-image:
    var(--grain-slate),
    linear-gradient(160deg, #1e1c1b 0%, #141313 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  padding: var(--u6) var(--u4);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: var(--u3);
}

.pillar__body {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--sage);
  opacity: 0.8;
}

.pillar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u1);
  margin-top: var(--u3);
}

.pillar__tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-label);
  border: 1px solid var(--purple-label);
  padding: 3px 8px;
  opacity: 0.75;
}

.cta-block {
  text-align: center;
  padding: var(--u10) 0;
}

.cta-button {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  padding: var(--u2) var(--u6);
  background-color: var(--ground);
  transition: background-color 150ms ease, color 150ms ease;
  text-decoration: none;
}

.cta-button:hover {
  background-color: var(--gold);
  color: var(--ground);
}

.client-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u4);
  align-items: center;
  margin-top: var(--u6);
}

.client-logo-placeholder {
  width: 120px;
  height: 48px;
  background-color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.25;
}

/* -----------------------------------------------------------------------
   /VENTURES/ — HUB DIRECTORY + SPOKE CARDS (MATTE)
   ----------------------------------------------------------------------- */
.ventures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--u3);
}

.venture-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--u6) var(--u4);
  min-height: 280px;
  position: relative;
  text-decoration: none;
  transition: box-shadow 200ms ease;
}

.venture-card:hover {
  box-shadow: 0 0 0 1px rgba(226, 233, 222, 0.2);
}

/* TBK-dark base card — MATTE slate grain */
.venture-card--dark {
  background-image:
    var(--grain-slate),
    linear-gradient(160deg, #1d1c1b 0%, #141312 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  color: var(--sage);
}

/* Navy link-out card — MATTE slate grain (navy ground). Selector renamed and the
   venture name removed 2026-07-20 (that name is proprietary and must not ship in
   any surface, stylesheet included). Rules kept so the card can be restored. */
.venture-card--navy {
  background-image:
    var(--grain-slate),
    linear-gradient(160deg, #1f2f48 0%, #141f32 100%);
  background-color: var(--bl-navy);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  color: var(--bl-cream);
}

.venture-card--navy .venture-card__name { color: var(--bl-cream); }
.venture-card--navy .venture-card__descriptor { color: var(--bl-cream); opacity: 0.8; }
.venture-card--navy .venture-card__action { color: var(--bl-peach); }
.venture-card--navy:hover { box-shadow: 0 0 0 1px var(--bl-peach); }

/* MiaG cooler/lighter card — MATTE crackle (lighter base, finer grain) */
.venture-card--miag {
  background-image:
    var(--grain-crackle),
    linear-gradient(160deg, #d6dfe8 0%, #c8d5e0 100%);
  background-color: #D0DCE6;
  background-blend-mode: overlay, normal;
  background-size: 280px 280px, cover;
  color: #1A2030;
}

.venture-card--miag .venture-card__name { color: #1A2030; }
.venture-card--miag .venture-card__descriptor { color: #1A2030; opacity: 0.7; }
.venture-card--miag .venture-card__action { color: #5090B0; }
.venture-card--miag:hover { box-shadow: 0 0 0 1px #5090B0; }

/* CKoS card — MATTE slate grain (TBK-dark) */
.venture-card--ckos {
  background-image:
    var(--grain-slate),
    linear-gradient(160deg, #1d1c1b 0%, #141312 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  color: var(--sage);
}

.venture-card--ckos .venture-card__name { color: var(--sage); }
.venture-card--ckos .venture-card__action { color: var(--gold); }
.venture-card--ckos .venture-card__accent-dot { background-color: var(--gold); }
.venture-card--ckos:hover { box-shadow: 0 0 0 1px var(--gold); }

.venture-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--u2);
}

.venture-card__logo {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

.venture-card__accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gold);
  flex-shrink: 0;
  margin-top: 4px;
}

.venture-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sage);
  margin-top: var(--u3);
  line-height: 1.2;
}

.venture-card__descriptor {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--sage);
  opacity: 0.7;
  margin-top: var(--u2);
  flex-grow: 1;
}

/* BR-31: the three "Explore →" lines were removed, so this rule (and its variant
   colour rules above) match no element today. Kept, like the dormant --navy block:
   documented card anatomy, restorable, and deleting them changes nothing visually. */
.venture-card__action {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-top: var(--u4);
  display: flex;
  align-items: center;
  gap: var(--u1);
}

.venture-card__external-icon {
  font-size: 0.6rem;
  opacity: 0.6;
}

.venture-card__directional-flag {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5090B0;
  border: 1px solid #5090B0;
  padding: 2px 6px;
  margin-top: var(--u2);
  opacity: 0.7;
}

/* -----------------------------------------------------------------------
   /VENTURES/SCORE-A-SCORE/ — ROSTER + AURA STREAMING
   ----------------------------------------------------------------------- */
.sas-intro {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.sas-roster-card h3,
.sas-artist-card h3 {
  font-family: var(--font-display);
  color: var(--sage);
}

.sas-intro a,
.sas-catalog-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(255, 215, 0, 0.45);
  text-underline-offset: 3px;
}

.sas-catalog-link--center {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.sas-roster-grid,
.sas-stream-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--u3);
  margin-top: var(--u4);
}

.sas-roster-card h3,
.sas-artist-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
}

.sas-card-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-bottom: var(--u2) !important;
}

.sas-catalog-link {
  display: inline-block;
  margin-top: var(--u4);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
}

.sas-artist-card {
  min-width: 0;
  border-color: rgba(127, 63, 191, 0.76);
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--u3);
  align-items: center;
}

.sas-artist-card__art {
  width: 132px;
  height: 132px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(226, 233, 222, 0.12);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}

.sas-artist-card__body {
  min-width: 0;
}

.sas-artist-card h3 {
  margin-bottom: var(--u2);
}

.sas-platform-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sas-platform-link {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 0.68rem;
}

.sas-roster-card.image-tile {
  padding: 0;
}

.sas-roster-card.image-tile .image-tile__content {
  min-height: 240px;
  justify-content: flex-end;
  padding: var(--u3);
}

.sas-roster-card .sas-card-label,
.sas-roster-card h3 {
  width: 100%;
  align-self: center;
  text-align: center;
}

.sas-roster-card .sas-catalog-link {
  align-self: flex-start;
  text-align: left;
}

/* BR-42 — each Roster Alias tile carries its own logo/wordmark as tile media.
   The primitive's fit prop is a hook class only, so contain is authored here,
   the same arrangement .miag-hero uses. Three departures from the shared media
   layer, each load-bearing:
   1. A FIXED band, not the -12% bleed. The shared inset would push a contained
      mark past the overflow-hidden edge; a percentage bottom inset would also
      tie the band to card height. Fixed top/left/width/height keeps the mark
      clear of the label/name/link stack, which starts ~105px down.
   2. Centred, matching the label and roster name while the track link retains
      its left-aligned reading edge.
   3. STATIC. The bounded parallax exists to give photographic fields depth; a
      logotype that drifts against its own card reads as a slipped layer, and
      the ±28px travel is enough to walk a mark into the copy below it. */
.sas-roster-card.image-tile .image-tile__media {
  inset: 20px auto auto 50%;
  width: min(58%, 210px);
  height: 68px;
  background-size: contain;
  background-position: center;
  transform: translateX(-50%);
  will-change: auto;
}

/* Underlay off means the shade is the only thing between copy and ground. The
   shared 0.30 top stop veils a mark that has no photograph to sit on, so this
   clears the band and keeps the weight under the copy instead. */
.sas-roster-card.image-tile .image-tile__shade {
  background: linear-gradient(
    180deg,
    rgba(5, 5, 8, 0) 0%,
    rgba(5, 5, 8, 0) 34%,
    rgba(5, 5, 8, 0.55) 68%,
    rgba(5, 5, 8, 0.72) 100%);
}

.sas-hero.image-tile {
  width: 100%;
  min-height: 420px;
  height: min(50vw, 720px);
  padding: 0;
  border-right: 0;
  border-left: 0;
  background-color: #0c0d11;
}

.sas-hero.image-tile .image-tile__media {
  inset: -3%;
  background-position: center 50%;
}

.sas-hero.image-tile .image-tile__shade {
  background: linear-gradient(180deg, rgba(5, 5, 8, 0.08), rgba(5, 5, 8, 0.36));
}

@media (max-width: 720px) {
  .sas-roster-grid,
  .sas-stream-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sas-hero.image-tile {
    min-height: 54vh;
    height: auto;
  }

  .sas-hero.image-tile .image-tile__media {
    inset: -8%;
    background-position: center 58%;
  }
}

/* -----------------------------------------------------------------------
   SECTION HEADERS
   ----------------------------------------------------------------------- */
.section-header {
  margin-bottom: var(--u6);
}

.section-header__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-label);
  margin-bottom: var(--u2);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--sage);
  line-height: 1.1;
}

.section-header__body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--sage);
  opacity: 0.65;
  margin-top: var(--u3);
  max-width: 600px;
}

/* -----------------------------------------------------------------------
   PAGE TITLES
   ----------------------------------------------------------------------- */
.page-title-block {
  padding: var(--u10) 0 var(--u6);
}

.page-title-block__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-label);
  margin-bottom: var(--u2);
}

.page-title-block__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 800;
  color: var(--sage);
  line-height: 1.0;
}

.page-title-block__sub {
  font-size: 0.9rem;
  color: var(--sage);
  opacity: 0.55;
  margin-top: var(--u3);
  max-width: 520px;
  line-height: 1.65;
}

/* -----------------------------------------------------------------------
   SHARED LIFTED PROSE CARD
   About, Contact and CKoS share one matte reading surface. Paragraph rhythm
   belongs to the primitive so prose never collapses into an unbroken block.
   ----------------------------------------------------------------------- */
.prose-card {
  background-image:
    var(--grain-slate),
    linear-gradient(160deg, #0F0F0F 0%, #0F0F0F 100%);
  background-color: var(--ground);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  border: 1px solid transparent;
  border-radius: 12px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.34);
  padding: calc(28px - 1px) calc(var(--u4) - 1px);
  color: var(--sage);
}

.prose-card--compact {
  padding: calc(var(--u3) - 1px);
}

.prose-card p {
  margin: 0;
  color: var(--sage);
  line-height: 1.8;
}

.prose-card p + p {
  margin-top: var(--u4);
}

/* -----------------------------------------------------------------------
   CKoS LIVE-MIRROR SPOKE
   ----------------------------------------------------------------------- */
/* A3 EXCEPTION (two-bucket assets): the three ckos-hero-*.webp encodes STAY in
   public/assets/ on plain /assets/... paths. This stylesheet is a static file in
   public/ — CSS url() cannot resolve astro:assets src/ imports, so these
   backgrounds are intentionally OUTSIDE the Sharp pipeline. Do NOT "fix" by
   moving them to src/assets. (may later revisit via inline getImage vars.) */
.ckos-page-shell {
  position: relative;
  isolation: isolate;
}

.ckos-page-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #0A0A10;
  background-image:
    linear-gradient(to bottom, rgba(10,10,16,0.20) 0%, rgba(10,10,16,0.64) 58%, rgba(10,10,16,0.88) 100%),
    url('/assets/ckos-hero-desktop.webp');
  background-size: cover;
  background-position: center top;
  pointer-events: none;
}

.ckos-page-layer {
  position: relative;
  z-index: 1;
}

.ckos-hero {
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  padding: var(--u10) var(--side-margin) var(--u6);
}

/* CKoS hero — responsive background variants (self-contained, local assets).
   Local assets; tablet/mobile encodes swapped in by breakpoint. */
@media (min-width: 481px) and (max-width: 768px) {
  .ckos-page-ground {
    background-image:
      linear-gradient(to bottom, rgba(10,10,16,0.20) 0%, rgba(10,10,16,0.64) 58%, rgba(10,10,16,0.88) 100%),
      url('/assets/ckos-hero-tablet.webp');
  }
}
@media (max-width: 480px) {
  .ckos-page-ground {
    background-image:
      linear-gradient(to bottom, rgba(10,10,16,0.25) 0%, rgba(10,10,16,0.68) 58%, rgba(10,10,16,0.90) 100%),
      url('/assets/ckos-hero-mobile.webp');
  }
}

.ckos-body-section {
  padding: var(--u6) 0 var(--u10);
  background: transparent;
}

.ckos-prose-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
}

.ckos-prose-card {
  width: min(67%, 760px);
}

.ckos-prose-card--left { align-self: flex-start; }
.ckos-prose-card--right { align-self: flex-end; }

.ckos-prose-card p {
  font-size: clamp(0.96rem, 1.35vw, 1.05rem);
}

@media (max-width: 720px) {
  .ckos-body-section {
    padding: var(--u4) 0 var(--u10);
  }

  .ckos-prose-stack {
    gap: 28px;
  }

  .ckos-prose-card {
    width: 100%;
    align-self: stretch;
  }
}

.ckos-hero__inner {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
}

.ckos-hero__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--u2);
  opacity: 0.9;
}

.ckos-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--sage);
  line-height: 1.05;
  max-width: 700px;
}

/* BR-30: `.ckos-hero__sub` and its rule were removed with the hero subhead. The h1
   is now the block's last line, still bottom-anchored by .ckos-hero's flex-end. */

.ckos-gallery {
  background-color: var(--ground);
  padding: var(--u10) 0;
}

.ckos-gallery__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--u4);
  opacity: 0.8;
}

.ckos-tiles {
  columns: 4;
  column-gap: var(--u3);
}

.ckos-tile {
  break-inside: avoid;
  margin-bottom: var(--u3);
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.ckos-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,215,0,0.2);
}

.ckos-tile img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  opacity: 0.92;
  transition: opacity 200ms ease;
}

.ckos-tile:hover img {
  opacity: 1;
}

/* CKoS testimonial — MATTE slate grain */
.ckos-testimonial {
  /* MATTE: slate grain baked in */
  background-image:
    var(--grain-slate),
    linear-gradient(180deg, #1d1c1b 0%, #181716 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  padding: var(--u10) var(--side-margin);
}

.ckos-testimonial__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: var(--u4);
  align-items: start;
}

.ckos-testimonial__rule {
  background-color: var(--gold);
  align-self: stretch;
}

.ckos-testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-style: italic;
  color: var(--sage);
  line-height: 1.65;
  opacity: 0.9;
}

.ckos-testimonial__attr {
  display: block;
  font-style: normal;
  margin-top: var(--u3);
}

/* CKoS program cards — MATTE crackle (smaller surfaces) */
.ckos-program-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--u3);
  margin-top: var(--u10);
}

.ckos-program-card {
  /* MATTE: crackle grain for smaller card surfaces */
  background-image:
    var(--grain-crackle),
    linear-gradient(160deg, #1d1c1b 0%, #141312 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 280px 280px, cover;
  padding: var(--u4);
}

.ckos-program-card__label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--u2);
  opacity: 0.75;
}

.ckos-program-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sage);
  margin-bottom: var(--u2);
}

.ckos-program-card__body {
  font-size: 0.85rem;
  color: var(--sage);
  opacity: 0.7;
  line-height: 1.65;
}

/* H5P linkout block — MATTE crackle + gold left border */
.linkout-block {
  /* MATTE: crackle grain for accent block */
  background-image:
    var(--grain-crackle),
    linear-gradient(160deg, #1f1e1c 0%, #151413 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 280px 280px, cover;
  padding: var(--u6) var(--u4);
  display: flex;
  flex-direction: column;
  gap: var(--u3);
  border-left: 3px solid var(--gold);
}

.linkout-block__label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}

.linkout-block__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sage);
}

.linkout-block__body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sage);
  opacity: 0.7;
}

.linkout-block__action {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  border-bottom: 1px solid rgba(255,215,0,0.4);
  padding-bottom: 2px;
  transition: opacity 150ms ease;
}

.linkout-block__action:hover { opacity: 0.75; }

/* Breadcrumb */
/* -----------------------------------------------------------------------
   ABOUT PAGE
   ----------------------------------------------------------------------- */
.about-copy-block {
  max-width: none;
}

.about-copy-block mark {
  background-color: rgba(255, 215, 0, 0.12);
  color: inherit;
  border-bottom: 1px solid rgba(255, 215, 0, 0.35);
  padding: 0 2px;
  font-style: italic;
}

.about-copy-block p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--sage);
  opacity: 0.85;
  margin-bottom: var(--u4);
}

.about-copy-block.prose-card p {
  margin-bottom: 0;
}

.about-copy-block.prose-card p + p {
  margin-top: var(--u4);
}

/* REV6 epigraph — the canonical tagline opening the essay. Type only, in the page's
   existing Lora; two-class selector beats `.about-copy-block p`. Not a pull quote. */
.about-copy-block .about-epigraph {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
  opacity: 0.6;
  margin-bottom: var(--u4);
}

.about-story {
  display: flex;
  flex-direction: column;
  gap: var(--u10);
}

.about-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.75fr);
  gap: clamp(var(--u4), 6vw, var(--u10));
  align-items: center;
}

.about-pair--second {
  grid-template-areas: 'image copy';
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.05fr);
}

.about-pair--second .about-copy-block { grid-area: copy; }
.about-pair--second .about-imagery { grid-area: image; }

.about-imagery {
  width: min(100%, 420px);
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--surface);
}

.about-pair--first .about-imagery {
  justify-self: end;
}

.about-imagery img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 0.9;
  background-color: var(--surface);
}

@media (max-width: 720px) {
  .about-pair,
  .about-pair--second {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--u3);
  }

  .about-pair--first .about-imagery {
    order: -1;
  }

  .about-imagery {
    width: min(88vw, 360px);
    align-self: center;
  }
}

/* A4 (do-not-ship): the orphaned review-strip banner rule was removed here — no
   element carried the class in src or dist; it was dead review scaffolding. */

/* -----------------------------------------------------------------------
   PER-TRACK COLOR TONE (canvas tint variables)
   Set on <canvas> or hero wrap via JS on track switch.
   These are CSS custom properties that the JS reads for stroke color.
   No color change needed in CSS itself — canvas is drawn by JS.
   The tint tokens are here for documentation/reference.

   SERENE (cool sage/silver):
     stroke: rgba(226, 233, 222, alpha)  -- cool sage
     glow:   rgba(200, 220, 240, alpha)  -- slight blue-silver at peaks

   IGNITE (warm ember — amber leaning, NOT UI-gold):
     stroke: rgba(240, 210, 150, alpha)  -- warm wheat/amber
     glow:   rgba(255, 190, 90, alpha)   -- warm amber at peaks
     background canvas tint: slight warm shift on body (handled via
     a transitioning ::after on .hero — see homepage.html JS)

   NO-TRACK (neutral sage, default):
     stroke: rgba(226, 233, 222, alpha)
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   MOBILE-FIRST RESPONSIVE
   Base = 390px. Expand via min-width queries.
   ----------------------------------------------------------------------- */

/* Mobile nav: show hamburger, hide links */
@media (max-width: 720px) {
  .nav__links {
    display: none;     /* links hidden — replaced by overlay */
  }

  .nav__menu-btn {
    display: flex;     /* hamburger glyph shown */
  }

  .nav__sigil img {
    height: 64px;
  }
}

/* 390px base — mobile-corrective rules */
@media (max-width: 480px) {
  :root {
    --side-margin: 5vw;
    --u10: 48px;
  }

  /* FIX 4: hero canvas — no negative inset, explicit width clamp */
  .hero__wave-wrap {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    overflow: hidden;
  }

  #hero-canvas {
    width: 100%;
    max-width: 100vw;
    left: 0;
    top: 0;       /* full-bleed hero canvas (390px) */
    height: 100%;
  }

  /* sigil just above wave crest at 390px — primary tuning point */
  .hero__sigil-wrap {
    width: 82%;
    max-width: calc(100vw - 2 * 5vw);  /* never wider than viewport - margins */
    top: 20%;    /* 20% puts sigil bottom edge ~44% at 390px, wave starts 52% */
  }

  .honors__inner {
    flex-direction: column;
    gap: var(--u3);
  }

  .honors__vertical-label {
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: var(--u2);
    font-size: 0.6rem;
    width: auto;     /* reset fixed width in horizontal mode */
    overflow: visible;
  }

  .honors__num {
    font-size: clamp(2.8rem, 12vw, 4rem);
  }

  .routing-doors {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .ckos-tiles {
    columns: 2;
  }

  .about-imagery {
    grid-template-columns: 1fr;
  }

  .ventures-grid {
    grid-template-columns: 1fr;
  }

  /* FIX 4: footer grid — ensure it doesn't force horizontal scroll */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--u3);
  }

  .footer__legal {
    flex-direction: column;
    gap: 4px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --side-margin: 5.5vw;
    --u10: 60px;
  }

  .routing-doors {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .ckos-tiles {
    columns: 3;
  }

  .hero__sigil-wrap {
    width: 72%;
    top: 22%;   /* tablet tight composition */
  }

  #hero-canvas {
    top: 0;       /* full-bleed hero canvas (tablet) */
    height: 100%;
  }
}

@media (min-width: 769px) {
  .hero {
    min-height: 100vh;
  }

  /* Desktop: sigil bottom ~48%, wave top 53% — intentional tight clearance */
  .hero__sigil-wrap {
    top: 20%;
    width: 56%;
    max-width: 480px;
  }

  #hero-canvas {
    top: 0;       /* full-bleed hero canvas (desktop) */
    height: 100%;
  }

  .ckos-tiles {
    columns: 4;
  }

  .footer__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .hero__sigil-wrap {
    top: 18%;   /* large screen — still tight above wave */
    width: 46%;
    max-width: 440px;
  }

  #hero-canvas {
    top: 0;       /* full-bleed hero canvas (large) */
    height: 100%;
  }
}

/* =====================================================================
   B4 — MOBILE HARDENING (2026-07-18)
   Additive only; no existing rule reordered. Inline hero scripts untouched.
   Pairs with viewport-fit=cover (Base.astro) + 100dvh on .hero.
   ===================================================================== */

/* Notch/safe-area: nav runs edge-to-edge; keep links clear of the notch in
   landscape. The base rule sets `padding: 0 var(--side-margin)`; this only
   raises the horizontal padding to the larger of the margin or the inset. */
.nav__inner {
  padding-left:  max(var(--side-margin), env(safe-area-inset-left));
  padding-right: max(var(--side-margin), env(safe-area-inset-right));
}

/* Hero track selector hugs the bottom edge (inline style: bottom:32px, no
   padding). Lift it clear of the home indicator; the inset is 0 on non-notched
   devices, so this is a no-op there. */
#hero-track-btns {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Touch-warp lives on the hero canvas. Its listeners are passive, so CSS
   touch-action is the only lever that stops a warp gesture from fighting page
   scroll — pin it to none on the canvas surface. */
#hero-canvas {
  touch-action: none;
}

/* Suppress the grey iOS tap-flash on interactive chrome. */
a,
button,
.nav__menu-btn,
.nav__sigil,
#btn-serene,
#btn-ignite {
  -webkit-tap-highlight-color: transparent;
}

/* =====================================================================
   CONTACT / INTAKE FORMS (net-new, 2026-07-18)
   Ported from the approved mockups contact-mockup.html +
   services-form-variant.html (brand review CONTINUE). Additive only;
   no existing rule reordered. Shared by /contact/ and the /services/ CTA form.
   MATTE material system: grain baked into elevated cards (--grain-slate);
   input surfaces stay flat/ungrained (legibility). Error state = --error.
   ===================================================================== */

/* cta-button additive: the submit control is a <button>, not an <a>.
   These are harmless on the existing <a class="cta-button"> links. */
.cta-button { cursor: pointer; }
.cta-button:disabled { opacity: 0.45; cursor: not-allowed; }
.cta-button:disabled:hover { background-color: var(--ground); color: var(--gold); }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--u6);
  align-items: start;
}

/* Form card — MATTE slate, mirrors .pillar treatment */
.form-card {
  background-image: var(--grain-slate), linear-gradient(160deg, #1e1c1b 0%, #141313 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  padding: var(--u6) var(--u4);
}
.form-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: var(--u4);
}

.form-field { margin-bottom: var(--u4); }
.form-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.75;
  margin-bottom: var(--u1);
}
.form-label .req { color: var(--gold); margin-left: 2px; }
.form-label .opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.55;
  margin-left: 6px;
}
.form-hint {
  font-size: 0.75rem;
  color: var(--sage);
  opacity: 0.45;
  margin-top: 4px;
  line-height: 1.5;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  background-color: rgba(226,233,222,0.04);
  color: var(--sage);
  border: 1px solid rgba(226,233,222,0.18);
  border-radius: 0;
  padding: 13px 14px;
  font: inherit;
  /* BR-02: 16px input floor (L4). 0.95rem computed to 15.2px — iOS focus-zoom. */
  font-size: 1rem;
  font-family: var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0L5 6L10 0' fill='none' stroke='%23E2E9DE' stroke-width='1.2' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}
.form-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(226,233,222,0.35); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--gold);
  background-color: rgba(226,233,222,0.07);
}
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--error);
}
.form-error {
  display: none;
  font-size: 0.75rem;
  color: var(--error);
  margin-top: 6px;
  line-height: 1.5;
}
.form-error.is-visible { display: block; }

/* Honeypot — display:none (NOT off-screen positioning; iOS focus-scrolls
   off-screen inputs into view, which would reveal it to real users). */
.form-honeypot { display: none !important; }

.form-submit-row {
  display: flex;
  align-items: center;
  gap: var(--u3);
  margin-top: var(--u2);
  flex-wrap: wrap;
}
.form-submit-status { font-size: 0.8rem; color: var(--sage); opacity: 0.6; }

/* Status banners — success / error, aria-live regions */
.form-status-banner {
  display: none;
  padding: var(--u3);
  border-left: 3px solid var(--gold);
  background-color: rgba(255,215,0,0.06);
  margin-bottom: var(--u4);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--sage);
}
.form-status-banner.is-visible { display: block; }
.form-status-banner--error {
  border-left-color: var(--error);
  background-color: rgba(226,102,92,0.08);
}

/* Aside — provider-picker + "what to expect" */
.contact-aside { display: flex; flex-direction: column; gap: var(--u4); }
.picker-card {
  background-image: var(--grain-slate), linear-gradient(160deg, #1d1c1b 0%, #141312 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  padding: var(--u4);
}
.picker-card__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: var(--u2);
}
.picker-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sage);
  margin-bottom: var(--u2);
}
.picker-card__body {
  font-size: 0.85rem;
  color: var(--sage);
  opacity: 0.65;
  line-height: 1.6;
  margin-bottom: var(--u3);
}

.provider-picker { display: flex; flex-direction: column; gap: var(--u1); }
.provider-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u2);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sage);
  background-color: rgba(226,233,222,0.03);
  border: 1px solid rgba(226,233,222,0.14);
  padding: 13px 14px;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.provider-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background-color: rgba(255,215,0,0.05);
}
.provider-btn__icon { font-size: 0.7rem; opacity: 0.5; }
/* Copy button requires JS (Clipboard API) — hidden until JS confirms it can work.
   The three provider links are native <a href> and work with or without JS. */
.provider-btn--copy { display: none; }
.provider-btn--copy.js-enabled { display: flex; }
.provider-btn--copy[data-copied="true"] { border-color: var(--gold); color: var(--gold); }

.expect-card { padding: var(--u2) 0 0; }
.expect-card__title {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: var(--u2);
}
.expect-card__body { font-size: 0.85rem; color: var(--sage); opacity: 0.6; line-height: 1.7; }

/* JS-disabled fallback note — no script required to render or act on it */
.js-fallback-note {
  font-size: 0.8rem;
  color: var(--sage);
  opacity: 0.55;
  line-height: 1.6;
  border-left: 3px solid var(--purple);
  padding: var(--u2) var(--u3);
  margin-bottom: var(--u4);
  background-color: rgba(127,63,191,0.06);
}

/* ---- /services/ CTA-area inline form variant (compact 3-field) ---- */
.cta-block__lead {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--sage);
  opacity: 0.6;
  margin-bottom: var(--u4);
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
.cta-form-card {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
  background-image: var(--grain-slate), linear-gradient(160deg, #1e1c1b 0%, #141313 100%);
  background-color: var(--surface);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  padding: var(--u6) var(--u4);
}
.cta-form-card .form-field { margin-bottom: var(--u3); }
.cta-form-card .form-textarea { min-height: 90px; }
.cta-form-footnote {
  font-size: 0.75rem;
  color: var(--sage);
  opacity: 0.45;
  margin-top: var(--u3);
  text-align: center;
}
.cta-form-footnote a { opacity: 1; border-bottom: 1px solid rgba(255,215,0,0.4); padding-bottom: 1px; }

/* Two-column contact layout at desktop widths (form left, aside right) */
@media (min-width: 769px) {
  .contact-layout { grid-template-columns: 1.6fr 1fr; }
}

/* CKoS closes on a full-bleed CTA, so the shared footer spacer would expose
   an unrelated strip of page ground between the CTA and footer. */
.page-ckos .footer {
  margin-top: 0;
}

/* =======================================================================
   GRAIN EDGE INSET — light hairline on matte surfaces (mobile Safari)

   SYMPTOM: on phones, matte cards showed a thin light strip along whichever
   edges landed on a fractional device pixel. A 390px viewport puts the cards
   at x=19.5 CSS = 58.5 device px at DPR3, so the left/right edges sit on a
   half device pixel; content-driven heights do the same to top/bottom edges.
   Desktop widths land those edges on whole device pixels, which is why it
   only ever showed on mobile.

   CAUSE: the grain layer is a REPEATING raster (SVG) image; the layer under
   it is a gradient plus background-color. Where an edge falls on a fractional
   device pixel, WebKit rounds the tiled-image paint rect OUTWARD while the
   gradient/colour fill rounds INWARD. That leaves a one-device-pixel band in
   which only the grain paints. The grain is near-neutral mid-grey (measured
   rgb ~(111,110,112) against a ~rgb(21,20,19) ground) so it reads as a white
   hairline. NOT a blend-mode artifact: disabling background-blend-mode does
   not remove it, and neither does overflow:hidden or contain:paint.

   FIX: inset the grain layer 1px inside the card's fill using a transparent
   border plus per-layer background-clip. Layer 1 (grain) is clipped to the
   padding box; layer 2 (gradient) and the background-color (which takes the
   LAST clip value) still fill the whole border box. The outermost 1 CSS px of
   every card is therefore pure card colour, and the light texture can never
   be the outermost thing painted. 1 CSS px = 2–3 device px, comfortably more
   than the sub-pixel rounding error, so this holds at any viewport width and
   at DPR 2 and 3 — it is not tuned to one breakpoint.

   The padding compensation below subtracts that same 1px back out of each
   element's padding, so the outer box AND the content box both match the
   pre-fix geometry exactly (no reflow, no text re-wrap, desktop unchanged).
   This block sits at the end of the stylesheet so the compensation wins over
   each element's own padding declared earlier. If you change the padding on
   any selector below, change it here too.

   .honors is deliberately excluded: it declares no padding of its own (so it
   has nothing to compensate against) and it never exhibited the artifact.
   ======================================================================= */
.work-teaser,
.routing-door,
.pillar,
.work-project-card,
.venture-card--dark,
.venture-card--navy,
.venture-card--miag,
.venture-card--ckos,
.ckos-testimonial,
.ckos-program-card,
.linkout-block,
.form-card,
.picker-card,
.cta-form-card {
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* padding compensation — mirrors the padding on each selector's own rule */
.work-teaser { padding: calc(var(--u3) - 1px); }

.routing-door,
.ckos-testimonial { padding: calc(var(--u10) - 1px) calc(var(--side-margin) - 1px); }

.pillar,
.form-card,
.cta-form-card,
.venture-card--dark,
.venture-card--navy,
.venture-card--miag,
.venture-card--ckos { padding: calc(var(--u6) - 1px) calc(var(--u4) - 1px); }

.work-project-card,
.ckos-program-card,
.picker-card { padding: calc(var(--u4) - 1px); }

/* .linkout-block keeps its 3px gold left border, so only its top, right and
   bottom sides gained a 1px border and only those sides are compensated. */
.linkout-block {
  border-left: 3px solid var(--gold);
  padding: calc(var(--u6) - 1px) calc(var(--u4) - 1px) calc(var(--u6) - 1px) var(--u4);
}

/* These two hover accents are absolutely positioned inside a card whose
   containing block is now the padding box (1px in from the card's outer edge).
   Pull them back out by that 1px so they still sit flush with the card edge
   and still span its full width, exactly as before. */
.work-teaser__hover-line,
.work-project-card__hover-bar {
  bottom: -1px;
  left: -1px;
}

.work-teaser:hover .work-teaser__hover-line,
.work-project-card:hover .work-project-card__hover-bar {
  width: calc(100% + 2px);
}

/* =======================================================================
   SHARED IMAGE TILE / HERO
   Real project imagery sits on a bounded local parallax layer. The content
   underlay and purple edge keep copy readable and lift dark tiles from the
   obsidian ground without lightening the tile itself.
   ======================================================================= */
.image-tile {
  --image-tile-shift: 0px;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(127, 63, 191, 0.88);
  background-color: #0c0d11;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(127, 63, 191, 0.16);
}

.image-tile--texture {
  background-image:
    var(--grain-slate),
    linear-gradient(160deg, #1a181d 0%, #0d0d10 100%);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
}

.image-tile__media,
.image-tile__shade {
  position: absolute;
  pointer-events: none;
}

.image-tile__media {
  z-index: 0;
  inset: -12%;
  background-image: var(--image-tile-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0, var(--image-tile-shift), 0) scale(1.02);
  will-change: transform;
}

.image-tile__shade {
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 8, 0.30) 0%, rgba(5, 5, 8, 0.78) 100%);
}

.image-tile__content {
  width: calc(100% - var(--u4));
  margin: var(--u2);
  padding: var(--u2);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(226, 233, 222, 0.10);
  background: rgba(5, 6, 9, 0.82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.image-tile--no-underlay .image-tile__content {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.work-teaser.image-tile {
  padding: 0;
}

.work-teaser.image-tile .image-tile__content {
  margin-top: auto;
}

.venture-card.image-tile {
  padding: 0;
  color: var(--sage);
}

.venture-card.image-tile .image-tile__content {
  min-height: calc(280px - var(--u4));
  justify-content: space-between;
  padding: var(--u3);
}

.venture-card--miag.image-tile,
.venture-card--miag.image-tile .venture-card__name,
.venture-card--miag.image-tile .venture-card__descriptor {
  color: var(--sage);
}

.venture-card--miag.image-tile .venture-card__action {
  color: var(--gold);
}

.venture-card.image-tile:hover,
.venture-card.image-tile:focus-visible,
.work-teaser.image-tile:hover,
.work-teaser.image-tile:focus-visible {
  box-shadow:
    0 0 0 1px var(--purple),
    0 16px 40px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(127, 63, 191, 0.26);
}

.venture-card.image-tile .venture-card__logo {
  width: min(84%, 330px);
  max-height: 82px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.72));
}

@media (max-width: 720px) {
  .image-tile__media {
    background-image: var(--image-tile-image-mobile);
  }

  .venture-card.image-tile .venture-card__logo {
    width: min(90%, 300px);
    max-height: 92px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .image-tile__media {
    transform: none;
    will-change: auto;
  }
}

/* =======================================================================
   2026-09-04 VISUAL MEDIA PASS
   ======================================================================= */

.prose-card,
.form-card,
.picker-card,
.cta-form-card,
.pillar,
.work-teaser,
.routing-door,
.venture-card--dark,
.venture-card--ckos,
.ckos-testimonial,
.ckos-program-card,
.linkout-block,
.image-tile--texture {
  background-image:
    linear-gradient(160deg, rgba(20,21,24,0.90), rgba(9,10,12,0.96)),
    var(--surface-texture-charcoal);
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: normal, soft-light;
}

/* /work/ — image-first editorial wall */
.work-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u3);
  margin-bottom: clamp(28px, 5vw, 56px);
  padding-block: var(--u2);
  border-top: 1px solid rgba(226,233,222,0.10);
  border-bottom: 1px solid rgba(226,233,222,0.10);
}

.work-filters {
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.work-filter {
  border-color: transparent;
  border-right-color: rgba(226,233,222,0.16);
  padding-inline: clamp(13px, 2vw, 24px);
  white-space: nowrap;
}

.work-filter:first-child {
  padding-left: 0;
}

.work-filter:last-child {
  border-right: 0;
}

.work-filter:hover,
.work-filter:focus-visible,
.work-filter.is-active {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.work-result-count {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: 0.48;
}

.work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 18px);
}

.work-project-card {
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  display: block;
  border: 1px solid rgba(226,233,222,0.12);
  background: #0b0c0f;
  isolation: isolate;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.work-project-card[hidden] {
  display: none !important;
}

.work-project-card__media,
.work-project-card__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-project-card__media {
  z-index: 0;
  object-fit: cover;
  transition: transform .24s cubic-bezier(.2,.7,.2,1), filter .2s ease;
}

.work-project-card__audio-art,
.work-case__audio-hero-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 16px);
  padding: 12%;
  background:
    radial-gradient(circle at 72% 28%, rgba(127,63,191,0.22), transparent 34%),
    linear-gradient(145deg, rgba(5,6,9,0.28), rgba(5,6,9,0.88)),
    var(--surface-texture-charcoal);
  background-size: auto, auto, cover;
}

.work-project-card__audio-art span,
.work-case__audio-hero-art span {
  width: clamp(5px, 0.8vw, 12px);
  height: var(--bar-height, 42%);
  border: 1px solid rgba(226,233,222,0.42);
  background: rgba(226,233,222,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.34);
}

.work-project-card__audio-art span:nth-child(1),
.work-case__audio-hero-art span:nth-child(1) { --bar-height: 18%; }
.work-project-card__audio-art span:nth-child(2),
.work-case__audio-hero-art span:nth-child(2) { --bar-height: 42%; }
.work-project-card__audio-art span:nth-child(3),
.work-case__audio-hero-art span:nth-child(3) { --bar-height: 70%; }
.work-project-card__audio-art span:nth-child(4),
.work-case__audio-hero-art span:nth-child(4) { --bar-height: 94%; border-color: rgba(255,215,0,0.68); }
.work-project-card__audio-art span:nth-child(5),
.work-case__audio-hero-art span:nth-child(5) { --bar-height: 62%; }
.work-project-card__audio-art span:nth-child(6),
.work-case__audio-hero-art span:nth-child(6) { --bar-height: 34%; }
.work-project-card__audio-art span:nth-child(7),
.work-case__audio-hero-art span:nth-child(7) { --bar-height: 14%; }

.work-project-card__shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,6,9,0.04) 20%, rgba(5,6,9,0.88) 100%),
    linear-gradient(90deg, rgba(5,6,9,0.50), transparent 62%);
}

.work-project-card__content {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: block;
  padding: clamp(20px, 3vw, 40px);
}

.work-project-card__meta {
  display: block;
  margin-bottom: var(--u1);
  color: var(--purple-label);
  opacity: 0.8;
}

.work-project-card__title {
  max-width: 22ch;
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  text-shadow: 0 3px 18px rgba(0,0,0,0.72);
}

.work-project-card__action {
  display: inline-block;
  margin-top: var(--u2);
  color: var(--sage);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease, color 150ms ease;
}

.work-project-card:hover,
.work-project-card:focus-visible {
  border-color: var(--gold);
  color: var(--sage);
  box-shadow: 0 18px 44px rgba(0,0,0,0.46);
}

.work-project-card:hover .work-project-card__media,
.work-project-card:focus-visible .work-project-card__media {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

.work-project-card:hover .work-project-card__action,
.work-project-card:focus-visible .work-project-card__action {
  opacity: 0.9;
  transform: translateY(0);
}

.work-project-card__hover-bar {
  z-index: 3;
}

/* Individual case studies — full-bleed media, then paced editorial copy. */
.work-case__hero {
  min-height: 520px;
  height: min(72svh, 760px);
  max-height: 760px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(127,63,191,0.72);
}

.work-case__hero-media,
.work-case__hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-case__hero-media {
  z-index: 0;
  object-fit: cover;
}

.work-case__audio-hero-art {
  z-index: 0;
  gap: clamp(16px, 3vw, 46px);
  padding-inline: 18%;
}

.work-case__audio-hero-art span {
  width: clamp(12px, 1.5vw, 24px);
}

.work-case__hero-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4,5,8,0.58) 0%, rgba(4,5,8,0.05) 35%, rgba(4,5,8,0.84) 100%),
    linear-gradient(90deg, rgba(4,5,8,0.50), transparent 68%);
}

.work-case__hero-content {
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(36px, 7vw, 88px);
}

.work-return--hero {
  margin: 0;
}

.work-return--hero a {
  color: var(--sage);
  opacity: 0.82;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}

.work-case__title-block {
  max-width: 1000px;
}

.work-case__meta,
.work-case__section-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.work-case__title-block h1 {
  margin-top: var(--u2);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-weight: 800;
  line-height: 0.94;
  color: var(--sage);
  text-wrap: balance;
  text-shadow: 0 4px 26px rgba(0,0,0,0.78);
}

.work-case__body {
  position: relative;
}

.work-case__copy {
  max-width: 940px;
  padding-top: clamp(64px, 9vw, 128px);
  padding-bottom: clamp(64px, 9vw, 128px);
}

.work-case__copy p {
  max-width: 69ch;
  font-size: clamp(1.06rem, 1.65vw, 1.28rem);
  line-height: 1.9;
  color: var(--sage);
  opacity: 0.88;
}

.work-case__copy--opening p:first-child {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.45vw, 2rem);
  line-height: 1.55;
  opacity: 1;
}

.work-case__copy p + p {
  margin-top: var(--u4);
}

.work-case__video {
  padding-block: clamp(56px, 8vw, 104px);
  background: rgba(5,6,9,0.42);
  border-block: 1px solid rgba(226,233,222,0.08);
}

.work-case__video-heading {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.work-case__video-heading h2 {
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1;
  color: var(--sage);
}

.work-case__video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(226,233,222,0.10);
}

.work-case__video-grid--single {
  grid-template-columns: 1fr;
}

.work-case__video-item {
  min-width: 0;
  background: #050609;
}

.work-case__video-launch,
.work-case__video-item iframe,
.work-case__video-item video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.work-case__video-item video {
  object-fit: contain;
  background: #050609;
}

.work-case__video-launch {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #050609;
  color: var(--sage);
  cursor: pointer;
}

.work-case__video-launch > img,
.work-case__video-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-case__video-launch > img {
  object-fit: contain;
  background: #050609;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), filter 180ms ease;
}

.work-case__video-shade {
  background: linear-gradient(180deg, rgba(4,5,8,0.08) 24%, rgba(4,5,8,0.90) 100%);
}

.work-case__video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226,233,222,0.78);
  transform: translate(-50%, -50%);
  background: rgba(5,6,9,0.72);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.work-case__video-play svg {
  width: 34px;
  height: 34px;
  fill: var(--sage);
}

.work-case__video-title {
  position: absolute;
  inset: auto var(--u3) var(--u3);
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  text-align: left;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
}

.work-case__video-launch:hover > img,
.work-case__video-launch:focus-visible > img {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.02);
}

.work-case__video-launch:hover .work-case__video-play,
.work-case__video-launch:focus-visible .work-case__video-play {
  border-color: var(--gold);
  background: rgba(5,6,9,0.90);
}

.work-case__video-launch:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

.work-case__gallery {
  columns: 3;
  column-gap: 2px;
}

.work-case__gallery--1 {
  columns: 1;
}

.work-case__gallery--2 {
  columns: 2;
}

.work-case__gallery--compact {
  width: min(1120px, calc(100% - clamp(32px, 8vw, 120px)));
  margin-inline: auto;
  padding-block: clamp(10px, 1.5vw, 20px);
  column-gap: clamp(10px, 1.2vw, 18px);
}

.work-case__gallery--compact .work-case__gallery-item {
  margin-bottom: clamp(10px, 1.2vw, 18px);
  overflow: hidden;
  border: 1px solid rgba(226, 233, 222, 0.12);
}

.work-case__gallery--compact.work-case__gallery--count-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  columns: auto;
}

.work-case__gallery--compact.work-case__gallery--count-4 .work-case__gallery-item {
  margin-bottom: 0;
}

.work-case__gallery-item {
  break-inside: avoid;
  margin-bottom: 2px;
  background: #07080a;
}

.work-case__gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

.work-case__credits {
  max-width: 940px;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(72px, 10vw, 136px);
}

.work-case__credits h2 {
  margin-bottom: var(--u5);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple-light);
}

.work-case__credits dl {
  border-top: 1px solid rgba(226,233,222,0.16);
}

.work-case__credits dl > div {
  display: grid;
  grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
  gap: var(--u4);
  padding-block: var(--u3);
  border-bottom: 1px solid rgba(226,233,222,0.12);
}

.work-case__credits dt {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--gold);
}

.work-case__credits dd {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--sage);
  opacity: 0.88;
}

.work-case__audio {
  max-width: 1040px;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

.work-case__audio h2 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  color: var(--sage);
}

.work-case__audio-grid {
  margin-top: var(--u6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--u1);
}

.work-case__audio-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, 210px);
  align-items: center;
  gap: var(--u3);
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid rgba(226,233,222,0.14);
  background-image:
    linear-gradient(160deg, rgba(20,21,24,0.88), rgba(9,10,12,0.96)),
    var(--surface-texture-charcoal);
  background-size: cover;
  background-blend-mode: normal, soft-light;
}

.work-case__audio-item p {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--sage);
}

.work-case__audio-item audio {
  display: none;
}

.work-audio__toggle,
.work-audio__volume button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(226,233,222,0.32);
  background: transparent;
  color: var(--sage);
  cursor: pointer;
}

.work-audio__toggle:hover,
.work-audio__toggle:focus-visible,
.work-audio__volume button:hover,
.work-audio__volume button:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.work-audio__toggle svg,
.work-audio__volume svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.work-audio__pause {
  display: none;
}

.work-case__audio-item.is-playing .work-audio__play {
  display: none;
}

.work-case__audio-item.is-playing .work-audio__pause {
  display: block;
}

.work-audio__main {
  min-width: 0;
}

.work-audio__main p {
  margin-bottom: 12px;
}

.work-audio__time {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--sage);
  opacity: 0.58;
}

.work-audio__volume {
  display: flex;
  align-items: center;
  gap: 12px;
}

.work-audio__volume button {
  width: 40px;
  height: 40px;
  border-color: transparent;
}

.work-audio__volume svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.work-case__audio-item.is-muted .work-audio__volume button {
  color: var(--gold);
}

.work-audio__progress,
.work-audio__volume input {
  width: 100%;
  height: 24px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* Ventures: the MiaG tile now shares the frost-mineral field and centres its
   mark, matching the spoke page rather than the superseded warm tile. */
.venture-card--miag.image-tile .image-tile__shade {
  background:
    radial-gradient(ellipse 70% 45% at 50% 28%, rgba(5,6,9,0.66), transparent 76%),
    linear-gradient(180deg, rgba(5,6,9,0.48), rgba(5,6,9,0.82));
}

.venture-card--miag.image-tile .venture-card__header {
  width: 100%;
  justify-content: center;
}

.venture-card--miag.image-tile .venture-card__logo {
  margin-inline: auto;
  object-position: center;
}

@media (max-width: 980px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .work-filter-bar {
    display: block;
  }

  .work-result-count {
    margin-top: var(--u2);
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .work-project-card {
    aspect-ratio: 1;
  }

  .work-project-card__action {
    opacity: 0.82;
    transform: none;
  }

  .work-case__hero {
    min-height: 510px;
    height: 68svh;
  }

  .work-case__title-block h1 {
    font-size: clamp(2.25rem, 9.5vw, 4.5rem);
    overflow-wrap: anywhere;
  }

  .work-case__copy {
    padding-top: var(--u10);
    padding-bottom: var(--u10);
  }

  .work-case__video-grid {
    grid-template-columns: 1fr;
  }

  .work-case__gallery,
  .work-case__gallery--2,
  .work-case__gallery--3 {
    columns: 1;
  }

  .work-case__gallery--compact {
    width: calc(100% - 32px);
    padding-block: 12px;
  }

  .work-case__gallery--compact.work-case__gallery--count-4 {
    grid-template-columns: 1fr;
  }

  .work-case__audio-item {
    grid-template-columns: 1fr;
  }

  .work-case__credits dl > div {
    grid-template-columns: 1fr;
    gap: var(--u1);
  }

  .work-audio__toggle {
    width: 56px;
    height: 56px;
  }

  .work-audio__volume {
    padding-top: var(--u1);
    border-top: 1px solid rgba(226,233,222,0.10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-project-card__media,
  .work-project-card__action,
  .work-case__video-launch > img {
    transition: none;
  }
}