/* Pipeline page styles — ported 1:1 from pipeline.html on WP/ACF migration.
   nav/footer excluded (served by shared.css + template parts). Responsive appended at end. */

  /* --- Graph token system ----------------------------------- */
  .tf-graph { --g-radius: 16px; --g-font-serif: 'Instrument Serif', Georgia, serif; --g-font-sans: 'Inter', system-ui, sans-serif; }
  .tf-graph--dark { --g-surface: #1E2238; --g-ink: #F3F0E7; --g-ink-soft: #C9CCE0; --g-ink-mute: #9AA0C6; --g-axis: #7B82AC; --g-grid: #3A4066; --g-grid-faint: #2A2F4D; --g-accent: #35E29A; --g-accent-hi: #4DE6A6; }
  .tf-graph--light { --g-surface: #F4F1E8; --g-ink: #16413B; --g-ink-soft: #3F4A78; --g-ink-mute: #6A729B; --g-axis: #8A90AE; --g-grid: #E0DBCC; --g-grid-faint: #E9E4D6; --g-accent: #00A85A; --g-accent-hi: #00A85A; }
  /* Graph animations */
  .tf-graph .g-line { stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset 5s cubic-bezier(0.22,1,0.36,1); }
  .tf-graph .g-area { opacity: 0; transition: opacity 0.8s ease 0.8s; }
  .tf-graph .g-dot { transform: scale(0); transform-origin: center; transform-box: fill-box; transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1); }
  .tf-graph .g-dot:nth-child(1) { transition-delay: 0.9s; }
  .tf-graph .g-dot:nth-child(2) { transition-delay: 1.55s; }
  .tf-graph .g-dot:nth-child(3) { transition-delay: 2.2s; }
  .tf-graph .g-dot:nth-child(4) { transition-delay: 2.85s; }
  .tf-graph .g-dot:nth-child(5) { transition-delay: 3.5s; }
  .tf-graph .g-dot:nth-child(6) { transition-delay: 4.15s; }
  .tf-graph .g-dot:nth-child(7) { transition-delay: 4.8s; }
  .tf-graph .g-dot:nth-child(8) { transition-delay: 5.45s; }
  .tf-graph .g-hero { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease 1.4s, transform 0.6s ease 1.4s; }
  .tf-graph .g-stat { opacity: 0; transition: opacity 0.5s ease 1.0s; }
  .tf-graph.g-in .g-line { stroke-dashoffset: 0; }
  .tf-graph.g-in .g-area { opacity: 1; }
  .tf-graph.g-in .g-dot { transform: scale(1); }
  .tf-graph.g-in .g-hero { opacity: 1; transform: translateY(0); }
  .tf-graph.g-in .g-stat { opacity: 1; }
  .tf-graph .g-bar { transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
  .tf-graph.g-in .g-bar { transform: scaleY(1); }
  @media (prefers-reduced-motion: reduce) {
    .tf-graph .g-line, .tf-graph .g-area, .tf-graph .g-dot, .tf-graph .g-hero, .tf-graph .g-stat, .tf-graph .g-bar { transition: none !important; }
    .tf-graph .g-line { stroke-dashoffset: 0; }
    .tf-graph .g-area { opacity: 1; }
    .tf-graph .g-dot { transform: scale(1); }
    .tf-graph .g-bar { transform: scaleY(1); }
    .tf-graph .g-hero, .tf-graph .g-stat { opacity: 1; transform: none; }
  }
  /* ---------------------------------------------------------- */
  /* ==========================================================
     PIPELINE PAGE — DS-aligned to TreeFrog Homepage + C-Stem
     Tokens come from assets/colors_and_type.css.
     Animations: CSS transforms/opacity + IntersectionObserver
     (lightweight, WordPress-friendly).
     ========================================================== */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--paper); color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; cursor: none;
  }
  a { color: inherit; }
  img { display: block; max-width: 100%; }

  /* ===== CUSTOM CURSOR ===== */
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 10000;
    border-radius: 50%;
    transform: translate(-50%, -50%); will-change: transform;
  }
  .cursor-dot {
    width: 6px; height: 6px;
    background: var(--coral);
    transition: width 200ms, height 200ms, background 220ms;
  }
  .cursor-ring {
    width: 36px; height: 36px;
    border: 1px solid var(--ink-30);
    transition: width 320ms var(--ease-out), height 320ms var(--ease-out),
                background 320ms, border-color 320ms;
  }
  body.cursor-hover .cursor-ring {
    width: 64px; height: 64px;
    background: rgba(8, 222, 150, 0.10);
    border-color: var(--frog-vif);
  }
  body.cursor-hover .cursor-dot { width: 0; height: 0; }
  body.cursor-dark .cursor-dot { background: var(--frog-vif); }
  body.cursor-dark .cursor-ring { border-color: rgba(250, 250, 247, 0.30); }
  @media (max-width: 900px), (hover: none) {
    .cursor-dot, .cursor-ring { display: none; }
    body { cursor: auto; }
  }

  /* ===== SCROLL PROGRESS ===== */
  .scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px; z-index: 200; background: transparent;
  }
  .scroll-progress span {
    display: block; height: 100%;
    background: var(--frog-vif);
    transform: scaleX(0); transform-origin: left;
    transition: transform 80ms linear;
  }

  /* ===== PILLS / CTAs ===== */
  .pill {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
    cursor: pointer; position: relative; overflow: hidden;
  }
  .pill .arrow { display: inline-block; transition: transform 280ms var(--ease-out); }
  .pill:hover .arrow { transform: translateX(4px); }
  .pill.solid { background: var(--ink); color: var(--paper); }
  .pill.solid:hover { background: var(--frog-vif); color: var(--ink); }
  .pill.outline-light { background: transparent; border-color: var(--paper); color: var(--paper); }
  .pill.outline-light:hover { background: var(--paper); color: var(--ink); }
  .pill.outline-dark { background: transparent; border-color: var(--ink); color: var(--ink); }
  .pill.outline-dark:hover { background: var(--ink); color: var(--paper); }
  .pill.green { background: var(--frog-vif); color: var(--ink); }
  .pill.green:hover { background: var(--ink); color: var(--frog-vif); }

  .cta-circle {
    display: inline-flex; align-items: center; gap: 16px;
    text-decoration: none; color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: 0.14em; font-weight: 500;
    text-transform: uppercase; cursor: pointer;
    transition: transform 200ms var(--ease-out);
  }
  .cta-circle .label { transition: transform 280ms var(--ease-out); }
  .cta-circle .circ {
    width: 60px; height: 60px; border-radius: 999px;
    border: 1px solid currentColor;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 260ms var(--ease-out), color 260ms var(--ease-out);
    flex-shrink: 0;
  }
  .cta-circle .circ svg { transition: transform 360ms var(--ease-out); }
  .cta-circle:hover .circ { background: var(--ink); color: var(--paper); }
  .cta-circle:hover .circ svg { transform: rotate(-45deg); }
  .cta-circle:hover .label { transform: translateX(4px); }
  .cta-circle.on-dark { color: var(--paper); }
  .cta-circle.on-dark:hover .circ { background: var(--paper); color: var(--ink); }

  /* Publication links sit on the dark TFG-001 section: force white + enlarge the
     label so the two paper links (Biomaterials / Neurotherapeutics) are legible. */
  .publications .cta-circle { color: var(--paper); }
  .publications .cta-circle .label { font-size: 15px; letter-spacing: 0.1em; }

  .overtitle {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--frog); margin-bottom: 24px;
  }
  .on-dark .overtitle, .overtitle.on-dark { color: var(--frog-vif); }

  /* ===== HERO ===== */
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center;
    overflow: hidden;
    padding: 0 clamp(20px, 5vw, 56px);
    background: var(--ink);
    color: var(--paper);
  }

  /* hero totems */
  .hero .totems {
    display: flex; gap: clamp(20px, 4vw, 64px);
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid rgba(8, 222, 150, 0.24);
    max-width: 880px;
    flex-wrap: wrap;
  }
  .hero .totems .t {
    flex: 1 1 0; min-width: 140px;
  }
  .hero .totems .t .v {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(40px, 4.4vw, 64px);
    line-height: 1; color: var(--frog-vif);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }
  .hero .totems .t .l {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper); opacity: 0.7;
  }

  /* hero phase strip */
  .hero .phasestrip {
    position: absolute; left: clamp(20px, 5vw, 56px); right: clamp(20px, 5vw, 56px);
    bottom: 32px; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper); opacity: 0.7;
    pointer-events: none;
    max-width: 760px;
  }
  .hero .phasestrip .ph { display: flex; align-items: center; gap: 8px; }
  .hero .phasestrip .ph .d {
    width: 6px; height: 6px; border: 1px solid rgba(250,250,247,0.5);
    transform: rotate(45deg);
  }
  .hero .phasestrip .ph.on .d {
    background: var(--frog-vif); border-color: var(--frog-vif);
  }
  .hero .phasestrip .ph.next .d { border-color: var(--frog-vif); }
  .hero .phasestrip .bar {
    flex: 1; height: 1px; background: rgba(250,250,247,0.18); position: relative;
    overflow: hidden; min-width: 12px;
  }
  .hero .phasestrip .bar::after {
    content: ''; position: absolute; inset: 0;
    background: var(--frog-vif);
    transform-origin: left; transform: scaleX(var(--p, 0));
    transition: transform 1400ms var(--ease-out) 600ms;
  }
  .loaded .hero .phasestrip .bar::after { /* trigger */ }

  /* PIPELINE TITLE — letter-by-letter aggregation */
  .pl-title { display: flex; line-height: 0.9; }
  .pl-title .ch {
    display: inline-block;
    opacity: 0;
    transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0deg)) scale(0.6);
    filter: blur(14px);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
                transform 1300ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
                filter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
  }
  .loaded .pl-title .ch {
    opacity: 1; transform: translate(0, 0) rotate(0) scale(1);
    filter: blur(0);
  }
  .hero__bg {
    position: absolute; inset: 0;
    background-image: url('/assets/t3.webp');
    background-size: cover; background-position: 50% 50%;
    opacity: 0; z-index: 0;
    transform: scale(1.0);
    animation: heroFadeIn 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards, heroKenBurns 20s ease-in-out 1200ms infinite;
  }
  @keyframes heroFadeIn {
    to { opacity: 0.55; }
  }
  @keyframes heroKenBurns {
    from { transform: scale(1.0); }
    to   { transform: scale(1.10); }
  }
  @keyframes heroBgFloat {
    0%, 100% { transform: scale(1.05) translate(0, 0); }
    50%      { transform: scale(1.10) translate(-1.2%, -0.6%); }
  }
  /* hero content entrance (uniform across pages) */
  .hero .overline,
  .hero .subtitle,
  .hero .vision,
  .hero .lede,
  .hero .hero-cta,
  .hero .ctas {
    opacity: 0;
    animation: heroContentUp 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero .overline { animation-delay: 120ms; }
  .hero .subtitle,
  .hero .vision { animation-delay: 240ms; }
  .hero .lede { animation-delay: 300ms; }
  .hero .hero-cta,
  .hero .ctas { animation-delay: 360ms; }
  @keyframes heroContentUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ===== RAINBOW PLACEHOLDER (swap for GIF 'Rainbow2NoscaleBarCompr') ===== */
  .hero__bg.rainbow-ph {
    background-image:
      linear-gradient(115deg,
        #F45D5D 0%,
        #FFBD3E 18%,
        #08DE96 38%,
        #1C9FE0 58%,
        #6C5CE7 78%,
        #F45D5D 100%);
    background-size: 300% 300%;
    opacity: 0.7;
    animation: heroBgFloat 26s ease-in-out infinite, rainbowFlow 18s linear infinite;
  }
  @keyframes rainbowFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  /* placeholder corner marker */
  .ph-note {
    position: absolute; z-index: 3;
    top: 96px; right: clamp(20px, 5vw, 56px);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: rgba(15, 46, 44, 0.7);
    border: 1px dashed rgba(250, 250, 247, 0.5);
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    backdrop-filter: blur(4px);
    pointer-events: none;
  }
  .ph-note::before {
    content: ''; width: 8px; height: 8px;
    background: var(--frog-vif);
    transform: rotate(45deg);
  }
  .ph-note strong { color: var(--frog-vif); font-weight: 500; }
  .hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(80% 60% at 78% 40%, rgba(8, 222, 150, 0.14) 0%, transparent 60%),
      linear-gradient(180deg, rgba(15, 46, 44, 0.55) 0%, rgba(15, 46, 44, 0.40) 40%, rgba(15, 46, 44, 0.85) 100%);
  }
  /* lighter veil when the rainbow placeholder is active, so colour reads */
  .hero:has(.rainbow-ph)::after {
    background:
      linear-gradient(100deg, rgba(15, 46, 44, 0.82) 0%, rgba(15, 46, 44, 0.45) 42%, rgba(15, 46, 44, 0.30) 100%),
      linear-gradient(180deg, rgba(15, 46, 44, 0.25) 0%, transparent 35%, rgba(15, 46, 44, 0.70) 100%);
  }
  .hero .content {
    position: relative; z-index: 1;
    max-width: 1320px; margin: 0 auto; width: 100%;
    padding: 160px 0 96px;
  }
  .hero .meta-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .hero .crumb { display: flex; gap: 10px; align-items: center; }
  .hero .crumb .sep { opacity: 0.4; }
  .hero .crumb .now { color: var(--frog-vif); }
  .hero .overline {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--frog-vif);
    margin-bottom: 32px;
    padding: 6px 14px;
    border: 1px solid var(--frog-vif);
    border-radius: 999px;
  }
  .hero h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(56px, 9vw, 160px);
    line-height: 0.92;
    letter-spacing: -0.022em;
    color: var(--paper);
    margin-bottom: 40px;
    max-width: 14ch;
  }
  .hero h1 em { font-style: italic; color: var(--frog-vif); }
  .hero h1 .period { color: var(--coral); }
  .hero .lede {
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.5;
    max-width: 760px;
    margin: 0 0 56px;
    color: var(--paper); opacity: 0.94;
    font-family: var(--font-display); font-style: italic;
    text-wrap: balance;
  }
  .hero .ctas {
    display: flex; gap: 28px; flex-wrap: wrap; align-items: center;
  }
  .hero .scroll-cue {
    position: absolute; bottom: 32px; right: clamp(20px, 5vw, 56px); z-index: 1;
    font-family: var(--font-mono);
    font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--paper); opacity: 0.78;
    display: flex; align-items: center; gap: 14px;
    writing-mode: vertical-rl;
  }
  .hero .scroll-cue .line {
    width: 1px; height: 28px; background: var(--frog-vif);
    animation: scrollLineH 2s var(--ease-out) infinite;
    transform-origin: top;
  }
  @keyframes scrollLineH {
    0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
    50%      { transform: scaleY(1);   opacity: 1; }
  }

  /* split-line reveal */
  .split-line { display: block; overflow: hidden; }
  .split-line .inner {
    display: block;
    transform: translateY(110%);
    transition: transform 1100ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .loaded .split-line .inner { transform: translateY(0); }

  /* ===== PIPELINE OVERVIEW (pharma frieze) ===== */
  .frieze {
    background: var(--paper);
    padding: 140px clamp(20px, 5vw, 56px) 140px;
    position: relative; overflow: hidden;
  }
  .frieze .head {
    max-width: 1320px; margin: 0 auto 64px;
    display: grid; grid-template-columns: 5fr 7fr; gap: 64px;
    align-items: end;
  }
  .frieze h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(40px, 5vw, 76px);
    line-height: 0.98; letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
  }
  .frieze h2 em { font-style: italic; color: var(--frog); }
  .frieze .legend {
    display: flex; gap: 28px; flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink); opacity: 0.78;
  }
  .frieze .legend .lk { display: inline-flex; align-items: center; gap: 10px; }
  .frieze .legend .lk .sw { width: 14px; height: 14px; }
  .frieze .legend .lk.green .sw { background: var(--frog-vif); }
  .frieze .legend .lk.amber .sw { background: var(--orange); }
  .frieze .legend .lk.line .sw { background: transparent; border: 1px dashed var(--ink-30); }

  .frieze .grid {
    max-width: 1320px; margin: 0 auto;
    position: relative;
  }
  /* phase columns */
  .frieze .phases {
    display: grid;
    grid-template-columns: 1.3fr 1.1fr 1.1fr 1fr 1fr 1fr 0.9fr;
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink-12);
    position: relative;
  }
  .frieze .phases .ph {
    padding: 22px 14px 22px 18px;
    border-right: 0.5px solid var(--ink-12);
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink); opacity: 0.78;
    position: relative;
  }
  .frieze .phases .ph:last-child { border-right: none; }
  .frieze .phases .ph .n {
    display: block; font-family: var(--font-display); font-style: italic;
    font-size: 22px; color: var(--frog); opacity: 0.55;
    margin-bottom: 6px; letter-spacing: -0.02em;
  }

  /* Program rows */
  .frieze .row {
    display: grid;
    grid-template-columns: 1.3fr 1.1fr 1.1fr 1fr 1fr 1fr 0.9fr;
    align-items: center;
    border-bottom: 0.5px solid var(--ink-12);
    position: relative;
    height: 96px;
  }
  .frieze .row .meta {
    grid-column: 1 / 2;
    padding: 0 18px;
    border-right: 0.5px solid var(--ink-12);
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
  }
  .frieze .row .meta .pid {
    font-family: var(--font-display); font-style: italic;
    font-size: 26px; line-height: 1; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 4px;
  }
  .frieze .row .meta .ind {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink); opacity: 0.7;
  }
  .frieze .row .bar {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    display: flex; align-items: center;
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 500;
    transform-origin: left;
    transform: translateY(-50%) scaleX(0);
    transition: transform 1500ms cubic-bezier(0.7, 0, 0.2, 1) var(--bd, 0ms);
  }
  .frieze .row.in .bar { transform: translateY(-50%) scaleX(1); }
  .frieze .row.r1 .bar {
    background: var(--frog-vif);
    color: var(--ink);
    /* TFG-001: discovery -> IND-enabling (col 2..4) */
    left: calc((1.3 / 7.4) * 100%);
    width: calc((3.2 / 7.4) * 100%);
  }
  .frieze .row.r1 .barNext {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 22px;
    border-radius: 999px;
    border: 1px dashed var(--frog-30);
    /* TFG-001 next milestone target into Phase I/II */
    left: calc((4.5 / 7.4) * 100%);
    width: calc((1.0 / 7.4) * 100%);
    background: transparent;
    display: flex; align-items: center; padding: 0 12px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--frog); font-weight: 500;
    opacity: 0; transition: opacity 700ms ease 1700ms;
  }
  .frieze .row.r1.in .barNext { opacity: 1; }
  .frieze .row.r2 .bar {
    background: var(--orange);
    color: var(--ink);
    /* TFG-002: discovery -> preclinical (col 2..3) */
    left: calc((1.3 / 7.4) * 100%);
    width: calc((2.1 / 7.4) * 100%);
    --bd: 200ms;
  }

  .frieze .row.r3 .bar {
    background: #7B93DB;
    color: var(--ink);
    /* TFG-003: discovery only (col 2) */
    left: calc((1.3 / 7.4) * 100%);
    width: calc((1.05 / 7.4) * 100%);
    --bd: 400ms;
  }
  .frieze .legend .lk.blue .sw { background: #7B93DB; }

  /* row hover lift */
  .frieze .row { transition: background 320ms ease; }
  .frieze .row:hover { background: rgba(8, 222, 150, 0.04); }

  /* milestone marker on TFG-001 row */
  .frieze .row .ms {
    position: absolute;
    top: 50%; transform: translate(-50%, -50%);
    left: calc((4.4 / 7.4) * 100%);
    width: 14px; height: 14px;
    background: var(--frog-vif);
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 2px var(--frog);
    border-radius: 50%;
    z-index: 2;
  }
  .frieze .row .ms-lab {
    position: absolute;
    top: 50%; transform: translate(-50%, calc(-50% - 36px));
    left: calc((4.4 / 7.4) * 100%);
    font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--frog);
    white-space: nowrap;
  }

  /* ===== PROGRAM SIDEBAR INDEX (sticky) ===== */
  .program {
    position: relative;
  }
  .pidx {
    position: absolute;
    left: clamp(20px, 4vw, 40px);
    top: 0;
    bottom: 0;
    width: 180px;
    pointer-events: none;
    z-index: 5;
  }
  .pidx-inner {
    position: sticky;
    top: 120px;
    pointer-events: auto;
  }
  .pidx .pidx-tag {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--frog-vif); opacity: 0.6;
    margin-bottom: 18px;
  }
  .pidx ol { list-style: none; }
  .pidx li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper); opacity: 0.45;
    transition: opacity 240ms, color 240ms;
    cursor: pointer;
  }
  .pidx li .dot {
    width: 6px; height: 6px;
    background: rgba(250,250,247,0.4);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: background 240ms, transform 380ms var(--ease-out);
  }
  .pidx li .ord {
    color: var(--frog-vif); opacity: 0.6;
    margin-right: 4px;
  }
  .pidx li.on { opacity: 1; color: var(--paper); }
  .pidx li.on .dot { background: var(--frog-vif); transform: rotate(45deg) scale(1.3); }

  /* TFG-002 amber theme override */
  .program.amber .pidx li .ord { color: var(--orange); }
  .program.amber .pidx li.on .dot { background: var(--orange); }
  .program.amber .pidx-tag { color: var(--orange); }

  @media (max-width: 1280px) {
    .pidx { display: none; }
  }

  /* big background numbering */
  .pblock { position: relative; }
  .pblock .bgnum,
  .reveal-stagger.in > .bgnum,
  .reveal-stagger > .bgnum {
    position: absolute;
    top: 0;
    right: 0;
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(140px, 22vw, 320px);
    line-height: 1;
    color: var(--frog-vif);
    opacity: 0.06 !important;
    transform: none !important;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
    z-index: 0;
    transition: none !important;
  }
  .program.amber .pblock .bgnum,
  .program.amber .reveal-stagger.in > .bgnum,
  .program.amber .reveal-stagger > .bgnum { color: var(--orange); opacity: 0.06 !important; }
  .pblock > *:not(.bgnum) { position: relative; z-index: 1; }

  /* ===== AMBER (TFG-002) THEME OVERRIDES ===== */
  .program.amber.dark::before {
    background-image: url('/assets/processing.jpg');
    -webkit-mask-image: radial-gradient(circle at 70% 50%, black 30%, transparent 70%);
            mask-image: radial-gradient(circle at 70% 50%, black 30%, transparent 70%);
    opacity: 0.16;
  }
  .program.amber .program-head { border-bottom-color: rgba(255, 189, 62, 0.28); }
  .program.amber .program-head .tag,
  .program.amber .program-head .id { color: var(--orange); }
  .program.amber .program-head .tag::before { background: var(--orange); }
  .program.amber h2 em { color: var(--orange); }
  .program.amber .pblock { border-bottom-color: rgba(255, 189, 62, 0.18); }
  .program.amber .pblock .label { color: var(--orange); }
  .program.amber .pblock .body h3 em { color: var(--orange); }
  .program.amber .pblock .ref-link { color: var(--orange); border-bottom-color: rgba(255, 189, 62, 0.4); }
  .program.amber .keydata-head h3 em { color: var(--orange); }
  .program.amber .kd-card {
    background: rgba(255, 189, 62, 0.05);
    border-color: rgba(255, 189, 62, 0.20);
  }
  .program.amber .kd-card:hover {
    background: rgba(255, 189, 62, 0.09);
    border-color: rgba(255, 189, 62, 0.36);
  }
  .program.amber .kd-card .num { color: rgba(255, 189, 62, 0.42); }
  .program.amber .kd-card .label,
  .program.amber .kd-card h4 em,
  .program.amber .kd-card .figure { color: var(--orange); }
  .program.amber .keydata-foot { border-top-color: rgba(255, 189, 62, 0.24); }
  .program.amber .keydata-foot button { border-color: rgba(255, 189, 62, 0.24); }
  .program.amber .keydata-foot button:hover { border-color: var(--orange); color: var(--orange); }

  /* ===== TFG-002 title GIF placeholder (swap for GIF, dossier 'Liver') ===== */
  .head-gif-ph {
    position: relative;
    height: clamp(180px, 22vw, 280px);
    margin-top: 48px;
    border: 1px dashed rgba(255, 189, 62, 0.45);
    background-image: linear-gradient(115deg, #FFBD3E 0%, #FF8A3E 26%, #F45D5D 50%, #FFD66E 74%, #FFBD3E 100%);
    background-size: 300% 300%;
    animation: rainbowFlow 16s linear infinite;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .head-gif-ph::before {
    display: none;
  }
  .head-gif-ph .ph-note { position: static; background: rgba(15,46,44,0.7); border-color: rgba(255,189,62,0.6); }
  .head-gif-ph .ph-note::before { background: var(--orange); }
  .head-gif-ph .ph-note strong { color: var(--orange); }

  /* ===== INTERLUDE (between programs) ===== */
  .interlude {
    background: var(--paper);
    padding: 140px clamp(20px, 5vw, 56px);
    text-align: center;
    position: relative; overflow: hidden;
    border-top: 1px solid var(--ink-12);
    border-bottom: 1px solid var(--ink-12);
  }
  .interlude .lab {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--frog); margin-bottom: 36px;
    display: inline-flex; align-items: center; gap: 12px;
  }
  .interlude .lab::before, .interlude .lab::after {
    content: ''; width: 32px; height: 1px; background: var(--frog-vif);
  }
  .interlude .figure {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1;
    font-weight: 500;
    font-size: clamp(48px, 8vw, 120px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .interlude .figure .sup {
    font-size: 0.46em; vertical-align: super;
    font-family: var(--font-display); font-style: italic;
    color: var(--frog-vif);
  }
  .interlude .figure em {
    font-family: var(--font-display); font-style: italic;
    color: var(--frog); font-weight: 400;
  }
  .interlude .cap {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--ink); opacity: 0.86;
    max-width: 600px; margin: 0 auto;
    text-wrap: balance;
  }

  /* ===== INTRO / CAPTION BLOCK ===== */
  .caption-block {
    background: var(--paper);
    padding: 160px clamp(20px, 5vw, 56px);
  }
  .caption-block .wrap {
    max-width: 1320px; margin: 0 auto;
    display: grid; grid-template-columns: 5fr 6fr;
    gap: 96px; align-items: center;
  }
  .caption-block .visual {
    aspect-ratio: 5/6;
    background-image: url('/assets/3d-model-blue-capsule.jpg');
    background-size: cover; background-position: 50% 50%;
    background-color: #0a0205;
    position: relative; overflow: hidden;
  }
  .caption-block .visual::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(15, 46, 44, 0.5) 100%);
  }
  .caption-block .visual .marker {
    position: absolute; top: 28px; left: 28px;
    z-index: 2; color: #fff;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; font-weight: 500;
    display: flex; align-items: center; gap: 10px;
  }
  .caption-block .visual .marker::before {
    content: ''; width: 28px; height: 1px; background: #fff;
  }
  .caption-block .visual .stamp {
    position: absolute; bottom: 28px; right: 28px;
    z-index: 2; color: var(--paper);
    font-family: var(--font-display); font-style: italic;
    font-size: 18px;
  }
  .caption-block .visual .corner {
    position: absolute; width: 22px; height: 22px;
    border: 1px solid var(--paper); opacity: 0.5; z-index: 2;
  }
  .caption-block .visual .corner.tl { top: 14px; left: 14px;  border-right: none; border-bottom: none; }
  .caption-block .visual .corner.tr { top: 14px; right: 14px; border-left: none;  border-bottom: none; }
  .caption-block .visual .corner.bl { bottom: 14px; left: 14px;  border-right: none; border-top: none; }
  .caption-block .visual .corner.br { bottom: 14px; right: 14px; border-left: none;  border-top: none; }

  .caption-block h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(48px, 6vw, 92px);
    line-height: 0.98; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 32px;
    text-wrap: balance;
  }
  .caption-block h2 em { font-style: italic; color: var(--frog); }
  .caption-block .body {
    font-size: 18px; line-height: 1.6;
    color: var(--ink); opacity: 0.86;
    margin-bottom: 24px; max-width: 560px;
  }
  .caption-block .body + .body { margin-top: -8px; }

  /* ===== PROGRAM SECTION (TFG-001 / TFG-002) ===== */
  .program {
    padding: 160px clamp(20px, 5vw, 56px);
    position: relative; overflow: hidden;
  }
  .program.dark {
    background: var(--frog-deep); color: var(--paper);
  }
  .program.dark::before {
    content: ''; position: absolute;
    width: 56%; height: 100%;
    bottom: -10%; right: -8%;
    background-image: url('/assets/t3.webp');
    background-size: cover; background-position: 50% 50%;
    opacity: 0.18; z-index: 0;
    -webkit-mask-image: radial-gradient(circle at 70% 50%, black 30%, transparent 70%);
            mask-image: radial-gradient(circle at 70% 50%, black 30%, transparent 70%);
  }
  .program.dark.liver::before {
    background-image: url('/assets/processing.jpg');
  }
  .program .wrap {
    max-width: 1320px; margin: 0 auto;
    position: relative; z-index: 1;
  }
  .program .program-head {
    display: grid; grid-template-columns: 4fr 8fr;
    gap: 64px; align-items: end;
    margin-bottom: 96px;
    padding-bottom: 48px;
    border-bottom: 0.5px solid rgba(8, 222, 150, 0.24);
  }
  .program .program-head .tag {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--frog-vif);
    display: flex; align-items: center; gap: 12px;
  }
  .program .program-head .tag::before {
    content: ''; width: 28px; height: 1px; background: var(--frog-vif);
  }
  .program .program-head .id {
    margin-top: 24px;
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(36px, 4vw, 56px);
    color: var(--frog-vif);
    letter-spacing: -0.02em;
  }
  .program h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(44px, 6vw, 92px);
    line-height: 0.98; letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .program.dark h2 { color: var(--paper); }
  .program h2 em { font-style: italic; color: var(--frog-vif); }

  /* Challenge / Need / Advantage stack */
  /* ===== PROGRAM ACCORDION (Challenge / Need / Advantage) ===== */
  .pblock {
    position: relative;
    overflow: hidden;
    border: 0.5px solid rgba(8, 222, 150, 0.18);
    margin-bottom: 16px;
  }
  .program.amber .pblock { border-color: rgba(255, 189, 62, 0.20); }
  .pblock:last-of-type { margin-bottom: 0; }

  /* background image layer */
  .pblock .acc-bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--accbg);
    background-size: cover; background-position: 50% 50%;
    opacity: 0.18;
    transform: scale(1.04);
    transition: opacity 600ms ease, transform 9s ease;
  }
  .pblock:hover .acc-bg { opacity: 0.28; transform: scale(1.09); }
  .pblock.open .acc-bg { opacity: 0.22; }
  .pblock .acc-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,46,44,0.55) 0%, rgba(15,46,44,0.82) 100%);
  }

  /* header (clickable) */
  .pblock .acc-head {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 4fr 8fr;
    gap: clamp(24px, 4vw, 64px); align-items: center;
    width: 100%;
    padding: 36px clamp(72px, 8vw, 100px) 36px clamp(24px, 4vw, 56px);
    background: transparent; border: 0;
    cursor: pointer; text-align: left;
    font: inherit; color: inherit;
    transition: background 300ms ease;
  }
  .pblock .acc-head:hover { background: rgba(8, 222, 150, 0.04); }
  .program.amber .pblock .acc-head:hover { background: rgba(255, 189, 62, 0.05); }
  .pblock .acc-head .label {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--frog-vif);
    align-self: center;
  }
  .program.amber .pblock .acc-head .label { color: var(--orange); }
  .pblock .acc-head .num {
    font-family: var(--font-display); font-style: italic;
    font-size: 14px; opacity: 0.5; margin-top: 8px;
  }
  .pblock .acc-head h3 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(24px, 2.5vw, 38px);
    line-height: 1.12; letter-spacing: -0.015em;
    color: var(--paper); margin: 0;
    text-wrap: balance;
  }
  .pblock .acc-head h3 em { font-style: italic; color: var(--frog-vif); }
  .program.amber .pblock .acc-head h3 em { color: var(--orange); }

  /* +/- indicator */
  .pblock .acc-ind {
    position: absolute; top: 50%; right: clamp(24px, 4vw, 48px);
    transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(8, 222, 150, 0.4);
    z-index: 2;
    transition: background 300ms var(--ease-out), border-color 300ms;
  }
  .pblock .acc-head:hover .acc-ind { border-color: var(--frog-vif); }
  .pblock .acc-ind::before, .pblock .acc-ind::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    background: var(--frog-vif);
    transition: transform 320ms var(--ease-out), opacity 320ms;
  }
  .pblock .acc-ind::before { width: 13px; height: 1.5px; transform: translate(-50%, -50%); }
  .pblock .acc-ind::after  { width: 1.5px; height: 13px; transform: translate(-50%, -50%); }
  .pblock.open .acc-ind::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
  .pblock.open .acc-ind { background: rgba(8, 222, 150, 0.12); }
  .program.amber .pblock .acc-ind { border-color: rgba(255, 189, 62, 0.4); }
  .program.amber .pblock .acc-head:hover .acc-ind { border-color: var(--orange); }
  .program.amber .pblock .acc-ind::before,
  .program.amber .pblock .acc-ind::after { background: var(--orange); }
  .program.amber .pblock.open .acc-ind { background: rgba(255, 189, 62, 0.14); }

  /* collapsible panel (0fr -> 1fr smooth) */
  .pblock .acc-panel {
    position: relative; z-index: 2;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 540ms var(--ease-out);
  }
  .pblock.open .acc-panel { grid-template-rows: 1fr; }
  .pblock .acc-panel-in { overflow: hidden; min-height: 0; }
  .pblock .acc-panel-inner {
    display: grid; grid-template-columns: 4fr 8fr;
    gap: clamp(24px, 4vw, 64px);
    padding: 0 clamp(72px, 8vw, 100px) 44px clamp(24px, 4vw, 56px);
  }
  .pblock .acc-body { grid-column: 2; }
  .pblock .acc-body p {
    font-size: 18px; line-height: 1.6;
    margin-bottom: 20px;
    max-width: 720px;
    text-wrap: pretty;
    color: var(--paper); opacity: 0.88;
  }
  .pblock .acc-body p:last-child { margin-bottom: 0; }
  .pblock .ref-link {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 24px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--frog-vif); text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(8, 222, 150, 0.4);
    transition: border-color 220ms, transform 220ms;
  }
  .program.amber .pblock .ref-link { color: var(--orange); border-bottom-color: rgba(255,189,62,0.4); }
  .pblock .ref-link:hover { border-bottom-color: currentColor; transform: translateX(2px); }
  .pblock .ref-link .arr { transition: transform 220ms var(--ease-out); }
  .pblock .ref-link:hover .arr { transform: translate(3px, -3px) rotate(-45deg); }

  /* ===== KEY DATA — horizontal cards (mirrors C-Stem pillars) ===== */
  .keydata {
    padding: 0;
    overflow: hidden;
  }
  .program.dark .keydata-head {
    padding: 0 clamp(20px, 5vw, 56px);
    max-width: 1320px; margin: 64px auto 32px;
  }
  .keydata-head h3 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1; letter-spacing: -0.02em;
    color: var(--paper); margin-bottom: 16px;
    text-wrap: balance;
  }
  .keydata-head h3 em { font-style: italic; color: var(--frog-vif); }
  .keydata-head .sub {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper); opacity: 0.6;
  }
  .keydata-track {
    display: flex; gap: 24px;
    padding: 32px clamp(20px, 5vw, 56px) 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; cursor: grab;
  }
  .keydata-track.dragging { cursor: grabbing; }
  .keydata-track::-webkit-scrollbar { display: none; }

  /* Carousel arrows — positioned on each side */
  .keydata-wrap {
    position: relative;
  }
  .kd-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    z-index: 10;
    background: rgba(15, 46, 44, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(8, 222, 150, 0.24);
    color: var(--paper);
    cursor: pointer;
    width: 48px; height: 48px;
    border-radius: 50%;
    transition: all 220ms var(--ease-out);
    font-family: var(--font-mono); font-size: 18px;
    display: flex; align-items: center; justify-content: center;
  }
  .kd-arrow:hover {
    border-color: var(--frog-vif);
    color: var(--frog-vif);
    background: rgba(15, 46, 44, 0.9);
  }
  .kd-arrow.left { left: clamp(8px, 2vw, 24px); }
  .kd-arrow.right { right: clamp(8px, 2vw, 24px); }

  /* Arrows inline next to "Drag" label */
  .kd-arrows-inline {
    display: inline-flex; gap: 8px; margin-left: 12px; vertical-align: middle;
  }
  .kd-arrows-inline .kd-arrow {
    position: static; transform: none;
    width: 36px; height: 36px; font-size: 15px;
  }

  .keydata-track { align-items: stretch; }
  .kd-card {
    flex: 0 0 min(440px, 78vw);
    scroll-snap-align: start;
    background: rgba(8, 222, 150, 0.04);
    border: 0.5px solid rgba(8, 222, 150, 0.18);
    padding: 0 0 44px;
    position: relative;
    display: grid;
    grid-template-rows:
      auto            /* 1. media */
      auto            /* 2. num */
      auto            /* 3. eyebrow */
      3.2em           /* 4. title: 2 lines reserved */
      100px           /* 5. stat: reserved even if empty */
      1fr;            /* 6. paragraph */
    row-gap: 0;
    transition: background 320ms ease, border-color 320ms ease, transform 380ms var(--ease-out);
  }
  .kd-card:hover {
    background: rgba(8, 222, 150, 0.08);
    border-color: rgba(8, 222, 150, 0.32);
    transform: translateY(-4px);
  }
  .kd-card .num {
    font-family: var(--font-display); font-style: italic;
    font-size: 36px; color: rgba(8, 222, 150, 0.42);
    padding: 14px 40px 0;
    letter-spacing: -0.02em;
    align-self: start;
  }
  .kd-card .label {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--frog-vif);
    padding: 8px 40px 0;
    align-self: start;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .kd-card h4 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(22px, 1.8vw, 28px);
    line-height: 1.2; letter-spacing: -0.01em;
    color: var(--paper);
    padding: 8px 40px 0;
    align-self: start;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .kd-card h4 em { font-style: italic; color: var(--frog-vif); }
  .kd-card p {
    font-size: 14.5px; line-height: 1.55;
    color: var(--paper); opacity: 0.84;
    padding: 0 40px;
    align-self: start;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Liver "Scale barrier" card: show the full paragraph (ends on a full stop,
     no truncating ellipsis) rather than clamping to 3 lines. */
  .kd-card p.kd-scale-p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  /* full primary paragraph (no 3-line clamp), ends on its full stop */
  .kd-card p.kd-full {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  /* graph explanation note: full text, not clamped */
  .kd-card p.kd-note {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    margin-top: 12px;
    font-size: 13px; line-height: 1.5;
    opacity: 0.66;
  }
  .kd-card .figure {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(36px, 3.6vw, 52px);
    line-height: 1; color: var(--frog-vif);
    padding: 8px 40px 0;
    letter-spacing: -0.02em;
    align-self: start;
  }
  .kd-card .figure .alt {
    font-size: 0.36em; color: rgba(250,250,247,0.6); font-style: normal;
    font-family: var(--font-mono); letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block; margin-top: 4px;
  }
  /* Empty stat spacer for cards without .figure */
  .kd-card__stat-spacer {
    display: block;
  }

  /* ===== KEY DATA media placeholders (swap for real assets) ===== */
  .kd-media {
    position: relative;
    aspect-ratio: 16 / 10;
    width: 100%;
    background-size: cover; background-position: 50% 50%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 2px 2px 0 0;
    border-radius: 4px;
  }
  .kd-media .ph-tag {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--frog-vif); text-align: center;
    line-height: 1.5; max-width: 88%;
  }
  .program.amber .kd-media .ph-tag { color: var(--orange); }
  .kd-media .ph-tag svg { opacity: 0.7; }
  .kd-media .ph-tag .src { color: var(--paper); opacity: 0.55; }
  /* CSS bar-chart placeholder (card 4) */
  .kd-graph {
    position: relative; z-index: 1;
    display: flex; align-items: flex-end; gap: 9px;
    height: 86px; padding: 0 4px;
  }
  .kd-graph .gb {
    width: 16px;
    background: linear-gradient(180deg, var(--frog-vif), rgba(8, 222, 150, 0.25));
  }
  .kd-graph .gb.alt { background: linear-gradient(180deg, rgba(250,250,247,0.5), rgba(250,250,247,0.12)); }

  .keydata-foot {
    padding: 0 clamp(20px, 5vw, 56px);
    max-width: 1320px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 0.5px solid rgba(8, 222, 150, 0.24);
    padding-top: 28px;
  }
  .keydata-foot .lab {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase; opacity: 0.6;
    color: var(--paper);
  }
  .keydata-foot .arrows { display: flex; gap: 12px; }
  .keydata-foot button {
    background: transparent;
    border: 1px solid rgba(8, 222, 150, 0.24);
    color: var(--paper); cursor: pointer;
    width: 44px; height: 44px; border-radius: 50%;
    transition: all 220ms var(--ease-out);
    font-family: var(--font-mono); font-size: 16px;
  }
  .keydata-foot button:hover {
    border-color: var(--frog-vif); color: var(--frog-vif);
  }

  /* ===== MILESTONE CALLOUT ===== */
  .milestone {
    margin-top: 0;
    padding: 48px 56px;
    background: rgba(8, 222, 150, 0.06);
    border: 0.5px solid rgba(8, 222, 150, 0.32);
    display: grid; grid-template-columns: 4fr 8fr; gap: 56px;
    align-items: center;
    position: relative; overflow: hidden;
  }
  .milestone::before {
    content: ''; position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px; background: var(--frog-vif);
    transform: scaleY(0); transform-origin: top;
    transition: transform 900ms var(--ease-out);
  }
  .milestone.in::before { transform: scaleY(1); }
  .program.amber .milestone::before { background: var(--orange); }
  .milestone .label {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--frog-vif);
    margin-bottom: 14px;
  }
  .milestone .year {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(48px, 5vw, 72px);
    color: var(--frog-vif); letter-spacing: -0.02em;
    line-height: 1;
  }
  .milestone p {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.4;
    color: var(--paper); opacity: 0.92;
    text-wrap: pretty;
  }

  /* ===== EXPLORE FURTHER (two-up) ===== */
  .explore {
    background: var(--paper);
    padding: 160px clamp(20px, 5vw, 56px);
  }
  .explore .head { max-width: 1320px; margin: 0 auto 80px; }
  .explore h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(44px, 5.6vw, 88px);
    line-height: 1; letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
  }
  .explore h2 em { font-style: italic; color: var(--frog); }
  .explore .grid {
    max-width: 1320px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--ink);
  }
  .explore .col {
    padding: 64px 64px 64px 0;
    border-right: 0.5px solid var(--ink-12);
    position: relative;
  }
  .explore .col:last-child {
    border-right: none;
    padding-left: 64px; padding-right: 0;
  }
  .explore .col .num {
    position: absolute; top: 64px; right: 64px;
    font-family: var(--font-display); font-style: italic;
    font-size: 28px; color: var(--frog); opacity: 0.5;
  }
  .explore .col:last-child .num { right: auto; left: 64px; top: 64px; }
  .explore .col .label {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--frog);
    margin-bottom: 28px;
    display: flex; align-items: center; gap: 12px;
  }
  .explore .col .label::before {
    content: ''; width: 24px; height: 1px; background: var(--frog-vif);
  }
  .explore .col h3 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.1; letter-spacing: -0.015em;
    color: var(--ink); margin-bottom: 24px;
    text-wrap: balance;
  }
  .explore .col h3 em { font-style: italic; color: var(--frog); }
  .explore .col p {
    font-size: 17px; line-height: 1.6;
    color: var(--ink); opacity: 0.84;
    margin-bottom: 32px;
    max-width: 480px;
  }
  .explore .col .img {
    margin-top: 40px;
    aspect-ratio: 16/10;
    background-size: cover; background-position: 50% 50%;
    border: 1px solid var(--ink-12);
    position: relative; overflow: hidden;
  }
  .explore .col .img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 46, 44, 0.4) 100%);
    transition: opacity 500ms ease;
  }
  .explore .col:hover .img::after { opacity: 0.6; }
  .explore .col.a .img { background-image: url('/assets/biomimetic.jpg'); }
  .explore .col.b .img { background-image: url('/assets/team-work-cleanroom.png'); }

  /* ===== DECLARATION (vision quote) ===== */
  .declaration {
    background: var(--paper);
    padding: 200px clamp(20px, 5vw, 56px);
    text-align: center;
    position: relative; overflow: hidden;
  }
  .declaration::before {
    content: ''; position: absolute;
    left: 50%; top: 50%;
    width: 1100px; height: 1100px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(8, 222, 150, 0.06), transparent 60%);
    z-index: 0;
  }
  .declaration .wrap { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
  .declaration p {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.8vw, 76px);
    line-height: 1.1; letter-spacing: -0.018em;
    color: var(--ink);
    text-wrap: balance;
  }
  .declaration p em { font-style: italic; color: var(--frog); }
  .declaration p .mark { color: var(--frog-vif); font-style: italic; }
  .declaration p .period { color: var(--coral); }

  /* ===== REFERENCES ===== */
  .refs {
    background: var(--paper-2, #F0EDE6);
    padding: 120px clamp(20px, 5vw, 56px);
    border-top: 1px solid var(--ink-12);
  }
  .refs .wrap { max-width: 1100px; margin: 0 auto; }
  .refs .label {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--frog);
    margin-bottom: 32px;
    display: flex; align-items: center; gap: 12px;
  }
  .refs .label::before {
    content: ''; width: 28px; height: 1px; background: var(--frog-vif);
  }
  .refs h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 56px;
  }
  .refs h2 em { font-style: italic; color: var(--frog); }
  .refs ol {
    list-style: none; counter-reset: ref;
    border-top: 1px solid var(--ink-12);
  }
  .refs li {
    counter-increment: ref;
    padding: 28px 0 28px 56px;
    border-bottom: 1px solid var(--ink-12);
    position: relative;
    font-size: 14px; line-height: 1.55;
    color: var(--ink); opacity: 0.86;
    transition: opacity 220ms ease, transform 220ms ease;
  }
  .refs li:hover { opacity: 1; transform: translateX(4px); }
  .refs li::before {
    content: counter(ref, decimal-leading-zero);
    position: absolute; left: 0; top: 30px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--frog-vif);
  }
  .refs li a {
    color: var(--frog);
    text-decoration: none;
    border-bottom: 1px solid rgba(28, 81, 78, 0.3);
    transition: border-color 220ms;
    word-break: break-word;
  }
  .refs li a:hover { border-bottom-color: var(--frog); }
  .refs li em {
    font-style: italic; color: var(--ink);
  }

  /* ===== CTA SECTION ===== */
  .cta-section {
    background: var(--paper);
    padding: 0 clamp(20px, 5vw, 56px) 160px;
    position: relative; overflow: hidden;
  }
  .cta-section .wrap {
    max-width: 1320px; margin: 0 auto;
    background: var(--ink); color: var(--paper);
    padding: 120px 80px;
    position: relative; overflow: hidden;
  }
  .cta-section .wrap::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('/assets/cleanroom-frog-mural.jpg');
    background-size: cover; background-position: 50% 40%;
    opacity: 0.32; filter: saturate(0.8);
  }
  .cta-section .wrap::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15, 46, 44, 0.85) 0%, rgba(15, 46, 44, 0.6) 60%, rgba(15, 46, 44, 0.85) 100%);
  }
  .cta-section .inner { position: relative; z-index: 1; max-width: 800px; }
  .cta-section h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(44px, 5.6vw, 88px);
    line-height: 1; letter-spacing: -0.02em;
    color: var(--paper); margin-bottom: 32px;
    text-wrap: balance;
  }
  .cta-section h2 em { font-style: italic; color: var(--frog-vif); }
  .cta-section .sublede {
    font-size: 18px; max-width: 560px; margin: 0 0 48px;
    color: var(--paper); opacity: 0.86;
  }
  .cta-section .pills-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .cta-section .hubs {
    margin-top: 80px;
    display: flex; gap: 56px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper); opacity: 0.6;
  }
  .cta-section .hubs span { display: flex; align-items: center; gap: 10px; }
  .cta-section .hubs span::before {
    content: ''; width: 6px; height: 6px;
    background: var(--frog-vif);
  }
  .cta-section .overline {
    color: var(--frog-vif);
    border: 1px solid var(--frog-vif);
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    display: inline-block; margin-bottom: 28px;
  }

  /* ===== REVEAL ===== */
  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 800ms var(--ease-out),
                transform 800ms var(--ease-out);
  }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal-stagger > * {
    opacity: 0; transform: translateY(28px);
    transition: opacity 800ms var(--ease-out),
                transform 800ms var(--ease-out);
  }
  .reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
  .reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger.in > *:nth-child(2) { transition-delay: 100ms; }
  .reveal-stagger.in > *:nth-child(3) { transition-delay: 200ms; }
  .reveal-stagger.in > *:nth-child(4) { transition-delay: 300ms; }
  .reveal-stagger.in > *:nth-child(5) { transition-delay: 400ms; }
  .reveal-stagger.in > *:nth-child(6) { transition-delay: 500ms; }
  .reveal-img { overflow: hidden; position: relative; }
  .reveal-img::after {
    content: ''; position: absolute; inset: 0;
    background: var(--paper); transform-origin: right;
    transition: transform 1100ms cubic-bezier(0.7, 0, 0.2, 1);
  }
  .reveal-img.in::after { transform: scaleX(0); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1024px) {
    .caption-block .wrap { grid-template-columns: 1fr; gap: 56px; }
    .program .program-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .pblock .acc-head { grid-template-columns: 1fr; gap: 10px; padding-right: clamp(60px, 14vw, 80px); }
    .pblock .acc-panel-inner { grid-template-columns: 1fr; padding-right: clamp(24px, 5vw, 56px); }
    .pblock .acc-body { grid-column: 1; }
    .milestone { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
    .explore .grid { grid-template-columns: 1fr; }
    .explore .col { padding: 56px 0 !important; border-right: none; border-bottom: 0.5px solid var(--ink-12); }
    .explore .col:last-child { border-bottom: none; }
    .explore .col .num { right: 0 !important; left: auto !important; top: 56px !important; }
    .cta-section .wrap { padding: 80px 40px; }
  }
  @media (max-width: 640px) {
    .hero .ctas { flex-direction: column; align-items: stretch; }
    .cta-section .wrap { padding: 56px 24px; }
    .refs li { padding-left: 40px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }