/* JS-disabled fallback: reveal everything immediately */
    @media (scripting: none) {
      .reveal, .reveal-body {
        opacity: 1 !important;
        transform: none !important;
      }
      .pipeline-node-wrap {
        opacity: 1 !important;
        transform: none !important;
      }
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Neutrals */
      --n50:  #fafafa;
      --n100: #f5f5f5;
      --n200: #e5e5e5;
      --n300: #d4d4d4;
      --n400: #a3a3a3;
      --n500: #737373;
      --n600: #525252;
      --n700: #404040;
      --n900: #171717;
      --white: #ffffff;

      /* Brand accents */
      --maroon:       #73182C;
      --maroon-light: #8a2438;
      --maroon-faint: #f9f2f4;
      --green:        #82b25e;
      --green-light:  #96c474;
      --green-faint:  #f4f9f0;

      /* Section backgrounds */
      --bg-primary:   var(--white);
      --bg-secondary: var(--n50);
      --bg-accent:    var(--maroon-faint);

      /* Text */
      --text-primary:   var(--n900);
      --text-secondary: var(--n600);
      --text-tertiary:  var(--n400);
      --text-on-dark:   var(--n50);

      /* Typography */
      --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
      --text-hero:    clamp(2.5rem, 5.5vw, 4rem);
      --text-section: clamp(1.75rem, 3vw, 2.5rem);
      --text-sub:     clamp(1.25rem, 2vw, 1.5rem);
      --text-lg:      1.125rem;
      --text-base:    1rem;
      --text-sm:      0.9375rem;
      --text-xs:      0.875rem;
      --text-xxs:     0.8125rem;
      --weight-regular: 400;
      --weight-medium:  500;
      --weight-semi:    600;
      --weight-bold:    700;
      --lh-tight:    1.2;
      --lh-snug:     1.4;
      --lh-normal:   1.6;
      --lh-relaxed:  1.72;
      --ls-tight:    -0.02em;
      --ls-normal:   0em;
      --ls-wide:     0.08em;

      /* Spacing */
      --space-xs:   0.25rem;
      --space-sm:   0.5rem;
      --space-md:   1rem;
      --space-lg:   1.5rem;
      --space-xl:   2rem;
      --space-2xl:  3rem;
      --space-3xl:  4rem;
      --space-4xl:  6rem;
      --space-5xl:  8rem;

      --section-pad-hero:    clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
      --section-pad-default: clamp(4rem, 8vw, 7rem) 0;
      --section-pad-tight:   clamp(3rem, 5vw, 4rem) 0;
      --section-pad-loose:   clamp(5rem, 10vw, 9rem) 0;

      --max-w:            1280px;
      --container-pad:    clamp(1.25rem, 4vw, 2rem);

      /* Borders */
      --border:        1px solid var(--n200);
      --border-accent: 1px solid var(--n300);
      --radius-sm:     6px;
      --radius-md:     8px;
      --radius-lg:     12px;
      --radius-xl:     16px;

      /* Animation */
      --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out-soft: cubic-bezier(0.25, 1, 0.5, 1);
      --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
      --dur-instant:   100ms;
      --dur-fast:      200ms;
      --dur-normal:    400ms;
      --dur-slow:      600ms;
      --dur-flow:      800ms;
      --dur-loop:      1200ms;
      --stagger-fast:  40ms;
      --stagger-normal: 80ms;
      --stagger-slow:  120ms;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font);
      color: var(--text-secondary);
      background: var(--white);
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      line-height: var(--lh-normal);
    }

    /* ── REDUCED MOTION ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      .flow-path { stroke-dashoffset: 0 !important; }
      .loop-path { animation: none !important; }
    }

    /* ── NAV ── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 40;
      width: 100%;
      border-bottom: var(--border);
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--container-pad);
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-brand {
      font-size: var(--text-xs);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      text-decoration: none;
      letter-spacing: var(--ls-tight);
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }
    .nav-links a {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      color: var(--text-secondary);
      text-decoration: none;
      transition: color var(--dur-instant) var(--ease-out-soft);
    }
    .nav-links a:hover { color: var(--text-primary); }
    .nav-mobile-toggle {
      display: none;
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      color: var(--text-primary);
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-sm) 0;
    }
    .nav-dropdown {
      display: none;
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      background: var(--white);
      border-bottom: var(--border);
      padding: var(--space-md) var(--container-pad);
    }
    .nav-dropdown.open { display: block; }
    .nav-dropdown a {
      display: block;
      padding: var(--space-sm) 0;
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--text-secondary);
      text-decoration: none;
      border-bottom: var(--border);
    }
    .nav-dropdown a:last-child { border-bottom: none; }
    .nav-dropdown a:hover { color: var(--text-primary); }

    @media (max-width: 640px) {
      .nav-links { display: none; }
      .nav-mobile-toggle { display: block; }
    }

    /* ── CONTAINER ── */
    .container {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--container-pad);
    }

    /* ── EYEBROW ── */
    .eyebrow {
      display: block;
      font-size: var(--text-xxs);
      font-weight: var(--weight-medium);
      color: var(--text-secondary);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      margin-bottom: var(--space-lg);
    }

    /* ── BUTTON ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--n900);
      color: var(--white);
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      padding: 0.75rem 1.75rem;
      border-radius: var(--radius-sm);
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: background var(--dur-instant) var(--ease-out-soft);
    }
    .btn:hover { background: var(--maroon); }
    .btn:focus-visible {
      outline: 2px solid var(--maroon);
      outline-offset: 3px;
    }

    /* ── WADE CHARACTER ── */
    .wade-character {
      mix-blend-mode: multiply;
      width: auto;
      object-fit: contain;
      display: block;
    }

    /* ── REVEAL ANIMATIONS ── */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }
    .reveal-body {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    }
    .reveal-body.visible {
      opacity: 1;
      transform: none;
    }

    /* ─────────────────────────────────────
       HERO
    ───────────────────────────────────── */
    .hero {
      padding: var(--section-pad-hero);
      background: var(--bg-primary);
    }
    .hero-inner {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-3xl);
      align-items: center;
    }
    .hero-eyebrow {
      display: inline-block;
      font-size: var(--text-xxs);
      font-weight: var(--weight-medium);
      color: var(--text-secondary);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      margin-bottom: var(--space-lg);
    }
    .hero-headline {
      font-size: var(--text-hero);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-tight);
      margin-bottom: var(--space-lg);
    }
    .hero-sub {
      font-size: var(--text-lg);
      color: var(--text-secondary);
      line-height: var(--lh-normal);
      max-width: 55ch;
      margin-bottom: var(--space-2xl);
    }
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--n200);
      border: var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-bottom: var(--space-2xl);
    }
    .stat {
      background: var(--n50);
      padding: 1rem 1.25rem;
    }
    .stat-num {
      font-size: var(--text-sub);
      font-weight: var(--weight-bold);
      color: var(--maroon);
      letter-spacing: var(--ls-tight);
      line-height: 1;
      display: block;
    }
    .stat-lbl {
      font-size: var(--text-xxs);
      font-weight: var(--weight-regular);
      color: var(--text-tertiary);
      margin-top: 0.3rem;
      display: block;
    }
    .hero-right {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .hero-right img {
      max-height: 500px;
      max-width: 100%;
    }

    @media (max-width: 640px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
      }
      .hero-stats {
        grid-template-columns: repeat(2, 1fr);
      }
      .hero-right img {
        max-height: 300px;
      }
    }

    /* ─────────────────────────────────────
       SECTION COMMON
    ───────────────────────────────────── */
    .section-intro {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--space-3xl);
      align-items: start;
      margin-bottom: var(--space-3xl);
    }
    .section-intro.reverse {
      grid-template-columns: 1fr auto;
    }
    .section-intro.reverse .section-intro-text { order: -1; }
    .section-intro-text {
      max-width: 50ch;
    }
    .section-headline {
      font-size: var(--text-section);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-tight);
      margin-bottom: var(--space-md);
    }
    .section-body {
      font-size: var(--text-base);
      color: var(--text-secondary);
      line-height: var(--lh-normal);
      max-width: 50ch;
    }

    @media (max-width: 1024px) {
      .section-intro,
      .section-intro.reverse {
        grid-template-columns: 1fr;
      }
      .section-intro.reverse .section-intro-text { order: 0; }
      .wade-character { max-height: 200px !important; }
    }

    /* ─────────────────────────────────────
       SECTION 1: MEMBER JOURNEY
    ───────────────────────────────────── */
    .section-journey {
      padding: var(--section-pad-loose);
      background: var(--bg-secondary);
      border-top: var(--border);
      border-bottom: var(--border);
    }

    /* Pipeline desktop */
    .pipeline-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: var(--space-xl);
    }
    .pipeline {
      display: flex;
      align-items: flex-start;
      gap: 0;
      min-width: 900px;
      position: relative;
      padding: var(--space-xl) 0 var(--space-2xl);
    }
    .pipeline-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
      opacity: 0;
      transform: translateY(20px) scale(0.92);
      transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    }
    .pipeline-step.visible {
      opacity: 1;
      transform: none;
    }
    .pipeline-node {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
    }
    .pipeline-node::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--white);
    }
    .pipeline-label {
      font-size: var(--text-xxs);
      font-weight: var(--weight-medium);
      color: var(--n700);
      text-align: center;
      margin-top: var(--space-sm);
      max-width: 80px;
      line-height: var(--lh-snug);
    }
    .pipeline-detail {
      font-size: var(--text-xxs);
      font-weight: var(--weight-regular);
      color: var(--text-tertiary);
      text-align: center;
      margin-top: var(--space-xs);
      max-width: 80px;
      line-height: var(--lh-snug);
    }
    .pipeline-connector {
      position: absolute;
      top: 16px;
      left: 50%;
      right: -50%;
      height: 2px;
      overflow: visible;
      z-index: 1;
    }
    .pipeline-step:last-child .pipeline-connector { display: none; }

    /* SVG pipeline path */
    .pipeline-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* Mobile: vertical timeline */
    .pipeline-vertical {
      display: none;
    }
    .vt-step {
      display: flex;
      gap: var(--space-md);
      align-items: flex-start;
      position: relative;
      padding-bottom: var(--space-xl);
    }
    .vt-step:last-child { padding-bottom: 0; }
    .vt-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }
    .vt-node {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .vt-node::after {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--white);
    }
    .vt-line {
      width: 2px;
      flex: 1;
      background: var(--n300);
      margin-top: var(--space-xs);
      min-height: 24px;
    }
    .vt-step:last-child .vt-line { display: none; }
    .vt-content { padding-top: 4px; }
    .vt-label {
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--n700);
      line-height: var(--lh-snug);
    }
    .vt-detail {
      font-size: var(--text-xs);
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    .proof-callout {
      border: var(--border);
      border-radius: var(--radius-md);
      padding: var(--space-xl);
      background: var(--white);
      margin-top: var(--space-xl);
    }
    .proof-callout-title {
      font-size: var(--text-sm);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      margin-bottom: var(--space-xs);
    }
    .proof-callout-body {
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }

    @media (max-width: 640px) {
      .pipeline-wrapper { display: none; }
      .pipeline-vertical { display: block; }
    }

    /* ─────────────────────────────────────
       SECTION 2: CONTENT ENGINE
    ───────────────────────────────────── */
    .section-content {
      padding: var(--section-pad-default);
      background: var(--bg-primary);
    }

    /* Loop diagram (oval SVG) */
    .loop-diagram-container {
      display: flex;
      justify-content: center;
      margin-bottom: var(--space-2xl);
      overflow: visible;
    }
    .content-loop-svg {
      width: 100%;
      max-width: 680px;
      height: auto;
      overflow: visible;
    }

    @media (max-width: 640px) {
      .content-loop-svg {
        min-height: 420px;
      }
      .loop-diagram-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
      }
      .content-loop-svg {
        min-width: 480px;
      }
    }

    /* Expandable list */
    .expand-list {
      border: var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .expand-item {
      border-bottom: var(--border);
    }
    .expand-item:last-child { border-bottom: none; }
    .expand-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      gap: var(--space-md);
      padding: var(--space-md) var(--space-lg);
      background: none;
      border: none;
      border-left: 3px solid transparent;
      cursor: pointer;
      text-align: left;
      transition: background var(--dur-instant) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft);
      min-height: 44px;
    }
    .expand-trigger:hover {
      background: var(--n50);
      border-left-color: var(--maroon);
    }
    .expand-trigger[aria-expanded="true"] {
      border-left-color: var(--maroon);
      background: var(--n50);
    }
    .expand-trigger:focus-visible {
      outline: 2px solid var(--maroon);
      outline-offset: -2px;
    }
    .expand-name {
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--text-primary);
      flex-shrink: 0;
      min-width: 160px;
    }
    .expand-summary {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      flex: 1;
    }
    .expand-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: var(--n400);
      transition: transform var(--dur-fast) var(--ease-in-out);
    }
    .expand-icon.open { transform: rotate(45deg); }
    .expand-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows var(--dur-normal) var(--ease-in-out);
    }
    .expand-body.open { grid-template-rows: 1fr; }
    .expand-body-inner {
      overflow: hidden;
    }
    .expand-body-content {
      padding: var(--space-sm) var(--space-lg) var(--space-md);
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: var(--lh-relaxed);
      background: var(--n50);
    }

    @media (max-width: 640px) {
      .expand-name { min-width: 0; }
      .expand-summary { display: none; }
    }

    /* ─────────────────────────────────────
       SECTION 3: CLUB SUPPORT
    ───────────────────────────────────── */
    .section-clubs {
      padding: var(--section-pad-default);
      background: var(--bg-secondary);
      border-top: var(--border);
      border-bottom: var(--border);
    }

    .bento-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: var(--border);
      border-radius: var(--radius-xl);
      overflow: hidden;
    }
    .bento-cell {
      padding: var(--space-xl);
      border-bottom: var(--border);
      border-right: var(--border);
      background: var(--white);
    }
    .bento-cell:nth-child(2n) { border-right: none; }
    .bento-cell.large {
      grid-row: span 2;
      border-right: var(--border);
    }
    .bento-cell-title {
      font-size: var(--text-sm);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      margin-bottom: var(--space-sm);
    }
    .bento-cell-desc {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: var(--lh-normal);
    }
    .bento-stat {
      display: inline-block;
      font-size: var(--text-xxs);
      font-weight: var(--weight-medium);
      color: var(--maroon);
      margin-top: var(--space-sm);
    }

    /* Row layout within bento for last rows */
    .bento-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: var(--border);
    }
    .bento-row:last-child { border-bottom: none; }
    .bento-row .bento-cell {
      border-bottom: none;
    }
    .bento-row .bento-cell:first-child { border-right: var(--border); }
    .bento-row .bento-cell:last-child { border-right: none; }

    /* Bento overall grid structure */
    .bento-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: var(--border);
    }
    .bento-top-left {
      grid-row: span 2;
      border-right: var(--border);
      padding: var(--space-xl);
      background: var(--white);
    }
    .bento-top-right {
      display: flex;
      flex-direction: column;
    }
    .bento-top-right .bento-cell {
      border-right: none;
    }
    .bento-top-right .bento-cell:first-child {
      border-bottom: var(--border);
    }
    .bento-top-right .bento-cell:last-child {
      border-bottom: none;
    }

    @media (max-width: 640px) {
      .bento-grid,
      .bento-top,
      .bento-row {
        grid-template-columns: 1fr;
      }
      .bento-cell,
      .bento-top-left,
      .bento-top-right .bento-cell {
        border-right: none !important;
        grid-row: auto;
      }
      .bento-row .bento-cell:first-child { border-right: none; }
    }

    /* ─────────────────────────────────────
       SECTION 4: PLAYER INTELLIGENCE
    ───────────────────────────────────── */
    .section-player {
      padding: var(--section-pad-tight);
      background: var(--bg-primary);
    }

    .feature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .feature-cell {
      padding: var(--space-xl);
      border-bottom: var(--border);
      border-right: var(--border);
      background: var(--white);
    }
    .feature-cell:nth-child(2n) { border-right: none; }
    .feature-cell:nth-last-child(-n+2) { border-bottom: none; }
    .feature-title {
      font-size: var(--text-sm);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      margin-bottom: var(--space-xs);
    }
    .feature-desc {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: var(--lh-normal);
    }
    .feature-stat {
      display: block;
      font-size: var(--text-xxs);
      font-weight: var(--weight-bold);
      color: var(--maroon);
      margin-top: var(--space-sm);
    }

    @media (max-width: 640px) {
      .feature-grid { grid-template-columns: 1fr; }
      .feature-cell { border-right: none !important; }
      .feature-cell:nth-last-child(-n+2) { border-bottom: var(--border); }
      .feature-cell:last-child { border-bottom: none; }
    }

    /* ─────────────────────────────────────
       SECTION 5: BAMFORD SIMULATOR
    ───────────────────────────────────── */
    .section-bamford {
      padding: var(--section-pad-tight);
      background: var(--bg-secondary);
      border-top: var(--border);
      border-bottom: var(--border);
    }
    .bamford-inner {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-3xl);
      align-items: center;
    }
    .bamford-blocks {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
      margin-top: var(--space-xl);
    }
    .bamford-block {}
    .bamford-sub {
      font-size: var(--text-sub);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      line-height: var(--lh-snug);
      margin-bottom: var(--space-sm);
    }
    .bamford-sub.accent { color: var(--maroon); }
    .bamford-desc {
      font-size: var(--text-base);
      color: var(--text-secondary);
      line-height: var(--lh-normal);
    }
    .bamford-right {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 1024px) {
      .bamford-inner { grid-template-columns: 1fr; }
      .bamford-right { order: -1; }
    }

    /* ─────────────────────────────────────
       SECTION 5.5: COMING SOON
    ───────────────────────────────────── */
    .section-coming-soon {
      padding: clamp(2.5rem, 5vw, 3.5rem) 0;
      background: var(--n100);
      border-top: var(--border);
      border-bottom: var(--border);
    }
    .coming-soon-header {
      display: flex;
      align-items: baseline;
      gap: var(--space-lg);
      margin-bottom: var(--space-xl);
      flex-wrap: wrap;
    }
    .coming-soon-eyebrow {
      font-size: var(--text-xxs);
      font-weight: var(--weight-medium);
      color: var(--text-tertiary);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      flex-shrink: 0;
    }
    .coming-soon-headline {
      font-size: var(--text-sub);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-snug);
    }
    .coming-soon-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1px;
      background: var(--n200);
      border: var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .coming-soon-item {
      background: var(--white);
      padding: 1.25rem 1rem;
    }
    .coming-soon-item-title {
      font-size: var(--text-sm);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      line-height: var(--lh-snug);
      margin-bottom: var(--space-sm);
    }
    .coming-soon-item-desc {
      font-size: var(--text-xs);
      color: var(--text-secondary);
      line-height: var(--lh-normal);
    }
    @media (max-width: 1024px) {
      .coming-soon-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .coming-soon-item:last-child {
        grid-column: span 2;
      }
    }
    @media (max-width: 640px) {
      .coming-soon-grid {
        grid-template-columns: 1fr;
      }
      .coming-soon-item:last-child {
        grid-column: span 1;
      }
      .coming-soon-header {
        flex-direction: column;
        gap: var(--space-xs);
      }
    }

    /* ─────────────────────────────────────
       SECTION 6: THE INTERCONNECTION
    ───────────────────────────────────── */
    .section-interconnect {
      padding: var(--section-pad-loose);
      background: var(--bg-accent);
      border-top: var(--border);
      border-bottom: var(--border);
    }
    .interconnect-inner {
      border-left: 4px solid var(--maroon);
      padding-left: var(--space-xl);
    }
    .interconnect-intro {
      text-align: center;
      margin-bottom: var(--space-3xl);
    }
    .interconnect-intro .wade-character {
      max-height: 300px;
      margin: 0 auto var(--space-xl);
    }
    .interconnect-eyebrow {
      display: block;
      font-size: var(--text-xxs);
      font-weight: var(--weight-semi);
      color: var(--maroon);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      margin-bottom: var(--space-lg);
    }
    .interconnect-headline {
      font-size: var(--text-section);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      letter-spacing: var(--ls-tight);
      line-height: var(--lh-tight);
      max-width: 20ch;
      margin: 0 auto var(--space-md);
    }
    .interconnect-sub {
      font-size: var(--text-base);
      color: var(--text-secondary);
      max-width: 55ch;
      margin: 0 auto;
      line-height: var(--lh-normal);
    }

    /* Loop diagrams */
    .loops-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xl);
    }
    .loop-block {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .loop-title {
      font-size: var(--text-sub);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      margin-bottom: var(--space-xl);
      text-align: center;
    }
    .loop-svg-container {
      width: 100%;
      max-width: 640px;
      position: relative;
    }
    .loop-svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* Mobile: vertical loops */
    .loop-vertical {
      display: none;
      width: 100%;
    }
    .lv-item {
      display: flex;
      gap: var(--space-md);
      padding-bottom: var(--space-md);
    }
    .lv-item:last-child { padding-bottom: 0; }
    .lv-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }
    .lv-node {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--white);
      border: var(--border-accent);
      flex-shrink: 0;
    }
    .lv-connector {
      width: 2px;
      flex: 1;
      background: rgba(115, 24, 44, 0.4);
      margin-top: 3px;
      min-height: 16px;
    }
    .lv-item:last-child .lv-connector { display: none; }
    .lv-text {
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      color: var(--text-primary);
      padding-top: 3px;
    }
    .lv-back {
      font-size: var(--text-xxs);
      color: var(--maroon);
      margin-top: var(--space-sm);
      padding-left: calc(24px + var(--space-md));
    }

    @media (max-width: 640px) {
      .loop-svg-container { display: none; }
      .loop-vertical { display: block; }
      .interconnect-inner {
        padding-left: var(--space-md);
      }
    }

    .interconnect-quote {
      margin-top: var(--space-3xl);
      text-align: center;
    }
    .interconnect-quote p {
      font-size: var(--text-sub);
      font-weight: var(--weight-medium);
      font-style: italic;
      color: var(--text-primary);
      max-width: 40ch;
      margin: 0 auto;
      line-height: var(--lh-snug);
    }

    /* ─────────────────────────────────────
       SECTION: STRATEGIC FRAMEWORK
    ───────────────────────────────────── */
    .section-framework {
      padding: var(--section-pad-default);
      background: var(--bg-primary);
    }
    .framework-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: var(--space-3xl);
      align-items: start;
      margin-top: var(--space-2xl);
    }
    .framework-divider {
      width: 1px;
      background: var(--n200);
      align-self: stretch;
    }
    .framework-col-title {
      font-size: var(--text-sm);
      font-weight: var(--weight-semi);
      color: var(--text-primary);
      margin-bottom: var(--space-lg);
    }
    .framework-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }
    .framework-item {
      display: flex;
      gap: var(--space-md);
      align-items: baseline;
    }
    .framework-num {
      font-size: var(--text-sub);
      font-weight: var(--weight-bold);
      color: var(--maroon);
      line-height: 1;
      flex-shrink: 0;
      min-width: 1.5rem;
    }
    .framework-text {
      font-size: var(--text-sm);
      color: var(--text-secondary);
      line-height: var(--lh-normal);
    }

    @media (max-width: 640px) {
      .framework-inner {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
      }
      .framework-divider { display: none; }
      .framework-col:last-child {
        border-top: var(--border);
        padding-top: var(--space-xl);
      }
    }

    /* ─────────────────────────────────────
       SECTION: CONTACT
    ───────────────────────────────────── */
    .section-contact {
      padding: var(--section-pad-tight);
      background: var(--bg-primary);
    }
    .contact-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3xl);
      align-items: center;
    }
    .contact-byline {
      font-size: var(--text-xs);
      color: var(--text-tertiary);
      margin-top: var(--space-md);
    }

    .contact-substack-link {
      color: var(--text-tertiary);
      text-decoration: underline;
      text-decoration-color: transparent;
      text-underline-offset: 2px;
      transition: color 0.15s var(--ease-out-soft), text-decoration-color 0.15s var(--ease-out-soft);
    }
    .contact-substack-link:hover {
      color: var(--text-secondary);
      text-decoration-color: var(--text-secondary);
    }
    .contact-substack-link:focus-visible {
      outline: 2px solid var(--maroon);
      outline-offset: 2px;
      border-radius: 2px;
    }
    .contact-right {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .contact-right img {
      max-height: 400px;
    }

    @media (max-width: 640px) {
      .contact-inner { grid-template-columns: 1fr; }
      .contact-right img { max-height: 250px; }
    }

    /* ─────────────────────────────────────
       FOOTER
    ───────────────────────────────────── */
    .footer {
      border-top: var(--border);
      padding: var(--space-xl) 0;
      background: var(--white);
    }
    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-text {
      font-size: var(--text-xs);
      color: var(--text-tertiary);
    }

    @media (max-width: 480px) {
      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
      }
    }

    /* ─────────────────────────────────────
       PIPELINE DESKTOP SVG
    ───────────────────────────────────── */
    .pipeline-desktop {
      position: relative;
      padding: var(--space-xl) 0 var(--space-3xl);
    }
    .pipeline-nodes {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      z-index: 2;
    }
    .pipeline-node-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: calc(100% / 9);
      opacity: 0;
      transform: scale(0.85);
      transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    }
    .pipeline-node-wrap.visible {
      opacity: 1;
      transform: none;
    }

    /* ── LOOP NODE PULSE ── */
    @keyframes nodePulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(115,24,44,0); }
      50% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(115,24,44,0.2); }
    }
    .loop-node-active {
      animation: nodePulse 2s var(--ease-in-out) infinite;
    }

    /* ── COUNTER ANIMATION ── */
    .count-up { display: inline; }