/* =====================================================================
   LOCVS — Marketing Layer Tokens (v1.0, 2026-04-21)
   Source of truth: LOCVS_Landing_Cowork_Implementation_Brief.md §2.3, §5.
   -------------------------------------------------------------------
   Scope: This file governs the PUBLIC LANDING PAGE only (LOCVS.html).
   It is distinct from the product design system v3.1 (Volumetric Glass)
   which lives in /styles/tokens.css and is light-only.
   The marketing layer is allowed to break product discipline:
      - DARK sections (anthracite) ARE used (hero, science, two-buyers)
      - Argila accent appears in the marketing layer; product stays COTY
      - Warm glow, cinematic motion, editorial scale all permitted here
   -------------------------------------------------------------------
   Typography: hybrid per user decision (Phase 0 DP 0.1):
      --font-display     → Campton (self-hosted, for headlines)
      --font-system      → Inter (Google Fonts, for body/UI)
      --font-inhabitant  → Cormorant Garamond (italic, inhabitant voice)
      --font-data        → JetBrains Mono (numbers, coordinates, captions)
   ===================================================================== */

:root {
  /* ============================================================
     COLOR — LIGHT mode (primary surface)
     ============================================================ */
  --cloud-dancer: #F2F0EB;
  /* Ink aligned to canonical Anthracite (2026-04-22 directive review).
     Previously #111111 — too cold, too hard against Cloud Dancer ground.
     --ink is consumed by step numerals, headings, and every body copy
     rule; the token change ripples through the whole layer. */
  --ink: #2C2C2E;
  --ink-secondary: #5C5954;
  --ink-tertiary: #8A8379;
  --ink-ghost: #C9C4B8;
  --surface-light: #FFFFFF;
  --surface-light-2: #F7F5EF;

  /* ============================================================
     COLOR — DARK mode (hero + editorial sections)
     ============================================================ */
  --anthracite: #151416;
  --anthracite-2: #1E1D1F;
  --anthracite-3: #2A282A;
  --ink-dark: #F2F0EB;
  --ink-dark-secondary: #A8A39B;
  --ink-dark-tertiary: #6B6862;

  /* ============================================================
     ACCENT — Argila (marketing only; product stays Cloud Dancer)
     Canonical value: #B87B5E (2026-04-22 directive review).
     Previous #B87B5E was 1 hex point drift; all references realigned.
     ============================================================ */
  --argila: #B87B5E;
  --argila-bright: #CF9D7B;
  --glow-warm: rgba(242, 210, 165, 0.12);

  /* ============================================================
     TYPOGRAPHY FAMILIES
     ============================================================ */
  --font-display: 'Campton', 'Inter', system-ui, -apple-system, sans-serif;
  --font-system: 'Inter', 'Campton', system-ui, -apple-system, sans-serif;
  --font-inhabitant: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-data: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ============================================================
     RADIUS — marketing allows larger radii than product (max 14px)
     ============================================================ */
  --radius-card: 24px;
  --radius-pill: 9999px;
  --radius-image: 8px;
  --radius-small: 8px;
  --radius-large: 32px;

  /* ============================================================
     SPACING — architectural rhythm
     ============================================================ */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;
  --space-xxl: 160px;

  /* ============================================================
     MOTION — marketing uses slower, more cinematic easings
     ============================================================ */
  --ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-fast: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 300ms;
  --duration-med: 600ms;
  --duration-slow: 1000ms;
}

/* =====================================================================
   @font-face declarations — SELF-HOSTED CAMPTON
   (files live at /assets/fonts/*.woff2 — already present in project)
   Weights: 300 Light / 400 Book / 500 Medium / 600 SemiBold, plus italic
   ===================================================================== */
@font-face {
  font-family: 'Campton';
  src: url('../assets/fonts/CamptonLight.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('../assets/fonts/CamptonBook.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('../assets/fonts/CamptonBookItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('../assets/fonts/CamptonMedium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('../assets/fonts/CamptonSemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================
   GLOBAL BASE
   ===================================================================== */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: inherit; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cloud-dancer);
  color: var(--ink);
  font-family: var(--font-system);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

/* =====================================================================
   SECTION MODES — .section-light / .section-dark
   Used as the universal wrapper for every section in the landing.
   Governs background, default text color, and creates a paint-context
   for section-relative filters and overlays.
   ===================================================================== */
.section-light {
  background: var(--cloud-dancer);
  color: var(--ink);
  position: relative;
}
.section-dark {
  background: var(--anthracite);
  color: var(--ink-dark);
  position: relative;
}
.section-dark ::selection { background: var(--argila-bright); color: var(--anthracite); }
.section-light ::selection { background: var(--argila); color: var(--cloud-dancer); }

/* =====================================================================
   TYPOGRAPHY SCALE — canonical utility classes
   Registers:
     display    = Campton Medium, massive, -letterspacing (headlines)
     heading    = Campton Medium, large
     subhead    = Inter Medium, mid
     body       = Inter Regular
     inhabitant = Cormorant Garamond italic (inhabitant voice)
     label      = Inter caps, tracked
     data       = JetBrains Mono, mono caps
   ===================================================================== */
.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  margin: 0;
}
.t-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin: 0;
}
.t-subhead {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin: 0;
}
.t-body {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}
.t-body-large {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
}
.t-inhabitant {
  font-family: var(--font-inhabitant);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
}
.t-inhabitant-display {
  font-family: var(--font-inhabitant);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 72px);
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.t-label {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-tertiary);
}
.t-data {
  font-family: var(--font-data);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-tertiary);
}

/* Italic accent used inside headlines to set a word in Cormorant */
.italic-accent {
  font-family: var(--font-inhabitant);
  font-style: italic;
  font-weight: 400;
  color: var(--argila);
}
.section-dark .italic-accent { color: var(--argila-bright); }

/* =====================================================================
   SECTION LABEL — small pill above section headings
   Two variants: default (dark-section) + .section-label-light
   ===================================================================== */
.section-label-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(242, 240, 235, 0.15);
  border-radius: var(--radius-pill);
  background: rgba(242, 240, 235, 0.03);
  font-family: var(--font-system);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-dark-secondary);
}
.section-label-light {
  background: rgba(17, 17, 17, 0.04);
  border-color: rgba(17, 17, 17, 0.1);
  color: var(--ink-secondary);
}
.label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--argila-bright);
  box-shadow: 0 0 6px rgba(207, 157, 123, 0.6);
}
.section-label-light .label-dot { background: var(--argila); box-shadow: none; }

/* =====================================================================
   CTA — primary, secondary, magnetic behavior on [data-magnetic]
   ===================================================================== */
.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-system);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.2px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out-fast),
              background var(--duration-fast) ease,
              color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
  will-change: transform;
}
.cta-primary {
  background: var(--cloud-dancer);
  color: var(--ink);
  border: 1px solid transparent;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.cta-primary:hover {
  background: #FFFFFF;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.section-light .cta-primary {
  background: var(--ink);
  color: var(--cloud-dancer);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.section-light .cta-primary:hover { background: #000; }
.cta-secondary {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}
.cta-secondary:hover {
  background: currentColor;
  color: var(--anthracite);
}
.cta-primary .arrow,
.cta-secondary .arrow { display: inline-block; transition: transform var(--duration-fast) var(--ease-out-fast); }
.cta-primary:hover .arrow,
.cta-secondary:hover .arrow { transform: translateX(4px); }

/* =====================================================================
   REVEAL-ON-SCROLL — universal section fade-in
   ===================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out-slow),
              transform var(--duration-slow) var(--ease-out-slow);
  will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
   V-MARK PULSE — used in hero overlays + profile tiles
   ===================================================================== */
@keyframes v-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* =====================================================================
   LOCVS HERO v2 — video-backed editorial hero (DARK, CANONICAL)
   -------------------------------------------------------------------
   Per Implementation Brief §6.2-6.3 and the LOCVS Hero Video Integration
   Guide, the hero is DARK. All treatments (desaturation, brightness,
   contrast, warm shift, top/bottom vignette, radial darkening) are
   PRE-RENDERED into the video frames — no CSS filter on <video>.
   Video sources at assets/video/locvs_hero_dark.{webm,mp4}.
   Text colors use cream (Cloud Dancer over dark) with a silver gradient
   on the headline for an Orbai-style metallic presence.
   ===================================================================== */
.locvs-hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  background: #0F0F11;       /* deeper than Anthracite; reads as dark well */
  color: var(--cloud-dancer);
  isolation: isolate;        /* establish stacking context for overlays */
}
.locvs-hero.is-ink {
  background: #0A0A0C;       /* true dark well for the canonical ink hero */
}

.locvs-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.locvs-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* NO CSS filters — treatments baked into frames.
     Minimal transform for edge-safe cropping only. */
  transform: scale(1.02);
  will-change: transform;
}

/* Scrim — the baked vignette handles most of the work. This layer just
   reinforces legibility at the top (nav) and bottom (text+footstrip)
   and adds a subtle warm argila aura as marketing accent. */
.locvs-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* warm argila aura lower-right (marketing accent) */
    radial-gradient(80% 60% at 88% 92%, rgba(184, 123, 94, 0.20), transparent 60%),
    /* dark fade at the bottom — reinforces baked gradient for text legibility */
    linear-gradient(to top, rgba(10,10,12,0.78) 0%, rgba(10,10,12,0.40) 22%, rgba(10,10,12,0) 55%),
    /* soft dark fade at the top so the nav reads */
    linear-gradient(to bottom, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0) 18%);
}

/* Fine film grain (SVG noise) — imparts tactile depth without
   overwhelming the V-markers baked into the video. On dark hero we
   use overlay for a subtle highlight-flicker rather than multiply. */
.locvs-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.9  0 0 0 0 0.9  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Cursor spotlight — softly brightens the area under the pointer.
   Uses a CSS custom property updated from JS (--mx / --my as %). */
.locvs-hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-out-slow);
  background: radial-gradient(
    280px 280px at calc(var(--mx, 50%) ) calc(var(--my, 50%) ),
    rgba(255, 255, 255, 0.28),
    transparent 70%
  );
  mix-blend-mode: screen;
}
.locvs-hero:hover .locvs-hero__spotlight { opacity: 1; }

/* =====================================================================
   HERO NAV — fine silver bar, sits on top of the dark video
   ===================================================================== */
.locvs-hero__nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  color: var(--cloud-dancer);
}
.locvs-hero__nav-links {
  display: flex;
  gap: 40px;
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.locvs-hero__nav-links a {
  color: rgba(242, 240, 235, 0.72);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.locvs-hero__nav-links a:hover { color: var(--cloud-dancer); }
.locvs-hero__nav .locvs-cta-mini {
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--cloud-dancer);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-fast);
}
.locvs-hero__nav .locvs-cta-mini:hover { background: #fff; transform: translateY(-1px); }
@media (max-width: 820px) {
  .locvs-hero__nav { padding: 20px 24px; }
  .locvs-hero__nav-links { display: none; }
}

/* =====================================================================
   HERO CONTENT — centered column, sits above the scrim
   ===================================================================== */
.locvs-hero__content {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin: 0 auto;
  padding: 180px 48px 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100svh;
  justify-content: center;
}
.locvs-hero__eyebrow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-system);
  /* 13px floor (2026-04-22 directive review) — eyebrows, tags, and
     micro-labels were running at 10–11px across the page. Lifting to
     the minimum keeps the tracked caps legible without dominating. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--gp-dark-bg);
  backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  -webkit-backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  border: 1px solid var(--gp-dark-border-side);
  border-top-color: var(--gp-dark-border-top);
  border-bottom-color: var(--gp-dark-border-bot);
  box-shadow: var(--gp-dark-shadow);
  margin-bottom: 28px;
}
.locvs-hero__eyebrow > * { position: relative; z-index: 3; }
.locvs-hero__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--argila);
  box-shadow: 0 0 10px rgba(184, 123, 94, 0.7);
  flex-shrink: 0;
}


/* ---------------------------------------------------------------------
   PREAMBLE — italic serif statement, "The first Spatial Intelligence."
   Sits between the eyebrow pill and the main headline. Uses the
   inhabitant-voice serif with the silver gradient treatment.
   --------------------------------------------------------------------- */
.locvs-hero__preamble {
  font-family: var(--font-inhabitant);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.2px;
  margin: 0 0 16px 0;
  text-align: center;
}
.locvs-hero__preamble em {
  font-style: italic;
}

.locvs-hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -2.8px;
  margin: 0;
  color: var(--cloud-dancer);
  /* Two-line lockup: widened so each line fits on a single row.
     Line breaks are controlled by <span class="hero-line"> which
     renders as a no-wrap block — the explicit two-line structure
     is the only break that ever appears. */
  max-width: 26ch;
}
.locvs-hero__headline .hero-line {
  display: block;
  white-space: nowrap;
}
/* Inline LOCVS text mark inside the hero headline — scales with the
   headline clamp and sits on the text baseline. Per Directive v2 §2.1. */
.locvs-hero__headline .b-locvs-text.hero-inline {
  height: clamp(16px, 4vw, 30px);
  margin-bottom: -3px;
  vertical-align: baseline;
}
.locvs-hero__headline em {
  font-family: var(--font-inhabitant);
  font-style: italic;
  font-weight: 400;
  color: var(--argila);
  letter-spacing: -1.5px;
  /* keep "yours" off the silver gradient — it anchors warm */
  -webkit-text-fill-color: var(--argila);
  background: none;
}
.locvs-hero__sub {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
  color: rgba(242, 240, 235, 0.72);
  max-width: 62ch;
  margin: 32px auto 0;
}
.locvs-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 44px;
}
.locvs-hero__ctas .cta-primary,
.locvs-hero__ctas .cta-secondary {
  padding: 16px 32px;
  font-size: 15px;
}
.locvs-hero__ctas .cta-primary {
  background: var(--cloud-dancer);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.locvs-hero__ctas .cta-primary:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.45);
}
.locvs-hero__ctas .cta-secondary {
  background: rgba(242, 240, 235, 0.06);
  color: var(--cloud-dancer);
  border: 1px solid rgba(242, 240, 235, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.locvs-hero__ctas .cta-secondary:hover {
  background: rgba(242, 240, 235, 0.12);
  border-color: rgba(242, 240, 235, 0.40);
}

/* =====================================================================
   ORBAI-STYLE METALLIC TEXT GRADIENT
   -------------------------------------------------------------------
   Applied via class `.locvs-text-gradient` on any span/heading that
   should read as a silvered, cinematic display mark against a dark
   surface. Reproduces the Framer-template feel referenced by Gustavo
   (orbai-template.framer.website) with brand-honest values.
   ===================================================================== */
.locvs-text-gradient {
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #F2F0EB 28%,
    #CFCCC5 58%,
    #9A9891 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* guard: when background-clip:text isn't supported, fall back to cream */
  @supports not (background-clip: text) {
    color: var(--cloud-dancer);
  }
}
/* warmer variant — for accent headings where a honeyed metallic reads better */
.locvs-text-gradient.is-warm {
  background: linear-gradient(
    180deg,
    #FBF5EA 0%,
    #E8D9C2 45%,
    #B89976 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================================================
   HERO FOOTER STRIP — scroll cue (left) · studio coordinates (right)
   Sits at the bottom of the hero, inside the cloud-dancer vignette zone.
   Stats strip removed 2026-04-22; the footer is now a quiet two-element
   composition — movement affordance on the left, place signature on the
   right. Both share the same 11px data register so the line reads as a
   single horizontal rule rather than two competing elements.
   ===================================================================== */
.locvs-hero__footstrip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  padding: 28px 48px 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 24px;
}
.locvs-hero__coords {
  justify-self: end;
  font-family: var(--font-data);
  /* 13px floor (2026-04-22) — studio coordinates read as quiet data
     strip; the mono face already reads smaller than equivalent sans. */
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(242, 240, 235, 0.62);
  text-transform: uppercase;
  text-align: right;
}
.locvs-hero__coords .dot { color: var(--argila); margin: 0 8px; }

.locvs-hero__scrollcue {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-system);
  /* 13px floor (2026-04-22) — scroll cue previously at 10px, below the
     system minimum. Keeping wide letter-spacing so the cue still reads
     as whispered instruction, not headline. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(242, 240, 235, 0.62);
}
.locvs-hero__scrollcue svg { display: block; }
@keyframes scrollcue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.locvs-hero__scrollcue svg { animation: scrollcue-bounce 2.4s ease-in-out infinite; }

@media (max-width: 900px) {
  .locvs-hero__footstrip {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 18px;
    text-align: center;
  }
  .locvs-hero__coords,
  .locvs-hero__scrollcue { justify-self: center; text-align: center; }
  .locvs-hero__content { padding: 140px 24px 220px; }
}

/* Reveal animation already handled by .reveal-on-scroll utility; inside
   the hero we use tiny staggered fade-up for the initial load. */
.locvs-hero__content .locvs-hero__eyebrow,
.locvs-hero__content .locvs-hero__preamble,
.locvs-hero__content .locvs-hero__headline,
.locvs-hero__content .locvs-hero__sub,
.locvs-hero__content .locvs-hero__ctas {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-rise 900ms var(--ease-out-slow) forwards;
}
.locvs-hero__content .locvs-hero__eyebrow  { animation-delay:  80ms; }
.locvs-hero__content .locvs-hero__preamble { animation-delay: 180ms; }
.locvs-hero__content .locvs-hero__headline { animation-delay: 320ms; }
.locvs-hero__content .locvs-hero__sub      { animation-delay: 520ms; }
.locvs-hero__content .locvs-hero__ctas     { animation-delay: 680ms; }
.locvs-hero__footstrip > * {
  opacity: 0;
  transform: translateY(8px);
  animation: hero-rise 900ms var(--ease-out-slow) 1000ms forwards;
}
@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   LOCVS HERO — LIGHT MODE (canonical since 2026-04-21)
   -------------------------------------------------------------------
   The hero now runs on a Cloud Dancer ground. The video still plays
   behind the scene but is veiled by three stacked layers:
     layer 1  .locvs-hero__wash     heavy cream wash         (z=1)
     layer 2  .locvs-hero__glass    frosted backdrop-filter  (z=2)
     layer 3  .locvs-hero__grain    multiply grain           (z=3)
   The video reads as a slow, luminous substrate — just enough motion
   to feel alive — while typography stays in dark ink for legibility.
   ===================================================================== */
.locvs-hero.is-light {
  background: var(--cloud-dancer);
  color: var(--ink);
}

/* Video plays natural — no filter, no opacity. The map has to read. */
.locvs-hero.is-light .locvs-hero__video {
  filter: none;
  opacity: 1;
}

/* Wash — cream veil over the video. Per Gustavo 2026-04-22: filter
   opacity increased to 30% so the video reads as a softer substrate
   and headline typography sits on a calmer ground. Video reads at
   ~70% visibility through the overlay stack. */
.locvs-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(242, 240, 235, 0.30);
}

/* Text-zone backdrop — soft vertical cream fall-off over the bottom
   of the hero where the editorial block sits. Combined with the wash,
   the maximum overlay opacity at the bottom edge is ~20% (0.08 wash +
   0.12 glass floor), honouring Gustavo's 80%-video-through spec. Top
   of hero stays fully video. */
.locvs-hero__glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(242, 240, 235, 0) 0%,
      rgba(242, 240, 235, 0) 32%,
      rgba(242, 240, 235, 0.06) 62%,
      rgba(242, 240, 235, 0.12) 100%);
  backdrop-filter: blur(0.6px) saturate(1.02);
  -webkit-backdrop-filter: blur(0.6px) saturate(1.02);
}

/* Specular edge — a 1px white line at the hero's bottom boundary,
   the "edge of the glass" that signals physical object rather than
   CSS overlay. Per Directive §2.1 point 3. */
.locvs-hero.is-light::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 95%);
  z-index: 5;
  pointer-events: none;
}

/* Grain — very light. Almost subliminal. Just enough to unify the
   stack into a single surface instead of reading as "video under css". */
.locvs-hero.is-light .locvs-hero__grain {
  z-index: 3;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Spotlight — warm highlight under the cursor. On light we use
   multiply with a low opacity so it reads as a focus, not a flashlight. */
.locvs-hero.is-light .locvs-hero__spotlight {
  z-index: 3;
  background: radial-gradient(
    320px 320px at calc(var(--mx, 50%)) calc(var(--my, 50%)),
    rgba(44, 44, 46, 0.08),
    transparent 70%
  );
  mix-blend-mode: multiply;
}

/* Nav — dark ink over cream */
.locvs-hero.is-light .locvs-hero__nav {
  color: var(--ink);
}
.locvs-hero.is-light .locvs-hero__nav-links a {
  color: rgba(44, 44, 46, 0.72);
}
.locvs-hero.is-light .locvs-hero__nav-links a:hover { color: var(--ink); }

/* Mini CTA in the hero's inline top nav — matches the hero body pill
   so the buyer reads them as the same affordance. 3-layer glass physics
   (specular arc + illumination + lit bevel), scaled to nav size.
   (2026-04-22) */
.locvs-hero.is-light .locvs-hero__nav .locvs-cta-mini {
  position: relative;
  background: rgba(44, 44, 46, 0.92);
  color: var(--cloud-dancer);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.30);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 24px -8px rgba(44, 44, 46, 0.35),
    0 24px 48px -16px rgba(44, 44, 46, 0.20);
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.locvs-hero.is-light .locvs-hero__nav .locvs-cta-mini::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.40) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
.locvs-hero.is-light .locvs-hero__nav .locvs-cta-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 30% -20%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}
.locvs-hero.is-light .locvs-hero__nav .locvs-cta-mini > * {
  position: relative;
  z-index: 2;
}
.locvs-hero.is-light .locvs-hero__nav .locvs-cta-mini:hover {
  background: rgba(44, 44, 46, 0.96);
  color: var(--cloud-dancer);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 10px 28px -8px rgba(44, 44, 46, 0.45),
    0 28px 56px -16px rgba(44, 44, 46, 0.25);
}

/* Eyebrow pill — upgraded to proper Volumetric Glass object.
   Body: translucent cream with backdrop-filter blur + saturate.
   Specular: bright inset top edge. Shadow: subtle inset floor.
   This is the first glass object a user meets on LOCVS — it sets
   the material vocabulary for the whole site. */
.locvs-hero.is-light .locvs-hero__eyebrow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--gp-panel-bg);
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border: 1px solid var(--gp-panel-border-side);
  border-top-color: var(--gp-panel-border-top);
  border-bottom-color: var(--gp-panel-border-bot);
  box-shadow: var(--gp-panel-shadow);
  padding: 10px 20px;
  font-weight: 500;
  letter-spacing: 2.6px;
}
.locvs-hero.is-light .locvs-hero__eyebrow::before {
  /* specular highlight arc — the light reflecting off the bevel */
  content: "";
  position: absolute;
  top: 0.5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.72) 18%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.72) 82%,
    transparent 100%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.locvs-hero.is-light .locvs-hero__eyebrow > * { position: relative; z-index: 3; }
.locvs-hero.is-light .locvs-hero__eyebrow-dot {
  background: var(--argila);
  box-shadow: 0 0 10px rgba(184, 123, 94, 0.45);
}

/* Headline + sub — dark ink. The lead phrase wears a metallic gradient
   (ink → anthracite → argila) — the light-surface equivalent of the
   silver gradient used on dark sections. "yours" stays argila italic
   as the warm accent that anchors the whole composition. */
.locvs-hero.is-light .locvs-hero__headline {
  color: var(--ink);
}
.locvs-hero.is-light .locvs-hero__headline .grad {
  background-image: linear-gradient(
    180deg,
    #0D0D0F 0%,
    #2C2C2E 38%,
    #5C5954 72%,
    #8A7C68 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* fallback: if background-clip:text not supported, keep ink */
}
@supports not (background-clip: text) {
  .locvs-hero.is-light .locvs-hero__headline .grad { color: var(--ink); }
}
.locvs-hero.is-light .locvs-hero__headline em {
  color: var(--argila);
  -webkit-text-fill-color: var(--argila);
  /* argila italic "yours" stays OUT of the gradient — it's the warm anchor */
  background: none;
  /* Subtle argila glow — "yours" reads as lit from within (Directive v2 §2.3) */
  text-shadow: 0 0 40px rgba(184, 123, 94, 0.25);
  /* Slightly larger than surrounding text for emphasis */
  font-size: 1.08em;
}
.locvs-hero.is-light .locvs-hero__sub {
  color: var(--ink-secondary);
}

/* Primary CTA inside the hero — dark glass pill on cream surface.
   Volumetric Glass physics applied to the CTA: specular highlight at
   the top bevel, radial/linear illumination refracting through the
   surface, 4-layer shadow stack for real spatial presence. The button
   remains dark for authority but now feels like a glass bead resting
   on the page rather than a flat ink slab. (Directive v2 §2.4) */
.locvs-hero.is-light .locvs-hero__ctas .cta-primary {
  position: relative;
  background: rgba(44, 44, 46, 0.92);
  color: var(--cloud-dancer);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.30);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),   /* specular top edge */
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),         /* ground shadow */
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 24px -8px rgba(44, 44, 46, 0.35),
    0 24px 48px -16px rgba(44, 44, 46, 0.20);
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
/* Specular arc — light catching the top bevel */
.locvs-hero.is-light .locvs-hero__ctas .cta-primary::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.40) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
/* Illumination layer — subtle light refraction through the pill */
.locvs-hero.is-light .locvs-hero__ctas .cta-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 30% -20%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}
.locvs-hero.is-light .locvs-hero__ctas .cta-primary > * {
  position: relative;
  z-index: 2;
}
/* Hover: lift + intensified depth */
.locvs-hero.is-light .locvs-hero__ctas .cta-primary:hover {
  background: rgba(44, 44, 46, 0.96);
  color: var(--cloud-dancer);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 12px 32px -8px rgba(44, 44, 46, 0.45),
    0 32px 64px -16px rgba(44, 44, 46, 0.25);
}

/* Secondary CTA — outlined in ink */
.locvs-hero.is-light .locvs-hero__ctas .cta-secondary {
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  border: 1px solid rgba(44, 44, 46, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.locvs-hero.is-light .locvs-hero__ctas .cta-secondary:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(44, 44, 46, 0.42);
}

/* =====================================================================
   GLOBAL NAV CTA — glass-pill treatment
   (2026-04-22) The top-nav "Join the Waitlist" pill now mirrors the
   hero CTA's 3-layer glass physics: dark anthracite ink body with a
   specular arc along the top bevel (::before), a radial + linear
   illumination layer (::after), and a per-side border lit from above.
   Scaled down to nav dimensions (40px min-height, 12.5px text) but
   otherwise visually identical to the hero pill so the buyer reads
   them as the same affordance repeating.
   Overrides .b-nav .b-btn-primary from brief.css (which set a flat
   12px-radius dark slab with a single box-shadow).
   ===================================================================== */
.b-nav .b-btn-primary {
  position: relative;
  background: rgba(44, 44, 46, 0.92);
  color: var(--cloud-dancer);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.22);
  border-bottom-color: rgba(0, 0, 0, 0.30);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 24px -8px rgba(44, 44, 46, 0.35),
    0 24px 48px -16px rgba(44, 44, 46, 0.20);
  transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
/* Specular arc — light catching the top bevel */
.b-nav .b-btn-primary::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.40) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 2px;
}
/* Illumination — subtle light refraction through the pill thickness */
.b-nav .b-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 30% -20%,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 50%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}
.b-nav .b-btn-primary > * {
  position: relative;
  z-index: 2;
}
.b-nav .b-btn-primary:hover {
  background: rgba(44, 44, 46, 0.96);
  color: var(--cloud-dancer);
  transform: translateY(-1px);
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 10px 28px -8px rgba(44, 44, 46, 0.45),
    0 28px 56px -16px rgba(44, 44, 46, 0.25);
}

/* Footstrip — dark ink on cream.
   Stats-related rules removed 2026-04-22 with the stats strip itself. */
.locvs-hero.is-light .locvs-hero__coords,
.locvs-hero.is-light .locvs-hero__scrollcue {
  color: var(--ink-secondary);
}
.locvs-hero.is-light .locvs-hero__coords .dot { color: var(--argila); }

/* =====================================================================
   GLOBAL NAV HIDE-TILL-SCROLL — overrides brief.css .b-nav defaults.
   The hero has its own editorial nav; the global scroll-aware nav
   (.b-nav) should only fade in once the user has scrolled past the
   hero so we don't stack two bars.
   ===================================================================== */
.b-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out-fast), transform 300ms var(--ease-out-fast);
  transform: translateY(-8px);
}
.b-nav.is-scrolled {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* =====================================================================
   SPATIAL INTELLIGENCE — anchor / second climax of the page
   -------------------------------------------------------------------
   Architectural declaration, Volumetric Glass register:
     · small glass tag above
     · MASSIVE mark (ink → argila metallic gradient)
     · one resolving line below
   No meditative paragraphs. Air and restraint do the work.
   ===================================================================== */
.b-si {
  padding-top: 200px;
  padding-bottom: 200px;
  position: relative;
  /* Directive v2 §3.1 — overflow:hidden was clipping the descender on
     "Spatial Intelligence". The argila aura (::before, inset:0) still
     paints correctly without clipping context. */
  overflow: visible;
}
/* subtle warm argila aura behind the mark — feels like a lit bevel */
.b-si::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 52%, rgba(184, 123, 94, 0.08), transparent 70%);
  pointer-events: none;
}
.b-si-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: clamp(8px, 2.4vw, 32px);
  text-align: center;
  position: relative;
  z-index: 1;
}
/* Let the mark breathe beyond the standard 1200 wrap on SI section */
.b-si .b-wrap { max-width: 1360px; }

/* Section tag — same glass vocabulary as the hero eyebrow */
.b-si-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-family: var(--font-system);
  /* 13px floor (2026-04-22) — SI section tag shares the hero-eyebrow
     vocabulary; both raised together for consistency. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: var(--radius-pill);
  background: var(--gp-dense-bg);
  backdrop-filter: blur(var(--gp-dense-blur)) saturate(var(--gp-dense-saturate));
  -webkit-backdrop-filter: blur(var(--gp-dense-blur)) saturate(var(--gp-dense-saturate));
  border: 1px solid var(--gp-dense-border-side);
  border-top-color: var(--gp-dense-border-top);
  border-bottom-color: var(--gp-dense-border-bot);
  box-shadow: var(--gp-dense-shadow);
  margin-bottom: 72px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.b-si-tag::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.72) 18%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.72) 82%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.b-si-tag > * { position: relative; z-index: 3; }
.b-si-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--argila);
  box-shadow: 0 0 10px rgba(184, 123, 94, 0.45);
}

.b-si-mark {
  font-family: var(--font-display);
  font-weight: 500;
  /* Reframed 2026-04-21: cap reduced from 240→196 + em-based tracking so
     "Intelligence" (12 chars) cannot overflow the 1320 inner at any vw.
     padding-inline gives glyph descenders room inside the clip rect.
     2026-04-22 (Directive v2 §3.1): bumped line-height 0.94→0.92 and
     added padding-bottom 0.08em so the "g" descender is never cropped
     even if overflow:hidden ever returns. */
  font-size: clamp(72px, 11.8vw, 196px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  padding-inline: 8px;
  padding-bottom: 0.08em;
  background-image: linear-gradient(
    180deg,
    #1A1A1C 0%,
    #2C2C2E 30%,
    #5C5954 68%,
    #8A7C68 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-wrap: balance;
}

/* Resolving line — single, quiet, authoritative. Lives in the
   Cormorant inhabitant voice because it names the new category. */
.b-si-close {
  font-family: var(--font-inhabitant);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--ink-secondary);
  margin: 72px auto 0;
  max-width: 44ch;
  letter-spacing: -0.2px;
}
.b-si-close strong {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.b-si-close .b-si-close-mark {
  display: inline-block;
  vertical-align: -4px;
  padding: 0;
}
.b-si-close .b-si-close-mark .b-locvs-wm {
  vertical-align: baseline;
}

@media (max-width: 720px) {
  .b-si { padding-top: 120px; padding-bottom: 120px; }
  .b-si-mark { letter-spacing: -0.035em; font-size: clamp(56px, 13.5vw, 96px); }
  .b-si-tag { margin-bottom: 48px; }
  .b-si-close { margin-top: 48px; }
}

/* =====================================================================
   SI entrance choreography (Directive §2.2 — Apple-grade, tectonic)
   -------------------------------------------------------------------
   The category declaration arrives in measured stages:
     0ms    ── tag surfaces (glass eyebrow establishes location)
     180ms  ── mark rises + fades (the name "Spatial Intelligence"
                 settles into the page; 1100ms of slow deliberation)
     720ms  ── close line resolves (the instrument names itself)
   One observer (.b-si-inner.b-rise) toggles .is-in — children respond.
   Stays inert under prefers-reduced-motion and html.no-rise.
   ===================================================================== */
.b-si-tag,
.b-si-mark,
.b-si-close {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 900ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 900ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform, opacity;
}
.b-si-mark {
  transform: translateY(22px);
  transition:
    opacity 1100ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)) 180ms,
    transform 1100ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)) 180ms,
    filter 1400ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)) 220ms;
  /* Arrives with a breath of chromatic uncertainty that resolves into focus */
  filter: blur(6px) saturate(0.85);
}
.b-si-close {
  transition:
    opacity 900ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)) 720ms,
    transform 900ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)) 720ms;
}

.b-si-inner.is-in .b-si-tag,
.b-si-inner.is-in .b-si-mark,
.b-si-inner.is-in .b-si-close {
  opacity: 1;
  transform: none;
}
.b-si-inner.is-in .b-si-mark {
  filter: blur(0) saturate(1);
}

/* A quiet argila pulse on the tag dot — runs once when the tag arrives,
   then settles. Signals "a new thing is entering the vocabulary." */
.b-si-inner.is-in .b-si-tag-dot {
  animation: b-si-dot-pulse 1800ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)) 120ms 1;
}
@keyframes b-si-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 123, 94, 0.00),
                    0 0 10px rgba(184, 123, 94, 0.45); }
  30%  { box-shadow: 0 0 0 6px rgba(184, 123, 94, 0.18),
                    0 0 14px rgba(184, 123, 94, 0.70); }
  100% { box-shadow: 0 0 0 0 rgba(184, 123, 94, 0.00),
                    0 0 10px rgba(184, 123, 94, 0.45); }
}

html.no-rise .b-si-tag,
html.no-rise .b-si-mark,
html.no-rise .b-si-close {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .b-si-tag,
  .b-si-mark,
  .b-si-close {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .b-si-inner.is-in .b-si-tag-dot { animation: none !important; }
}

/* Three glass pillars BELOW the mark — (Directive §2.4)
   Each card is a frost-tier membrane: specular top + illumination + quiet
   SF-mono enumeration that doubles as a numerical ordering. Gap wide enough
   that each pillar reads as its own declaration, not a list. */
.b-si-pillars {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}
.b-si-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px 32px 36px;
  border-radius: var(--radius-lg, 14px);
  background: var(--gp-frost-bg);
  backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  border: 1px solid var(--gp-frost-border-side);
  border-top-color: var(--gp-frost-border-top);
  border-bottom-color: var(--gp-frost-border-bot);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -1px 0 rgba(44, 44, 46, 0.04) inset,
    0 10px 28px -14px rgba(44, 44, 46, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 400ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1));
}
.b-si-card::before {
  content: "";
  position: absolute;
  top: 1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.90), transparent);
  pointer-events: none;
  z-index: 2;
}
.b-si-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 22% 0%,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.04) 35%,
      transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.b-si-card:hover {
  transform: translateY(-4px);
}
.b-si-card > * { position: relative; z-index: 3; }

.b-si-card-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  /* 13px floor (2026-04-22) — card tag and numeral raised in lockstep
     so the baseline-aligned pair keeps its visual ratio. */
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ink-secondary, #555558);
}
.b-si-card-num {
  font-family: var(--font-mono, "SF Mono", ui-monospace, Menlo, monospace);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--argila, #B87B5E);
  font-feature-settings: "tnum";
}
.b-si-card-h {
  font-family: var(--font-display, "Campton", "Inter", sans-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.4px;
  color: var(--ink, #2C2C2E);
  margin: 0;
  text-wrap: balance;
}
.b-si-card-p {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-secondary, #555558);
  margin: 0;
}
@media (max-width: 820px) {
  .b-si-pillars { grid-template-columns: 1fr; gap: 16px; margin-top: 64px; }
  .b-si-card { padding: 32px 26px 30px; }
}

/* =====================================================================
   SCIENCE — 2-column editorial with mono citation anchors (§2.5)
   -------------------------------------------------------------------
   Left column:  inhabitant-voice pullquote over thesis prose.
   Right column: four sourced disciplines, each introduced by a
                 SF-Mono numeral (00, 01, 02, 03) and closed by a
                 mono citation line in argila.
   Rule of gravity: every empirical claim is forensically anchored.
   ===================================================================== */
.b-science-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  margin-top: 64px;
  align-items: start;
}
.b-science-left {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.b-science-pull {
  font-family: var(--font-inhabitant, "Cormorant Garamond", Georgia, serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.28;
  color: var(--ink, #2C2C2E);
  margin: 0;
  letter-spacing: -0.3px;
  text-wrap: balance;
}
.b-science-pull em {
  font-style: italic;
  color: var(--argila, #B87B5E);
  font-weight: 500;
}
.b-science-body {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-secondary, #555558);
  margin: 0;
  max-width: 44ch;
}

.b-science-disciplines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(44, 44, 46, 0.08);
}
.b-sci-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0 32px;
  border-bottom: 1px solid rgba(44, 44, 46, 0.08);
  transition: background-color 240ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1));
}
.b-sci-item:hover {
  background-color: rgba(44, 44, 46, 0.02);
}
.b-sci-num {
  font-family: var(--font-mono, "SF Mono", ui-monospace, Menlo, monospace);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--argila, #B87B5E);
  padding-top: 4px;
  font-feature-settings: "tnum";
}
.b-sci-title {
  font-family: var(--font-display, "Campton", "Inter", sans-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--ink, #2C2C2E);
  margin: 0 0 8px;
}
.b-sci-p {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-secondary, #555558);
  margin: 0 0 10px;
  max-width: 52ch;
}
.b-sci-cite {
  font-family: var(--font-mono, "SF Mono", ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary, #84848A);
  margin: 0;
}
@media (max-width: 900px) {
  .b-science-split { grid-template-columns: 1fr; gap: 48px; }
  .b-science-left { position: static; }
  .b-sci-item { grid-template-columns: 48px 1fr; gap: 16px; }
}

/* =====================================================================
   REFERENCES — sourced-claim list, sits before the footer
   -------------------------------------------------------------------
   Intellectual-honesty contract: every stat on the page footnotes
   into this list via #ref-N anchors. Ordered, numbered, monospaced
   numerals, quiet typography so the evidence reads as evidence.
   ===================================================================== */
.b-refs {
  padding-top: 96px;
  padding-bottom: 96px;
}
.b-refs-list {
  list-style: none;
  padding: 0;
  margin: 48px auto 0;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  counter-reset: refcount;
}
.b-refs-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(44, 44, 46, 0.08);
  scroll-margin-top: 100px;
}
.b-refs-list li:last-child { border-bottom: none; }
.b-refs-list li:target {
  background: rgba(184, 123, 94, 0.06);
  border-radius: var(--radius-small);
  padding: 12px 16px;
  margin: -12px -16px;
}
.b-refs-n {
  font-family: var(--font-data);
  font-weight: 400;
  font-size: 13px;
  color: var(--argila);
  letter-spacing: 1px;
  padding-top: 3px;
}
.b-refs-body {
  font-family: var(--font-system);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-secondary);
}
.b-refs-body strong {
  color: var(--ink);
  font-weight: 500;
}
.b-refs-body a {
  color: var(--argila);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 123, 94, 0.3);
  transition: border-color var(--duration-fast) ease;
}
.b-refs-body a:hover { border-bottom-color: var(--argila); }

/* Footnote superscripts inside body copy (hero footstrip stats, etc.) */
.b-stat sup a,
sup.b-ref-link a,
.b-stat-l sup a {
  color: var(--argila);
  text-decoration: none;
  font-size: 0.78em;
  margin-left: 2px;
  transition: color var(--duration-fast) ease;
}
.b-stat sup a:hover,
sup.b-ref-link a:hover,
.b-stat-l sup a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* =====================================================================
   IMAGE SLOT SYSTEM — placeholder + future image wrapper (Phase 7)
   -------------------------------------------------------------------
   A universal image slot that preserves aspect ratio, shows a quiet
   glass-paper placeholder while empty, and accepts real images via
   <img> or <picture> children without layout shift. Curation spec
   lives in brief.jsx near each call site.
   ===================================================================== */
.b-imgslot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: var(--gp-frost-bg);
  backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  border: 1px solid var(--gp-frost-border-side);
  border-top-color: var(--gp-frost-border-top);
  border-bottom-color: var(--gp-frost-border-bot);
  box-shadow: var(--gp-frost-shadow);
}
.b-imgslot.is-square   { aspect-ratio: 1 / 1; }
.b-imgslot.is-wide     { aspect-ratio: 16 / 9; }
.b-imgslot.is-portrait { aspect-ratio: 3 / 4; }
.b-imgslot > img,
.b-imgslot > picture,
.b-imgslot > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.b-imgslot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--ink-tertiary, #84848A);
  text-align: center;
  pointer-events: none;
}
.b-imgslot-placeholder::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(184,123,94,0.35), rgba(184,123,94,0.08));
  box-shadow: 0 0 0 1px rgba(184,123,94,0.18);
}
.b-imgslot-placeholder-n {
  font-family: var(--font-data, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.b-imgslot-placeholder-l {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 28ch;
}

/* =====================================================================
   TWOBUYERS POLISH — blueprint-chip header (Phase 4)
   -------------------------------------------------------------------
   Adds profile color dot + axis coordinates to each buyer column head.
   Creates visual continuity with SixProfiles gallery above.
   ===================================================================== */
.b-buyer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.b-buyer-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  background: var(--gp-panel-bg);
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border: 1px solid var(--gp-panel-border-side);
  border-top-color: var(--gp-panel-border-top);
  border-bottom-color: var(--gp-panel-border-bot);
  border-radius: 100px;
  box-shadow: var(--gp-panel-shadow);
}
.b-buyer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(44,44,46,0.12),
    0 1px 3px rgba(44,44,46,0.12);
}
.b-buyer-axis {
  font-family: var(--font-data, "JetBrains Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--ink-secondary, #555558);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Profile-color tints (Directive §2.10) — each column gets the
   faintest wash of its profile hue. Cloud Dancer stays visible;
   only 4-6% saturation so it registers as a signature, not a fill. */
.b-buyer-col.is-pavilion {
  background: linear-gradient(
    180deg,
    rgba(138, 138, 138, 0.05) 0%,
    rgba(138, 138, 138, 0.02) 100%
  );
}
.b-buyer-col.is-harbor {
  background: linear-gradient(
    180deg,
    rgba(160, 137, 108, 0.06) 0%,
    rgba(160, 137, 108, 0.02) 100%
  );
}

/* Avoid items — strikethrough + muted color (Directive §2.10).
   The mark reads as "ruled out": visible enough to understand the
   contrast, faint enough to let the Show column carry the weight. */
.b-buyer-col li.is-avoid {
  color: var(--ink-tertiary, #84848A);
  text-decoration: line-through;
  text-decoration-color: rgba(44, 44, 46, 0.35);
  text-decoration-thickness: 1px;
}
.b-buyer-col li.is-avoid::before {
  background: transparent;
  border: 1px solid rgba(44, 44, 46, 0.25);
}

/* SCIENCE PULLQUOTE POLISH (Phase 4) */
.b-pullquote {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--ink, #2C2C2E);
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 0 32px;
}
.b-pullquote::before,
.b-pullquote::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: rgba(184, 123, 94, 0.5);
}
.b-pullquote::before { left: 0; }
.b-pullquote::after  { right: 0; }

/* =====================================================================
   DIAGRAM LOCVS — Framework section (rebuilt 2026-04-21, Directive §A)
   -------------------------------------------------------------------
   The radar+legend layout was retired. The Venn IS the diagram now;
   the six dimensions are explained in two tiers — three primary
   vertices (Vitruvian categories) and three pairwise intersections
   (the disciplines that bridge them) — followed by a coda for the
   centerpoint, BELONGING.
   ===================================================================== */
.b-diagram { padding-top: 140px; padding-bottom: 140px; }

.b-dim-block {
  margin-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* --- Tier head (Primary triad / Pairwise intersections) --- */
.b-dim-tier { display: flex; flex-direction: column; gap: 36px; }
.b-dim-tier-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}
.b-dim-tier-tag {
  font-family: var(--font-data, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 400;
  color: var(--argila, #B87B5E);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.b-dim-tier-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(184, 123, 94, 0.45) 0%,
    rgba(44, 44, 46, 0.12) 35%,
    rgba(44, 44, 46, 0.04) 100%
  );
}
.b-dim-tier-sub {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-tertiary, #84848A);
  letter-spacing: 0.1px;
}

/* --- Card grid --- */
.b-dim-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* --- Card itself --- */
.b-dim-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px 28px 28px;
  background: var(--gp-frost-bg);
  backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  border: 1px solid var(--gp-frost-border-side);
  border-top-color: var(--gp-frost-border-top);
  border-bottom-color: var(--gp-frost-border-bot);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--gp-frost-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 420ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 420ms var(--ez-heavy, cubic-bezier(0.16, 1, 0.3, 1));
}
.b-dim-card::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.72) 18%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.72) 82%,
    transparent 100%);
  pointer-events: none;
  border-radius: 2px;
  z-index: 2;
  mix-blend-mode: screen;
}
.b-dim-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(140% 90% at 18% -10%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 32%,
      transparent 62%),
    radial-gradient(100% 60% at 92% 108%,
      rgba(184, 123, 94, 0.06) 0%,
      transparent 55%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 45%,
      rgba(44, 44, 46, 0.03) 100%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.b-dim-card > * { position: relative; z-index: 3; }
.b-dim-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(44, 44, 46, 0.06),
    0 1px 1px rgba(44, 44, 46, 0.04),
    0 10px 22px -12px rgba(44, 44, 46, 0.14),
    0 32px 64px -28px rgba(44, 44, 46, 0.24);
}
/* The intersection cards lean a touch warmer — argila accent on the rule. */
.b-dim-card.is-intersection { background: rgba(255, 251, 246, 0.62); }

/* --- Card head: numeral · label · parent --- */
.b-dim-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(44, 44, 46, 0.08);
}
.b-dim-card-n {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-data, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--argila, #B87B5E);
  letter-spacing: 1.6px;
  padding-top: 2px;
}
.b-dim-card-label {
  font-family: var(--font-display, Inter);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--ink, #2C2C2E);
  margin: 0;
}
.b-dim-card-parent {
  grid-column: 2;
  font-size: 12px;
  letter-spacing: 0.8px;
  color: var(--ink-tertiary, #84848A);
}
.b-dim-card.is-primary .b-dim-card-parent em {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-tertiary, #84848A);
  letter-spacing: 0.1px;
}
.b-dim-card.is-intersection .b-dim-card-parent {
  font-family: var(--font-data, "JetBrains Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--ink-tertiary, #84848A);
}

/* --- Card body: italic role line + prose --- */
.b-dim-card-role {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-secondary, #555558);
  margin: 0;
}
.b-dim-card-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-secondary, #555558);
  margin: 0;
}

/* --- Coda: BELONGING (the centerpoint) --- */
.b-dim-coda {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: start;
  padding: 36px 36px 36px 32px;
  background: linear-gradient(
    180deg,
    rgba(184, 123, 94, 0.08) 0%,
    rgba(184, 123, 94, 0.02) 100%
  );
  border: 1px solid rgba(184, 123, 94, 0.22);
  border-radius: var(--radius-lg, 14px);
  position: relative;
}
.b-dim-coda::before {
  content: "";
  position: absolute;
  top: 1px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  pointer-events: none;
  border-radius: 2px;
}
.b-dim-coda-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(184, 123, 94, 0.4);
  border-radius: 50%;
  color: var(--argila, #B87B5E);
  background: rgba(255, 255, 255, 0.5);
}
.b-dim-coda-body { display: flex; flex-direction: column; gap: 8px; }
.b-dim-coda-label {
  font-family: var(--font-display, Inter);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--ink, #2C2C2E);
  margin: 0;
}
.b-dim-coda-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-secondary, #555558);
  margin: 0;
  max-width: 64ch;
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .b-dim-block { gap: 64px; margin-top: 72px; }
  .b-dim-grid { grid-template-columns: 1fr; gap: 20px; }
  .b-diagram { padding-top: 96px; padding-bottom: 96px; }
  .b-dim-tier-head { grid-template-columns: auto 1fr; }
  .b-dim-tier-sub { display: none; }
  .b-dim-coda { padding: 28px 24px; grid-template-columns: 44px 1fr; gap: 16px; }
  .b-dim-coda-mark { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
  .b-dim-card { padding: 26px 22px 22px; }
  .b-dim-card-label { font-size: 16px; }
}

/* =====================================================================
   SIX PROFILES — gallery of archetypal spatial readings (Phase 6)
   -------------------------------------------------------------------
   3x2 grid on desktop, single column on mobile. Each card: color dot
   + axis coordinates (mono data) + adjective (display) + noun italic
   + 2-line descriptor. Glass panel density for tactile presence.
   ===================================================================== */
.b-profiles { padding-top: 140px; padding-bottom: 140px; }
.b-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 80px;
}
/* Material specimens (Directive §2.10).
   Each card = a sample tablet. The 3px color strip on the leading edge is
   the profile's chromatic signature. Frost glass body, specular top edge,
   illumination wash, and a tectonic lift on hover that intensifies the
   color strip — like picking up a real material sample. */
.b-profile-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 28px 32px 32px; /* +4px left to clear the strip */
  background: var(--gp-frost-bg);
  backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  border: 1px solid var(--gp-frost-border-side);
  border-top-color: var(--gp-frost-border-top);
  border-bottom-color: var(--gp-frost-border-bot);
  border-radius: var(--radius-lg, 14px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -1px 0 rgba(44, 44, 46, 0.04) inset,
    0 14px 40px -20px rgba(44, 44, 46, 0.12);
  transition:
    transform 380ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 380ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Specular highlight (top edge bevel) */
.b-profile-card::before {
  content: "";
  position: absolute;
  top: 1px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
  pointer-events: none;
  border-radius: 2px;
  z-index: 2;
}
/* Illumination wash (refracted volume through the membrane) */
.b-profile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 22% 0%,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.04) 35%,
      transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.b-profile-card > * { position: relative; z-index: 3; }

/* The chromatic signature — 3px color strip on the leading edge.
   Reads as the material specimen's identifying mark. Intensifies on hover. */
.b-profile-strip {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--profile-color, #B87B5E);
  z-index: 4;
  transition: width 320ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1));
  border-radius: var(--radius-lg, 14px) 0 0 var(--radius-lg, 14px);
  /* faint inner glow from the strip outward, sits behind content */
  box-shadow: 0 0 24px -6px var(--profile-color, #B87B5E);
}
.b-profile-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 -1px 0 rgba(44, 44, 46, 0.06) inset,
    0 28px 60px -22px rgba(44, 44, 46, 0.20);
}
.b-profile-card:hover .b-profile-strip {
  width: 5px;
}
.b-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.b-profile-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(44,44,46,0.12),
    0 2px 6px rgba(44,44,46,0.14);
}
.b-profile-adj {
  font-family: var(--font-display, Inter);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 500;
  color: var(--ink, #2C2C2E);
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin: 0 0 6px;
}
.b-profile-noun {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--argila, #B87B5E);
  margin: 0 0 20px;
}
.b-profile-noun em { font-style: italic; }
.b-profile-phrase {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.35;
  color: var(--ink, #2C2C2E);
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 1px solid var(--argila, #B87B5E);
  quotes: none;
}
.b-profile-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-secondary, #555558);
  margin: 0;
}
.b-profile-caveat {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-tertiary, #84848A);
  text-align: center;
  max-width: 680px;
  margin: 64px auto 0;
  line-height: 1.55;
}
@media (max-width: 960px) {
  .b-profile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .b-profile-grid { grid-template-columns: 1fr; }
  .b-profiles { padding-top: 96px; padding-bottom: 96px; }
}

/* =====================================================================
   SECTION BRIDGE — ritual interstitial between page acts
   -------------------------------------------------------------------
   A thin hairline with a single argila coordinate dot at center.
   Sits between major narrative beats (Act I → II, II → III, III → IV).
   Used sparingly — three bridges total. Cream ground.
   ===================================================================== */
.b-bridge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 72px 0;
  background: var(--color-bg);
  position: relative;
}
.b-bridge-line {
  position: relative;
  width: 120px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(44, 44, 46, 0.18) 50%,
    transparent 100%
  );
}
.b-bridge-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--argila);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--color-bg);
}
@media (max-width: 720px) {
  .b-bridge { padding: 48px 0; }
  .b-bridge-line { width: 80px; }
}

/* =====================================================================
   VITRUVIUS → VENN → LOCVS — three-state scroll + stepper morph
   -------------------------------------------------------------------
   Opens the Framework section's two-column stage. --p is set by the
   React effect (0..1 from scroll position OR snapped by the stepper).

   STATE I — Vitruvian rings + triad caption (p ≈ 0.00 → 0.35):
     Three concentric circles. No human figure. A single italic
     caption underneath: "firmitas · utilitas · venustas — VITRUVIUS".

   STATE II — Venn convergence (p ≈ 0.30 → 0.75):
     The three rings separate into a Venn — three traditions
     visibly overlapping into shared territory.

   STATE III — Full LOCVS diagram (p ≈ 0.70 → 1.00):
     Labels arrive. FORMA / FUNCIONALIDADE / ESSÊNCIA on the primary
     lobes; SEMIÓTICA / FENOMENOLOGIA / HUMANISMO on the intersections;
     BELONGING at the center.

   The morph is sticky inside .b-diagram-figure so it stays beside
   the dim cards as they scroll past.
   ===================================================================== */
/* Register --p as a typed <number> so calc() can use it in opacity/transform. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.b-vitruvius {
  --p: 0;
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.b-vitruvius svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* IMPORTANT: no `transition` on these — Chrome treats calc() over a
   typed @property variable as a non-interpolable CSS function in
   transitions, which freezes the computed opacity at its starting
   value. We drive smoothness from --p itself instead (smoothstep in JS
   and rAF gating), which yields the same visual ease without the bug. */

/* ---------- STATE I — Vitruvian rings ---------- */
.b-vit-rings {
  /* Three concentric circles + triad caption. Full at p=0, gone by p≈0.40. */
  opacity: clamp(0, calc(1 - var(--p) * 2.5), 1);
  will-change: opacity;
}
.b-vit-ring-cap,
.b-vit-ring-sub {
  /* Caption belongs to State I — fades together with the rings. */
  pointer-events: none;
}

/* ---------- STATE II — Venn separation ---------- */
.b-vit-venn {
  /* Wrapper fades in over 0.30 → 0.55. */
  opacity: clamp(0, calc((var(--p) - 0.30) * 4), 1);
  will-change: opacity;
}
/* Each circle wrapper translates outward from the center. Shared
   --sep helper ramps 0 → 1 across 0.35 → 0.75. */
.b-vit-venn-c {
  --sep: clamp(0, calc((var(--p) - 0.35) / 0.40), 1);
  transform-origin: 300px 240px;
  transform-box: fill-box;
  will-change: transform;
}
.b-vit-venn-c.is-top {
  transform: translate(0px, calc(-70px * var(--sep)));
}
.b-vit-venn-c.is-bl {
  transform: translate(calc(-70px * var(--sep)), calc(45px * var(--sep)));
}
.b-vit-venn-c.is-br {
  transform: translate(calc(70px * var(--sep)), calc(45px * var(--sep)));
}

/* ---------- STATE III — Center + labels ---------- */
.b-vit-center {
  /* Argila halo + BELONGING crosshair. Fade in 0.65 → 0.90. */
  opacity: clamp(0, calc((var(--p) - 0.65) * 4), 1);
  will-change: opacity;
}
.b-vit-labels {
  /* All text + leader lines. Arrive last — 0.78 → 1.00. */
  opacity: clamp(0, calc((var(--p) - 0.78) * 4.5), 1);
  will-change: opacity;
}
/* Argila halo behind the eventual BELONGING centerpoint — blooms with
   the center group so it does not glow during the rings phase. */
.b-vit-halo {
  opacity: clamp(0, calc((var(--p) - 0.55) * 3), 1);
}
/* Faint crosshair anchor — invisible early, settles in alongside the
   labels so the geometry has a gentle structural reference. */
.b-vit-cross {
  opacity: clamp(0, calc((var(--p) - 0.78) * 4.5), 1);
}

/* ---------- Stepper — three pills that snap I / II / III ---------- */
.b-vit-stepper {
  display: inline-flex;
  margin: 22px auto 0;
  padding: 4px;
  gap: 2px;
  border-radius: 14px;
  background: var(--gp-panel-bg);
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border: 1px solid var(--gp-panel-border-side);
  border-top-color: var(--gp-panel-border-top);
  border-bottom-color: var(--gp-panel-border-bot);
  box-shadow: var(--gp-panel-shadow);
}
.b-vit-step {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 11px;
  padding: 7px 14px 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  color: var(--ink-tertiary, #84848A);
  transition: background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.b-vit-step:hover {
  color: var(--ink-secondary, #555558);
  background: rgba(44, 44, 46, 0.03);
}
.b-vit-step.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink, #2C2C2E);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(44, 44, 46, 0.06),
    0 4px 10px rgba(44, 44, 46, 0.04);
}
.b-vit-step:focus-visible {
  outline: 2px solid rgba(184, 123, 94, 0.55);
  outline-offset: 2px;
}
.b-vit-step-n {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 1.4px;
  color: inherit;
  opacity: 0.65;
}
.b-vit-step.is-active .b-vit-step-n {
  color: var(--argila, #B87B5E);
  opacity: 1;
}
.b-vit-step-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Caption — from/to ledger. Shifts emphasis from Vitruvius to LOCVS. */
.b-vitruvius__cap {
  margin: 16px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-tertiary, #84848A);
}
.b-vitruvius__cap .b-vit-from {
  opacity: clamp(0.35, calc(1 - var(--p) * 0.7), 1);
  transition: opacity 200ms linear;
}
.b-vitruvius__cap .b-vit-to {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--argila, #B87B5E);
  opacity: clamp(0.35, calc(0.35 + var(--p) * 0.75), 1);
  font-weight: 500;
  transition: opacity 200ms linear;
}
.b-vitruvius__cap .b-vit-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(44, 44, 46, 0.30),
    rgba(184, 123, 94, 0.60)
  );
}
@media (prefers-reduced-motion: reduce) {
  .b-vit-rings,
  .b-vit-venn,
  .b-vit-venn-c,
  .b-vit-center,
  .b-vit-labels,
  .b-vitruvius__cap * { transition: none !important; }
  .b-vit-venn-c { --sep: 1; }
}

/* =====================================================================
   .b-diagram-stage — sticky two-column stage (figure | cards)
   -------------------------------------------------------------------
   The morph is sticky in the left column and stays in view while the
   dim cards scroll past on the right. The stage is tall enough for the
   morph to traverse all three states as the cards advance.
   ===================================================================== */
.b-diagram-stage {
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(380px, 1fr);
  gap: 56px;
  margin: 56px 0 80px;
  align-items: start;
}
.b-diagram-figure {
  position: relative;
  /* No min-height — stickiness is bounded by the cards column height. */
}
.b-diagram-figure-sticky {
  position: sticky;
  top: 96px; /* clears the nav */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 0;
}
.b-diagram-cards {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.b-diagram-cards .b-dim-tier:first-child { margin-top: 0; }
/* Inside the right column the cards always stack vertically — the
   column is too narrow for 3-across, and the vertical rhythm is what
   drives the sticky morph's scroll-through. */
.b-diagram-cards .b-dim-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}
.b-diagram-cards .b-dim-tier { gap: 22px; }
.b-diagram-cards .b-dim-card {
  padding: 24px 24px 22px;
  gap: 10px;
}
.b-diagram-cards .b-dim-card-body { font-size: 14px; line-height: 1.58; }
.b-diagram-cards .b-dim-card-role { font-size: 15px; }
.b-diagram-cards .b-dim-coda {
  padding: 28px 26px;
  gap: 18px;
  grid-template-columns: 44px 1fr;
}
.b-diagram-cards .b-dim-coda-mark { width: 44px; height: 44px; }
.b-diagram-cards .b-dim-coda-text { font-size: 14.5px; }

@media (max-width: 1024px) {
  .b-diagram-stage {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 40px 0 64px;
  }
  .b-diagram-figure-sticky {
    position: static;
    padding-bottom: 8px;
  }
}
@media (max-width: 720px) {
  .b-vitruvius { max-width: 420px; }
  .b-vitruvius__cap { font-size: 9.5px; gap: 10px; }
  .b-vit-stepper { padding: 3px; }
  .b-vit-step { padding: 6px 11px; gap: 6px; }
  .b-vit-step-label { font-size: 11.5px; }
  .b-diagram-stage { gap: 28px; margin: 32px 0 56px; }
}
@media (max-width: 480px) {
  .b-vitruvius { max-width: 340px; }
  .b-vit-step-label { display: none; }
  .b-vit-step-n { font-size: 11px; padding: 0 4px; }
}

/* =====================================================================
   VENN — three-tradition convergence (Directive §2.7)
   -------------------------------------------------------------------
   Sits between the section headline and the hex radar. Reads as a
   preface: WHERE LOCVS comes from, before showing WHAT it produces.
   ===================================================================== */
.b-venn {
  position: relative;
  max-width: 720px;
  margin: 56px auto 16px;
  padding: 12px 0 0;
  text-align: center;
}
.b-venn svg {
  width: 100%;
  height: auto;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
.b-venn-cap {
  margin: 12px auto 0;
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-secondary, #555558);
  letter-spacing: 0.01em;
}
.b-venn-cap em {
  font-style: italic;
  font-weight: 500;
  color: var(--ink, #2C2C2E);
}
.b-venn-cap span {
  color: var(--argila, #B87B5E);
  font-style: italic;
}
@media (max-width: 720px) {
  .b-venn { margin-top: 36px; }
  .b-venn-cap { font-size: 13.5px; padding: 0 16px; }
}

/* =====================================================================
   GENEALOGY — interactive theoretical lineage (Directive §D, 2026-04-22)
   -------------------------------------------------------------------
   Five eras on a continuous thread. Each era is a clickable node;
   clicking one expands a detail panel beneath the timeline. The
   thread "fills" with argila up to the active node, so the reader
   can see the inheritance arriving. Default selection is the present
   moment (LOCVS) — so the lineage opens already pointing at the now.
   ===================================================================== */
.b-genealogy {
  margin: 112px auto 0;
  max-width: 1180px;
  padding: 40px 28px 36px;
  border-top: 1px solid rgba(44, 44, 46, 0.14);
  border-bottom: 1px solid rgba(44, 44, 46, 0.14);
  position: relative;
  --gen-fill: 100%;
}

/* When the lineage sits inside the Framework section (between section
   head and studio), tighten its top margin — the section head already
   gives breathing room. */
.b-diagram.b-fw .b-genealogy {
  margin: 56px auto 0;
}
/* Subtle structural cap rules — argila section markers at corners */
.b-genealogy::before,
.b-genealogy::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 1px;
  background: rgba(184, 123, 94, 0.55);
  top: -1px;
  left: 0;
}
.b-genealogy::after { top: auto; bottom: -1px; left: auto; right: 0; }

/* ---------- HEAD — section label + sublabel pairing ---------- */
.b-genealogy-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.b-genealogy-label {
  display: block;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-tertiary, #84848A);
}
.b-genealogy-label::before {
  content: "§ ";
  color: var(--argila, #B87B5E);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0;
}
.b-genealogy-sublabel {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-tertiary, #84848A);
  letter-spacing: 0.1px;
}

/* ---------- THREAD — horizontal timeline of clickable era nodes ---------- */
.b-genealogy-thread {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
  z-index: 0;
}
/* Base inheritance thread — neutral hairline behind every node */
.b-genealogy-thread::before {
  content: "";
  position: absolute;
  left: calc(12px + 10%);
  right: calc(12px + 10%);
  top: 18px;
  height: 1px;
  background: rgba(44, 44, 46, 0.18);
  z-index: 0;
}
/* Filled portion of the thread — runs from start up to the active node */
.b-genealogy-thread::after {
  content: "";
  position: absolute;
  left: calc(12px + 10%);
  top: 18px;
  width: calc((100% - 24px - 20%) * (var(--gen-fill, 100%) / 100%));
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(44, 44, 46, 0.55) 0%,
    rgba(184, 123, 94, 0.85) 100%
  );
  z-index: 0;
  transition: width 540ms var(--ease-out-heavy);
}

.b-gen-node {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.b-gen-node-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 8px;
  margin: 0;
  width: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-family: inherit;
  color: inherit;
  transition: transform 240ms var(--ease-out-heavy);
}
.b-gen-node-btn:hover {
  transform: translateY(-1px);
}
.b-gen-node-btn:focus-visible {
  outline: 2px solid rgba(184, 123, 94, 0.55);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Era marker — a circle with the Roman numeral inside.
   States:
     • default     — outline, ink color
     • is-reached  — outline shifts to ink-primary
     • is-active   — fills with argila, white numeral, glow + ring
     • is-now      — base styling: argila ring even when not active */
.b-gen-marker {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #F2F0EB);
  border: 1.5px solid rgba(44, 44, 46, 0.42);
  color: var(--ink-tertiary, #84848A);
  transition:
    background-color 360ms var(--ease-out-heavy),
    border-color    360ms var(--ease-out-heavy),
    color           360ms var(--ease-out-heavy),
    box-shadow      360ms var(--ease-out-heavy),
    transform       360ms var(--ease-out-heavy);
  /* Bring the marker forward over the thread line */
  box-shadow: 0 0 0 6px var(--color-bg, #F2F0EB);
}
.b-gen-node.is-reached .b-gen-marker {
  border-color: var(--ink, #2C2C2E);
  color: var(--ink-secondary, #555558);
}
.b-gen-node-btn:hover .b-gen-marker {
  border-color: var(--ink, #2C2C2E);
  color: var(--ink, #2C2C2E);
}
.b-gen-node.is-now .b-gen-marker {
  border-color: rgba(184, 123, 94, 0.65);
  color: var(--argila, #B87B5E);
}
.b-gen-node.is-active .b-gen-marker {
  background: var(--argila, #B87B5E);
  border-color: var(--argila, #B87B5E);
  color: #FFFFFF;
  box-shadow:
    0 0 0 6px var(--color-bg, #F2F0EB),
    0 0 0 9px rgba(184, 123, 94, 0.16),
    0 6px 18px -4px rgba(184, 123, 94, 0.45);
}
.b-gen-marker-n {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1;
  color: inherit;
}

/* Era stamp — year + name beneath the marker */
.b-gen-stamp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.b-gen-year {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-tertiary, #84848A);
  transition: color 240ms var(--ease-out-heavy);
}
.b-gen-name {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--ink-secondary, #555558);
  transition: color 240ms var(--ease-out-heavy);
  display: inline-flex;
  align-items: center;
}
.b-gen-node.is-reached .b-gen-name {
  color: var(--ink, #2C2C2E);
}
.b-gen-node-btn:hover .b-gen-name {
  color: var(--ink, #2C2C2E);
}
.b-gen-node.is-active .b-gen-year {
  color: var(--argila, #B87B5E);
}
.b-gen-node.is-active .b-gen-name {
  color: var(--ink, #2C2C2E);
  font-weight: 600;
}
.b-gen-node.is-now .b-gen-name {
  letter-spacing: 0.6px;
}

/* ---------- DETAIL — expanded panel beneath the thread ---------- */
.b-gen-detail {
  margin-top: 36px;
  padding: 28px 32px 30px;
  background: var(--gp-frost-bg, rgba(255, 255, 255, 0.62));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur, 16px)) saturate(var(--gp-frost-saturate, 1.05));
  backdrop-filter: blur(var(--gp-frost-blur, 16px)) saturate(var(--gp-frost-saturate, 1.05));
  border: 1px solid var(--gp-frost-border-side, rgba(255, 255, 255, 0.55));
  border-top-color: var(--gp-frost-border-top, rgba(255, 255, 255, 0.85));
  border-bottom-color: var(--gp-frost-border-bot, rgba(44, 44, 46, 0.10));
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(44, 44, 46, 0.04),
    0 12px 28px -10px rgba(44, 44, 46, 0.10);
  position: relative;
  overflow: hidden;
  /* Re-mount animation: fade + lift in on key change */
  animation: b-gen-detail-in 360ms var(--ease-out-heavy);
}
.b-gen-detail::before {
  /* Tiny argila accent rule at top-left of the panel — echoes the
     section caps and signals "current era detail" */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--argila, #B87B5E);
  opacity: 0.85;
}
.b-gen-detail.is-now::before {
  width: 80px;
  opacity: 1;
}
@keyframes b-gen-detail-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.b-gen-detail-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.b-gen-detail-n {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.6px;
  color: var(--argila, #B87B5E);
  padding: 2px 8px;
  border: 1px solid rgba(184, 123, 94, 0.40);
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1.3;
}
.b-gen-detail-year {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-tertiary, #84848A);
}
.b-gen-detail-name {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--ink, #2C2C2E);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.b-gen-detail-term {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-secondary, #555558);
  margin: 0 0 18px;
  line-height: 1.4;
}
.b-gen-detail-claim {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.05px;
  color: var(--ink, #2C2C2E);
  margin: 0 0 12px;
  line-height: 1.45;
}
.b-gen-detail-body {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-secondary, #555558);
  margin: 0;
  max-width: 760px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .b-genealogy-thread::after { transition: none; }
  .b-gen-marker { transition: none; }
  .b-gen-detail { animation: none; }
}

/* ---------- Mobile — collapse the thread into a vertical rail ---------- */
@media (max-width: 860px) {
  .b-genealogy { padding: 32px 20px 28px; }
  .b-genealogy-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 22px; }
  .b-genealogy-thread {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 0;
    position: relative;
  }
  /* Vertical thread on the left */
  .b-genealogy-thread::before {
    left: 17px;
    right: auto;
    top: 18px;
    bottom: 18px;
    width: 1px;
    height: auto;
  }
  .b-genealogy-thread::after {
    left: 17px;
    right: auto;
    top: 18px;
    width: 1px;
    height: calc((100% - 36px) * (var(--gen-fill, 100%) / 100%));
    background: linear-gradient(
      180deg,
      rgba(44, 44, 46, 0.55) 0%,
      rgba(184, 123, 94, 0.85) 100%
    );
    transition: height 540ms var(--ease-out-heavy);
  }
  .b-gen-node { justify-content: flex-start; }
  .b-gen-node-btn {
    flex-direction: row;
    gap: 14px;
    align-items: center;
    padding: 8px 0;
    text-align: left;
  }
  .b-gen-marker { width: 36px; height: 36px; flex: 0 0 36px; }
  .b-gen-stamp { flex-direction: row; gap: 12px; align-items: baseline; }
  .b-gen-detail { margin-top: 24px; padding: 22px 22px 22px; }
  .b-gen-detail-name { font-size: 18px; }
}

/* =====================================================================
   LOCVS TEXT WORDMARK (no dot) — placement alignment
   -------------------------------------------------------------------
   The `LocvsText` component renders the text-only brand signature
   (assets/brand/svg/Locvs-text.svg) inline as an <img>. Because the
   SVG is a pure text mark at a 6:1 aspect, its baseline needs to
   ride with the surrounding copy rather than centre on the line
   box. Context-specific nudges below.
   ===================================================================== */
.b-locvs-text {
  /* Default: sit the glyph baseline ~22% up from the bottom edge of
     the image box, which matches the intrinsic descender-free baseline
     of the Locvs-text.svg file. */
  vertical-align: -0.18em;
}
/* Framework lead prose — "The LOCVS Diagram is..." */
.b-lead .b-locvs-text {
  margin: 0 2px;
  vertical-align: -0.16em;
}
/* Lineage era stamp — the "now" marker (LOCVS as era V) */
.b-gen-name .b-locvs-text {
  vertical-align: -0.14em;
  margin-left: 1px;
}
/* Lineage detail header — "Borges / LOCVS" credit */
.b-gen-detail-name .b-locvs-text {
  vertical-align: -0.12em;
  margin-left: 2px;
}

/* =====================================================================
   FAMILIAR — Spotify / Netflix / LOCVS (Directive §2.4)
   -------------------------------------------------------------------
   Three columns share a horizontal hairline rule + abstract SVG mark.
   The first two columns sit on CLEAR glass (no body, just edge); the
   LOCVS column on FROST glass — material hierarchy that stages LOCVS
   as the convergent figure. An argila dot anchors the rule under it.
   ===================================================================== */
.b-analogy.is-standalone {
  position: relative;
  isolation: isolate;
  margin: 56px auto 0;
  max-width: 1100px;
  padding: 64px 40px 56px;
  background: var(--gp-frost-bg);
  border: 1px solid var(--gp-frost-border-side);
  border-top-color: var(--gp-frost-border-top);
  border-bottom-color: var(--gp-frost-border-bot);
  border-radius: 14px;
  backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  box-shadow: var(--gp-frost-shadow);
}

/* Connecting rule — 1px hairline running through all three columns
   at the level of the section marks. The argila dot pinpoints LOCVS. */
.b-analogy-rule {
  position: absolute;
  top: 92px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(44, 44, 46, 0.10) 0%,
    rgba(44, 44, 46, 0.18) 50%,
    rgba(184, 123, 94, 0.45) 100%
  );
  pointer-events: none;
}
.b-analogy-rule-dot {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--argila, #B87B5E);
  box-shadow: 0 0 0 3px rgba(184, 123, 94, 0.18);
}

/* Three columns — flex-aligned so marks share a baseline. */
.b-analogy.is-standalone .b-analogy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  align-items: stretch;
}
.b-analogy.is-standalone .b-analogy-col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 22px 22px;
  border-radius: 12px;
  transition: background 220ms var(--ease-out-heavy, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 220ms var(--ease-out-heavy, cubic-bezier(0.16,1,0.3,1));
}

/* Clear glass — minimal: no body, just a barely-there edge. */
.b-analogy-col.is-clear {
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(44, 44, 46, 0.04);
}

/* Frost glass — denser material on the LOCVS column. */
.b-analogy-col.is-frost {
  background: var(--gp-panel-bg);
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border: 1px solid var(--gp-panel-border-side);
  border-top-color: var(--gp-panel-border-top);
  border-bottom-color: var(--gp-panel-border-bot);
  box-shadow: var(--gp-panel-shadow);
}

/* Mark glyph — small, top-left, sits ABOVE the connecting rule. */
.b-analogy-mark {
  display: block;
  width: 44px;
  height: 22px;
  margin: 0 0 22px;
}

/* Heading — uppercase forensic label, slightly tighter to make room. */
.b-analogy.is-standalone .b-analogy-col h4 {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-tertiary, #84848A);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(44, 44, 46, 0.10);
}
.b-analogy-col.is-self h4 {
  color: var(--ink, #2C2C2E);
  border-bottom-color: rgba(184, 123, 94, 0.40);
}
.b-analogy.is-standalone .b-analogy-col p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-secondary, #555558);
  margin: 0 0 16px;
}
.b-analogy-col.is-self p {
  color: var(--ink, #2C2C2E);
  font-weight: 500;
}
.b-analogy.is-standalone .b-analogy-col em {
  display: block;
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-tertiary, #84848A);
  line-height: 1.45;
  margin-top: auto;
}
.b-analogy-col.is-self em {
  color: var(--argila, #B87B5E);
}

@media (max-width: 720px) {
  .b-analogy.is-standalone { padding: 48px 22px 36px; }
  .b-analogy.is-standalone .b-analogy-grid { grid-template-columns: 1fr; gap: 16px; }
  .b-analogy-rule { display: none; }
  .b-analogy.is-standalone .b-analogy-col { padding: 16px 18px; }
}

/* =====================================================================
   FOUNDER — portrait + origin narrative
   ===================================================================== */
.b-founder-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 72px;
  align-items: center;
  margin-top: 24px;
}
.b-founder-portrait {
  position: relative;
  margin: 0;
}
.b-founder-frame {
  /* 3:4 crop (2026-04-22 directive review) — previously 4:5, which read
     as a passport format. 3:4 gives a more editorial frame and matches
     the ratio used by property hero imagery downstream in the product. */
  aspect-ratio: 3 / 4;
  width: 100%;
  background:
    linear-gradient(
      145deg,
      rgba(44, 44, 46, 0.08) 0%,
      rgba(44, 44, 46, 0.02) 60%,
      rgba(180, 120, 90, 0.06) 100%
    );
  border: 1px solid rgba(44, 44, 46, 0.1);
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.b-founder-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle at 30% 30%,
      rgba(0, 0, 0, 0.04) 0%,
      transparent 60%
    );
  pointer-events: none;
}
.b-founder-placeholder {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-ghost, #B0B0B6);
  text-transform: uppercase;
}
/* Founder image — monochrome source gets a faint warm wash so it
   sits on Cloud Dancer without feeling clinical. object-fit:cover
   fills the 4:5 frame exactly, face anchored up by the crop. */
.b-founder-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  /* Whisper-thin Cloud Dancer mix — preserves tonal range, just warms
     the blacks a hair so they don't read colder than the page ground. */
  filter: contrast(1.02) saturate(0) brightness(1.01);
  -webkit-filter: contrast(1.02) saturate(0) brightness(1.01);
  transition: transform 900ms var(--ease-out-heavy, cubic-bezier(.2,.7,.1,1));
}
.b-founder-portrait:hover .b-founder-img {
  transform: scale(1.012);
}
/* Keep the radial vignette above the image so the frame still has depth */
.b-founder-frame::after { z-index: 1; }
.b-founder-img { z-index: 0; }
.b-founder-cap {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.b-founder-name {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink, #2C2C2E);
  letter-spacing: -0.2px;
}
.b-founder-role {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-tertiary, #84848A);
}
.b-founder-text .b-hed em {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-weight: 400;
  font-style: italic;
  color: var(--argila, #B87B5E);
}
.b-founder-sign {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(44, 44, 46, 0.1);
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 14px;
  color: var(--ink-secondary, #555558);
  letter-spacing: -0.1px;
}
.b-founder-sign strong {
  color: var(--ink, #2C2C2E);
  font-weight: 600;
  letter-spacing: 0.5px;
}
/* BARCH wordmark — architectural, forensic, unmistakable.
   Legacy chip kept for any remaining text-only callsite. The new
   primary is .b-barch-mark, below. */
.b-barch-wordmark {
  display: inline-block;
  color: var(--ink, #2C2C2E);
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 2px 8px 1px;
  border: 1px solid rgba(44, 44, 46, 0.18);
  border-radius: 2px;
  background: rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.70);
  margin: 0 2px;
  vertical-align: 1px;
}

/* BARCH SVG mark — the production inline logo. The source SVG ships
   dark "#333". We invert to the page's dark ink on light grounds and
   drop in a pure cream for dark sections via CSS filter. Small
   vertical nudge keeps the x-height aligned with adjacent body type. */
.b-barch-mark {
  display: inline-block;
  width: auto;
  user-select: none;
  vertical-align: -0.12em;
  /* pre-normalise: the SVG's #333 ≈ 60% luminance — colour-matrix the
     asset so its luminance matches adjacent ink. On light surfaces the
     ink is ~#2C2C2E; on dark the goal is ~#F2F0EB (Cloud Dancer). */
  filter: brightness(0.22);
  /* hairline shadow to resolve edge anti-aliasing on glass surfaces */
  -webkit-filter: brightness(0.22);
  transition: filter 120ms ease-out;
}
.b-barch-mark.is-light {
  /* Inverts the dark source to Cloud Dancer — for footer / waitlist. */
  filter: brightness(0) invert(0.94) sepia(0.04) saturate(0) contrast(1.02);
  -webkit-filter: brightness(0) invert(0.94) sepia(0.04) saturate(0) contrast(1.02);
  opacity: 0.88;
}

/* =====================================================================
   LOCVS as tracked typography — used outside the three sanctioned
   wordmark zones (top nav, Framework section, footer).
   -------------------------------------------------------------------
   The visual target is roughly "L O C V S" — the word stays a
   contiguous token in the DOM (so it copies cleanly), but picks up a
   letter-spacing that lets it read as architectural signage inside a
   sentence. Weight is a shade below the body copy's bold so it does
   not overpower; case is unchanged.
   ===================================================================== */
.b-locvs-word {
  display: inline;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-weight: 500;
  letter-spacing: 0.34em;
  /* last letter's tracking would push a trailing space on the right.
     Hair-pull it back to rejoin the sentence cleanly. */
  margin-right: -0.34em;
  /* Slightly tighter than surrounding body; reads as a mark, not a
     shouted word. */
  font-size: 0.96em;
  color: inherit;
  text-transform: uppercase;
}

/* Cream variant for dark sections (Waitlist). Inherits colour from
   dark-well context; opacity softens it into the surface. */
.b-locvs-word.is-on-dark {
  color: var(--cloud-dancer, #F2F0EB);
  opacity: 0.94;
}

/* Hero headline — the gradient already paints the span; LocvsWord
   inherits via `color: inherit` so we only need to keep the spacing
   proportional to the display type. */
.locvs-hero__headline .b-locvs-word {
  letter-spacing: 0.26em;
  margin-right: -0.26em;
  font-weight: 500;
  font-size: 1em;
}

/* Spatial Intelligence close — the mark sits at display scale. */
.b-si-close .b-locvs-word {
  font-weight: 600;
  letter-spacing: 0.30em;
  margin-right: -0.30em;
}

/* Analogy card header — LOCVS as the third column title.
   Per Gustavo 2026-04-22: this column gets the proper brand wordmark
   (with the argila dot) rather than the tracked-typography LocvsWord
   used elsewhere in prose. The heading cell becomes a pure graphic
   row — the image's native height (18px) sets the visual rhythm
   against the SPOTIFY / NETFLIX text labels in the neighbour columns. */
.b-analogy-wm {
  display: flex;
  align-items: center;
  min-height: 22px;
  line-height: 1;
}
.b-analogy-wm .b-locvs-wm {
  display: block;
  height: 18px;
  width: auto;
  vertical-align: baseline;
  margin: 0;
}
@media (max-width: 860px) {
  .b-founder-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .b-founder-portrait { max-width: 360px; margin: 0 auto; }
}

/* =====================================================================
   WAITLIST — DARK close with counter + referral mechanic
   ===================================================================== */
.b-section.is-waitlist {
  position: relative;
  overflow: hidden;
}
.b-waitlist-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 130%,
      rgba(184, 123, 94, 0.20) 0%,
      transparent 58%
    ),
    radial-gradient(
      circle at 18% 18%,
      rgba(120, 120, 125, 0.10) 0%,
      transparent 52%
    );
  pointer-events: none;
  z-index: 0;
}
.b-waitlist-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
/* Masthead — pill, title, intro grouped tightly with deliberate cadence */
.b-waitlist-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 48px;
}
.b-waitlist-title {
  margin: 0;
}
.b-waitlist-intro {
  margin: 0 auto;
  max-width: 540px;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.05px;
  color: rgba(242, 240, 235, 0.74);
}
.b-waitlist-intro strong {
  color: var(--color-bg, #F2F0EB);
  font-weight: 500;
}
.b-waitlist-intro .b-locvs-wm {
  vertical-align: -3px;
  margin: 0 3px 0 4px;
  /* cleanLight variant already ships as flat cream — no chiaroscuro to compensate.
     A hairline drop-shadow lifts the mark off the dark backdrop without muddying
     the edges. Opacity stays at 1 so the mark reads as first-class ink. */
  opacity: 1;
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.35));
}
/* Form panel — single dense-glass card holding every input */
.b-waitlist-form {
  margin: 0 auto;
  max-width: 560px;
  text-align: left;
}
.b-waitlist-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 24px;
  background: rgba(242, 240, 235, 0.045);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(242, 240, 235, 0.10);
  border-top-color: rgba(242, 240, 235, 0.18);
  border-bottom-color: rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* Specular highlight on the card top */
.b-waitlist-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242, 240, 235, 0.32) 18%,
    rgba(242, 240, 235, 0.42) 50%,
    rgba(242, 240, 235, 0.32) 82%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}
/* Soft Argila glow rising through the card body */
.b-waitlist-card::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 220px;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(184, 123, 94, 0.10) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.b-waitlist-card-section {
  position: relative;
  z-index: 1;
  padding: 22px 24px;
}
.b-waitlist-card-section + .b-waitlist-card-section {
  /* visually separated by the rule between */
}
.b-waitlist-rule {
  position: relative;
  z-index: 1;
  height: 1px;
  border: 0;
  margin: 0 24px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242, 240, 235, 0.10) 12%,
    rgba(242, 240, 235, 0.10) 88%,
    transparent 100%
  );
}
.b-waitlist-card-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-top: 20px;
  padding-bottom: 22px;
}
.b-waitlist-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .b-waitlist-row { grid-template-columns: 1fr; }
  .b-waitlist-card-section { padding: 18px 18px; }
  .b-waitlist-rule { margin: 0 18px; }
}
.b-waitlist-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.b-waitlist-label {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(242, 240, 235, 0.54);
  padding-left: 2px;
}
.b-waitlist-legend {
  padding: 0;
  margin-bottom: 10px;
}
/* Dark-glass form field — §2.12 Waitlist */
.b-waitlist-input {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--color-bg, #F2F0EB);

  /* Dark glass membrane */
  background: var(--gp-dark-bg);
  -webkit-backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  border: 1px solid var(--gp-dark-border-side);
  border-top-color: var(--gp-dark-border-top);
  border-bottom-color: var(--gp-dark-border-bot);
  border-radius: 999px;

  /* Inset cream-tint highlight + subtle outer drop */
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.12);
  outline: none;
  transition:
    border-color 220ms var(--ease-out-heavy),
    background 220ms var(--ease-out-heavy),
    box-shadow 220ms var(--ease-out-heavy);
}
.b-waitlist-input::placeholder {
  color: rgba(242, 240, 235, 0.38);
  letter-spacing: 0;
}
.b-waitlist-input:hover {
  border-color: rgba(242, 240, 235, 0.22);
  background: rgba(242, 240, 235, 0.10);
}
.b-waitlist-input:focus,
.b-waitlist-input:focus-visible {
  border-color: rgba(184, 123, 94, 0.70);
  background: rgba(242, 240, 235, 0.11);
  /* Argila focus halo — three rings: inner cream, mid argila glow, outer air */
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.12),
    0 0 0 1px rgba(184, 123, 94, 0.35),
    0 0 24px -4px rgba(184, 123, 94, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.14);
}
/* Autofill normalization (webkit) — keep the cream text on dark glass */
.b-waitlist-input:-webkit-autofill,
.b-waitlist-input:-webkit-autofill:hover,
.b-waitlist-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-bg, #F2F0EB);
  -webkit-box-shadow: 0 0 0px 1000px rgba(32, 32, 34, 0.98) inset;
  caret-color: var(--color-bg, #F2F0EB);
}

.b-waitlist-intent {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.b-waitlist-intent legend {
  padding: 0 4px;
}
.b-waitlist-intent-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.b-waitlist-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  padding: 11px 20px;
  border-radius: 999px;

  /* Dark glass chip */
  background: var(--gp-dark-bg);
  -webkit-backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  border: 1px solid var(--gp-dark-border-side);
  border-top-color: var(--gp-dark-border-top);
  border-bottom-color: var(--gp-dark-border-bot);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.12);

  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: rgba(242, 240, 235, 0.82);

  transition:
    border-color 220ms var(--ease-out-heavy),
    background 220ms var(--ease-out-heavy),
    color 220ms var(--ease-out-heavy),
    box-shadow 220ms var(--ease-out-heavy),
    transform 220ms var(--ease-out-heavy);
  user-select: none;
}
.b-waitlist-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.b-waitlist-chip:hover {
  border-color: rgba(242, 240, 235, 0.28);
  background: rgba(242, 240, 235, 0.10);
  color: var(--color-bg, #F2F0EB);
  transform: translateY(-1px);
}
.b-waitlist-chip:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.10),
    0 0 0 1px rgba(184, 123, 94, 0.35),
    0 0 20px -4px rgba(184, 123, 94, 0.40);
}
.b-waitlist-chip.is-active {
  background: rgba(184, 123, 94, 0.22);
  border-color: rgba(184, 123, 94, 0.55);
  border-top-color: rgba(184, 123, 94, 0.75);
  color: var(--color-bg, #F2F0EB);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.14),
    0 0 22px -6px rgba(184, 123, 94, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.14);
}

.b-waitlist-submit {
  align-self: stretch;
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: 15px;
  letter-spacing: 0.1px;
  margin-top: 0;
}
.b-waitlist-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.b-waitlist-error {
  margin: 8px 24px 0;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 13px;
  color: #E8A598;
  text-align: center;
}
.b-waitlist-fineprint {
  margin: 0;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  line-height: 1.5;
  color: rgba(242, 240, 235, 0.46);
  text-align: center;
}
.b-waitlist-fineprint .b-locvs-wm {
  vertical-align: -2px;
  margin: 0 2px;
  /* Fineprint sits at 46% text opacity — keep the wordmark slightly brighter
     than surrounding copy so brand anchors read as intent rather than noise. */
  opacity: 0.72;
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.30));
}

.b-waitlist-success {
  max-width: 560px;
  margin: 0 auto;
  padding: 36px 32px;
  border-radius: 24px;
  text-align: center;
  position: relative;
  isolation: isolate;
  background: rgba(242, 240, 235, 0.05);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(184, 123, 94, 0.32);
  border-top-color: rgba(184, 123, 94, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.10),
    0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.b-waitlist-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(184, 123, 94, 0.55);
  background: rgba(184, 123, 94, 0.16);
  color: var(--color-bg, #F2F0EB);
  margin-bottom: 16px;
}
.b-waitlist-success-mark svg {
  width: 22px;
  height: 22px;
}
.b-waitlist-success-title {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--color-bg, #F2F0EB);
  margin: 0 0 10px;
}
.b-waitlist-success-body {
  margin: 0;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(242, 240, 235, 0.78);
}
.b-waitlist-success-body strong {
  color: var(--color-bg, #F2F0EB);
  font-weight: 500;
}
/* Aside — counter + divider + referral, single horizontal triplet */
.b-waitlist-aside {
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: center;
  gap: 32px;
  max-width: 560px;
  text-align: left;
}
@media (max-width: 560px) {
  .b-waitlist-aside {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto;
    gap: 20px;
    text-align: center;
  }
}
.b-waitlist-counter {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
@media (max-width: 560px) {
  .b-waitlist-counter { align-items: center; }
}
.b-waitlist-counter-number {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 40px;
  font-weight: 400;
  color: var(--color-bg, #F2F0EB);
  letter-spacing: -1.2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.b-waitlist-counter-label {
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(242, 240, 235, 0.54);
  margin-top: 2px;
}
.b-waitlist-divider {
  width: 1px;
  height: 56px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(242, 240, 235, 0.18) 30%,
    rgba(242, 240, 235, 0.18) 70%,
    transparent 100%
  );
  justify-self: center;
}
@media (max-width: 560px) {
  .b-waitlist-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(242, 240, 235, 0.18) 30%,
      rgba(242, 240, 235, 0.18) 70%,
      transparent 100%
    );
  }
}
.b-waitlist-referral {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 560px) {
  .b-waitlist-referral { align-items: center; }
}
.b-waitlist-referral-copy {
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: rgba(242, 240, 235, 0.78);
  margin: 0;
}
.b-waitlist-referral-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--argila, #B87B5E);
  text-decoration: none;
  transition: gap 220ms var(--ease-out-heavy), color 220ms var(--ease-out-heavy);
}
.b-waitlist-referral-link:hover {
  color: var(--color-bg, #F2F0EB);
  gap: 12px;
}
.b-waitlist-referral-link .arr {
  width: 12px;
  height: 9px;
}

/* =====================================================================
   FAQ — accordion, precise +/− rule indicator (Directive §2.13)
   -------------------------------------------------------------------
   Built from two 1px rules at architectural cross-section:
     • Horizontal rule : always visible (the minus)
     • Vertical rule   : visible when closed, scales to 0 when open
   Both rules use --argila when the item is open, --ink-tertiary closed.
   Tectonic easing (360ms) — no bounce.
   ===================================================================== */
.b-faq-list {
  max-width: 900px;
  margin: 48px auto 0;
}
.b-faq-item {
  border-bottom: 1px solid rgba(44, 44, 46, 0.12);
  padding: 22px 0;
  transition: border-color 360ms var(--ease-out-heavy);
}
.b-faq-item[open] {
  border-bottom-color: rgba(184, 123, 94, 0.28);
}
.b-faq-item summary {
  cursor: pointer;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: var(--ink, #2C2C2E);
  list-style: none;
  position: relative;
  padding-right: 48px;
  outline: none;
  transition: color 360ms var(--ease-out-heavy);
}
.b-faq-item summary::-webkit-details-marker { display: none; }
.b-faq-item summary::marker { display: none; content: ""; }
.b-faq-item[open] summary {
  color: var(--argila, #B87B5E);
}

/* Indicator hairlines — built from ::before (vertical) and ::after (horizontal) */
.b-faq-item summary::before,
.b-faq-item summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  background: var(--ink-tertiary, #84848A);
  border-radius: 1px;
  transition:
    transform 360ms var(--ease-out-heavy),
    background 360ms var(--ease-out-heavy),
    opacity 240ms ease;
  will-change: transform;
}
/* Horizontal rule — always visible */
.b-faq-item summary::after {
  width: 14px;
  height: 1px;
  margin-top: 0;
  transform: translate(-2px, -50%);
  transform-origin: center;
}
/* Vertical rule — closed by default, scales to 0 when open */
.b-faq-item summary::before {
  width: 1px;
  height: 14px;
  margin-right: 6px;
  transform: translate(0, -50%) scaleY(1);
  transform-origin: center;
}
.b-faq-item[open] summary::before {
  transform: translate(0, -50%) scaleY(0);
  background: var(--argila, #B87B5E);
  opacity: 0;
}
.b-faq-item[open] summary::after {
  background: var(--argila, #B87B5E);
  /* Slight widening to read as a deliberate rule, not residual hairline */
  transform: translate(-2px, -50%) scaleX(1.08);
  box-shadow: 0 0 10px -2px rgba(184, 123, 94, 0.45);
}
.b-faq-item summary:hover::before,
.b-faq-item summary:hover::after {
  background: var(--ink, #2C2C2E);
}
.b-faq-item[open] summary:hover::before,
.b-faq-item[open] summary:hover::after {
  background: var(--argila, #B87B5E);
}
.b-faq-item summary:focus-visible {
  box-shadow: 0 0 0 2px rgba(184, 123, 94, 0.45);
  border-radius: 2px;
}
.b-faq-body {
  margin: 16px 0 4px;
  max-width: 740px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: b-faq-reveal 420ms var(--ease-out-heavy) both;
}
.b-faq-item p {
  margin: 0;
  font-family: var(--font-system, "Inter", system-ui, sans-serif);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-secondary, #555558);
}
/* Lead line — first sentence of the answer, sets the posture */
.b-faq-item .b-faq-lead {
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -0.15px;
  color: var(--ink, #2C2C2E);
  font-weight: 500;
}
/* Inhabitant voice pullquote — italic serif, Argila edge */
.b-faq-item .b-faq-pull {
  margin-top: 6px;
  padding: 10px 0 10px 18px;
  border-left: 1px solid rgba(184, 123, 94, 0.35);
  font-family: var(--font-inhabitant, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink-secondary, #555558);
  letter-spacing: 0.1px;
}
.b-faq-item .b-faq-pull em {
  font-style: italic;
}
/* Wordmark inline in FAQ body — nudge baseline */
.b-faq-item .b-locvs-wm {
  vertical-align: -1px;
  margin: 0 1px;
}
@keyframes b-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .b-faq-body { animation: none; }
  .b-faq-item summary::before,
  .b-faq-item summary::after { transition: none; }
}

/* =====================================================================
   GLASS 3-LAYER PHYSICS SYSTEM (Directive §3)
   -------------------------------------------------------------------
   Every glass surface on LOCVS speaks the same material language:

   Layer 1  ::before  — SPECULAR HIGHLIGHT
       1px arc of cream-white light along the top inner edge.
       Reads as light catching the bevel.

   Layer 2  body      — TRANSLUCENT MEMBRANE
       backdrop-filter: blur() saturate() — the actual "glass thickness".
       Density tier (frost/panel/dense) sets opacity + blur radius.

   Layer 3  ::after   — ILLUMINATION
       Soft radial+linear refraction passing through the body.
       Only ~6% white, but adds the sense of internal volume.

   BORDER TRIPLET (light comes from above, always):
       top    : bright cream  (rgba 255,255,255 0.55–0.92)
       sides  : neutral cream (rgba 255,255,255 0.18–0.35)
       bottom : ink shadow    (rgba 44,44,46  0.04–0.10)

   Loaded LAST in the cascade so it overrides legacy brief.css rules.
   Density tiers are applied via CSS custom properties so individual
   selectors only need to declare their tier — the physics is shared.
   ===================================================================== */

/* ---- Density tokens (consumed by the .gp-* mixin classes below) ----
   Refined v3.1.1 (2026-04-21): every glass tier now defines a five-shadow
   stack (--gp-*-shadow) that pairs a sharp 1px contact line with a soft
   cast and a long depth shadow. Borders slightly more asymmetric (brighter
   top, deeper bottom) so light direction reads at a glance.            */
:root {
  /* FROST — cards, trays, semi-translucent panels */
  --gp-frost-bg          : rgba(255, 255, 255, 0.58);
  --gp-frost-blur        : 22px;
  --gp-frost-saturate    : 1.32;
  --gp-frost-border-top  : rgba(255, 255, 255, 0.92);
  --gp-frost-border-side : rgba(255, 255, 255, 0.38);
  --gp-frost-border-bot  : rgba(44, 44, 46, 0.10);
  --gp-frost-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(44, 44, 46, 0.05),
    0 1px 1px rgba(44, 44, 46, 0.04),
    0 6px 14px -8px rgba(44, 44, 46, 0.10),
    0 22px 48px -24px rgba(44, 44, 46, 0.18);

  /* PANEL — interactive objects: buttons, tabs, chips */
  --gp-panel-bg          : rgba(255, 255, 255, 0.74);
  --gp-panel-blur        : 18px;
  --gp-panel-saturate    : 1.26;
  --gp-panel-border-top  : rgba(255, 255, 255, 0.96);
  --gp-panel-border-side : rgba(255, 255, 255, 0.46);
  --gp-panel-border-bot  : rgba(44, 44, 46, 0.12);
  --gp-panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(44, 44, 46, 0.06),
    0 1px 1px rgba(44, 44, 46, 0.05),
    0 4px 10px -6px rgba(44, 44, 46, 0.10),
    0 14px 32px -18px rgba(44, 44, 46, 0.16);

  /* DENSE — pills, modals, surfaces with strong presence */
  --gp-dense-bg          : rgba(255, 255, 255, 0.90);
  --gp-dense-blur        : 28px;
  --gp-dense-saturate    : 1.32;
  --gp-dense-border-top  : rgba(255, 255, 255, 1);
  --gp-dense-border-side : rgba(255, 255, 255, 0.62);
  --gp-dense-border-bot  : rgba(44, 44, 46, 0.14);
  --gp-dense-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(44, 44, 46, 0.08),
    0 1px 1px rgba(44, 44, 46, 0.06),
    0 6px 14px -8px rgba(44, 44, 46, 0.12),
    0 18px 38px -20px rgba(44, 44, 46, 0.20);

  /* DARK PANEL — for .is-dark variants on dark sections */
  --gp-dark-bg           : rgba(242, 240, 235, 0.055);
  --gp-dark-blur         : 24px;
  --gp-dark-saturate     : 1.18;
  --gp-dark-border-top   : rgba(242, 240, 235, 0.28);
  --gp-dark-border-side  : rgba(242, 240, 235, 0.12);
  --gp-dark-border-bot   : rgba(0, 0, 0, 0.38);
  --gp-dark-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 8px 18px -8px rgba(0, 0, 0, 0.40),
    0 24px 56px -28px rgba(0, 0, 0, 0.55);
}

/* ---- Shared layer definitions (specular ::before + illumination ::after).
       Selectors below opt-in by setting position:relative, isolation:isolate
       and consuming the density tokens. ---- */

/* Specular highlight — applied via .gp-specular helper OR matched
   selector list below. Crisp 1px arc of cream-white light that catches
   the top bevel; inner ~76% of the top edge, slight falloff at the ends. */
.gp-specular::before,
.b-pill::before,
.b-pill.is-dark::before,
.b-tab.is-active::before,
.b-stat::before,
.b-nav.is-scrolled::before,
.b-waitlist-chip.is-active::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.72) 18%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.72) 82%,
    transparent 100%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* Dark variants get a dimmer, cream-tinted specular instead of pure white */
.b-pill.is-dark::before,
.b-card-dark::before,
.b-waitlist-chip::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(242, 240, 235, 0.55) 50%,
    transparent 100%);
}

/* Idle waitlist chip needs the shared specular geometry — add the
   ::before skeleton since the shared light block above excludes it
   (the default specular is white, and the chip lives on ink). */
.b-waitlist-chip::before {
  content: "";
  position: absolute;
  top: 0.5px;
  left: 10%;
  right: 10%;
  height: 1px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* Illumination — refracted volume.
   Soft radial puddle from upper-left + faint linear top-down wash.
   Sits BEHIND content via z-index; never blocks pointer events. */
.gp-illumination::after,
.b-pill::after,
.b-pill.is-dark::after,
.b-card-glass::after,
.b-nav.is-scrolled::after,
.b-si-tag::after,
.b-tab.is-active::after,
.b-stat::after,
.locvs-hero.is-light .locvs-hero__eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* radial puddle (upper-left) — primary refraction catch */
    radial-gradient(140% 90% at 18% -10%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 32%,
      transparent 62%),
    /* faint secondary bounce (lower-right) */
    radial-gradient(100% 60% at 92% 108%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 55%),
    /* vertical sheen — reads as the body thickness */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 45%,
      rgba(44, 44, 46, 0.03) 100%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

/* Dark variants — illumination becomes a soft cream wash, very faint */
.b-pill.is-dark::after,
.b-waitlist-chip.is-active::after,
.b-waitlist-chip::after {
  background:
    radial-gradient(140% 90% at 18% -10%,
      rgba(242, 240, 235, 0.14) 0%,
      rgba(242, 240, 235, 0.04) 32%,
      transparent 62%),
    radial-gradient(100% 60% at 92% 108%,
      rgba(184, 123, 94, 0.08) 0%,
      transparent 55%),
    linear-gradient(180deg,
      rgba(242, 240, 235, 0.06) 0%,
      rgba(242, 240, 235, 0.01) 45%,
      rgba(0, 0, 0, 0.08) 100%);
  mix-blend-mode: screen;
}

/* Idle waitlist chip illumination skeleton — mirrors the shared
   ::after geometry from the light block. Z-index lower than text
   content so the fill reads crisp. */
.b-waitlist-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* ---- Per-element upgrades (preserve geometry, swap material) ---- */

/* .b-pill — center top of every section. Promote to DENSE physics.
   (brief.css declares .b-pill without position, so we anchor it here.) */
.b-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gp-dense-bg);
  backdrop-filter: blur(var(--gp-dense-blur)) saturate(var(--gp-dense-saturate));
  -webkit-backdrop-filter: blur(var(--gp-dense-blur)) saturate(var(--gp-dense-saturate));
  border: 1px solid var(--gp-dense-border-side);
  border-top-color: var(--gp-dense-border-top);
  border-bottom-color: var(--gp-dense-border-bot);
  box-shadow: var(--gp-dense-shadow);
}
.b-pill > * { position: relative; z-index: 3; }

.b-pill.is-dark {
  background: var(--gp-dark-bg);
  backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  -webkit-backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  border: 1px solid var(--gp-dark-border-side);
  border-top-color: var(--gp-dark-border-top);
  border-bottom-color: var(--gp-dark-border-bot);
  box-shadow: var(--gp-dark-shadow);
}

/* .b-card-glass — Solution / Model / Traction tiles. FROST tier.
   ::before specular already exists in brief.css; we add ::after illumination
   above and reinforce the directional border triplet here. */
.b-card-glass {
  isolation: isolate;
  background: var(--gp-frost-bg);
  backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  border: 1px solid var(--gp-frost-border-side);
  border-top-color: var(--gp-frost-border-top);
  border-bottom-color: var(--gp-frost-border-bot);
  box-shadow: var(--gp-frost-shadow);
}
.b-card-glass > * { position: relative; z-index: 3; }

/* .b-nav.is-scrolled — sticky nav bar. PANEL tier (must read over content). */
.b-nav {
  isolation: isolate;
}
.b-nav.is-scrolled {
  background: var(--gp-panel-bg);
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border-bottom: 1px solid var(--gp-panel-border-bot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(44, 44, 46, 0.06),
    0 1px 1px rgba(44, 44, 46, 0.04),
    0 12px 28px -16px rgba(44, 44, 46, 0.18);
}
.b-nav.is-scrolled > * { position: relative; z-index: 3; }

/* .b-si-tag — Spatial Intelligence section tag. Already has ::before. */
.b-si-tag {
  isolation: isolate;
}
.b-si-tag > * { position: relative; z-index: 3; }

/* .locvs-hero__eyebrow — first glass object the user meets.
   Already has ::before; ::after illumination is matched in shared block above. */
.locvs-hero.is-light .locvs-hero__eyebrow {
  isolation: isolate;
}
.locvs-hero.is-light .locvs-hero__eyebrow > * {
  position: relative;
  z-index: 3;
}

/* .b-tabs-bar — the glass PANEL membrane that hosts the tabs.
   Directive §2.11: the tab bar itself is a specimen, not a chrome strip.
   The active tab gets no fill — just a 2px argila rule that slides
   between buttons on switch. */
.b-tabs-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Reset legacy fill/padding so the new glass reads cleanly */
  background: var(--gp-panel-bg) !important;
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border: 1px solid var(--gp-panel-border-side);
  border-top-color: var(--gp-panel-border-top);
  border-bottom-color: var(--gp-panel-border-bot);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 -1px 0 rgba(44, 44, 46, 0.05) inset,
    0 6px 18px -8px rgba(44, 44, 46, 0.10);
  padding: 4px 4px 6px;
}
.b-tabs-bar::before {
  content: "";
  position: absolute;
  top: 1px; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), transparent);
  pointer-events: none;
  z-index: 2;
}
.b-tabs-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 22% 0%,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.03) 38%,
      transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* Individual tab — no fill, no border. Typography does the work.
   Active state is announced by the sliding rule below the text. */
.b-tab {
  position: relative;
  isolation: isolate;
  overflow: visible; /* let the indicator extend below without clipping */
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  z-index: 3;
  color: var(--ink-tertiary, #84848A);
  transition: color 240ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1));
}
.b-tab:hover { color: var(--ink-secondary, #555558); }
.b-tab.is-active {
  color: var(--ink, #2C2C2E) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.b-tab.is-active::before,
.b-tab.is-active::after {
  /* Suppress the shared glass-physics pseudos for active tabs —
     the bar carries the membrane, the tab carries only text. */
  display: none !important;
}

/* The sliding 2px rule — argila. Position is set inline by React from
   the measured tab rect; all we supply is the geometry + easing. */
.b-tabs-indicator {
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 2px;
  background: var(--argila, #B87B5E);
  border-radius: 1px;
  pointer-events: none;
  z-index: 4;
  box-shadow: 0 0 12px -2px rgba(184, 123, 94, 0.55);
  transition:
    transform 360ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1)),
    width 360ms var(--ease-out-heavy, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 240ms ease;
  will-change: transform, width;
}
@media (prefers-reduced-motion: reduce) {
  .b-tabs-indicator { transition: opacity 120ms ease; }
}

/* .b-stat — three traction tiles in the hero footstrip. FROST tier.
   Parent .b-statbar is already overflow:hidden for the grid hairlines;
   each tile needs its own clip for the ::after to respect its rounded edge. */
.b-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gp-frost-bg);
  backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  -webkit-backdrop-filter: blur(var(--gp-frost-blur)) saturate(var(--gp-frost-saturate));
  border: 1px solid var(--gp-frost-border-side);
  border-top-color: var(--gp-frost-border-top);
  border-bottom-color: var(--gp-frost-border-bot);
  box-shadow: var(--gp-frost-shadow);
}
.b-stat > * { position: relative; z-index: 3; }

/* .b-card-dark — Problem-section numbered cards on ink backdrop.
   Upgrade to the DARK glass tier so they match the waitlist, nav,
   and other dark surfaces. Specular is handled by the shared
   b-card-dark::before selector above (cream-tinted). */
.b-card-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gp-dark-bg);
  backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  -webkit-backdrop-filter: blur(var(--gp-dark-blur)) saturate(var(--gp-dark-saturate));
  border: 1px solid var(--gp-dark-border-side);
  border-top-color: var(--gp-dark-border-top);
  border-bottom-color: var(--gp-dark-border-bot);
  box-shadow: var(--gp-dark-shadow);
}
.b-card-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(140% 90% at 18% -10%,
      rgba(242, 240, 235, 0.14) 0%,
      rgba(242, 240, 235, 0.04) 32%,
      transparent 62%),
    radial-gradient(100% 60% at 92% 108%,
      rgba(184, 123, 94, 0.08) 0%,
      transparent 55%),
    linear-gradient(180deg,
      rgba(242, 240, 235, 0.06) 0%,
      rgba(242, 240, 235, 0.01) 45%,
      rgba(0, 0, 0, 0.10) 100%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.b-card-dark > * { position: relative; z-index: 3; }
.b-card-dark:hover {
  background: rgba(242, 240, 235, 0.075);
  border-color: rgba(242, 240, 235, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(242, 240, 235, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.32),
    0 12px 24px -12px rgba(0, 0, 0, 0.44),
    0 32px 68px -30px rgba(0, 0, 0, 0.60);
}

/* .b-waitlist-chip.is-active — selected intent chip. Already styled w/ argila;
   we only add the specular + faint illumination so it reads as glass. */
.b-waitlist-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.b-waitlist-chip > *,
.b-waitlist-chip input { position: relative; z-index: 3; }

/* =====================================================================
   ACCESSIBILITY — reduced motion override
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .locvs-hero__video { animation: none; }
  .locvs-hero__content > *,
  .locvs-hero__footstrip > * { opacity: 1 !important; transform: none !important; }
  /* Implementation Directive v2 §11.5 (2026-04-22): hide the
     looping video entirely when motion is reduced — the poster
     frame alone carries the hero. The poster is already beneath
     the video in the stacking order, so removing the video
     reveals it. */
  .locvs-hero__video video {
    display: none !important;
  }
  .locvs-hero__poster {
    opacity: 1 !important;
  }
}

/* =============================================================
   FRAMEWORK STUDIO — consolidated tabs + sticky diagram
   (Added 2026-04-21, Directive §B)
   A single elevated glass block that holds the Diagrama LOCVS
   on the left (sticky within the block) and a vertical tablist
   on the right. One tab open at a time; the figure highlights
   the region the tab names. Below the tablist, a reading panel
   expands on the active dimension.

   Updated 2026-04-22 (Implementation Directive v2 §4) — the
   Studio now sits INSIDE an outer .b-diagram-glass wrapper so
   the diagram reads as a museum display case: a softer outer
   vitrine (.b-diagram-glass, 0.58 frost) holding a denser inner
   object (.b-fw-stage, 0.90 dense). The nested pair creates
   real optical depth where a single panel would read flat.
   ============================================================= */

/* ----- Outer vitrine — Directive v2 §4.1 --------------------- */
/* Softer frost layer that wraps .b-fw-stage. Acts as the
   museum-case boundary; depth comes from the two-surface
   refraction, not from a single dense slab. */
.b-diagram-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 24px;
  border-radius: var(--radius-lg, 14px);
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.50);
  border-top-color: rgba(255, 255, 255, 0.80);
  border-bottom-color: rgba(44, 44, 46, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(44, 44, 46, 0.05),
    0 1px 1px rgba(44, 44, 46, 0.03),
    0 4px 8px -2px rgba(44, 44, 46, 0.06),
    0 16px 32px -8px rgba(44, 44, 46, 0.10),
    0 32px 64px -16px rgba(44, 44, 46, 0.08);
  margin-top: 40px;
}
/* Specular arc — reflected light on the top bevel of the outer
   vitrine. Brighter than the inner stage's arc so the light
   source reads as "above the outer case". */
.b-diagram-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.70) 0%,
    rgba(255, 255, 255, 1.00) 50%,
    rgba(255, 255, 255, 0.70) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Illumination — a cool caustic from the top-left plus a warm
   argila wash from the bottom-right, bound by a soft vertical
   gradient that keeps the whole interior legible. The two
   sources narrate "glass body catching ambient + wall tint". */
.b-diagram-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      60% 50% at 18% 12%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(
      55% 55% at 82% 88%,
      rgba(180, 120, 90, 0.10) 0%,
      rgba(180, 120, 90, 0) 75%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0) 45%,
      rgba(44, 44, 46, 0.03) 100%
    );
  pointer-events: none;
  z-index: 0;
}
/* Children of the vitrine stack above the illumination plane */
.b-diagram-glass > * {
  position: relative;
  z-index: 2;
}

.b-fw-stage {
  /* Inner object — the denser surface nested inside
     .b-diagram-glass. Holds the diagram on the left and the
     tablist on the right.

     Rewritten 2026-04-22 (Implementation Directive v2 §4.2):
     as the INNER layer of the double-glass pair, this stage
     loses its outer drop-shadow (the vitrine carries that
     work) and its top margin (the vitrine pads the frame).
     It keeps its dense fill, blur, asymmetric borders, and
     specular arc — those now read as "edge of the object
     inside the case", not "floating slab in the page". */
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.85fr);
  gap: 36px;
  align-items: stretch;
  padding: 32px 36px;
  border-radius: 12px;
  background: var(--gp-dense-bg);
  backdrop-filter: blur(var(--gp-dense-blur)) saturate(var(--gp-dense-saturate));
  -webkit-backdrop-filter: blur(var(--gp-dense-blur)) saturate(var(--gp-dense-saturate));
  border: 1px solid var(--gp-dense-border-side);
  border-top-color: var(--gp-dense-border-top);
  border-bottom-color: var(--gp-dense-border-bot);
  /* Inset-only shadow: carves the nested object out of the
     vitrine without re-casting a drop that would visually
     detach it from its frame. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(44, 44, 46, 0.04),
    0 2px 6px -2px rgba(44, 44, 46, 0.06);
  position: relative;
  overflow: hidden;
}
/* Specular highlight — an arc of bright reflection along the top
   edge, fading out at the corners. The signature of a real glass
   surface catching directional light from above. */
.b-fw-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Inner illumination — a subtle radial gradient that suggests
   light entering and being refracted through the glass body. */
.b-fw-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    120% 80% at 50% -10%,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0) 55%
  );
  pointer-events: none;
  z-index: 0;
}
/* Studio children stack above the illumination layer */
.b-fw-stage > * {
  position: relative;
  z-index: 2;
}

.b-fw-figure {
  /* Left column: diagram on top, explain panel below. The diagram
     sits DIRECTLY on the outer dense glass (no inner card) so the
     glass hierarchy reads as one outer surface + one inner
     highlight (the panel). Panel uses flex: 1 to take remaining
     vertical space so the column has a defined height for the
     sidebar to align against. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.b-fw-figure-frame {
  /* Inset depression — Implementation Directive v2 §4.3
     (2026-04-22). The diagram reads as sitting BEHIND the
     inner stage surface: a shallow cut-in where you look
     through the object at the Vitruvian / LOCVS overlay
     beneath. Border logic is inverted on purpose: DARK top,
     LIGHT bottom — the opposite of a raised object — which
     is what makes a surface read as recessed. Three layers
     of depth now exist (Cloud Dancer → vitrine → stage →
     recessed Venn), matching the directive's "precision
     instrument" metaphor. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 14px 14px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(44, 44, 46, 0.04);
  border-top-color: rgba(44, 44, 46, 0.07);
  border-bottom-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 2px 4px rgba(44, 44, 46, 0.05),
    inset 0 1px 1px rgba(44, 44, 46, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45);
}

.b-fw-figure-cap {
  /* Live caption under the sticky diagram — mirrors the active
     tab so the eye can read position-name in one breath. */
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 12px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  border-top: 1px solid rgba(255, 255, 255, 0.68);
  border-bottom: 1px solid rgba(44, 44, 46, 0.06);
  text-align: center;
  transition: background 360ms var(--ease-out-heavy);
}

.b-fw-figure-cap-n {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-size: 15px;
  color: #84848A;
  letter-spacing: 0.04em;
}

.b-fw-figure-cap-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #2C2C2E;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.b-fw-figure-cap-sep { color: #B0B0B6; font-size: 12px; }

.b-fw-figure-cap-parent {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 14px;
  color: #555558;
}
.b-fw-figure-cap-parent em {
  font-style: italic;
  color: #B87B5E;
}

/* Sidebar — plain column on the outer dense glass.
   Rewritten 2026-04-22 (Directive §F): the sidebar wrapper has no
   glass card around it. Tier group labels and inactive tabs sit
   directly on the outer surface; only the ACTIVE tab gets its own
   glass treatment (the "selection highlight"). The column still
   stretches to match the figure+panel height on the left, and its
   tablist distributes the three tier groups across that height
   for a justified relationship to the cards opposite it. */
.b-fw-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 0 4px 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Tablist — vertical, three grouped tiers.
   Distribution: justify-content space-between so PRIMARY anchors
   the top (aligned with the diagram), CENTER anchors the bottom
   (aligned with the panel), INTERSECTION centers in the gap.
   This gives the rail a justified, architectural rhythm against
   the left column without needing a glass wrapper. */
.b-fw-tabs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.b-fw-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-fw-group-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #B0B0B6;
  padding-left: 14px;
}

.b-fw-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.b-fw-tab {
  /* Each tab is a quiet row — numeral in italic serif + two-line
     label body. No chevron; no surrounding pill on idle. The
     single interactive signal is the left-edge color bar that
     appears on hover (faint) and active (solid), colored by
     tier. This drops ~14 competing visual tokens from the rail
     without losing any navigational information. */
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 18px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: #2C2C2E;
  text-align: left;
  cursor: pointer;
  transition:
    background 240ms var(--ease-out-heavy),
    border-color 240ms var(--ease-out-heavy),
    box-shadow 240ms var(--ease-out-heavy);
  appearance: none;
  font: inherit;
}

/* Left-edge tier bar — the single visual cue for tier and state.
   Idle: invisible. Hover: faint wash. Active: solid tier color. */
.b-fw-tab::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 240ms var(--ease-out-heavy);
}

.b-fw-tab:hover {
  background: rgba(255, 255, 255, 0.32);
}
.b-fw-tab.is-primary:hover::before      { background: rgba(44, 44, 46, 0.22); }
.b-fw-tab.is-intersection:hover::before { background: rgba(125, 154, 107, 0.38); }
.b-fw-tab.is-center:hover::before       { background: rgba(184, 123, 94, 0.38); }

.b-fw-tab:focus-visible {
  outline: 2px solid rgba(184, 123, 94, 0.48);
  outline-offset: 2px;
}

/* Active tab — the SELECTION HIGHLIGHT GLASS LAYER.
   One of only two surfaces in the studio that gets its own glass
   treatment on top of the outer dense shell (the other is the
   .b-fw-panel explain area). Uses the project's --gp-panel-*
   tokens (panel-density glass: 74% white, 18px blur, asymmetric
   borders, layered 5-shadow stack). Adds a top-edge specular
   highlight via ::after for the volumetric glass signature. */
.b-fw-tab.is-active {
  background: var(--gp-panel-bg);
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border: 1px solid var(--gp-panel-border-side);
  border-top-color: var(--gp-panel-border-top);
  border-bottom-color: var(--gp-panel-border-bot);
  box-shadow: var(--gp-panel-shadow);
}
/* Specular arc on the top edge of the active tab — same physics
   as the outer stage's ::before but scaled down. */
.b-fw-tab.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}
.b-fw-tab.is-primary.is-active::before      { background: #2C2C2E; }
.b-fw-tab.is-intersection.is-active::before { background: #7D9A6B; }
.b-fw-tab.is-center.is-active::before       { background: #B87B5E; }

.b-fw-tab-n {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1;
  color: #B0B0B6;
  text-align: center;
  letter-spacing: 0.02em;
  transition: color 240ms var(--ease-out-heavy);
}

.b-fw-tab:hover .b-fw-tab-n     { color: #84848A; }
.b-fw-tab.is-active .b-fw-tab-n { color: #2C2C2E; }
.b-fw-tab.is-center.is-active .b-fw-tab-n { color: #B87B5E; }

.b-fw-tab-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.b-fw-tab-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2C2C2E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtitle unified to a single color across all tiers. Tier
   identity is carried entirely by the left-edge bar now, so the
   subtitle can read as one consistent supporting voice. Italic
   Latin words retain their Cormorant italic. Intersection pairs
   ("FORM ∩ FUNCTION") stay in a tracked Inter small-caps register
   to distinguish them typographically without competing on hue. */
.b-fw-tab-parent {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 13px;
  color: #84848A;
  line-height: 1.25;
}

.b-fw-tab-parent em {
  font-style: italic;
  color: #84848A;
}

.b-fw-tab.is-intersection .b-fw-tab-parent {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #84848A;
}

.b-fw-tab.is-center .b-fw-tab-parent {
  font-style: italic;
  color: #84848A;
}

/* Reading panel — the EXPLAIN HIGHLIGHT TEXT AREA.
   One of only two surfaces in the studio that gets its own glass
   treatment on top of the inner dense stage (the other is the
   active tab in the right column).

   Updated 2026-04-22 (Implementation Directive v2 §4.2): since
   the outer vitrine (.b-diagram-glass) now uses frost density
   at 0.58, the panel was collapsing into the same perceptual
   layer. It now uses --gp-panel-* tokens (~0.76 white, 14px
   blur) to match the active tab and create the directive's
   "inner cards should be more opaque than outer container"
   contrast. The canonical stacking reads: vitrine 0.58 →
   stage 0.90 → floating cards 0.76. */
.b-fw-panel {
  position: relative;
  padding: 24px 28px 26px;
  border-radius: 12px;
  background: var(--gp-panel-bg);
  -webkit-backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  backdrop-filter: blur(var(--gp-panel-blur)) saturate(var(--gp-panel-saturate));
  border: 1px solid var(--gp-panel-border-side);
  border-top-color: var(--gp-panel-border-top);
  border-bottom-color: var(--gp-panel-border-bot);
  box-shadow: var(--gp-panel-shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: b-fw-panel-in 420ms var(--ease-out-heavy);
  flex: 1 1 auto;
  overflow: hidden;
}
/* Specular arc on the panel's top edge — wider, softer version of
   the outer stage's highlight, scaled to the panel's footprint. */
.b-fw-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Illumination layer — Directive v2 §10 3-layer audit (2026-04-22):
   caustic + argila refraction completing the panel's glass physics. */
.b-fw-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(70% 50% at 20% 18%,
      rgba(255, 255, 255, 0.10) 0%,
      transparent 55%),
    radial-gradient(50% 40% at 88% 85%,
      rgba(184, 123, 94, 0.04) 0%,
      transparent 60%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      transparent 38%,
      rgba(44, 44, 46, 0.03) 100%);
  pointer-events: none;
  z-index: 0;
}
.b-fw-panel > * { position: relative; z-index: 2; }

@keyframes b-fw-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tier tints — keep the warm cream for the intersection and
   center tiers, but layer them as a subtle wash on TOP of the
   frost glass (background-image instead of background) so the
   underlying glass physics is preserved. */
.b-fw-panel.is-intersection {
  background-image: linear-gradient(
    180deg,
    rgba(255, 251, 246, 0.32) 0%,
    rgba(255, 251, 246, 0.18) 100%
  );
}
.b-fw-panel.is-center {
  background-image: linear-gradient(
    180deg,
    rgba(255, 243, 232, 0.42) 0%,
    rgba(255, 243, 232, 0.22) 100%
  );
  border-top-color: rgba(184, 123, 94, 0.32);
  border-bottom-color: rgba(184, 123, 94, 0.14);
}

.b-fw-panel-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: baseline;
}

.b-fw-panel-n {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  color: #84848A;
  text-align: center;
}

.b-fw-panel.is-center .b-fw-panel-n { color: #B87B5E; }

.b-fw-panel-ident {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.b-fw-panel-label {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2C2C2E;
  line-height: 1.15;
}

.b-fw-panel-parent {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: 15px;
  color: #555558;
  line-height: 1.35;
}

.b-fw-panel.is-primary .b-fw-panel-parent em {
  font-style: italic;
  color: #B87B5E;
}

.b-fw-panel.is-intersection .b-fw-panel-parent {
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7D9A6B;
}

.b-fw-panel.is-center .b-fw-panel-parent {
  font-style: italic;
  color: #B87B5E;
}

.b-fw-panel-role {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-size: 16px;
  color: #555558;
  line-height: 1.4;
  padding-left: 58px;
}

.b-fw-panel-body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #2C2C2E;
  padding-left: 58px;
}

/* -------------------------------------------------------------
   Diagram — studio mode and region highlighting
   When the diagram is embedded in the Framework studio, the
   figure is pinned at state III (all labels visible) and becomes
   responsive to a `data-highlight` attribute. Selecting a tab
   dims every region except the one the tab names.
   ------------------------------------------------------------- */

.b-vitruvius.is-studio {
  /* Studio sizing — the figure fills the sticky frame; the wider
     viewBox (with external callout labels in the margins) needs
     more horizontal room than the standalone diagram, so we
     override .b-vitruvius's max-width here. */
  margin: 0;
  padding: 8px 0 0;
  max-width: none;
}

.b-vitruvius.is-studio .b-vitruvius__cap {
  margin-top: 18px;
  opacity: 0.72;
}

.b-vitruvius.is-compact svg {
  max-height: 520px;
  width: 100%;
  height: auto;
  /* Center the geometry; overflow:visible (set on .b-vitruvius svg
     globally) lets external callout text render outside the SVG
     element box if it ever spills past the viewBox. */
  display: block;
}

/* Region highlighting — soft emphasis, not a hard override.
   All callouts get a baseline opacity drop; the selected one
   returns to full clarity plus a subtle drop-shadow that lifts
   it from the canvas. The leader line, the terminal tick, and
   the venn circle that the tab names all light together as a
   single unit.
   Rewritten 2026-04-22: removed `transform: scale()` entirely.
   Earlier versions used scale(1.012) to push the active circle
   forward, but `transform-box: fill-box` on <g> elements with
   internal translate() behaves inconsistently across browsers,
   producing the visual bug where circles appeared to drift and
   overlap the diagram. Opacity + drop-shadow provides plenty of
   focus without any geometric movement. */
.b-vitruvius.is-studio[data-highlight] .b-vit-venn-c,
.b-vitruvius.is-studio[data-highlight] .b-vit-callout,
.b-vitruvius.is-studio[data-highlight] .b-vit-label-center,
.b-vitruvius.is-studio[data-highlight] .b-vit-center {
  transition:
    opacity 360ms var(--ease-out-heavy),
    filter 360ms var(--ease-out-heavy);
}

/* Default dim state for non-active regions — tuned for legibility.
   Earlier values (callout 0.34, venn 0.52, label-center 0.42,
   center 0.52) pushed unselected text close to invisible on the
   Cloud Dancer ground. New values keep a clear dim/emphasis
   delta while remaining readable as supporting content. */
.b-vitruvius.is-studio[data-highlight] .b-vit-venn-c { opacity: 0.72; }
.b-vitruvius.is-studio[data-highlight] .b-vit-callout { opacity: 0.64; }
.b-vitruvius.is-studio[data-highlight] .b-vit-label-center { opacity: 0.66; }
.b-vitruvius.is-studio[data-highlight] .b-vit-center { opacity: 0.70; }

/* Per-highlight active rules — the region the tab names returns
   to full visibility. Paired regions (e.g. SEMIOTICS highlights
   FORM + FUNCTION, since semiotics is their intersection) are
   supported via grouped selectors. */

/* FORM — top vertex + top venn circle */
.b-vitruvius.is-studio[data-highlight="forma"] .b-vit-venn-c.is-forma,
.b-vitruvius.is-studio[data-highlight="forma"] .b-vit-callout.is-forma {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(44, 44, 46, 0.12));
}

/* FUNCTION — bottom-left vertex + bottom-left venn */
.b-vitruvius.is-studio[data-highlight="func"] .b-vit-venn-c.is-func,
.b-vitruvius.is-studio[data-highlight="func"] .b-vit-callout.is-func {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(125, 154, 107, 0.24));
}

/* ESSENCE — bottom-right vertex + bottom-right venn */
.b-vitruvius.is-studio[data-highlight="ess"] .b-vit-venn-c.is-ess,
.b-vitruvius.is-studio[data-highlight="ess"] .b-vit-callout.is-ess {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(184, 123, 94, 0.28));
}

/* SEMIOTICS — FORM ∩ FUNCTION — brighten both parent circles
   plus the SEMIOTICS callout */
.b-vitruvius.is-studio[data-highlight="semio"] .b-vit-venn-c.is-forma,
.b-vitruvius.is-studio[data-highlight="semio"] .b-vit-venn-c.is-func {
  opacity: 0.90;
}
.b-vitruvius.is-studio[data-highlight="semio"] .b-vit-callout.is-semio {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(44, 44, 46, 0.16));
}

/* PHENOMENOLOGY — FORM ∩ ESSENCE */
.b-vitruvius.is-studio[data-highlight="pheno"] .b-vit-venn-c.is-forma,
.b-vitruvius.is-studio[data-highlight="pheno"] .b-vit-venn-c.is-ess {
  opacity: 0.90;
}
.b-vitruvius.is-studio[data-highlight="pheno"] .b-vit-callout.is-pheno {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(184, 123, 94, 0.26));
}

/* HUMANISM — FUNCTION ∩ ESSENCE */
.b-vitruvius.is-studio[data-highlight="human"] .b-vit-venn-c.is-func,
.b-vitruvius.is-studio[data-highlight="human"] .b-vit-venn-c.is-ess {
  opacity: 0.90;
}
.b-vitruvius.is-studio[data-highlight="human"] .b-vit-callout.is-human {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(125, 154, 107, 0.24));
}

/* BELONGING — the convergence state.
   Semantic correction 2026-04-22: earlier versions dimmed the
   three venn circles and spotlighted only the center, which read
   as "forget the sources." But BELONGING *is* the convergence of
   FORM, FUNCTION and ESSENCE — the three circles must intensify,
   not recede, because they are the source of the center. Now:
   all three venns boost to 0.96 (more present than the dim
   default), the center glows warmly, and the six external
   callouts hold their readable dim so the reader still sees the
   whole genealogy of the point. */
.b-vitruvius.is-studio[data-highlight="belong"] .b-vit-venn-c {
  opacity: 0.96;
}
.b-vitruvius.is-studio[data-highlight="belong"] .b-vit-venn-c.is-forma {
  filter: drop-shadow(0 0 4px rgba(44, 44, 46, 0.10));
}
.b-vitruvius.is-studio[data-highlight="belong"] .b-vit-venn-c.is-func {
  filter: drop-shadow(0 0 4px rgba(125, 154, 107, 0.16));
}
.b-vitruvius.is-studio[data-highlight="belong"] .b-vit-venn-c.is-ess {
  filter: drop-shadow(0 0 4px rgba(184, 123, 94, 0.18));
}
.b-vitruvius.is-studio[data-highlight="belong"] .b-vit-center.is-belong {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(184, 123, 94, 0.42));
}
.b-vitruvius.is-studio[data-highlight="belong"] .b-vit-label-center.is-belong {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(184, 123, 94, 0.26));
}

/* -------------------------------------------------------------
   Responsive — collapse to single column below 1024px; convert
   vertical tablist to a horizontal scroll rail below 720px.
   ------------------------------------------------------------- */

@media (max-width: 1024px) {
  .b-fw-stage {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 28px;
  }
  .b-vitruvius.is-compact svg {
    max-height: 380px;
  }
  /* On mobile, stack order becomes: figure → panel → tabs (the
     tabs move below the panel because they're a separate column
     child). Keeps the primary reading sequence — look, read,
     navigate. */
}

@media (max-width: 720px) {
  .b-fw-stage {
    padding: 24px 18px;
    margin-top: 36px;
  }
  .b-fw-tabs { gap: 18px; }
  .b-fw-group { gap: 8px; }

  /* Horizontal scroll-snap rail for each tier so the tablist
     stays usable on small screens without collapsing identity */
  .b-fw-group-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .b-fw-group-list::-webkit-scrollbar { display: none; }
  .b-fw-group-list > li { scroll-snap-align: start; flex: 0 0 auto; }
  .b-fw-tab {
    grid-template-columns: 28px 1fr 14px;
    gap: 10px;
    padding: 10px 12px;
    min-width: 220px;
  }
  .b-fw-tab-n { font-size: 17px; }
  .b-fw-tab-label { font-size: 11.5px; letter-spacing: 0.14em; }
  .b-fw-tab-parent { font-size: 12px; }

  .b-fw-panel { padding: 18px 18px 20px; }
  .b-fw-panel-head { grid-template-columns: 34px 1fr; gap: 10px; }
  .b-fw-panel-n { font-size: 26px; }
  .b-fw-panel-label { font-size: 16px; }
  .b-fw-panel-role,
  .b-fw-panel-body { padding-left: 0; }
  .b-fw-panel-body { font-size: 14.5px; }
  .b-fw-figure-cap { font-size: 11px; padding: 10px 14px; }
  .b-vitruvius.is-compact svg { max-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .b-vitruvius.is-studio[data-highlight] .b-vit-venn-c,
  .b-vitruvius.is-studio[data-highlight] .b-vit-callout,
  .b-vitruvius.is-studio[data-highlight] .b-vit-label-center,
  .b-vitruvius.is-studio[data-highlight] .b-vit-center {
    transition: opacity 180ms linear;
    transform: none !important;
  }
  .b-fw-panel { animation: none; }
  .b-fw-tab-chev { transition: none; }
}

/* =========================================================================
   §11.6 — Global :focus-visible (argila outline, brand-aligned a11y baseline)
   Any interactive element without its own focus style inherits this.
   Components with bespoke focus choreography (vit-step, gen-node-btn,
   waitlist-input, faq summary, fw-tab) override it via higher specificity.
   ========================================================================= */
:focus-visible {
  outline: 2px solid rgba(184, 123, 94, 0.65);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Remove default UA outline so ours is the only ring visible. */
:focus:not(:focus-visible) {
  outline: none;
}