/* ============================================================
   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 */
}
.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 (used by cap-03 Training) */
#panel-cap-03 .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-cap-03 .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-cap-03 .panel-body .cap-tab:hover {
  color: var(--text-2);
}
#panel-cap-03 .panel-body .cap-tab.cap-tab-active,
#panel-cap-03 .panel-body .cap-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#panel-cap-03 .panel-body .cap-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#panel-cap-03 .panel-body .cap-tabpanel-hidden,
#panel-cap-03 .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
   ============================================================ */