/* =======================================================================
   TBK WEBSITE — SHARED STYLESHEET — "THE OBSIDIAN PRESS"
   Purpose: Shared scaffolding + per-spoke identity tokens.

   HERO ENTRANCE + TEXTURE NOTES:
   FIX 1 — BUOYANCY: Sigil now positioned JUST above the wavetable crest.
     - .hero__sigil-wrap top adjusted from 10% to 28% (mobile/390px tuning).
     - #hero-canvas top moved from 48% to 54% (lower band, less dead space).
     - Buoyancy physics implemented in JS: sigil y-offset springs toward
       clearance target as front-layer crest rises. 10–24px travel range.
       Spring: attack 0.12, release 0.06 (gentle, slower settle = buoyant).
       Composes additively with sigil-lev idle animation.
   FIX 2 — ENTRANCE: Slower ceremonial sigil arrival + amplitude-from-flat ramp.
     - Sigil: 1800ms, 30px rise, ease-out-back (slight overshoot settle).
     - Each waveform layer: amplitude ramps 0→full over 800ms WHILE fading in.
       Stagger 220ms between layers. Deepest first. Total wave stack ~3.0s.
       This is the key: amplitude-from-flat is what sells "from the depths."
   FIX 3 — TEXTURE: Monochrome low-contrast noise (construction paper → fine paper/stone).
     - feColorMatrix saturate=0 eliminates RGB color speckle.
     - feComponentTransfer gamma=0.6 + slope 0.55 reduces contrast to "whisper."
     - Multi-scale composite: fine base (bf=0.09) + faint structure (bf=0.04).
     - Slight anisotropy via asymmetric scale (x≠y) for woven/brushed direction.
     - Tint via element's own warm-dark background-blend (surface reads as material).
     - In-element parallax: rAF scroll handler sets --scroll-y CSS var;
       matte elements consume via background-position-y offset.
       Factor ~0.08 (8% of scroll delta). iOS-SAFE: no background-attachment:fixed.

   MATERIAL SYSTEM — TWO-CLASS DESIGN:

   GLOSS (luxe / polished — NO grain anywhere):
     - The obsidian ground itself: clean lacquered gradient stack
       (bright-centered radial + gloss sweep + purple depth + gold breath).
       Pure lacquer. No grain on the ground.
     - The sigil (a glossy 3D asset — grain would corrupt it)
     - Gold accent text, rules, numerals
     - Nav chrome, hero canvas

   MATTE (craft / grit — grain baked INTO the element only):
     - Cards, panels, elevated surfaces:
       .work-teaser, .routing-door, .pillar, .venture-card,
       .ckos-program-card, .honors section panel, .linkout-block,
       footer columns, .ckos-testimonial
     - Technique: background-image = <noise SVG data-uri> PLUS the
       element's own gradient, with background-blend-mode:overlay
       This blends noise WITHIN the element's own background stack —
       nothing sits on top of other elements; no mix-blend-mode on the
       element itself (which would bleed through stacking).
     - Two texture characters:
       GRANITE/SLATE — big panels (coarse turbulence, bf=0.065, n=4)
         opacity: ~0.28 on the grain layer
       ANALOG CRACKLE — small craft accents (fine fractalNoise, bf=0.13)
         opacity: ~0.20 on the grain layer
     - Material reads at arm's length on phone — intentional FEATURE.

   LAYER STACK (z-order, bottom to top):
     z:0      body background — lacquered obsidian ground (CLEAN, no grain)
     z:1–99   content (hero canvas=1, hero sigil=3, hero btn=10)
     z:10000  #obsidian-glow — gold breath (fixed overlay, pointer-events:none)
     z:10001  .nav — above glow

   BODY PSEUDO-ELEMENTS: REMOVED entirely. No body::before or body::after
   grain layers. The ground is CLEAN glass. Grain lives only in matte elements.

   ======================================================================= */

/* -----------------------------------------------------------------------
   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: 'Avenir Next', 'Avenir', system-ui, Arial, sans-serif;
  --font-body:    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");

  /* 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;
}

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

/* -----------------------------------------------------------------------
   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. Wavetable: 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 wavetable 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-entry,
.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 SECTION — ART-BOOK REGISTER (MATTE surface)
   The honors panel is a key craft surface — slate grain baked in.
   ----------------------------------------------------------------------- */
.honors {
  background-color: var(--surface);
  /* MATTE: slate grain baked into element via background-blend */
  background-image:
    var(--grain-slate),
    linear-gradient(180deg, #1d1d1d 0%, #181818 100%);
  background-blend-mode: overlay, normal;
  background-size: 500px 500px, cover;
  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: baseline;
  gap: var(--u2);
  padding: 14px 0;
  border-bottom: 1px solid rgba(226, 233, 222, 0.07);
  position: relative;
}

.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;
}

.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.75;
}

/* 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);
}

.quiet-close 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 {
  opacity: 1;
  color: var(--gold);
}

/* -----------------------------------------------------------------------
   /WORK/ — PORTFOLIO GRID — MATTE cards
   ----------------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--u3);
}

.work-entry {
  /* 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(--u4);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: var(--sage);
}

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

.work-entry:hover .work-entry__hover-bar {
  width: 100%;
}

.work-entry__num {
  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-entry__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sage);
  line-height: 1.2;
}

.work-entry__category {
  font-size: 0.75rem;
  color: var(--sage);
  opacity: 0.5;
  margin-top: var(--u1);
}

/* -----------------------------------------------------------------------
   /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);
}

/* Tablet band (iPad portrait 768/834 land here): auto-fit resolves to exactly
   two columns, and with three cards the trailing stub is stranded next to an
   empty half-row. Let it span the full width instead, so the row reads as a
   deliberate closing band rather than an orphaned card. Its min-height is
   relaxed for that span — at full width the 280px block is a large void, and
   the stub holds two short lines of text.
   Phone and desktop are untouched: below this band the grid is already 1-up
   (where 1 / -1 is simply the one column), and above it all three cards share a
   single row so the query does not apply.
   CEILING IS 986px, NOT 1023px, AND THE TWO ARE NOT INTERCHANGEABLE. The upper
   bound must be the last viewport at which auto-fit still yields TWO columns —
   which is a function of minmax(280px), the gap and the container padding, not
   of any device breakpoint. Measured on the built page: 2 columns through 986px,
   3 columns from 987px. A 1023px ceiling therefore left the band 987-1023px
   spanning the stub 1 / -1 across a THREE-column grid, opening an empty third
   column — and a 1024px window with a classic scrollbar reports ~1007px, landing
   inside exactly that band. Re-measure this boundary if minmax, gap, or the
   container padding ever changes. */
@media (min-width: 601px) and (max-width: 986px) {
  .ventures-grid > .venture-card--stub {
    grid-column: 1 / -1;
    min-height: 0;
    padding-top: var(--u4);
    padding-bottom: var(--u4);
  }
}

.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); }

/* Coming-soon stub — clean (no grain, ghosted) */
.venture-card--stub {
  background-color: var(--ground);
  border: 1px solid rgba(226, 233, 222, 0.06);
  color: var(--sage);
  opacity: 0.35;
  pointer-events: none;
}

.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;
}

.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;
}

/* -----------------------------------------------------------------------
   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;
}

/* -----------------------------------------------------------------------
   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-hero {
  position: relative;
  min-height: 100vh;
  background-color: #0A0A10;
  background-image:
    linear-gradient(to bottom, rgba(10,10,16,0.25) 0%, rgba(10,10,16,0.75) 75%, rgba(10,10,16,0.92) 100%),
    url('/assets/ckos-hero-desktop.webp');
  background-size: cover;
  background-position: center top;
  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-hero {
    background-image:
      linear-gradient(to bottom, rgba(10,10,16,0.25) 0%, rgba(10,10,16,0.75) 75%, rgba(10,10,16,0.92) 100%),
      url('/assets/ckos-hero-tablet.webp');
  }
}
@media (max-width: 480px) {
  .ckos-hero {
    min-height: 80vh;
    background-image:
      linear-gradient(to bottom, rgba(10,10,16,0.30) 0%, rgba(10,10,16,0.78) 75%, rgba(10,10,16,0.94) 100%),
      url('/assets/ckos-hero-mobile.webp');
  }
}

.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;
}

.ckos-hero__sub {
  font-size: 1rem;
  color: var(--sage);
  opacity: 0.75;
  margin-top: var(--u3);
  max-width: 560px;
  line-height: 1.65;
}

.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 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--u3);
  opacity: 0.8;
}

/* 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(--u4);
}

.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 */
.spoke-breadcrumb {
  padding: var(--u3) 0 0;
  font-size: 0.7rem;
  color: var(--sage);
  opacity: 0.45;
  letter-spacing: 0.06em;
}

.spoke-breadcrumb a { opacity: 0.7; }
.spoke-breadcrumb a:hover { opacity: 1; color: var(--gold); }

/* -----------------------------------------------------------------------
   ABOUT PAGE
   ----------------------------------------------------------------------- */
.about-copy-block {
  max-width: 720px;
}

.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-imagery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--u3);
  margin-bottom: var(--u6);
}

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

/* 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-intro {
  max-width: 620px;
  margin: 0 0 var(--u6);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--sage);
  opacity: 0.8;
}

.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;
  font-size: 0.95rem;
  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; }
}

/* =======================================================================
   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.
   .venture-card--stub is excluded: it carries no grain and already has its
   own 1px border, so leaving it alone preserves its geometry.
   ======================================================================= */
.work-teaser,
.routing-door,
.pillar,
.work-entry,
.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-entry,
.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-entry__hover-bar {
  bottom: -1px;
  left: -1px;
}

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