/* ============================================================
   HOA Splash Hero cut — site.css
   M2: tokens + base typography + splash markup styling
       + slide-panel system + hamburger menu overlay
       + M1 polish: swappable splash photo, LinkedIn SVG glyph,
                    brighter bullet numbers.
   ============================================================ */

:root {
  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     16px;

  /* Spacing scale (used by panel chrome + ham-menu). */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       24px;
  --space-6:       32px;
  --space-7:       40px;
  --space-8:       56px;
  --space-9:       72px;

  /* Mono font stack (used by panel codes + ham-menu items). */
  --mono:          "JetBrains Mono", ui-monospace, monospace;
  --fs-mono-sm:    12px;

  /* To swap the splash photo: drop a new file into cuts/splash-hero/assets/
     and update --splash-image to point to it. Single overridable variable;
     no other code edits required. */
  --splash-image:  url("splash.jpg");

  /* Future swap point (P1.5): drop a second photo into cuts/splash-hero/assets/
     and update this variable to point to it. P1.5 ships with no value
     (no visible effect). When set to a url(), the side panel gains an
     ambient background photo layered behind the solid fill, with a
     translucent overlay (.panel-body background) keeping prose legible. */
  --sidepanel-image: none;
}

/* ------- Dark theme (default for splash) ------- */
:root[data-theme="dark"] {
  --bg:            #0a0e1a;
  --bg-elev-1:     #11182b;
  --bg-elev-2:     #1a2342;
  --border:        #1f2a4a;
  --border-soft:   #18213b;
  --text:          #e3eaff;
  --text-2:        #aab4d4;
  --text-3:        #7886a8;
  --text-4:        #5a6685;
  --accent:        #4eead0;
  --accent-dim:    #2d8a78;
  --accent-glow:   rgba(78, 234, 208, 0.16);
  /* P3.2: diagram silhouette fill — needs a real differential against panel-body
     (--bg-elev-1). Dark theme keeps prior #1a2342 visible elevation. */
  --diagram-mass-fill: #1a2342;
  /* P3.4: shadow stop for the iceberg gradient (paired with --diagram-mass-fill).
     One step darker than the mass fill so the underwater silhouette gets a soft
     bottom-shadow without breaking palette family. */
  --iceberg-shadow:    #0d1428;
  --shadow:        0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 40px rgba(0,0,0,0.35);
  --splash-overlay-grad-start: rgba(10, 14, 26, 0.85);
  --splash-overlay-grad-end:   rgba(10, 14, 26, 0);
  color-scheme: dark;
}

/* ------- Light theme (alternate) ------- */
:root[data-theme="light"] {
  --bg:            #f5f1e6;
  --bg-elev-1:     #ffffff;
  --bg-elev-2:     #faf6ea;
  --border:        #d6d0bd;
  --border-soft:   #e6e0cd;
  --text:          #1a2342;
  --text-2:        #4a5276;
  --text-3:        #6c7796;
  --text-4:        #9aa3c0;
  --accent:        #0e8a78;
  --accent-dim:    #67b9a8;
  --accent-glow:   rgba(14, 138, 120, 0.16);
  /* P3.2: diagram silhouette fill — light theme needs a clearly-darker mass than
     --bg-elev-1 (#ffffff panel) and --bg (#f5f1e6 page). Warm tan stays in the
     palette family while delivering a visible silhouette against either bg. */
  --diagram-mass-fill: #d9cfb4;
  /* P3.4: shadow stop for the iceberg gradient (paired with --diagram-mass-fill).
     One step darker tan — same family, deeper shadow for the underwater bottom. */
  --iceberg-shadow:    #b8a884;
  --shadow:        0 1px 0 rgba(255,255,255,0.65) inset, 0 6px 22px rgba(26, 35, 66, 0.08);
  /* Light theme keeps a dark overlay over the photo for legibility — the photo is dark navy regardless of UI theme. */
  --splash-overlay-grad-start: rgba(10, 14, 26, 0.80);
  --splash-overlay-grad-end:   rgba(10, 14, 26, 0);
  color-scheme: light;
}

/* ------- Reset + base typography ------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  height: 100%;
}
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* page never scrolls — panels scroll inside themselves */
}
::selection { background: var(--accent-glow); color: var(--accent); }

/* ------- Skip link (a11y) ------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  background: var(--bg-elev-1);
  color: var(--accent);
  padding: 8px 14px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   SPLASH (full-viewport hero)
   ============================================================ */

.splash {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #0a0e1a; /* fallback to navy regardless of theme — photo is dark */
  background-image: var(--splash-image);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: transform 400ms ease-out;
  will-change: transform;
  z-index: 1;
}

/* Gradient overlay — invisible-feeling lift for overlay text legibility.
   Sits over the photo, behind the foreground overlay content. */
.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--splash-overlay-grad-start) 0%,
    var(--splash-overlay-grad-start) 18%,
    var(--splash-overlay-grad-end) 45%
  );
  pointer-events: none;
  z-index: 1;
}

.splash.splash-shifted {
  transform: translateX(-85vw);
}

/* ------- Foreground overlay (left third) ------- */
.splash-overlay {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  max-width: 560px;
  padding: 0 56px 0 64px;
  z-index: 2;
}

.wordmark {
  margin: 0 0 14px 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.32em;
  color: var(--accent);
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 0 24px rgba(78, 234, 208, 0.18);
}

.subtitle {
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-size: 1.0625rem;       /* ~17px — between the original eyebrow (~12px) and the pitch line */
  font-style: italic;
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: 0.005em;
  line-height: 1.4;
  margin: 6px 0 14px 0;       /* tight top gap to title, generous below before the pitch line */
}

.pitch {
  margin: 0 0 44px 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #e3eaff; /* photo-overlay text — fixed light value */
}

/* ------- Bullets (5 capability buttons) ------- */
.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bullets li { margin: 0; padding: 0; }

.bullet {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 160ms ease;
}
.bullet:last-child { border-bottom: 0; }

/* Bullet numbers — brightened per M1 polish FIX 3.
   Was #7886a8 (muted text-3 mid-tone); now accent-dim with bumped weight
   so the prefix reads clearly without overwhelming the title. */
.bullet-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--accent-dim);
  flex-shrink: 0;
  min-width: 22px;
  transition: color 160ms ease, text-shadow 160ms ease;
}
.bullet-sep {
  font-family: var(--mono);
  font-size: 12px;
  color: #5a6685;
  flex-shrink: 0;
}
.bullet-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #e3eaff;
  letter-spacing: 0.005em;
  transition: text-decoration-color 160ms ease;
  text-decoration: underline solid transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.bullet:hover,
.bullet:focus-visible {
  border-bottom-color: rgba(78, 234, 208, 0.32);
  outline: none;
}
.bullet:hover .bullet-num,
.bullet:focus-visible .bullet-num {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(78, 234, 208, 0.45);
}
.bullet:hover .bullet-title,
.bullet:focus-visible .bullet-title {
  text-decoration-color: var(--accent);
}
.bullet:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* R3b — bullet anchor (Schedule with me) inherits button-bullet styling.
   The base .bullet rules are element-agnostic; this guards against
   anchor-default underline + color leak so a.bullet reads identically
   to button.bullet. */
a.bullet {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
   BRAND HEADER (top-left, FIXED above splash + panels)
   Wraps the H-OA logo + hamburger button as a visual pair.
   Positioned fixed (not absolute) so the splash slide animation
   does not carry it off-viewport when a capability panel opens.
   Sits above panels (z 50) and above home-strip (z 49) so the
   visitor can always reach the menu — including for cross-fade
   panel-switching while a panel is already open.
   ============================================================ */
.brand-header {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* allow children to be interactive; logo itself is decorative */
}
/* the name replaced the H-OA logo mark (2026-09-21) -- text only, no image */
.brand-name {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text, #e3eaff);
  white-space: nowrap;
  user-select: none;
}
.brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   HAMBURGER ICON (sits inside .brand-header, to the right of the logo)
   Re-enables pointer-events so the button is tappable even though
   the parent .brand-header opts out (so the surrounding area does
   not steal clicks from the splash composition).
   ============================================================ */
.hamburger {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #aab4d4;
  transition: color 160ms ease;
}
.hamburger:hover,
.hamburger:focus-visible {
  color: var(--accent);
  outline: none;
}
.hamburger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.hamburger-icon {
  display: block;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}

/* ============================================================
   LINKEDIN GLYPH (bottom-right, SVG logomark — M1 polish FIX 2)
   ============================================================ */
.linkedin {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 100ms linear, transform 100ms linear;
}
.linkedin svg {
  display: block;
  width: 24px;
  height: 24px;
}
.linkedin:hover,
.linkedin:focus-visible {
  color: var(--accent);
  outline: none;
}
.linkedin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   SLIDE-PANEL SYSTEM
   ============================================================ */

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85vw;
  /* P1.5: plumb ambient background-image via --sidepanel-image (default `none`,
     no visible effect). When set to url(...), the image layers over the solid
     bg-elev-1 color; .panel-body provides an opaque surface for prose. */
  background-color: var(--bg-elev-1);
  background-image: var(--sidepanel-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  transform: translateX(100%);
  opacity: 1;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  transition: transform 400ms ease-out, opacity 200ms linear;
  will-change: transform, opacity;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.panel:focus { outline: none; }
.panel.panel-open {
  transform: translateX(0);
}
.panel.panel-fading-out { opacity: 0; }
.panel.panel-fading-in  { opacity: 1; transform: translateX(0); }

.panel-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--border-soft);
  z-index: 1;
}
.panel-code {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.panel-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 100ms linear, border-color 100ms linear, background 100ms linear;
}
.panel-close:hover,
.panel-close:focus-visible {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--bg-elev-2);
  outline: none;
}
.panel-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   Panel-head action glyphs (contact + schedule, hand-drawn).
   Both sit between .panel-code and .panel-close, grouped right-edge
   so they don't compete with .panel-code for visual weight.
   .panel-contact uses margin-left:auto to push the whole icon group
   (contact + schedule + close) flush right against .panel-close.
   Default state is neutral (text-2); hover/focus flips to accent-teal.
   ============================================================ */
.panel-contact,
.panel-schedule {
  /* 44x44 tap-target wrapping a 20px visual glyph (per spec §6.2). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 100ms linear, background 100ms linear;
}
.panel-contact {
  /* Pushes the icon group (contact + schedule + close) to the right
     edge so the close X is not floated alone in the middle gap. */
  margin-left: auto;
}
.panel-contact:hover,
.panel-contact:focus-visible,
.panel-schedule:hover,
.panel-schedule:focus-visible {
  color: var(--accent);
  background: var(--bg-elev-2);
  outline: none;
}
.panel-contact:focus-visible,
.panel-schedule:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The date-dot uses its own fill (var(--accent)) which stays teal in
   default state. Hover state lifts the strokes (currentColor) to teal as
   well, so the whole glyph reads accent on engagement. */

.panel-body {
  padding: var(--space-7) var(--space-5) var(--space-9);
  max-width: 680px;
  margin: 0 auto;
  /* P1.5: keep prose legible if --sidepanel-image is set on .panel.
     Default behavior (image = none): visually identical to before. */
  background: var(--bg-elev-1);
}

/* ============================================================
   HOME-STRIP (left-edge close affordance, shown when a panel is open)
   P1: container is now a <div>; click-anywhere-to-close moved to a
   transparent .home-strip-close <button> overlay at z-index 0 so the
   nav items above can be clicked individually.
   ============================================================ */
.home-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 15vw;
  height: 100vh;
  background: transparent;
  border: 0;
  padding: 0;
  z-index: 49;
  display: none;
  pointer-events: none; /* container is decorative; children opt in */
}
.home-strip.home-strip-visible {
  display: block;
}

.home-strip-close {
  position: absolute;
  inset: 0;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 0;
  pointer-events: auto;
}
.home-strip-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* ============================================================
   HAMBURGER MENU OVERLAY (compact, top-left)
   ============================================================ */
.ham-menu {
  position: fixed;
  top: 68px;
  left: 20px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-width: 260px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top left;
  transition: opacity 150ms linear, transform 150ms ease-out;
  pointer-events: none;
  z-index: 100;
}
.ham-menu[aria-hidden="false"] {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.ham-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ham-menu li {
  margin: 0;
}
.ham-menu button,
.ham-menu li a {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: color 100ms linear, background 100ms linear;
}
.ham-menu button:hover,
.ham-menu button:focus-visible,
.ham-menu li a:hover,
.ham-menu li a:focus-visible {
  color: var(--accent);
  background: var(--bg-elev-2);
  outline: none;
}
.ham-menu button:focus-visible,
.ham-menu li a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.ham-menu .ham-sep {
  height: 1px;
  background: var(--border-soft);
  margin: var(--space-2) var(--space-2);
  list-style: none;
}
.ham-menu .theme-current {
  color: var(--accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mid widths — keep overlay readable */
@media (max-width: 1100px) {
  .splash-overlay {
    width: 52%;
    padding: 0 40px 0 48px;
  }
  .pitch { font-size: 28px; }
}

/* Narrow tablets / large phones */
@media (max-width: 820px) {
  .splash-overlay {
    width: 60%;
    padding: 0 32px 0 40px;
  }
  .pitch { font-size: 24px; }
  .wordmark { font-size: 18px; letter-spacing: 0.28em; }
}

/* Phones — overlay shifts to bottom-aligned (portrait crop centers face vertically). */
@media (max-width: 700px) {
  .splash {
    background-position: center top;
  }
  .splash::before {
    background: linear-gradient(
      to top,
      var(--splash-overlay-grad-start) 0%,
      var(--splash-overlay-grad-start) 30%,
      var(--splash-overlay-grad-end) 75%
    );
  }
  .splash-overlay {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    padding: 24px 24px 84px 24px;
  }
  .pitch { font-size: 22px; margin-bottom: 28px; }
  .wordmark { font-size: 16px; margin-bottom: 10px; }
  .subtitle { margin-bottom: 18px; }
  .bullet { padding: 8px 0; }
  .bullet-title { font-size: 15px; }
  .brand-header { top: 12px; left: 12px; gap: 8px; }
  .linkedin { bottom: 12px; right: 12px; }
  .ai-pride-trigger { bottom: 12px; right: 60px; }

  /* Panel takes 95% of viewport, home-strip 5% */
  .splash.splash-shifted { transform: translateX(-95vw); }
  .panel { width: 95vw; }
  .home-strip { width: 5vw; }

  .ham-menu { top: 68px; left: 12px; min-width: 240px; }
}

/* Very narrow — panel takes 100%, home-strip hidden (close button doubles as back) */
@media (max-width: 400px) {
  .splash.splash-shifted { transform: translateX(-100vw); }
  .panel { width: 100vw; }
  .home-strip { display: none !important; }
}

/* ============================================================
   M3 — PANEL BODY CONTENT
   Capability + manifesto + contact panel content styles.
   ============================================================ */

.panel-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 var(--space-3) 0;
}

.panel-lede {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 var(--space-7) 0;
  max-width: 60ch;
}

.panel-section {
  margin: 0 0 var(--space-7) 0;
}
.panel-section:last-of-type {
  margin-bottom: var(--space-7);
}

.panel-section-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3) 0;
}

.panel-section p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  max-width: 60ch;
  margin: 0 0 var(--space-3) 0;
}
.panel-section p:last-child {
  margin-bottom: 0;
}
.panel-section em {
  color: var(--text);
  font-style: italic;
}

/* Receipts aside — quieter, set apart from the four prose sections. */
.panel-receipts {
  border-top: 1px solid var(--border-soft);
  padding: var(--space-5) var(--space-4) var(--space-4) var(--space-4);
  margin: var(--space-7) 0 0 0;
  background: var(--bg-elev-2);
  border-radius: var(--radius-sm);
}
.panel-receipts-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--space-3) 0;
}
.panel-receipts p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 0 var(--space-3) 0;
}
.panel-receipts p:last-child {
  margin-bottom: 0;
}

/* Closing CTA — italic, separated. */
.panel-cta {
  margin: var(--space-8) 0 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  color: var(--text-2);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
}
.panel-cta a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-style: normal;
}
.panel-cta a:hover,
.panel-cta a:focus-visible {
  color: var(--accent);
  text-decoration-thickness: 2px;
  outline: none;
}
.panel-cta a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   MANIFESTO PANEL — six sub-heads + calibration summary
   ============================================================ */

.manifesto-section {
  margin-bottom: var(--space-7);
}

.manifesto-section .sub-head {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 var(--space-3) 0;
}

.manifesto-section p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 60ch;
  margin: 0 0 var(--space-4) 0;
}
.manifesto-section p:last-child {
  margin-bottom: 0;
}

.manifesto-calibration {
  border-top: 1px solid var(--border-soft);
  padding: var(--space-7) var(--space-4) var(--space-4) var(--space-4);
  margin: var(--space-8) 0 0 0;
  background: var(--bg-elev-2);
  border-radius: var(--radius-sm);
}
.manifesto-calibration .panel-section-title {
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.manifesto-calibration p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
  margin: 0;
}

/* ============================================================
   CONTACT PANEL
   ============================================================ */

.contact-mailto {
  margin: 0 0 var(--space-3) 0;
}
.contact-mailto a {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}
.contact-mailto a:hover,
.contact-mailto a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  outline: none;
}
.contact-mailto a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.contact-linkedin {
  margin: 0;
}
.contact-linkedin a {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem;
  color: var(--accent-dim);
  text-decoration: none;
}
.contact-linkedin a:hover,
.contact-linkedin a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  outline: none;
}
.contact-linkedin a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.contact-note,
.contact-tail {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-3);
  max-width: 60ch;
}
.contact-note {
  margin: 0 0 var(--space-3) 0;
}
.contact-tail {
  margin: var(--space-8) 0 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}

/* Responsive — panel-body content scales down on phones. */
@media (max-width: 700px) {
  .panel-title { font-size: 1.625rem; }
  .panel-lede { font-size: 1.125rem; }
  .panel-section p { font-size: 0.9375rem; }
  .manifesto-section .sub-head { font-size: 1.25rem; }
  .contact-mailto a { font-size: 1.25rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .splash, .panel { transition: none !important; }
}

/* ============================================================
   M4 — §03.4 INTERACTIVE CHALLENGE
   Ported from cuts/operating-manual/assets/site.css (§03.4 block).
   Behavior identical to OM cut; tokens translated from
   OM (--ink / --ink-soft / --ink-muted / --bg-rule / --serif / --fs-*)
   to splash-hero (--text / --text-2 / --text-3 / --border-soft /
   Inter serif fallback / rem-sized typography).
   ============================================================ */

.panel-challenge {
  margin-top: var(--space-7);
}

.challenge-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 var(--space-6) 0;
}

.challenge-body {
  margin-top: var(--space-5);
  max-width: 60ch;
}

/* Dashboard tile */
.ch-dashboard {
  border: 1px solid var(--border-soft);
  background: var(--bg-elev-2);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-sm);
  transition: opacity 400ms ease-out;
}
.ch-dash-dimmed { opacity: 0.55; }
.ch-dash-title {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}
.ch-dash-headline {
  margin-bottom: var(--space-5);
}
.ch-dash-headline-value {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ch-dash-headline-label {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-2);
  margin-top: var(--space-1);
}
.ch-dash-indicators {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}
.ch-dash-ind-name {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ch-dash-ind-value {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--text);
  margin-top: var(--space-1);
}
.ch-dash-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-3);
}

@media (max-width: 700px) {
  .ch-dash-indicators { grid-template-columns: 1fr; gap: var(--space-3); }
  .ch-dash-headline-value { font-size: 2.25rem; }
}

/* Prompt + buttons */
.ch-prompt {
  margin-bottom: var(--space-4);
}
.ch-prompt p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.55;
  margin: 0;
  color: var(--text);
}
.ch-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ch-btn {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--text-2);
  color: var(--text);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms linear, color 100ms linear, border-color 100ms linear;
}
.ch-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.ch-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Reveal */
.ch-reveal { margin-top: var(--space-5); }
.ch-choice-line {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: var(--space-5);
}
.ch-reveal-row {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
}
.ch-reveal-row.ch-reveal-enter {
  opacity: 0;
  transform: translateY(8px);
}
.ch-reveal-row:first-child { border-top: none; }
.ch-reveal-claim {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: var(--space-2);
}
.ch-reveal-truth {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.ch-reveal-actual {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-2);
}
.ch-reveal-actual .accent {
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}
.ch-closing {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 2px solid var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.ch-closing.ch-closing-in {
  opacity: 1;
  transform: translateY(0);
}
.ch-closing p {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0;
  color: var(--text);
}
.ch-closing strong {
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
}

/* P1.8: home-strip-close inset shadow rules removed -- the seam lines were
   visible during slide-in and compounded with the panel border-left. */
.home-strip.home-strip-visible {
  display: block;
}

/* ============================================================
   P1.5 — COMPRESSED HOME-STRIP CONTENT (LABELS, NOT BOXES)
   Replaces P1's circular portrait + boxed-number tiles with a
   text-label list. Pure typography, no surrounding chrome; active
   state is a left-rule accent in cyan.

   Choreography preserved from P1:
     Open  : splash slide starts at t=0 (400ms);
             home-nav fades in at t=100ms (350ms ease-out),
             so the labels emerge INTO the room the splash makes.
             Per-item stagger keeps the choreography Lena designed.
     Close : home-nav fades out FIRST (200ms),
             THEN splash slides back (400ms) — clean exit.
   Driven by the .home-strip-content-visible class which JS toggles
   in the same tick (open) or 0/200ms before (close).
   ============================================================ */

.home-nav {
  /* Anchored mid-height of the strip, below where the hamburger sits.
     The strip is 15vw wide; the labels need to read inside that
     gutter without crowding the right edge or the LinkedIn glyph. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  padding: 0 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  pointer-events: none;  /* container is positional; buttons opt in */
}
.home-nav-item {
  pointer-events: auto;
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  /* Invisible left-rule by default; active state lights this in cyan. */
  border-left: 2px solid transparent;
  padding: 6px 10px 6px 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.35;          /* allow 2-line wrap on the long labels */
  color: var(--text-3);
  cursor: pointer;
  opacity: 0;
  /* Default (close-direction) transition: simultaneous fade, snappy exit.
     Color/border transitions stay short (120ms) for crisp hover/active. */
  transition:
    color 120ms linear,
    border-color 120ms linear,
    opacity 180ms ease-in;
}
.home-strip-content-visible .home-nav-item {
  opacity: 1;
  /* Open-direction transition: staggered cascade (per-item delay below)
     so the five labels ARRIVE one after the other — felt as choreography,
     not as five things landing at once. */
  transition:
    color 120ms linear,
    border-color 120ms linear,
    opacity 350ms ease-out;
}
.home-strip-content-visible .home-nav-item:nth-child(1) { transition-delay: 0ms, 0ms, 120ms; }
.home-strip-content-visible .home-nav-item:nth-child(2) { transition-delay: 0ms, 0ms, 160ms; }
.home-strip-content-visible .home-nav-item:nth-child(3) { transition-delay: 0ms, 0ms, 200ms; }
.home-strip-content-visible .home-nav-item:nth-child(4) { transition-delay: 0ms, 0ms, 240ms; }
.home-strip-content-visible .home-nav-item:nth-child(5) { transition-delay: 0ms, 0ms, 280ms; }

.home-nav-item:hover,
.home-nav-item:focus-visible {
  color: var(--accent);
  outline: none;
}
.home-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.home-nav-item.home-nav-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* LinkedIn wrap — hover affordance + scale.
   The glyph itself stays visible always; the wrap container provides
   the hover background and the slight transform. */
.linkedin {
  /* Slightly larger touch-target footprint (40x40), still visually anchored. */
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}
.linkedin-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  background: transparent;
  transition:
    background 150ms ease-out,
    transform 150ms ease-out;
}
.linkedin:hover .linkedin-wrap,
.linkedin:focus-visible .linkedin-wrap {
  background: var(--bg-elev-2);
  transform: scale(1.08);
}

/* Smaller viewports: hide nav inside the 5vw strip
   (no room to render labels responsibly); revert to the minimal
   M4 home-strip behavior. LinkedIn polish wrap stays. */
@media (max-width: 700px) {
  .home-nav { display: none; }
}

/* ============================================================
   P1.5 — SIMPLIFIED HAMBURGER (LESS PILL, MORE ICON)
   Strips the P1 pill chrome back to a clean borderless icon-and-label.
   Hover/expanded states use color only — no box, no fill, no border.
   P5 (logo): position now owned by .brand-header; size bumped to 36px
   to pair visually with the H-OA logo at matching scale.
   ============================================================ */
.hamburger {
  padding: 8px;
  gap: 6px;
  width: auto;
  background: transparent;
  border: none;                /* drop the box */
  border-radius: 0;
  color: var(--text-2);
  transition: color 120ms linear;
}
.hamburger:hover,
.hamburger:focus-visible {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
}
.hamburger[aria-expanded="true"] {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.hamburger[aria-expanded="true"]:hover,
.hamburger[aria-expanded="true"]:focus-visible {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
}
.hamburger-icon {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

/* ============================================================
   P1.5 — HAMBURGER MENU OVERLAY
   Re-anchor under the simplified (smaller, borderless) hamburger.
   Overlay chrome itself stays the same — that's working.
   ============================================================ */
.ham-menu {
  top: 80px;
  left: 20px;
  min-width: 280px;
  padding: var(--space-4);
  background: var(--bg-elev-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (max-width: 700px) {
  .ham-menu {
    top: 68px;
    left: 12px;
    min-width: 240px;
  }
}

/* ============================================================
   P2.05 — CAPABILITY PANELS unified typography (cap-01..05)
   Standardizes typography across all five capability panels.
   Mono everywhere for body prose, cyan mono uppercase for section
   codes/titles, Inter for panel titles (+ the cap-05 pledge — the
   one deliberate Inter italic deviation).

   IMPORTANT: scoped to the five capability panels (#panel-cap-01
   through #panel-cap-05) so Manifesto and Contact panels keep their
   own M3 Inter typography. They have different content shapes
   (manifesto sub-heads, contact mailto/linkedin patterns) and were
   never in scope for this standardization.
   ============================================================ */

/* Panel title — Inter heading, shared across the five capability panels.
   Inter (not mono) gives the title a typographic moment that mono-everywhere
   doesn't deliver. */
#panel-cap-01 .panel-body .panel-title,
#panel-cap-02 .panel-body .panel-title,
#panel-cap-03 .panel-body .panel-title,
#panel-cap-04 .panel-body .panel-title,
#panel-cap-05 .panel-body .panel-title {
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0 0 var(--space-5);
  color: var(--text);
}

/* Sub-statement — italic Inter voice tagline that sits between the panel
   title and the mono lede. One verbatim sentence per capability panel, per
   Chet's 2026-06-17 polish pass. */
#panel-cap-01 .panel-body .panel-substatement,
#panel-cap-02 .panel-body .panel-substatement,
#panel-cap-03 .panel-body .panel-substatement,
#panel-cap-04 .panel-body .panel-substatement,
#panel-cap-05 .panel-body .panel-substatement {
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text-2);
  margin: var(--space-3) 0 var(--space-6);
  max-width: 64ch;
}

/* Lede — mono, compact. */
#panel-cap-01 .panel-body .panel-lede,
#panel-cap-02 .panel-body .panel-lede,
#panel-cap-03 .panel-body .panel-lede,
#panel-cap-04 .panel-body .panel-lede,
#panel-cap-05 .panel-body .panel-lede {
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 var(--space-6);
  max-width: 64ch;
  font-weight: 400;
}

/* Sections (cap-01..04 use .panel-section / .panel-section-title; cap-05 has
   no .panel-section — its body is lede + diagram + supporting + pledge). */
#panel-cap-01 .panel-body .panel-section,
#panel-cap-02 .panel-body .panel-section,
#panel-cap-03 .panel-body .panel-section,
#panel-cap-04 .panel-body .panel-section {
  margin: var(--space-6) 0;
}
#panel-cap-01 .panel-body .panel-section-title,
#panel-cap-02 .panel-body .panel-section-title,
#panel-cap-03 .panel-body .panel-section-title,
#panel-cap-04 .panel-body .panel-section-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
#panel-cap-01 .panel-body .panel-section p,
#panel-cap-02 .panel-body .panel-section p,
#panel-cap-03 .panel-body .panel-section p,
#panel-cap-04 .panel-body .panel-section p {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 var(--space-3);
  max-width: 64ch;
  font-weight: 400;
}
#panel-cap-01 .panel-body .panel-section p:last-child,
#panel-cap-02 .panel-body .panel-section p:last-child,
#panel-cap-03 .panel-body .panel-section p:last-child,
#panel-cap-04 .panel-body .panel-section p:last-child {
  margin-bottom: 0;
}
#panel-cap-01 .panel-body .panel-section em,
#panel-cap-02 .panel-body .panel-section em,
#panel-cap-03 .panel-body .panel-section em,
#panel-cap-04 .panel-body .panel-section em {
  color: var(--text);
  font-style: italic;
}

/* Diagram container */
.cap-diagram {
  margin: var(--space-6) 0 var(--space-5);
  padding: 0;
}
.cap-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  /* P3 viewBox is 640x440 → natural height ~434px at 632px wide.
     max-height here is just a safety ceiling; rebuilt diagrams sit comfortably under it. */
  max-height: 480px;
}
.cap-diagram-caption {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin: var(--space-4) 0 0;
}

/* Diagram typography cascade — P3 REBUILD.
   Sizing now lives per-element on the SVG <text> elements (via explicit
   font-size attrs) because P3 shrank viewBox so viewBox units ≈ rendered px.
   The cascade here just sets font-family + fill so we don't repeat
   font-family on every <text>. P3 viewBox standard:
   640x440 (cap-01..05 + manifesto) and 640x200 (cap-03 mini). */
.ai-leadership-svg text,
.management-discipline-svg text,
.data-quality-svg text,
.ai-builds-svg text,
.analyst-training-svg text,
.we-all-get-better-svg text,
.training-exec-svg text,
.data-as-discipline-svg text {
  font-family: var(--mono);
  fill: var(--text-2);
}
.ai-leadership-svg .diagram-eyebrow,
.management-discipline-svg .diagram-eyebrow,
.data-quality-svg .diagram-eyebrow,
.ai-builds-svg .diagram-eyebrow,
.analyst-training-svg .diagram-eyebrow,
.we-all-get-better-svg .diagram-eyebrow,
.training-exec-svg .diagram-eyebrow,
.data-as-discipline-svg .diagram-eyebrow {
  letter-spacing: 0.22em;
  fill: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
}
.ai-leadership-svg .strong-divider,
.management-discipline-svg .strong-divider,
.data-quality-svg .strong-divider,
.ai-builds-svg .strong-divider,
.analyst-training-svg .strong-divider,
.training-exec-svg .strong-divider,
.data-as-discipline-svg .strong-divider {
  stroke: var(--border-soft);
  stroke-width: 1.5;
}
.ai-leadership-svg .column-header,
.management-discipline-svg .column-header,
.data-quality-svg .column-header,
.ai-builds-svg .column-header,
.analyst-training-svg .column-header,
.training-exec-svg .column-header,
.data-as-discipline-svg .column-header {
  letter-spacing: 0.18em;
  fill: var(--text);
  font-weight: 700;
  text-transform: uppercase;
}
.ai-leadership-svg .column-sub,
.management-discipline-svg .column-sub,
.data-quality-svg .column-sub,
.ai-builds-svg .column-sub,
.analyst-training-svg .column-sub,
.training-exec-svg .column-sub,
.data-as-discipline-svg .column-sub {
  letter-spacing: 0.04em;
  fill: var(--text-3);
  font-style: italic;
}

/* cap-05 leadership web — left column nodes (cyan, connected) */
.ai-leadership-svg .cluster-leadership .cluster-edges line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-opacity: 0.65;
}
.ai-leadership-svg .cluster-leadership .cluster-node circle {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.ai-leadership-svg .cluster-leadership .cluster-node text {
  fill: var(--text);
  /* P3.2: 11 -> 18 to make node labels carry the leadership argument legibly.
     Web was respaced in index.html to give 18px labels collision-free room. */
  font-size: 18px;
}

/* Supporting prose (cap-05 only — only cap-05 has .panel-supporting). */
#panel-cap-05 .panel-body .panel-supporting {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 64ch;
  margin: var(--space-6) 0 var(--space-5);
}

/* Pledge (cap-05 only — the one deliberate Inter italic deviation from the
   all-mono system. Marks the personal voice line, framed by hairline rules,
   set apart from the surrounding specification-mono). */
#panel-cap-05 .panel-body .panel-pledge {
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text);
  text-align: left;
  max-width: 56ch;
  margin: var(--space-7) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* Operational tiles (cap-01..05 — the signature CTA-ish moment for each
   capability lane. POSTURE / PRACTICE / INVITATION (or per-lane categories).
   Three-column grid between core-tile and CTA; stacks vertically on narrow
   viewports. */
#panel-cap-01 .panel-body .panel-tiles,
#panel-cap-02 .panel-body .panel-tiles,
#panel-cap-03 .panel-body .panel-tiles,
#panel-cap-04 .panel-body .panel-tiles,
#panel-cap-05 .panel-body .panel-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-7);
}
#panel-cap-01 .panel-body .panel-tile,
#panel-cap-02 .panel-body .panel-tile,
#panel-cap-03 .panel-body .panel-tile,
#panel-cap-04 .panel-body .panel-tile,
#panel-cap-05 .panel-body .panel-tile {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 150ms ease-out;
}
#panel-cap-01 .panel-body .panel-tile:hover,
#panel-cap-02 .panel-body .panel-tile:hover,
#panel-cap-03 .panel-body .panel-tile:hover,
#panel-cap-04 .panel-body .panel-tile:hover,
#panel-cap-05 .panel-body .panel-tile:hover {
  border-color: var(--accent-dim);
}
#panel-cap-01 .panel-body .panel-tile-eyebrow,
#panel-cap-02 .panel-body .panel-tile-eyebrow,
#panel-cap-03 .panel-body .panel-tile-eyebrow,
#panel-cap-04 .panel-body .panel-tile-eyebrow,
#panel-cap-05 .panel-body .panel-tile-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
#panel-cap-01 .panel-body .panel-tile-body,
#panel-cap-02 .panel-body .panel-tile-body,
#panel-cap-03 .panel-body .panel-tile-body,
#panel-cap-04 .panel-body .panel-tile-body,
#panel-cap-05 .panel-body .panel-tile-body {
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}

@media (max-width: 700px) {
  #panel-cap-01 .panel-body .panel-tiles,
  #panel-cap-02 .panel-body .panel-tiles,
  #panel-cap-03 .panel-body .panel-tiles,
  #panel-cap-04 .panel-body .panel-tiles,
  #panel-cap-05 .panel-body .panel-tiles {
    grid-template-columns: 1fr;
  }
}

/* Core principle tile — full width, sits above the 3 operational tiles.
   Italic Inter inside a cyan-dim bordered frame; carries the lane's
   foundational stake (the cap-05 pledge is the canonical example). */
#panel-cap-01 .panel-body .panel-core-tile,
#panel-cap-02 .panel-body .panel-core-tile,
#panel-cap-03 .panel-body .panel-core-tile,
#panel-cap-04 .panel-body .panel-core-tile,
#panel-cap-05 .panel-body .panel-core-tile {
  background: var(--bg-elev-1);
  border: 1px solid var(--accent-dim);
  padding: var(--space-5) var(--space-5);
  margin: var(--space-7) 0 var(--space-4);
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--text);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
#panel-cap-01 .panel-body .panel-core-tile-eyebrow,
#panel-cap-02 .panel-body .panel-core-tile-eyebrow,
#panel-cap-03 .panel-body .panel-core-tile-eyebrow,
#panel-cap-04 .panel-body .panel-core-tile-eyebrow,
#panel-cap-05 .panel-body .panel-core-tile-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  font-style: normal;
  min-width: 9ch;
  flex-shrink: 0;
}
#panel-cap-01 .panel-body .panel-core-tile-body,
#panel-cap-02 .panel-body .panel-core-tile-body,
#panel-cap-03 .panel-body .panel-core-tile-body,
#panel-cap-04 .panel-body .panel-core-tile-body,
#panel-cap-05 .panel-body .panel-core-tile-body {
  margin: 0;
  flex: 1;
}

@media (max-width: 700px) {
  #panel-cap-01 .panel-body .panel-core-tile,
  #panel-cap-02 .panel-body .panel-core-tile,
  #panel-cap-03 .panel-body .panel-core-tile,
  #panel-cap-04 .panel-body .panel-core-tile,
  #panel-cap-05 .panel-body .panel-core-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* Receipts aside — compact mono form, applied across cap-01..05. Replaces
   the M3 boxed/elevated form for these five panels; the Manifesto and Contact
   panels do not use .panel-receipts. */
#panel-cap-01 .panel-body .panel-receipts,
#panel-cap-02 .panel-body .panel-receipts,
#panel-cap-03 .panel-body .panel-receipts,
#panel-cap-04 .panel-body .panel-receipts,
#panel-cap-05 .panel-body .panel-receipts {
  border-top: 1px solid var(--border-soft);
  padding: var(--space-4) 0 0 0;
  margin: var(--space-5) 0;
  background: transparent;
  border-radius: 0;
}
#panel-cap-01 .panel-body .panel-receipts-title,
#panel-cap-02 .panel-body .panel-receipts-title,
#panel-cap-03 .panel-body .panel-receipts-title,
#panel-cap-04 .panel-body .panel-receipts-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
#panel-cap-01 .panel-body .panel-receipts p,
#panel-cap-02 .panel-body .panel-receipts p,
#panel-cap-03 .panel-body .panel-receipts p,
#panel-cap-04 .panel-body .panel-receipts p,
#panel-cap-05 .panel-body .panel-receipts p {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.65;
  color: var(--text-3);
  margin: 0 0 var(--space-3);
  max-width: 64ch;
}
#panel-cap-01 .panel-body .panel-receipts p:last-child,
#panel-cap-02 .panel-body .panel-receipts p:last-child,
#panel-cap-03 .panel-body .panel-receipts p:last-child,
#panel-cap-04 .panel-body .panel-receipts p:last-child,
#panel-cap-05 .panel-body .panel-receipts p:last-child {
  margin-bottom: 0;
}

/* CTA — quieter mono form, no top border/italic, applied across cap-01..05.
   Replaces the M3 italic-with-border form for these five panels. */
#panel-cap-01 .panel-body .panel-cta,
#panel-cap-02 .panel-body .panel-cta,
#panel-cap-03 .panel-body .panel-cta,
#panel-cap-04 .panel-body .panel-cta,
#panel-cap-05 .panel-body .panel-cta {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-2);
  font-style: normal;
  margin: var(--space-6) 0 0;
  padding-top: 0;
  border-top: 0;
  line-height: 1.55;
}
#panel-cap-01 .panel-body .panel-cta a,
#panel-cap-02 .panel-body .panel-cta a,
#panel-cap-03 .panel-body .panel-cta a,
#panel-cap-04 .panel-body .panel-cta a,
#panel-cap-05 .panel-body .panel-cta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  font-style: normal;
}
#panel-cap-01 .panel-body .panel-cta a:hover,
#panel-cap-02 .panel-body .panel-cta a:hover,
#panel-cap-03 .panel-body .panel-cta a:hover,
#panel-cap-04 .panel-body .panel-cta a:hover,
#panel-cap-05 .panel-body .panel-cta a:hover,
#panel-cap-01 .panel-body .panel-cta a:focus-visible,
#panel-cap-02 .panel-body .panel-cta a:focus-visible,
#panel-cap-03 .panel-body .panel-cta a:focus-visible,
#panel-cap-04 .panel-body .panel-cta a:focus-visible,
#panel-cap-05 .panel-body .panel-cta a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Mobile (≤700px): horizontal-scroll the diagram inside a container so
   the side-by-side comparison stays legible at hand-held sizes. The
   visual argument (cyan-connected vs gray-isolated) still lands even
   at a glance from a narrow viewport — and the figcaption restates it.
   Full P2 may build a mobile-stacked variant; this single-lane preview
   keeps the desktop diagram intact and lets the user pan. */
/* The SVG sits inside a horizontal-scroll wrapper so the figcaption
   below it stays anchored on mobile. On desktop the wrapper has no
   visible effect. */
.cap-diagram-svg-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
  /* Bleed the wrapper out to the panel edges so the scroll affordance
     reaches the viewport edge. Lock SVG min-width so cluster labels
     stay legible; user pans to see the right cluster. */
  .cap-diagram-svg-wrap {
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
    padding: 0 var(--space-5);
  }
  .cap-diagram-svg-wrap > svg {
    min-width: 720px;
    max-height: none;
  }
  /* Caption sits below the scroller, full-width, anchored to viewport. */
  .cap-diagram-caption {
    margin-top: var(--space-4);
  }
}

/* ============================================================
   AI-PRIDE QUESTION-MARK ICON + POPOVER
   ============================================================ */

.ai-pride-trigger {
  /* Sits just left of the LinkedIn glyph in the splash bottom-right.
     LinkedIn is position:absolute @ bottom:22px right:22px width:40px,
     so the trigger anchors right:70px at the same bottom to ride with it.
     P2.07.4: holds a 20px dual-sparkle SVG (currentColor) — sized 32px
     box to match LinkedIn's 32px outer box for visual parity. */
  position: absolute;
  bottom: 22px;
  right: 70px;
  z-index: 3;
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 4px;
  margin: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 14px; /* irrelevant now — SVG doesn't use font-size — leave as-is */
  line-height: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms linear;
  vertical-align: middle;
}
.ai-pride-trigger:hover,
.ai-pride-trigger[aria-expanded="true"] {
  color: var(--accent);
}
.ai-pride-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ai-pride-popover {
  position: absolute;
  right: 16px;
  bottom: 64px;
  max-width: 280px;
  padding: var(--space-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--accent-dim);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 150ms linear, transform 150ms ease-out;
  pointer-events: none;
  z-index: 105;
}
.ai-pride-popover[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ai-pride-popover-body {
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}

/* ============================================================
   MANIFESTO TILE GRID
   ============================================================ */

#panel-manifesto .panel-body .manifesto-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-7) 0;
}
#panel-manifesto .panel-body .manifesto-tile {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 150ms ease-out;
}
#panel-manifesto .panel-body .manifesto-tile:hover {
  border-color: var(--accent-dim);
}
#panel-manifesto .panel-body .manifesto-tile-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
#panel-manifesto .panel-body .manifesto-tile-body {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  font-weight: 400;
}

@media (max-width: 1100px) {
  #panel-manifesto .panel-body .manifesto-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  #panel-manifesto .panel-body .manifesto-tiles {
    grid-template-columns: 1fr;
  }
}

/* MANIFESTO HERO — Data is a Discipline */

#panel-manifesto .panel-body .manifesto-hero {
  margin: var(--space-7) 0 var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
#panel-manifesto .panel-body .manifesto-hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
#panel-manifesto .panel-body .manifesto-hero-heading {
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0 0 var(--space-5);
  color: var(--text);
}
#panel-manifesto .panel-body .manifesto-hero-body {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
  max-width: 64ch;
  margin: 0 0 var(--space-6);
}
#panel-manifesto .panel-body .manifesto-hero-diagram {
  margin: var(--space-6) 0 0;
  padding: 0;
}
#panel-manifesto .panel-body .manifesto-hero-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  /* P3 viewBox is 640x440 → natural height ~434px at 632px wide. */
  max-height: 480px;
}

/* CAP TAB SELECTOR — was scoped to #panel-cap-03 when Training was the only
   panel with tabs. Manifesto now has them too (Manifesto | The Gap), so this
   is scoped to any panel body instead. .cap-tabs only ever appears in one. */
.panel .panel-body .cap-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  margin: var(--space-6) 0 var(--space-6);
}
.panel .panel-body .cap-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-1) var(--space-3);
  margin-bottom: -1px;
  font-family: var(--mono);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  transition: color 150ms linear, border-color 150ms linear;
}
.panel .panel-body .cap-tab:hover {
  color: var(--text-2);
}
.panel .panel-body .cap-tab.cap-tab-active,
.panel .panel-body .cap-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.panel .panel-body .cap-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.panel .panel-body .cap-tabpanel-hidden,
.panel .panel-body .cap-tabpanel[hidden] {
  display: none;
}

/* CAP-03 mini-diagram (we all get better) above the tabs.
   P3: viewBox is 640x200, so width-driven layout produces ~198px tall at 632px wide. */
#panel-cap-03 .panel-body .cap-mini-diagram {
  margin: var(--space-5) 0 var(--space-3);
  padding: 0;
}
#panel-cap-03 .panel-body .cap-mini-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}

/* MANIFESTO FOCAL — closing capstone callout */
#panel-manifesto .panel-body .manifesto-focal {
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-6) var(--space-5);
  border: 1.5px solid var(--accent);
  background: var(--bg-elev-1);
}
#panel-manifesto .panel-body .manifesto-focal-body {
  font-family: var(--serif, "Inter"), system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  text-align: center;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   P4 — MOBILE RESPONSIVE PASS
   Five surfaces:
     1. Splash photo — bias position so Chet's face stays in frame
        when the photo becomes the full-bleed mobile background.
     2. Two-column diagrams (cap-02, cap-03-analyst, cap-04, cap-05,
        manifesto) — stack right column BELOW left column. Override
        the SVG aspect-ratio so the new vertical layout has room.
     3. Mobile nav — surface Manifesto + Contact in primary bullet
        list; solid hamburger overlay backdrop.
     4. Touch targets — bump AI-pride sparkle + LinkedIn to 44px.
     5. Iceberg + collision polish.
   Breakpoint: 700px (matches the existing mobile cluster).
   Desktop view (≥701px) is unchanged.
   ============================================================ */

/* ----- 1. SPLASH PHOTO — bias-right keeps face in frame at narrow widths ----- */
/* Source photo is landscape with Chet's face right-of-center (~70% x).
   With background-size: cover at 375px width, `center top` clips face
   off-screen right. `right top` keeps face anchored to the visible edge. */
@media (max-width: 700px) {
  .splash {
    /* P4: full-bleed mobile background — the source photo has Chet's face
       at ~70% x in a landscape composition. With `background-size: cover`
       at 375px width, the photo scales to fill viewport height which makes
       the face render larger than viewport width, so horizontal positioning
       picks which slice is visible. Bias 55% keeps the face centered in
       the visible slice without clipping the right ear/shoulder at 320–414. */
    background-position: 55% top;
    background-size: cover;
  }
  /* Strengthen the bottom-up gradient so the bullet stack reads cleanly
     over the photo regardless of where the face renders. */
  .splash::before {
    background: linear-gradient(
      to top,
      var(--splash-overlay-grad-start) 0%,
      var(--splash-overlay-grad-start) 38%,
      rgba(10, 14, 26, 0.65) 70%,
      var(--splash-overlay-grad-end) 90%
    );
  }
}

/* ----- 2a. PANEL HEADER — clear the fixed brand-header (logo + hamburger) ----- */
/* The brand-header sits position:fixed at top:12px left:12px on mobile and
   overlapped the panel-code text. Push header content right of it.
   P5 (logo): widened from 60px → 110px to clear the logo + 36px hamburger pair.
   Markup uses .panel-head (not .panel-header). */
@media (max-width: 700px) {
  .panel-head {
    padding-left: 110px;
  }
}

/* ----- 2b. TWO-COLUMN DIAGRAM STACKING ----- */
/* Strategy:
   - Each affected SVG has two top-level <g> elements at
     transform="translate(20|50, 56)" (left) and translate(340, 56) (right).
   - On mobile we extend the SVG's effective render area and translate the
     right cluster DOWN below the left one. The strong vertical divider is
     rotated/hidden in favor of a CSS-drawn horizontal separator between
     stacked columns.
   - We let SVG content overflow the viewBox vertically by setting
     overflow: visible and giving the SVG container a taller aspect-ratio. */

@media (max-width: 700px) {

  /* SVGs that need to grow vertically when their right cluster is stacked
     below the left one. The aspect-ratio gives enough vertical render room
     for the right cluster, translated below the left one, to be fully
     contained without overflow into following blocks. */
  .ai-builds-svg,
  .analyst-training-svg,
  .management-discipline-svg,
  .ai-leadership-svg,
  .data-as-discipline-svg {
    aspect-ratio: 640 / 860;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-7);
  }

  /* CRITICAL OVERRIDE: an existing mobile rule (line ~1837) sets cap-05's
     wrapper svg to min-width: 720px so the desktop diagram horizontally
     scrolls on mobile. That collides with P4 stacking — force the SVG to
     fit the wrap so vertical-stack mode renders without horizontal scroll. */
  .cap-diagram-svg-wrap > svg.ai-leadership-svg {
    min-width: 100%;
    max-width: 100%;
  }
  .cap-diagram-svg-wrap:has(.ai-leadership-svg) {
    /* The wrap was set up for horizontal-scroll; in stacked mode we don't
       need it and the negative margins create a visual jog. Zero them. */
    overflow-x: hidden;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Hide the strong vertical center divider — it's nonsensical when the
     columns are stacked. A CSS horizontal "vs" marker takes its place. */
  .ai-leadership-svg .strong-divider,
  .ai-builds-svg .strong-divider,
  .analyst-training-svg .strong-divider,
  .management-discipline-svg .strong-divider,
  .data-as-discipline-svg .strong-divider {
    display: none;
  }

  /* Stack: move right cluster below left. Left clusters stay at their
     desktop translates; only the right cluster moves. CSS transform on
     SVG <g> applies in user-space units (NOT scaled CSS pixels), so
     translate(0, 480) means "480 user units down in the 640x860 viewBox".
     Right cluster sits at y_origin=480; native cluster content extends
     ~340 user units further, ending around y=820 — fits in 860 viewBox. */
  .ai-builds-svg > g:nth-of-type(2),
  .analyst-training-svg > g:nth-of-type(2),
  .management-discipline-svg > g:nth-of-type(2),
  .data-as-discipline-svg > g:nth-of-type(2) {
    transform: translate(0px, 480px);
  }

  /* cap-05 (AI Leadership): left cluster at translate(50,56), right at
     translate(340,56). Per-cluster translates required since cap-05 uses
     class-named groups. Both keep their original X for visual continuity,
     right cluster shifts down to y_origin=480. */
  .ai-leadership-svg .cluster-leadership {
    transform: translate(50px, 56px);
  }
  .ai-leadership-svg .cluster-management {
    transform: translate(50px, 480px);
  }
}

/* ----- 2c. HORIZONTAL DIVIDER between stacked columns ----- */
/* CSS-only divider sits between left (top) and right (bottom) clusters.
   Implemented via the .panel-figure container that wraps each SVG.
   Each affected diagram lives in a .panel-figure container; we paint a
   short centered horizontal rule positioned at the stack seam. */
@media (max-width: 700px) {
  .ai-builds-svg,
  .analyst-training-svg,
  .management-discipline-svg,
  .ai-leadership-svg,
  .data-as-discipline-svg {
    /* SVG-relative seam line via a background-image trick. We use a
       linear-gradient applied to the parent figure caption area below. */
  }

  .cap-diagram:has(.ai-builds-svg),
  .cap-diagram:has(.analyst-training-svg),
  .cap-diagram:has(.management-discipline-svg),
  .cap-diagram-svg-wrap:has(.ai-leadership-svg),
  .manifesto-hero-diagram:has(.data-as-discipline-svg) {
    position: relative;
  }

  /* Seam marker: small centered "vs" treatment between stacked clusters.
     Positioned at ~54% of figure height (= just below where the left
     cluster's content ends and just above where the right cluster begins,
     given the 640/860 aspect-ratio and y=440 seam in user-space). */
  .cap-diagram:has(.ai-builds-svg)::after,
  .cap-diagram:has(.analyst-training-svg)::after,
  .cap-diagram:has(.management-discipline-svg)::after,
  .cap-diagram-svg-wrap:has(.ai-leadership-svg)::after,
  .manifesto-hero-diagram:has(.data-as-discipline-svg)::after {
    content: "vs";
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: var(--text-3);
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    padding: 4px 14px;
    pointer-events: none;
  }
}

/* ----- 3a. MOBILE NAV — surface Manifesto + Contact in bullet list ----- */
/* These two bullets are added to the markup with class .bullet-mobile.
   Hidden on desktop, visible on mobile so primary nav exposes all 7
   destinations without requiring a hamburger tap. */
.bullets li.bullet-mobile {
  display: none;
}
@media (max-width: 700px) {
  .bullets li.bullet-mobile {
    display: block;
  }
  /* Visual de-emphasis: secondary bullets get a slightly muted prefix to
     signal "non-capability" vs the 5 numbered capability rows. */
  .bullets li.bullet-mobile .bullet-num {
    color: var(--text-3);
    text-shadow: none;
  }
}

/* ----- 3b. HAMBURGER OVERLAY — full-viewport solid backdrop ----- */
/* Was: menu opened as a 260px-wide floating card with the page (splash
   photo + bullets) showing through around its edges — visually confusing
   per Chet's eval ("semi-transparent / underlying bleeds through"). On
   mobile, paint a solid backdrop behind the menu via the .ham-menu's own
   ::before pseudo-element so we don't need a new DOM element. */
@media (max-width: 700px) {
  .ham-menu {
    /* F1 (2026-06-21 routing pass): hardcode dark-theme palette so the
       white H-OA logo (z-indexed above the menu) reads against the
       backdrop in BOTH themes. var(--bg-elev-2) flips to cream on light
       theme, which made the logo invisible. */
    background: #1a2342;
    /* On mobile, full-viewport overlay so the underlying content does not
       bleed through. Per Chet's eval: "solid backdrop, no transparency." */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    min-width: 0;
    border-radius: 0;
    border: 0;
    padding: 80px var(--space-4) var(--space-4) var(--space-4);
    box-shadow: none;
    /* Kill any backdrop-filter just in case the parent applied one. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Allow vertical scroll inside the menu if content is taller than
       viewport (defensive — should not trigger at current item count). */
    overflow-y: auto;
  }
  /* Brand header (logo + hamburger) stays ABOVE the menu so the visitor
     can always tap the hamburger to close. Bump z-index above
     .ham-menu (100). The menu's padding-top (68px) clears the header so
     the icon + logo are visible against the menu background, not
     overlapping menu items. */
  .brand-header {
    z-index: 110;
  }
  /* Tap-targets inside the menu — bump padding on mobile so each link is
     >= 44px tall. */
  .ham-menu button,
  .ham-menu li a {
    padding: 14px var(--space-3);
    font-size: 16px;
  }
  /* F1 — force light text on the dark mobile-menu backdrop in both themes.
     The desktop rule sets color: var(--text-2) which flips on light theme;
     this override pins to the dark-theme text value. */
  .ham-menu button,
  .ham-menu li a {
    color: #e3eaff;
  }
  .ham-menu button:hover,
  .ham-menu button:focus-visible,
  .ham-menu li a:hover,
  .ham-menu li a:focus-visible {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
  }
  /* F1 — hamburger icon stroke against dark mobile-menu backdrop.
     The hamburger button sits ABOVE the menu (z-index 110). When the menu
     is open and the page is in LIGHT theme, the icon's currentColor would
     be the theme's dark stroke — invisible against the new dark backdrop.
     Force a light stroke while the menu is open. */
  .hamburger[aria-expanded="true"] svg {
    stroke: #e3eaff;
    color: #e3eaff;
  }
}

/* ----- 4. TOUCH TARGETS — AI-pride sparkle + LinkedIn → 44×44 ----- */
@media (max-width: 700px) {
  .ai-pride-trigger {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    /* Re-center the visual icon inside the enlarged tap target. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .linkedin {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ----- 5a. ICEBERG (cap-01) — mobile label reflow ----- */
/* "what you have" italic label sits to the right of the iceberg silhouette
   on desktop; on mobile it overlapped the silhouette's right shoulder.
   Hide the buried-issue subtitles + the side italics on mobile.
   Selectors use SVG attribute targeting since the source labels are
   unclassed plain <text> elements. */
@media (max-width: 700px) {
  .data-quality-svg {
    overflow: visible;
  }
  /* Buried-issue italic subtitles all share font-size="10" + font-style=italic.
     Hide them on mobile so only the bold names remain — they're illegible
     at this width anyway. */
  .data-quality-svg text[font-size="10"][font-style="italic"] {
    display: none;
  }
  /* The two waterline italics ("what you show" / "what you have") share
     font-size="11" + font-style=italic — they collide with the iceberg
     silhouette at narrow widths. Hide them. The eyebrow above the diagram
     already carries the WHAT YOU SHOW vs WHAT YOU HAVE argument. */
  .data-quality-svg text[font-size="11"][font-style="italic"] {
    display: none;
  }
}

/* ----- 5b. CAP-02 "BUILD" label clearance ----- */
/* Loop label "BUILD" sat at the SVG right edge on narrow widths and
   visually clipped. Stacking moves the right cluster to x=0 with full
   width available — no additional rule needed once stacking lands. */

/* ----- 6. MOBILE DIAGRAM TEXT BUMP — legibility floor ----- */
/* The viewBox swap to 640×860 keeps content proportional but doubles
   the visual squeeze on text — labels designed at font-size=11..18 at
   the 640×440 desktop scale render at ~6..10px on a 375px viewport.
   Bump the in-SVG text font-sizes via CSS at mobile so labels read at
   a legibility floor of ~14px equivalent. We target the in-SVG text
   selectors that exist (.column-header, .column-sub, .diagram-eyebrow,
   cluster-node text). */

@media (max-width: 700px) {
  /* Conservative bumps: the viewBox swap to 640×860 helps but we have to
     respect the original spatial spacing — bumping too far causes label
     collisions in the LEADERSHIP web. Modest +30-50% from desktop sizes. */

  /* AI Leadership — slight bump on web node labels (was 18 → 20) */
  .ai-leadership-svg .cluster-leadership .cluster-node text {
    font-size: 20px;
  }
  /* Column headers (was 18 → 22) */
  .ai-leadership-svg .cluster-leadership .column-header,
  .ai-leadership-svg .cluster-management .column-header,
  .management-discipline-svg .column-header,
  .ai-builds-svg .column-header,
  .analyst-training-svg .column-header,
  .data-as-discipline-svg .column-header {
    font-size: 22px;
  }
  .ai-leadership-svg .cluster-leadership .column-sub,
  .ai-leadership-svg .cluster-management .column-sub,
  .management-discipline-svg .column-sub,
  .ai-builds-svg .column-sub,
  .analyst-training-svg .column-sub,
  .data-as-discipline-svg .column-sub {
    font-size: 14px;
  }
  /* Eyebrows across the 5 affected diagrams (was 13 → 18) */
  .ai-leadership-svg .diagram-eyebrow,
  .ai-builds-svg .diagram-eyebrow,
  .analyst-training-svg .diagram-eyebrow,
  .management-discipline-svg .diagram-eyebrow,
  .data-as-discipline-svg .diagram-eyebrow {
    font-size: 18px;
  }
}

/* ----- 7. CAP-02 STUCK-TABLE — narrow-width italic clearance ----- */
/* The 6-row STUCK table at narrow widths had label+italic pairs colliding
   (ARCHITECTURE REVIEW + rescheduled touching with no gap). The stacking
   move gave the cluster full SVG width but italic positioning is still
   tight. Pull italic right-side text inward by raising font-size while
   shrinking the trailing italic. The italics are on font-style=italic
   text within the cap-02 ai-builds-svg stuck-row group. Target broadly. */
@media (max-width: 700px) {
  .ai-builds-svg text[font-style="italic"] {
    font-size: 13px;
  }
}

/* ============================================================
   END P4 MOBILE RESPONSIVE PASS
   ============================================================ */

/* ============================================================
   TRAINING — AUDIENCE PICKER (replaces the old 2-box diagram)
   Data Analyst  ->  Competitive Advantage  <-  Business Consumer
   The two sides are the tab selector: clicking one switches the
   tab below it, and switching a tab highlights its side.
   Icons are the same marks the Gap tab uses, deliberately.
   ============================================================ */
.aud-figure {
  margin: var(--space-6) 0 var(--space-7);
  text-align: center;
}
.aud-eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  margin: calc(var(--space-3) * -1) 0 var(--space-7);
}
.aud {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  max-width: 100%;
}
.aud-side {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: var(--space-4) var(--space-4);
  cursor: pointer;
  color: var(--text-3);
  transition: color 180ms linear, border-color 180ms linear, background-color 180ms linear;
}
/* :not() is load-bearing — after a click the cursor is still on the side it
   just selected, and hover has the same specificity as the active class. Left
   plain, the side you selected renders grey instead of teal. */
.aud-side:hover:not(.aud-side-active) { color: var(--text-2); }
.aud-side:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aud-side-active {
  color: var(--accent);
  border-color: var(--border-soft);
  background: rgba(78, 234, 208, 0.05);
}
.aud-icon {
  width: clamp(46px, 7vw, 68px);
  height: clamp(46px, 7vw, 68px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.aud-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.aud-mid {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
}
.aud-arrow {
  width: clamp(14px, 1.8vw, 24px);
  height: 12px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.aud-arrow-flip { transform: rotate(180deg); }
.aud-pill {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  white-space: nowrap;
}

/* Below ~760px the row cannot hold two names plus the pill. Stack it:
   sides side-by-side on one line, the pill and its arrows beneath. */
@media (max-width: 760px) {
  .aud { flex-wrap: wrap; gap: var(--space-4); }
  .aud-side { flex: 1 1 40%; }
  .aud-mid { order: 3; flex-basis: 100%; justify-content: center; }
  .aud-arrow { transform: rotate(-90deg); }
  .aud-arrow-flip { transform: rotate(90deg); }
}
.aud-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(78, 234, 208, 0.4);
  transition: border-color 150ms linear;
}
.aud-link:hover { border-bottom-color: var(--accent); }
.aud-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   TRAINING — COURSE LAYOUT (v2 scratch tab)
   problem -> principle -> course.
   The box carries meaning: the course is the only boxed thing
   on the page, because it is the only part you can buy. The
   problem and the principle stay plain — decorating discomfort
   undercuts it.
   ============================================================ */
.course-act { margin: 0 0 calc(var(--space-8) * 1.6); }
.course-act:last-child { margin-bottom: 0; }

.course-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.course-num {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* --- act one: the problem. No chrome at all. --- */
.course-problem-lead {
  font-size: clamp(1.15rem, 1.9vw, 1.42rem);
  line-height: 1.32;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-5);
  max-width: 34ch;
}
.course-body {
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-2);
  margin-bottom: var(--space-4);
  max-width: 62ch;
}

/* --- act two: the principle. One statement, then support. --- */
.course-principle-statement {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--accent);
  margin-bottom: var(--space-5);
  max-width: 34ch;
}
.course-principle-notes {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.course-principle-notes li {
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-3);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-soft);
}

/* --- act three: the offer. The only box. --- */
.course-offer .teach-card {
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--accent);
  border-radius: 14px;
  padding: var(--space-6);
  background: rgba(78, 234, 208, 0.03);
}
.course-invitation {
  margin-top: var(--space-5);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--accent);
}

/* ============================================================
   TRAINING — TYPE SCALE
   The audit found 16 distinct sizes in one tab, several of them
   a fraction apart (13 / 13.12, 14 / 14.08 / 14.4, 22.4 / 22.72).
   Differences that small are invisible but they mean nothing is
   on a scale. Collapsed to six steps.

   Two families, and the split carries meaning rather than being
   an accident: MONO is the argument voice — it is what the rest
   of the site's panel copy already uses. INTER is the offer,
   confined to the course card. The family change tells you the
   page has stopped arguing and started selling.
   ============================================================ */

/* --- step 1: the act lead. Loudest thing in the tab. --- */
.course-act .course-problem-lead {
  font-family: var(--sans);
  font-size: clamp(1.3rem, 2.1vw, 1.5rem);   /* 24px desktop */
  line-height: 1.3;
  font-weight: 600;
  max-width: 32ch;
}

/* --- step 2: the principle. Was 24.8 and beat the lead it answers. --- */
.course-act .course-principle-statement {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);  /* 20px desktop */
  line-height: 1.4;
  font-style: italic;
  max-width: 38ch;
}

/* --- step 3: body. One size for every act, mono throughout. --- */
.panel .panel-body .course-act .course-body,
.panel .panel-body .course-act .panel-lede {
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 62ch;
}
.panel .panel-body .course-act .panel-lede { margin-top: var(--space-4); }

/* --- step 4: supporting mono. Notes and the invitation were 14.1
       and 14.4 — below body, which made the call to action the
       smallest text in the act. --- */
.course-act .course-principle-notes li,
.course-act .course-invitation {
  font-size: 0.94rem;
  line-height: 1.7;
}

/* --- step 5: labels. --- */
.course-act .course-eyebrow { font-size: 0.72rem; }

/* --- step 6: the numeral, tied to body so the row sits on one baseline. --- */
.course-act .course-num { font-size: 1rem; }

/* The card keeps Inter — it is the offer, not the argument. Its own
   sizes are pulled onto the same steps so it does not float free. */
.panel .panel-body .course-offer .teach-title { font-size: 1.25rem; line-height: 1.25; }
.panel .panel-body .course-offer .teach-kicker,
.panel .panel-body .course-offer .teach-list { font-size: 0.98rem; line-height: 1.65; }
.panel .panel-body .course-offer .teach-close { font-size: 1.02rem; line-height: 1.5; }
.panel .panel-body .course-offer .teach-for,
.panel .panel-body .course-offer .teach-format { font-size: 0.78rem; }

/* Final collapse. Two fixes:
   1. .panel-lede is set by '#panel-cap-0X .panel-body .panel-lede' — an ID,
      which no number of classes can outrank. Matched at ID level here.
   2. 15.04 / 15.68 / 16 / 16.32 were four sizes inside 1.3px of each other,
      close enough to look like drift rather than intent. Collapsed to two. */
#panel-cap-03 .panel-body .course-act .panel-lede {
  font-size: 1rem;
  line-height: 1.8;
}
#panel-cap-03 .panel-body .course-offer .teach-close { font-size: 1rem; }
#panel-cap-03 .panel-body .course-offer .teach-kicker,
#panel-cap-03 .panel-body .course-offer .teach-list,
#panel-cap-03 .panel-body .course-offer .teach-list li { font-size: 1rem; }
#panel-cap-03 .panel-body .course-act .course-principle-notes li,
#panel-cap-03 .panel-body .course-act .course-invitation { font-size: 0.94rem; }