/* ============================================================
   TechImmune, Inc. - hybrid build
   HERO zone  = Atea Pharmaceuticals hero (full-bleed video/image,
                left-aligned vertically-centered headline, fadeInUp)
   BODY zone  = Flagship Pioneering layout (dark editorial, full-bleed
                side-padding system, accent wipes, tease-sm cards,
                link-lists, cta-large, featured story, red->accent footer)
   Palette unified to TechImmune brand navy. See notes.md for decisions.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* TechImmune brand */
  --navy:#1b3d6d;          /* brand navy (hero fallback, deep brand)   */
  --navy-deep:#122a4d;     /* hero overlay deep                        */
  --ink:#14202e;           /* dark section bg (navy-tinted; replaces Flagship #1e1e22) */
  --ink-2:#0f1a26;         /* deeper band                              */
  --accent:#4f9ed9;        /* clinical blue (replaces Flagship red #ff2b2b) */
  --accent-hover:#7cb8e8;
  --white:#ffffff;
  --muted:#8fa3bd;         /* secondary label text (replaces #96a1ad)  */
  --border-dark:#2c3e57;   /* hairline on dark (replaces #3b3f44)      */
  --border-strong:var(--accent);
  --placeholder:#1c2c40;   /* image placeholder bg (replaces #262a2e)  */

  /* Flagship responsive system */
  --side-padding:20px;
  --block-spacer:40px;
  --block-spacer-sm:30px;
  --gap:1.25rem;

  --ease:cubic-bezier(.19,1,.22,1);

  /* Type - substitutes for commercial originals (see notes.md) */
  --display:'Archivo','Inter',Helvetica,Arial,sans-serif;   /* Suisse Intl (hero) sub */
  --grotesk:'Inter',Helvetica,Arial,sans-serif;             /* Neue Haas Grotesk sub  */
  --serif:'Libre Baskerville',Georgia,Times,'Times New Roman',serif; /* exact Flagship body */
}
@media (min-width:768px){ :root{ --side-padding:40px; } }
@media (min-width:960px){ :root{ --side-padding:60px; --block-spacer:60px; --block-spacer-sm:40px; } }
@media (min-width:1400px){ :root{ --side-padding:80px; --block-spacer:80px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:18px; line-height:1; color:#000; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{ margin:0; background:var(--ink); color:var(--white); font-family:var(--serif); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color .15s ease, box-shadow .15s ease; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--grotesk); }

/* eyebrow / type-label - Flagship signature 12px uppercase over hairline */
.eyebrow{
  font-family:var(--grotesk); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.4em;
  color:var(--muted);
}
.eyebrow--accent{ color:var(--accent); }

/* ============================================================
   NAVIGATION  (Flagship pattern: transparent over hero, collapses 1280px)
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:50;
  pointer-events:none;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 var(--side-padding); height:84px;
}
.nav__logo,.nav__brand{ pointer-events:auto; display:flex; align-items:center; }
.nav__logo img,.nav__brand img{ height:44px; width:auto; }
.nav__links{ display:flex; align-items:center; pointer-events:auto; }
.nav__link{
  font-family:var(--grotesk); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--white);
  padding:5px 0; margin-left:28px;
}
.nav__link:hover,.nav__link:focus,.nav__link--active{ color:var(--accent); }
.nav__cta{
  margin-left:28px; pointer-events:auto;
  font-family:var(--grotesk); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--white);
  border:1px solid rgba(255,255,255,.5); padding:10px 18px; border-radius:2px;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--white); }

/* scrolled state */
.nav.scrolled{ background:var(--ink); box-shadow:0 1px 0 var(--border-dark); }
.nav.scrolled .nav__inner{ height:68px; }

/* hamburger */
.nav__toggle{
  display:none; pointer-events:auto; background:none; border:0; padding:8px;
  flex-direction:column; gap:5px;
}
.nav__toggle span{ display:block; width:26px; height:2px; background:var(--white); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav__toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2){ opacity:0; }
.nav__toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile overlay menu */
.menu{
  position:fixed; inset:0; z-index:49; background:var(--ink);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-start;
  /* Top padding clears the fixed 84px header so the first link never sits
     under the wordmark; the list scrolls on short phones instead of being
     centered up into the header. */
  padding:104px var(--side-padding) 40px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.menu.open{ opacity:1; visibility:visible; }
/* The header is see-through until the page scrolls; while the menu is open it
   must be solid so scrolled menu items cannot show through the wordmark. */
.nav:has(.nav__toggle.open){ background:var(--ink); }
.menu a{
  font-family:var(--grotesk); font-size:30px; font-weight:600; color:var(--white);
  letter-spacing:-.01em;
  border-top:1px solid var(--border-dark); padding:18px 0; position:relative; overflow:hidden;
}
.menu a:last-child{ border-bottom:1px solid var(--border-dark); }
.menu a::before{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent);
  transition:width .4s var(--ease);
}
.menu a:hover{ color:var(--accent); }
.menu a:hover::before{ width:100%; }

@media (max-width:1279px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
}

/* ============================================================
   SECTION 1 - HERO  (Atea clone)
   full-bleed bg, left-aligned vertically-centered headline, fadeInUp
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  height:100vh; height:100dvh; min-height:620px; /* full viewport on load, no peek-through */
  background:var(--navy);                            /* fallback color (Atea used #153d00) */
}
.hero__video,
.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Live immunology scene. Sits in the same stacking slot the video occupied.
   The base gradient stands in before the first paint so the hero is never
   an empty black box on a slow connection. */
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
  background:radial-gradient(ellipse at 64% 56%, #16283c 0%, #0a1119 72%);
}
/* Overlay - Atea used NONE (its video was dark). Our bespoke clip is also dark, so the
   wash is now left-weighted: it shields the white headline on the left while keeping the
   microscopy crisp on the right. See notes.md. */
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,26,38,.80) 0%, rgba(18,42,77,.42) 42%, rgba(18,42,77,.10) 72%, rgba(18,42,77,.04) 100%),
    linear-gradient(180deg, rgba(15,26,38,.20) 0%, rgba(15,26,38,0) 30%, rgba(15,26,38,.18) 100%);
}
.hero__container{
  position:relative; z-index:2; height:100%;
  max-width:1440px; margin:0 auto; padding:0 calc(var(--side-padding) - 5px);
  display:flex; align-items:center;          /* vertical center (Atea) */
}
.hero__content{ width:100%; max-width:75%; padding-top:40px; } /* col-md-9 (Atea) */
.hero__eyebrow{ margin:0 0 22px; color:var(--accent); }
.hero__title{
  font-family:var(--display);
  font-size:3.25rem; line-height:3.625rem; font-weight:300;  /* Suisse Intl Light */
  letter-spacing:-.005em; color:var(--white); margin:0; max-width:18ch; text-wrap:balance;
}
.hero__scroll{
  position:absolute; left:var(--side-padding); bottom:30px; z-index:2;
  display:flex; align-items:center; gap:10px; color:var(--white);
  font-family:var(--grotesk); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  opacity:.85;
}
.hero__scroll i{ display:block; width:1px; height:42px; background:var(--white); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; top:-100%; left:0; width:1px; height:100%; background:var(--accent);
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{top:-100%} 60%{top:100%} 100%{top:100%} }

@media (max-width:991px){ .hero__content{ max-width:100%; } }
@media (max-width:767px){
  .hero{ height:auto; min-height:calc(750px - 4rem); max-height:none; padding:96px 0 36px; }
  /* Stack, don't overlay. With height:auto the container is only as tall as
     its content, so flex centering does nothing and the absolutely-positioned
     kicker (top:92px) landed on the headline's second line. Column flow puts
     kicker, headline, CTA in a single collision-proof stack. */
  .hero__container{ flex-direction:column; align-items:flex-start; justify-content:space-between;
    /* Fill the hero's min-height minus its own padding: the kicker stays pinned
       at the top under the wordmark, the headline and CTA sit low where the
       scroll cue used to be, with the cells between them. */
    min-height:calc(750px - 4rem - 96px - 36px); padding-bottom:28px; }
  .hero__content{ padding-top:0; }
  .hero__title{ font-size:2.5rem; line-height:2.75rem; }
  /* Drew's call: no scroll cue on phones. */
  .hero__scroll{ display:none; }
  /* With the copy anchored low, deepen the bottom wash so the kicker and
     headline stay legible over the bright cell imagery. Phones only. */
  .hero__overlay{
    background:
      linear-gradient(90deg, rgba(15,26,38,.62) 0%, rgba(18,42,77,.30) 48%, rgba(18,42,77,.08) 100%),
      linear-gradient(180deg, rgba(15,26,38,.18) 0%, rgba(15,26,38,0) 32%, rgba(15,26,38,.16) 52%, rgba(15,26,38,.78) 100%);
  }
}
@media (max-width:575px){
  .hero__title{ font-size:2.4rem; line-height:2.65rem; }
}

/* fadeInUp (WOW.js replica) */
.wow{ visibility:hidden; }
.fadeInUp{
  visibility:visible; animation:fadeInUp 1s both;
}
@keyframes fadeInUp{
  0%{ opacity:0; transform:translateY(20px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   Shared dark-section + module system (Flagship)
   ============================================================ */
.block--dark{ background:var(--ink); }
.module{ margin:0 var(--side-padding); }
.module + .module,
.section{ margin-top:var(--block-spacer); }
.section{ background:var(--ink); }
.topper{
  border-top:1px solid var(--border-dark); padding:10px 0;
  display:flex; justify-content:space-between; align-items:center;
}

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   SECTION 2 - Flagship page-hero (relocated as second section)
   ============================================================ */
.fhero{ background:var(--ink); padding-top:calc(var(--block-spacer) + 20px); }
.fhero__inner{ margin:0 var(--side-padding); display:grid; grid-template-columns:1fr; gap:var(--gap); }
.fhero__title{
  font-family:var(--grotesk); font-weight:600; color:var(--white);
  font-size:clamp(2rem, 1.2rem + 3.4vw, 3.4rem); line-height:1.06em;
  letter-spacing:-.02em; text-wrap:balance;
  margin:0 0 26px; max-width:16ch;
}
.fhero__text{
  font-family:var(--serif); font-weight:400; font-size:clamp(1rem,.95rem + .3vw,1.18rem);
  line-height:1.65em; letter-spacing:-.01em; color:var(--white); max-width:46ch; margin:0 0 28px;
}
.fhero__cta{ margin-bottom:30px; }
.fhero__media{ display:grid; grid-template-columns:1fr 1.3fr; gap:var(--gap); }
.fhero__media .sq{ position:relative; padding-bottom:100%; overflow:hidden; background:var(--placeholder); }
.fhero__media .sq img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fhero__media .tall{ grid-row:span 2; padding-bottom:0; height:100%; min-height:240px; }


@media (min-width:960px){
  .fhero__inner{ grid-template-columns:7fr 5fr; align-items:end; }
  .fhero__media{ grid-template-columns:1fr 1fr; }
  .fhero__media .tall{ grid-row:span 2; }
}

/* ---------- CTA link (Explore More) - Flagship text CTA ---------- */
.cta-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--grotesk); font-size:14px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); padding-bottom:6px; position:relative;
}
.cta-link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--border-dark); }
.cta-link span.bar{ position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); transition:width .4s var(--ease); }
.cta-link:hover{ color:var(--accent); }
.cta-link:hover span.bar{ width:100%; }
.cta-link svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.cta-link:hover svg{ transform:translateX(4px); }

/* solid button variant (forms) */
.btn{
  display:inline-block; background:var(--accent); color:var(--white);
  font-family:var(--grotesk); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  border:0; border-radius:2px; padding:14px 30px; transition:background-color .3s var(--ease);
}
.btn:hover{ background:var(--accent-hover); }

/* full-bleed technology image panel */
.tech-band{ width:100%; line-height:0; }
.tech-band img{ width:100%; height:auto; display:block; max-height:640px; object-fit:cover; object-position:center; }

/* ============================================================
   STATS band (disease burden) - count-up on scroll
   ============================================================ */
.stats{ background:var(--ink-2); padding:var(--block-spacer) 0; margin-top:var(--block-spacer); }
.stats__inner{ margin:0 var(--side-padding); }
.stats__head{ border-top:1px solid var(--border-dark); padding-top:10px; margin-bottom:34px; }
.stats__grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px var(--gap); }
.stat__num{ font-family:var(--grotesk); font-weight:700; font-size:clamp(2.4rem,1.4rem + 3vw,3.6rem); line-height:1; letter-spacing:-.02em; color:var(--white); }
.stat__num .suffix{ color:var(--accent); }
.stat__label{ margin-top:12px; font-family:var(--serif); font-size:.95rem; line-height:1.55em; color:var(--muted); max-width:30ch; }
@media (min-width:768px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } }

/* ============================================================
   STORY CLUSTER - tease-sm cards (Flagship)
   ============================================================ */
.cluster{ margin:var(--block-spacer) var(--side-padding) 0; }
.cluster__head{ border-top:1px solid var(--border-dark); padding-top:10px; margin-bottom:28px; display:flex; justify-content:space-between; align-items:baseline; }
.teases{ display:flex; flex-wrap:wrap; }
.tease{ width:48%; margin-right:4%; margin-bottom:34px; }
.tease:nth-of-type(2n+2){ margin-right:0; }
.tease__topper{ border-top:1px solid var(--border-dark); padding:10px 0; display:flex; justify-content:space-between; align-items:center; }
.tease__type{ color:var(--accent); }
.tease__date{ color:var(--muted); }
.tease__img{ position:relative; padding-bottom:100%; overflow:hidden; background:var(--placeholder); margin-bottom:15px; }
.tease__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .6s var(--ease); }
.tease__img::before{ content:""; position:absolute; left:0; bottom:0; height:6px; width:0; background:var(--accent); z-index:2; transition:width .5s var(--ease); }
.tease:hover .tease__img::before{ width:100%; }
.tease:hover .tease__img img{ transform:scale(1.04); }
.tease__title{ font-family:var(--grotesk); font-weight:500; font-size:clamp(1rem,.9rem + .4vw,1.25rem); line-height:1.25em; color:var(--white); transition:color .2s ease; }
.tease:hover .tease__title{ color:var(--accent); }
.tease__author{ margin-top:8px; color:var(--muted); }

@media (min-width:600px){ .tease{ width:30%; margin-right:5%; } .tease:nth-of-type(2n+2){ margin-right:5%; } .tease:nth-of-type(3n+3){ margin-right:0; } }
@media (min-width:960px){ .tease{ width:23%; margin-right:2.66%; } .tease:nth-of-type(3n+3){ margin-right:2.66%; } .tease:nth-of-type(4n+4){ margin-right:0; } }

/* ============================================================
   STORY CLUSTER MINIMAL (partnerships)
   ============================================================ */
.minimal{ margin:var(--block-spacer) var(--side-padding) 0; }
.minimal__head{ border-bottom:1px solid var(--border-dark); padding-bottom:10px; margin-bottom:20px; }
.minimal__row{ display:flex; flex-wrap:wrap; gap:var(--gap); margin-top:var(--block-spacer-sm); }
.minimal__item{ flex:1 1 280px; border-top:1px solid var(--border-dark); padding-top:16px; }
.minimal__item h4{ font-family:var(--grotesk); font-weight:800; font-size:1.35rem; color:var(--white); margin:8px 0 8px; transition:color .2s; }
.minimal__item:hover h4{ color:var(--accent); }
.minimal__item p{ font-family:var(--serif); font-size:.95rem; line-height:1.6em; color:var(--muted); margin:0; }

/* ============================================================
   PROGRAMS (Our Companies) - two columns: link-list + cta-large
   ============================================================ */
.companies{ display:flex; flex-wrap:wrap; margin:var(--block-spacer) var(--side-padding) 0; gap:var(--gap); }
.companies__col{ flex:1 1 320px; }
.companies__title{ border-top:6px solid var(--white); color:var(--white); padding:10px 0 30px; }
.companies__title .eyebrow{ color:var(--white); }

.link-list__link{ display:block; border-bottom:1px solid var(--border-dark); padding:20px 0; }
.link-list__title{ font-family:var(--grotesk); font-weight:600; font-size:clamp(1.25rem,1rem + .6vw,1.55rem); line-height:1.2em; letter-spacing:-.01em; color:var(--white); transition:color .2s; }
.link-list__link:hover .link-list__title{ color:var(--accent); }
.link-list__info{ margin-top:8px; color:var(--muted); }

/* cta-large - signature white-panel wipe */
.cta-large{ margin-top:0; }
.cta-large__link{ display:block; position:relative; overflow:hidden; background:var(--accent); padding:30px; }
.cta-large__link::before{ content:""; position:absolute; inset:0; width:0; background:var(--white); transition:width .5s var(--ease); z-index:0; }
.cta-large__link:hover::before{ width:100%; }
.cta-large__inner{ position:relative; z-index:1; }
.cta-large__head{ border-top:1px solid var(--white); padding-top:12px; margin-bottom:60px; }
.cta-large__head .eyebrow{ color:var(--white); }
.cta-large__title{ font-family:var(--grotesk); font-weight:800; font-size:clamp(1.25rem,1rem + .6vw,1.55rem); line-height:1.2em; color:var(--white); }
.cta-large__link:hover .cta-large__head .eyebrow{ color:var(--navy-deep); }
.cta-large__link:hover .cta-large__title{ color:var(--navy-deep); }
@media (min-width:960px){ .cta-large__link{ padding:40px; } }

/* ============================================================
   LEADERSHIP grid (tease cards w/ headshots)
   ============================================================ */
.team{ margin:var(--block-spacer) var(--side-padding) 0; }
.team__head{ border-top:1px solid var(--border-dark); padding-top:10px; margin-bottom:10px; }
.team__lead{ font-family:var(--serif); color:var(--muted); font-size:.98rem; line-height:1.6em; max-width:60ch; margin:0 0 32px; }
.team__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px var(--gap); }
.person__img{ position:relative; padding-bottom:118%; overflow:hidden; background:var(--placeholder); margin-bottom:14px; }
.person__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(100%) contrast(105%); transition:filter .5s var(--ease), transform .6s var(--ease); }
.person:hover .person__img img{ filter:none; transform:scale(1.03); }
.person__img::before{ content:""; position:absolute; left:0; bottom:0; height:5px; width:0; background:var(--accent); z-index:2; transition:width .5s var(--ease); }
.person:hover .person__img::before{ width:100%; }
/* Every name block reserves two lines, so a name that wraps (James F. Young,
   PhD; Trevor Jones, CBE, PhD, DSc) does not push its role label lower than a
   one-line neighbour's. Roles then sit level across every row. */
.person__name{ font-family:var(--grotesk); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; color:var(--white);
  line-height:1.25; min-height:2.5em; }
.person__role{ margin-top:5px; color:var(--accent); font-family:var(--grotesk); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.person__bio{ margin-top:8px; font-family:var(--serif); font-size:.85rem; line-height:1.55em; color:var(--muted); }
@media (min-width:600px){ .team__grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .team__grid{ grid-template-columns:repeat(4,1fr); } }
.team__sub{ margin-top:46px; }

/* ============================================================
   FEATURED STORY
   ============================================================ */
.featured{ margin:var(--block-spacer) var(--side-padding) 0; }
.featured__link{ display:block; }
.featured__image{ position:relative; background:var(--placeholder); margin:0 0 24px; max-height:70vh; overflow:hidden; }
.featured__image img{ width:100%; height:100%; object-fit:cover; object-position:center; max-height:70vh; transition:transform .8s var(--ease); }
.featured__image::before{ content:""; position:absolute; left:0; bottom:0; height:6px; width:0; background:var(--accent); z-index:2; transition:width .5s var(--ease); }
.featured__link:hover .featured__image::before{ width:100%; }
.featured__link:hover .featured__image img{ transform:scale(1.03); }
.featured__type{ border-top:1px solid var(--border-dark); padding:10px 0; }
.featured__title{ font-family:var(--grotesk); font-weight:600; font-size:clamp(1.6rem,1rem + 2.4vw,3.1rem); line-height:1.06em; letter-spacing:-.02em; text-wrap:balance; color:var(--white); max-width:24ch; transition:color .2s; }
.featured__link:hover .featured__title{ color:var(--accent); }
.featured__author{ margin-top:15px; color:var(--muted); }
@media (min-width:960px){ .featured__image{ margin-bottom:40px; } }

/* ============================================================
   CONTACT / web-lead
   ============================================================ */
.contact{ background:var(--ink-2); margin-top:var(--block-spacer); padding:var(--block-spacer) 0; }
.contact__inner{ margin:0 var(--side-padding); display:grid; grid-template-columns:1fr; gap:40px; }
.contact__head{ border-top:6px solid var(--accent); padding-top:18px; }
.contact__title{ font-family:var(--grotesk); font-weight:600; font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem); line-height:1.06em; letter-spacing:-.02em; text-wrap:balance; color:var(--white); margin:14px 0 18px; max-width:18ch; }
.contact__text{ font-family:var(--serif); color:var(--muted); line-height:1.65em; max-width:42ch; margin:0 0 26px; }
.contact__details li{ font-family:var(--grotesk); font-size:13px; letter-spacing:.04em; color:var(--white); margin-bottom:12px; display:flex; gap:10px; }
.contact__details a:hover{ color:var(--accent); }
.contact__details .lbl{ color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.12em; min-width:78px; padding-top:2px; }

.form .row{ display:grid; grid-template-columns:1fr; gap:16px; }
.form label{ display:block; font-family:var(--grotesk); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.form input,.form select,.form textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--border-dark);
  color:var(--white); font-family:var(--serif); font-size:1rem; padding:10px 0; transition:border-color .3s var(--ease);
}
.form input::placeholder,.form textarea::placeholder{ color:#5e708a; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--accent); }
.form select option{ color:#000; }
.form textarea{ resize:vertical; min-height:90px; }
.form .field{ margin-bottom:22px; }
@media (min-width:768px){ .form .row{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .contact__inner{ grid-template-columns:1fr 1fr; gap:var(--gap); } }

/* ============================================================
   FOOTER  (Flagship - 6px accent top border)
   ============================================================ */
.footer{ background:var(--ink); padding:var(--side-padding); position:relative; z-index:2; }
.footer__flex{ border-top:6px solid var(--accent); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; padding-top:24px; }
.footer__links{ display:flex; flex-wrap:wrap; gap:22px; }
.footer__links a{ font-family:var(--grotesk); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--white); }
.footer__links a:hover{ color:var(--accent); }
.footer__social{ display:flex; gap:16px; }
.footer__social a{ display:inline-flex; }
.footer__social svg{ width:20px; height:20px; fill:var(--accent); transition:fill .25s ease; }
.footer__social a:hover svg{ fill:var(--white); }
.footer__secondary{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; border-top:1px solid var(--border-dark); margin-top:24px; padding-top:24px; }
.footer__copyright{ color:var(--accent); font-family:var(--grotesk); font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.footer__addr{ color:var(--muted); font-family:var(--grotesk); font-size:12px; letter-spacing:.04em; }

/* utility */
.contained-1440{ max-width:1440px; margin:0 auto; }

/* ============================================================
   PARTNERSHIPS + PIPELINE  (unified sci-block)
   ============================================================ */
.sci-block{ background:var(--ink-2); padding:var(--block-spacer) 0; }

/* Partnerships strip */
.sci-partnerships{ margin:0 var(--side-padding); padding-bottom:var(--block-spacer-sm); border-bottom:1px solid var(--border-dark); }
.sci-partnerships__head{ border-top:1px solid var(--border-dark); padding:10px 0; margin-bottom:28px; }
.sci-partnerships__grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:0 48px; }
.sci-partner__rule{ display:block; width:1px; background:var(--border-dark); align-self:stretch; }
.sci-partner__type{ display:block; margin-bottom:8px; }
.sci-partner__name{ font-family:var(--grotesk); font-weight:600; font-size:clamp(1.25rem,1rem + .7vw,1.65rem); letter-spacing:-.01em; color:var(--white); margin:10px 0 12px; line-height:1.15em; }
.sci-partner__desc{ font-family:var(--serif); font-size:.95rem; line-height:1.65em; color:var(--muted); margin:0; }

/* Programs: pipeline left + research/why right */
.sci-programs{ margin:0 var(--side-padding); padding-top:var(--block-spacer-sm); display:flex; flex-wrap:wrap; gap:var(--gap); }
.sci-programs__pipeline{ flex:1 1 320px; }
.sci-programs__label{ border-top:1px solid var(--border-dark); padding:10px 0 20px; }
.sci-programs__right{ flex:1 1 260px; display:flex; flex-direction:column; gap:2px; }

/* Research card - editorial dark, 4px accent left border */
.sci-research{ display:block; background:var(--ink); border-left:4px solid var(--accent); padding:24px 26px 28px; transition:border-color .2s; }
.sci-research:hover{ border-color:var(--accent-hover); }
.sci-research__label{ display:block; margin-bottom:14px; }
.sci-research__title{ font-family:var(--grotesk); font-weight:800; font-size:clamp(1rem,.9rem + .3vw,1.15rem); line-height:1.3em; color:var(--white); margin:0; transition:color .2s; }
.sci-research:hover .sci-research__title{ color:var(--accent); }

/* Why T Cells */
.sci-why{ flex:1; }
.sci-why__head{ border-top:1px solid var(--border-dark); padding:10px 0; }

/* Responsive */
@media (max-width:767px){
  .sci-partnerships__grid{ grid-template-columns:1fr; gap:28px 0; }
  .sci-partner__rule{ width:100%; height:1px; align-self:auto; }
}

/* ============================================================
   PREMIUM PASS - atmosphere, depth, cinematic motion, signature modules
   Additive layer. Sits at end of file so it wins on single-class specificity.
   ============================================================ */

/* ---------- Section depth: flat fills -> barely-there gradients ---------- */
.block--dark{ background:linear-gradient(180deg,#17273a 0%, #14202e 58%); }
.stats{ background:linear-gradient(180deg,#101c29 0%, #0e1825 100%); position:relative; overflow:hidden; }
.contact{ background:linear-gradient(180deg,#101c29 0%, #0d1622 100%); }
.sci-block{ background:linear-gradient(180deg,#13212f 0%, #0f1a26 62%); }

/* ---------- Filmic grain (kills the flat-digital look) ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ---------- Hero: slow Ken-Burns, vignette, headline glow ---------- */
@keyframes heroZoom{ from{ transform:scale(1.02); } to{ transform:scale(1.1); } }
.hero__video{ animation:heroZoom 26s var(--ease) forwards; will-change:transform; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 52% at 22% 48%, rgba(79,158,217,.16), transparent 70%),
    radial-gradient(130% 120% at 50% 122%, rgba(8,14,22,.58), transparent 60%);
}
.hero__content{ transition:opacity .2s linear; will-change:transform, opacity; }

/* ---------- Stats: soft clinical glow + count-up axis line ---------- */
.stats::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 80% at 50% -4%, rgba(79,158,217,.12), transparent 68%);
}
.stats__inner{ position:relative; z-index:1; }
.stat{ position:relative; padding-top:18px; }
.stat::before{ content:""; position:absolute; top:0; left:0; width:0; height:1px; background:var(--accent); transition:width .9s var(--ease) .1s; }
.stat.in::before{ width:42px; }

/* ---------- Staggered, cinematic reveals ---------- */
.reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- Refined buttons / hover lift ---------- */
.btn{ position:relative; box-shadow:0 0 0 rgba(79,158,217,0); transition:background-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.btn:hover{ box-shadow:0 8px 30px -8px rgba(79,158,217,.5); transform:translateY(-1px); }

/* ============================================================
   SIGNATURE MODULE - animated pipeline stage tracker
   ============================================================ */
.sci-pipeline{
  margin:0 var(--side-padding); padding:var(--block-spacer-sm) 0;
  border-bottom:1px solid var(--border-dark); position:relative;
}
.sci-pipeline::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 100% at 78% 50%, rgba(79,158,217,.07), transparent 70%);
}
.sci-pipeline__head{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; border-top:1px solid var(--border-dark); padding:10px 0 26px; position:relative; }

.track{ display:grid; grid-template-columns:minmax(150px,1fr) 2.15fr; gap:22px 26px; align-items:center; position:relative; }
.track__head-spacer{ }
.track__stages{ display:grid; grid-template-columns:repeat(4,1fr); }
.track__stages span{
  font-family:var(--grotesk); font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); padding-left:12px; border-left:1px solid var(--border-dark);
}
.track__stages span:first-child{ border-left:0; padding-left:0; }

.track__name .track__title{ font-family:var(--grotesk); font-weight:600; font-size:1.05rem; line-height:1.2em; letter-spacing:-.01em; color:var(--white); }
.track__name .track__sub{ margin-top:6px; color:var(--muted); }
.track__name .track__status{ margin-top:8px; font-family:var(--grotesk); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.track__name{ text-decoration:none; display:block; }
.track__name:hover .track__title{ color:var(--accent); transition:color .3s var(--ease); }

.track__bar{
  position:relative; height:8px; border-radius:999px;
  background:
    linear-gradient(90deg, transparent calc(25% - .5px), var(--border-dark) 25%, transparent calc(25% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), var(--border-dark) 50%, transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(75% - .5px), var(--border-dark) 75%, transparent calc(75% + .5px)),
    rgba(255,255,255,.06);
}
.track__fill{
  position:absolute; left:0; top:0; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--navy) 0%, var(--accent) 100%);
  transition:width 1.2s var(--ease) .15s;
}
.track__fill::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 14px 2px rgba(79,158,217,.6);
  opacity:0; transition:opacity .4s var(--ease) 1s;
}
.sci-pipeline.in .track__fill{ width:var(--w); }
.sci-pipeline.in .track__fill::after{ opacity:1; }

@media (max-width:680px){
  .track{ grid-template-columns:1fr; gap:6px 0; }
  .track__head-spacer{ display:none; }
  .track__stages{ margin-bottom:10px; align-items:end; }
  /* Four stage names across a phone: smaller, tighter, and every label bottom
     aligned on a two-line row so a wrapped one (IND-ENABLING, ASSAY
     DEVELOPMENT) sits level with the single-word ones instead of jogging. */
  .track__stages span{
    font-size:9.5px; letter-spacing:.04em; line-height:1.25; padding-left:6px;
    min-height:2.5em; display:flex; align-items:flex-end; overflow-wrap:normal;
  }
  .track__name{ margin-top:22px; }
  .track__bar{ margin-top:12px; }
}

/* ============================================================
   LEADERSHIP - featured marquee row
   ============================================================ */
.team__featured{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px var(--gap); margin-bottom:42px; }
@media (min-width:600px){ .team__featured{ grid-template-columns:repeat(4,1fr); } }
.team__featured .person__img{ padding-bottom:122%; }
.team__featured .person__img img{ filter:grayscale(100%) contrast(106%); }
.team__featured .person:hover .person__img img{ filter:none; }
.person__cred{
  font-family:var(--grotesk); font-size:10.5px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
  border-top:1px solid var(--border-dark); padding-top:10px;
}
.team__featured .person__name{ font-size:1.18rem; }
.team__divider{ border-top:1px solid var(--border-dark); padding-top:10px; margin-bottom:24px; }
.team__divider .eyebrow{ color:var(--muted); }

/* ============================================================
   Lenis momentum-scroll support
   ============================================================ */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ============================================================
   Reduced-motion: disable cinematic layers
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero__video{ animation:none; }
  .track__fill{ transition:none; }
  .reveal{ transition:opacity .4s ease; transform:none; }
  .stat::before{ transition:none; }
}
/* Touch devices: reveals fade in place, no slide, so grid rows are level at
   every instant while scrolling (the desktop slide-and-stagger read as uneven
   cards on a phone). */
@media (hover:none) and (pointer:coarse){
  .reveal{ transform:none; transition:opacity .35s ease; }
}

/* ============================================================
   NEWSROOM + ARTICLE + LEGAL PAGES
   Self-hosted content system. Every story that lived on the old
   techimmune.com/category/news/ index is rebuilt natively here so
   nothing on the new site links back to the retired domain.
   Shared by news.html, the five article pages, and privacy.html.
   ============================================================ */

/* ---- shared subpage hero (clears the fixed nav) ---- */
.page-hero{
  background:linear-gradient(180deg,#17273a 0%, #14202e 100%);
  padding:150px var(--side-padding) 0;
}
.page-hero__inner{ max-width:1180px; margin:0 auto; }
.page-hero__eyebrow{ color:var(--accent); margin:0 0 18px; }
.page-hero__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem); line-height:1.04em;
  letter-spacing:-.02em; color:#fff; max-width:20ch; margin:0 0 20px; text-wrap:balance;
}
.page-hero__lead{
  font-family:var(--serif); color:var(--muted);
  font-size:clamp(1.02rem,.96rem + .4vw,1.22rem); line-height:1.7em;
  max-width:62ch; margin:0 0 42px;
}

/* ---- newsroom index ---- */
.newsroom{ background:linear-gradient(180deg,#14202e 0%, #101c29 100%); padding-bottom:var(--block-spacer); }
.news-section{ margin:0 var(--side-padding); padding-top:var(--block-spacer-sm); }
.news-section__head{
  border-top:1px solid var(--border-dark); padding-top:12px; margin-bottom:30px;
  display:flex; justify-content:space-between; align-items:baseline; gap:18px 28px; flex-wrap:wrap;
}
.news-section__note{ color:var(--muted); max-width:50ch; font-family:var(--grotesk); font-size:12px; letter-spacing:.03em; line-height:1.5em; }

/* internal stories reuse .teases / .tease from the homepage cluster */

/* external "further reading" rows */
.news-rows{ border-top:1px solid var(--border-dark); }
.news-row{
  display:grid; grid-template-columns:150px 1fr auto 16px; gap:10px 28px; align-items:center;
  border-bottom:1px solid var(--border-dark); padding:24px 2px; position:relative;
}
.news-row__pub{ font-family:var(--grotesk); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.news-row__title{ font-family:var(--grotesk); font-weight:500; font-size:clamp(1.02rem,.95rem + .4vw,1.3rem); line-height:1.3em; color:var(--white); transition:color .2s ease; }
.news-row__date{ font-family:var(--grotesk); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.news-row__arrow{ width:15px; height:15px; color:var(--muted); transition:transform .3s var(--ease), color .2s ease; }
.news-row:hover .news-row__title{ color:var(--accent); }
.news-row:hover .news-row__arrow{ color:var(--accent); transform:translate(3px,-3px); }
@media (max-width:720px){
  .news-row{ grid-template-columns:1fr 16px; gap:6px 16px; }
  .news-row__pub{ grid-column:1 / -1; }
  .news-row__date{ display:none; }
}

/* ---- featured press panel (home) + press row treatment (home + newsroom) ----
   The independent coverage is newer and more relevant than the internal
   announcements, so it leads the news section inside its own tinted panel:
   display-font titles, a New tag on this month's piece, and a ringed arrow. */
.press{
  position:relative; border:1px solid rgba(79,158,217,.3); border-radius:2px;
  background:linear-gradient(180deg, rgba(79,158,217,.11) 0%, rgba(79,158,217,.03) 100%);
  padding:clamp(26px,2vw + 16px,44px) clamp(20px,2.4vw + 8px,48px) clamp(24px,1.6vw + 14px,38px);
}
.press::before{ content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--accent); }
.press__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px 40px; flex-wrap:wrap;
  margin-bottom:26px;
}
.press__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); line-height:1.08em; letter-spacing:-.015em;
  color:var(--white); margin:12px 0 0; text-wrap:balance;
}
.press__note{ font-family:var(--serif); color:var(--muted); font-size:.95rem; line-height:1.6em; max-width:40ch; margin:0; }
.press__more{ margin-top:24px; display:inline-flex; }
.cluster__head--after-press{ margin-top:64px; }

.news-rows--press{ border-top:1px solid rgba(255,255,255,.16); }
.news-rows--press .news-row{
  grid-template-columns:170px 1fr auto 44px; gap:8px 32px; padding:26px 14px; margin:0 -14px;
  border-bottom:1px solid rgba(255,255,255,.16); transition:background-color .25s ease;
}
.news-rows--press .news-row:hover{ background:rgba(255,255,255,.04); }
.news-rows--press .news-row__pub{ font-size:12px; }

/* Publisher mastheads. Sourced as vectors (NYT and LA Times from Wikimedia
   Commons, both public domain text logos; Smithsonian Magazine's own white
   horizontal wordmark from smithsonianmag.com). Used to attribute the link to
   its publisher, never as an endorsement badge: these articles report on Long
   COVID and do not mention TechImmune. Forced to one flat white so three
   different typefaces read as one row, and optically sized per mark rather
   than set to equal height. */
.u-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.news-row__pub--logo{ display:flex; align-items:center; }
.news-row__logo{
  display:block; width:auto; max-width:100%;
  filter:brightness(0) invert(1); opacity:.82;
  transition:opacity .25s ease;
}
.news-row__logo--nyt{ height:20px; }
.news-row__logo--latimes{ height:16px; }
.news-row__logo--smithsonian{ height:18px; }
.news-row__logo--abc{ height:21px; }
.news-row__logo--cidrap{ height:19px; }
.news-row__logo--fox{ height:30px; }
.news-rows--press .news-row:hover .news-row__logo{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .news-row__logo{ transition:none; } }
.news-rows--press .news-row__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1rem + .9vw,1.7rem); line-height:1.22em; letter-spacing:-.01em;
}
.news-rows--press .news-row:hover .news-row__title{ color:var(--white); }
.news-row__meta{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.news-row__tag{
  font-family:var(--grotesk); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--accent); padding:4px 7px 3px; border-radius:2px; line-height:1;
}
.news-row__go{
  width:44px; height:44px; border:1px solid rgba(255,255,255,.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--white); flex:none;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.news-row__go svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.news-rows--press .news-row:hover .news-row__go{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.news-rows--press .news-row:hover .news-row__go svg{ transform:translate(2px,-2px); }
@media (max-width:720px){
  .press{ padding:24px 18px 22px; }
  .news-rows--press .news-row{ grid-template-columns:1fr 40px; gap:8px 14px; padding:20px 0; margin:0; }
  .news-rows--press .news-row__pub{ grid-column:1 / -1; }
  .news-rows--press .news-row__meta{ grid-column:1; }
  .news-rows--press .news-row__date{ display:inline; }
  .news-row__go{ grid-column:2; grid-row:2 / span 2; width:40px; height:40px; }
}

/* ---- article page ---- */
.article{ background:linear-gradient(180deg,#17273a 0%, #14202e 26%); padding:150px var(--side-padding) 0; }
.article__head{ max-width:760px; margin:0 auto; }
.article__eyebrow{ color:var(--accent); margin:0 0 20px; display:flex; gap:13px; align-items:center; flex-wrap:wrap; }
.article__eyebrow .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); display:inline-block; }
.article__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2rem,1.3rem + 3vw,3.5rem); line-height:1.08em;
  letter-spacing:-.02em; color:#fff; margin:0 0 22px; text-wrap:balance;
}
.article__dek{
  font-family:var(--serif); font-style:italic; color:var(--muted);
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem); line-height:1.6em; margin:0 0 28px;
}
.article__byline{
  font-family:var(--grotesk); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border-top:1px solid var(--border-dark); padding-top:18px;
}
.article__byline strong{ color:var(--white); font-weight:600; }
.article__figure{ max-width:1100px; margin:48px auto 0; }
.article__figure img{ width:100%; height:auto; border-radius:3px; display:block; aspect-ratio:16/9; object-fit:cover; object-position:center; }
.article__figure--portrait{ max-width:460px; }
.article__figure--portrait img{ aspect-ratio:4/5; object-position:center top; }
.article__figure figcaption{ font-family:var(--grotesk); font-size:11px; letter-spacing:.06em; color:var(--muted); margin-top:12px; text-transform:uppercase; }
.article__body{ max-width:760px; margin:0 auto; padding:52px 0 0; }
.article__body p{ font-family:var(--serif); color:#c5d2e2; font-size:1.06rem; line-height:1.82em; margin:0 0 26px; }
.article__body > p:last-child{ margin-bottom:0; }
.article__body h2{
  font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); line-height:1.2em; letter-spacing:-.01em;
  margin:46px 0 20px;
}
.article__body ul{ margin:0 0 26px; padding:0; }
.article__body li{
  font-family:var(--serif); color:#c5d2e2; font-size:1.06rem; line-height:1.7em;
  position:relative; padding-left:26px; margin-bottom:13px;
}
.article__body li::before{ content:""; position:absolute; left:0; top:.66em; width:10px; height:2px; background:var(--accent); }
.article__quote{ border-left:3px solid var(--accent); margin:42px 0; padding:6px 0 6px 28px; }
.article__quote p{
  font-family:var(--display); font-weight:300; font-style:normal;
  font-size:clamp(1.15rem,.85rem + 1.4vw,1.9rem); line-height:1.32em; color:#fff; margin:0 0 12px;
}
.article__quote cite{ font-family:var(--grotesk); font-style:normal; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }

/* source credit / original-coverage box */
.article__source{
  max-width:760px; margin:48px auto 0; background:#111b27;
  border:1px solid var(--border-dark); border-left:4px solid var(--accent);
  padding:24px 28px; border-radius:2px;
}
.article__source .lbl{ display:block; font-family:var(--grotesk); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:9px; }
.article__source p{ font-family:var(--grotesk); font-size:.92rem; line-height:1.65em; color:var(--muted); margin:0; }
.article__source a{ color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
.article__source a:hover{ color:#fff; }

/* article footer nav */
.article__foot{
  max-width:760px; margin:52px auto 0; border-top:1px solid var(--border-dark);
  padding:26px 0 var(--block-spacer); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}

/* ---- legal / privacy prose ---- */
.legal{ max-width:780px; margin:0 auto; padding:52px var(--side-padding) var(--block-spacer); }
.legal__updated{ font-family:var(--grotesk); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 36px; }
.legal h2{ font-family:var(--display); font-weight:400; color:#fff; font-size:clamp(1.3rem,1rem + 1.2vw,1.7rem); margin:42px 0 16px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p{ font-family:var(--serif); color:#c5d2e2; font-size:1.02rem; line-height:1.78em; margin:0 0 18px; }
.legal ul{ padding-left:24px; margin:0 0 18px; }
.legal li{ list-style:disc; font-family:var(--serif); color:#c5d2e2; font-size:1.02rem; line-height:1.7em; margin-bottom:10px; }
.legal a{ color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:#fff; }

@media (prefers-reduced-motion:reduce){
  .news-row__arrow, .article__figure img, .tease__img img{ transition:none; }
  .news-row:hover .news-row__arrow{ transform:none; }
}

/* ============================================================
   FAQ  (native <details>, AEO answer surface, site tokens)
   ============================================================ */
.faq{ padding:var(--block-spacer) 0; }
.faq__inner{ margin:0 var(--side-padding); max-width:900px; }
@media (min-width:960px){ .faq__inner{ margin:0 auto; padding:0 var(--side-padding); } }
.faq__head{ margin-bottom:36px; }
.faq__head .eyebrow{ display:block; margin-bottom:14px; }
.faq__title{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem); line-height:1.18; text-wrap:balance;
  color:#fff; margin:0;
}
.faq__list{ border-top:1px solid var(--border-dark); }
.faq-item{ border-bottom:1px solid var(--border-dark); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 0; padding-right:8px;
  font-family:var(--grotesk); font-weight:500;
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem); line-height:1.4;
  color:#fff; transition:color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent); }
.faq-item summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px; border-radius:2px;
}
/* plus / minus toggle mark */
.faq-mark{
  flex:0 0 auto; position:relative; width:18px; height:18px; margin-left:auto;
}
.faq-mark::before,
.faq-mark::after{
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:2px; background:var(--accent);
  transform:translate(-50%,-50%); transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.faq-mark::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-mark::after{ opacity:0; transform:translate(-50%,-50%) rotate(0deg); }
.faq-answer{ padding:0 0 26px; max-width:760px; }
.faq-answer p{
  font-family:var(--serif); color:#c5d2e2;
  font-size:1.02rem; line-height:1.78em; margin:0;
}
@media (prefers-reduced-motion:reduce){
  .faq-item summary,
  .faq-mark::before,
  .faq-mark::after{ transition:none; }
}

/* ============================================================
   PIPELINE GROUPS + SHARED MODAL  (post-call restructure)
   Dr. Young, 2026-08-02: pipeline splits into two subcategories,
   every program opens a fuller explanation, leadership cards carry
   name and role only with the bio behind a click.
   ============================================================ */

.track-group{ margin-top:44px; }
.track-group:first-child{ margin-top:0; }
.track-group__name{
  font-family:var(--grotesk); font-size:12px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase; color:var(--white);
  padding-bottom:14px; margin-bottom:26px;
  border-bottom:1px solid var(--border-dark);
}
/* program rows are buttons now; strip the UA button chrome */
button.track__name{
  background:none; border:0; padding:0; margin:0; width:100%;
  text-align:left; font:inherit; color:inherit; cursor:pointer;
}
button.track__name:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.track__code{
  font-family:var(--grotesk); font-weight:700; font-size:.78em;
  letter-spacing:.06em; color:var(--accent); margin-right:2px;
}

/* ---- Modal ---- */
/* The OVERLAY is the scroll container, never the panel. iOS Safari will not
   reliably scroll an overflow:auto element that carries a transform (the
   panel's entrance transition), and a swipe on such a panel fell through to
   the page behind it. A fixed, full-screen scroller with no transform is the
   one construction iOS honours every time; the panel just grows to its content
   and the overlay scrolls it. The body is pinned by modal.js meanwhile. */
.modal{ position:fixed; inset:0; z-index:9000; display:flex;
  align-items:flex-start; justify-content:center; padding:24px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.modal__backdrop{ position:fixed; inset:0; background:rgba(6,11,18,.82);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .22s var(--ease); }
.modal--in .modal__backdrop{ opacity:1; }
.modal__panel{
  position:relative; z-index:1; width:min(720px,100%);
  /* margin:auto centres a short dialog in the flex overlay and collapses to
     0 when the panel is taller than the screen, so the overlay scrolls. */
  margin:auto; flex:none;
  background:#111b27; border-left:4px solid var(--accent);
  padding:44px 48px 46px; border-radius:2px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px);
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.modal--in .modal__panel{ opacity:1; transform:none; }
.modal__close{
  position:absolute; top:16px; right:16px; width:38px; height:38px;
  background:none; border:0; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.modal__close svg{ width:20px; height:20px; }
.modal__close:hover{ color:var(--white); background:rgba(255,255,255,.07); }
.modal__close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.modal__eyebrow{ color:var(--accent); display:block; }
.modal__title{
  font-family:var(--display); font-weight:300; line-height:1.12em;
  font-size:clamp(1.6rem,1.1rem + 1.8vw,2.3rem); color:var(--white); margin-top:12px;
}
.modal__role{ font-family:var(--grotesk); font-size:.9rem; color:var(--accent); margin-top:8px; }
.modal__body{
  font-family:var(--serif); font-size:1rem; line-height:1.82em;
  color:#c5d2e2; margin-top:22px;
}
.modal__evidence{
  margin-top:26px; padding:20px 22px; background:#0d1620;
  border-left:3px solid var(--accent);
}
.modal__evidence .eyebrow{ color:var(--accent); }
.modal__evidence p{
  font-family:var(--serif); font-size:.94rem; line-height:1.75em;
  color:#aebdd0; margin-top:10px;
}
.modal__person{ display:flex; gap:24px; align-items:flex-start; }
/* Full color in the dialog. The grid cards stay greyscale (Dr. Young likes
   that look), so opening a bio becomes the moment the person resolves. */
.modal__photo{
  width:132px; height:auto; flex:none; border-radius:2px;
}
@media(max-width:620px){
  .modal__panel{ padding:36px 24px 30px; }
  .modal__person{ flex-direction:column; gap:16px; }
  .modal__photo{ width:108px; }
}

/* ---- Leadership: card is a button, bio moved into the dialog ---- */
button.person--clickable{
  background:none; border:0; padding:0; margin:0; width:100%;
  text-align:left; font:inherit; color:inherit; cursor:pointer; display:block;
}
button.person--clickable:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; }
.person--clickable .person__img img{
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s var(--ease), transform .6s var(--ease);
}
.person--clickable:hover .person__img img,
.person--clickable:focus-visible .person__img img{
  filter:grayscale(0) contrast(1);
  transform:scale(1.045);
}
.person--clickable .person__img{ overflow:hidden; }
.person--clickable .person__name{ transition:color .3s var(--ease); }
.person--clickable:hover .person__name{ color:var(--accent); }
.team__group{ margin-top:10px; }

@media (prefers-reduced-motion:reduce){
  .modal__panel,.modal__backdrop{ transition:none; }
  .person--clickable .person__img img{ transition:none; }
  .person--clickable:hover .person__img img{ transform:none; }
}

/* ============================================================
   HERO MECHANISM WALKTHROUGH
   Trigger sits in the hero content column (not a floating corner
   control, which would fight the scroll cue and read as a chat
   widget). Content opens in the shared dialog.
   ============================================================ */
.hero__walk{ margin-top:26px; }
.hero__walk svg{ width:15px; height:15px; }

.modal__panel--wide{ max-width:min(1200px,94vw); width:100%; }

.walk__title{
  font-family:var(--grotesk); font-weight:600; color:var(--white);
  font-size:clamp(22px,2.6vw,32px); line-height:1.15; margin:0 0 6px;
}
.walk__lead{
  font-family:var(--serif); color:var(--muted); font-size:13.5px;
  line-height:1.65; margin:0 0 18px; max-width:56ch;
}
.walk__grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:860px){
  .walk__grid{ grid-template-columns:1.45fr 1fr; gap:30px; align-items:start; }
}
.walk__stage{ position:relative; background:var(--placeholder); overflow:hidden; }
.walk__video{ display:block; width:100%; height:auto; }
.walk__cap{
  position:absolute; left:0; right:0; bottom:0; padding:44px 20px 18px; pointer-events:none;
  background:linear-gradient(to top, rgba(15,26,38,.92) 0%, rgba(15,26,38,.7) 45%, rgba(15,26,38,0) 100%);
}
.walk__cap-text{
  font-family:var(--grotesk); font-weight:500; color:var(--white);
  font-size:clamp(13px,1.5vw,17px); line-height:1.35;
  opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.walk__cap-text.is-on{ opacity:1; transform:none; }
.walk__track{ height:2px; background:var(--border-dark); position:relative; }
.walk__fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--accent); }
.walk__steps{ list-style:none; margin:0; padding:0; position:relative; }
.walk__steps::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--border-dark);
}
.walk__step + .walk__step{ margin-top:2px; }
.walk__step-btn{
  display:block; width:100%; text-align:left; background:transparent; border:0; color:inherit;
  padding:10px 4px 10px 18px; border-left:2px solid transparent; margin-left:-1px; opacity:.45;
  transition:border-color .35s var(--ease), opacity .35s var(--ease);
}
.walk__step-btn:hover{ opacity:.85; }
.walk__step-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.walk__step.is-active .walk__step-btn{ opacity:1; border-left-color:var(--accent); }
.walk__step-name{
  display:block; font-family:var(--grotesk); font-weight:600; font-size:14px; color:var(--white);
}
.walk__step-body{
  display:block; font-family:var(--serif); font-size:12px; line-height:1.55;
  color:var(--muted); margin-top:5px;
}
@media (prefers-reduced-motion:reduce){
  .walk__cap-text{ transition:none; }
  .walk__step-btn{ transition:none; opacity:1; }
}

/* Walkthrough annotations: name each part as it is shown, then fade. */
.walk__labels{ position:absolute; inset:0; pointer-events:none; }
.walk__leaders{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.walk__leader{
  stroke:rgba(255,255,255,.5); stroke-width:1; opacity:0;
  transition:opacity .5s var(--ease);
}
.walk__leader.is-on{ opacity:1; }
.walk__dot{
  position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--white); box-shadow:0 0 0 3px rgba(79,158,217,.35);
  opacity:0; transform:scale(.4); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.walk__dot.is-on{ opacity:1; transform:scale(1); }
.walk__lbl{
  position:absolute; white-space:nowrap;
  font-family:var(--grotesk); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--white);
  padding:5px 9px; background:rgba(15,26,38,.72);
  border-left:2px solid var(--accent); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(5px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.walk__lbl.is-on{ opacity:1; transform:none; }
@media (max-width:640px){ .walk__lbl{ font-size:9px; letter-spacing:.08em; padding:4px 7px; } }
@media (prefers-reduced-motion:reduce){
  .walk__lbl, .walk__dot, .walk__leader{ transition:none; }
}

/* Hero part labels: named one at a time as the animation plays, per Dr. Young.
   Sit above the wash but under .hero__container so the headline always wins. */
.hero__labels{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__lbl{
  position:absolute; transform:translate(-50%,-50%) translateY(6px);
  text-align:left; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 12px;
  background:rgba(10,17,25,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border-left:2px solid var(--accent);
  font-family:var(--grotesk); font-weight:500; color:var(--white);
  font-size:clamp(10.5px,1vw,13px); line-height:1.3;
  letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__lbl::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent);
  flex:none;
}
.hero__lbl.is-on{ opacity:1; transform:translate(-50%,-50%); }
@media (max-width:767px){
  /* Hidden on phones. The label coordinates were measured on the desktop 16:9
     frame; the portrait cover-crop shifts the frame so they no longer sit on
     the cells they name, and they collided with the headline. The labeled
     walkthrough is one tap away via "Click to see how it works". */
  .hero__labels{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero__lbl{ transition:none; }
}

/* Leadership: people whose headshot and bio have not arrived yet.
   They show an initials monogram and are not clickable, since there is
   nothing to open. Added with the 2026-08-20 roster. */
.person__img--mono{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #1d2b3f 0%, #16202e 100%);
  border:1px solid var(--border-dark);
}
.person__mono{
  font-family:var(--grotesk); font-weight:600; letter-spacing:.06em;
  font-size:clamp(20px,2.4vw,30px); color:var(--muted);
}
.person--pending{ cursor:default; }
.person--pending .person__name{ color:var(--white); }


/* Hero kicker: the one-liner moved to the top left under the wordmark,
   per Dr. Young and Christine on the 08-27 call. Scrolls away with the
   hero; larger and brighter than the old eyebrow so it is easy to read. */
.hero__kicker{
  position:absolute; top:104px; left:calc(var(--side-padding) - 5px);
  margin:0; z-index:2;
  font-family:var(--grotesk); font-size:15px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-hover); max-width:520px; line-height:1.5;
}
@media (max-width:767px){
  /* In flow above the headline on phones (see the .hero__container column rule). */
  .hero__kicker{ position:static; margin:0 0 18px; font-size:12.5px; max-width:100%; }
}


/* Nav dropdowns (Leadership, Science), added per the 08-27 call.
   Pure hover/focus-within on desktop; flattened inline in the mobile menu. */
.nav__drop{ position:relative; display:flex; align-items:center; pointer-events:auto; }
.nav__menu{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--ink-2); border:1px solid var(--border-dark);
  min-width:250px; padding:8px 0; z-index:60;
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__menu-link{
  display:block; padding:10px 20px;
  font-family:var(--grotesk); font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--white); white-space:nowrap;
}
.nav__menu-link:hover,.nav__menu-link:focus{ color:var(--accent); background:rgba(79,158,217,.08); }
@media (max-width:1279px){
  .nav__drop{ flex-direction:column; align-items:flex-start; }
  .nav__menu{
    position:static; transform:none; opacity:1; visibility:visible;
    border:none; background:transparent; min-width:0; padding:2px 0 6px 18px;
  }
  .nav__menu-link{ padding:7px 0; font-size:11px; color:var(--muted); }
}

/* Tease cards: explicit read affordance so clickability is unmistakable,
   per Christine's note on the 08-27 call. Arrow slides on card hover. */
.tease__more{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-family:var(--grotesk); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.tease__more svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.tease:hover .tease__more svg,
.tease:focus .tease__more svg{ transform:translateX(6px); }

/* Advisor-group pointers under the index leadership grids */
.team__more{ display:flex; gap:38px; flex-wrap:wrap; margin-top:30px; }

/* Dropdown indicator: small chevron on Leadership and Science, rotates open */
.nav__chev{
  width:12px; height:12px; margin-left:5px; vertical-align:-1px;
  display:inline-block; opacity:.75;
  transition:transform .3s var(--ease);
}
.nav__drop:hover .nav__chev,
.nav__drop:focus-within .nav__chev{ transform:rotate(180deg); opacity:1; }
@media (max-width:1279px){
  .nav__chev{ display:none; } /* mobile menu shows sub-links flat, no chevron needed */
}

/* Mobile menu sub-links (Publications, leadership groups) */
.menu .menu__sub{ padding-left:22px; font-size:13px; opacity:.85; }

/* ============================================================
   DISEASE FLOW walkthrough (technology page, Dr. Young's slide)
   Visual language matched to the site's established diagram card
   (.tech-diagram) and mechanism-walkthrough glow (.walk__dot,
   .track__fill::after) so this reads as one family, not a bolt-on.
   ============================================================ */
.df{ margin-top:34px; }
.df__panels{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:760px){
  .df__panels{ grid-template-columns:minmax(220px,0.85fr) 40px minmax(320px,1.8fr); align-items:center; }
}
.df__body-stage,.df__stage{
  position:relative; background:#fff; border-radius:4px; overflow:hidden;
  box-shadow:0 30px 70px -16px rgba(6,11,18,.6);
}
.df__media{ position:relative; }
.df__media img{ display:block; width:100%; height:auto; }
.df__tag{
  display:block; padding:10px 14px 11px;
  font-family:var(--grotesk); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#5f7288;
  border-top:1px solid #e6eaf0; background:#fafbfc;
}
.df__connector{
  display:none;
}
@media (min-width:760px){
  .df__connector{
    display:flex; align-items:center; justify-content:center;
    color:var(--border-dark); transition:color .5s var(--ease);
  }
  .df__connector svg{ width:20px; height:20px; }
  .df__connector.is-live{ color:var(--accent); }
  @keyframes dfConnectorPulse{ 0%{ transform:translateX(0); opacity:.65; } 45%{ transform:translateX(4px); opacity:1; } 100%{ transform:translateX(0); opacity:.65; } }
  .df__connector.is-pulse svg{ animation:dfConnectorPulse .8s var(--ease); }
}
.df__hl{
  position:absolute; border:3px solid var(--accent); border-radius:7px;
  box-shadow:0 0 0 2000px rgba(9,14,20,.22), 0 0 0 1px rgba(79,158,217,.2), 0 0 26px rgba(79,158,217,.3);
  opacity:0; transition:all .7s var(--ease); pointer-events:none;
}
.df__hl--on{ opacity:1; }
.df__hl--target{ border-color:#c0392b; box-shadow:0 0 0 2000px rgba(9,14,20,.22), 0 0 0 1px rgba(217,85,63,.22), 0 0 26px rgba(217,85,63,.32); }
.df__rail{ list-style:none; margin:26px 0 0; padding:0; position:relative; }
.df__rail::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:rgba(79,158,217,.25); }
.df__step + .df__step{ margin-top:2px; }
.df__step-btn{
  position:relative; display:block; width:100%; text-align:left; background:transparent; border:0; color:inherit;
  padding:11px 4px 11px 18px; border-left:2px solid transparent; margin-left:-1px; border-radius:0 3px 3px 0; opacity:.45;
  cursor:pointer; transition:border-color .35s var(--ease), opacity .35s var(--ease), background-color .35s var(--ease), transform .15s var(--ease);
}
.df__step-btn:hover{ opacity:.85; background:rgba(255,255,255,.03); }
.df__step-btn:active{ transform:scale(.99); }
.df__step-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.df__step.is-active .df__step-btn{ opacity:1; border-left-color:var(--accent); background:rgba(79,158,217,.07); }
.df__step.is-active .df__step-btn::before{
  content:""; position:absolute; left:-5px; top:19px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 14px 2px rgba(79,158,217,.55);
}
.df__step:last-child.is-active .df__step-btn{ border-left-color:#c0392b; background:rgba(217,85,63,.07); }
.df__step:last-child.is-active .df__step-btn::before{ background:#c0392b; box-shadow:0 0 14px 2px rgba(217,85,63,.5); }
.df__step-name{ display:block; font-family:var(--grotesk); font-weight:600; font-size:14px; color:var(--white); }
.df__step-body{ display:block; font-family:var(--serif); font-size:12.5px; line-height:1.6; color:var(--muted); margin-top:5px; }
@media (prefers-reduced-motion:reduce){ .df__hl{ transition:none; } .df__step-btn{ transition:none; opacity:1; } .df__organ{ transition:none; } .df__connector{ transition:none; } }

/* Body-panel organ rings: pulled from Dr. Young's own artwork, five organs
   his illustrator already drew with individual glow, sequenced per step. */
.df__organ{
  position:absolute; border-radius:50%;
  border:2px solid var(--accent);
  background:radial-gradient(circle, rgba(79,158,217,.16) 0%, rgba(79,158,217,0) 72%);
  box-shadow:0 0 0 3px rgba(79,158,217,.14), 0 0 20px rgba(79,158,217,.28);
  opacity:0; transform:scale(.94);
  transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease);
  pointer-events:none;
}
.df__organ.is-on{ opacity:1; transform:scale(1); }
.df__organ.is-dim{
  opacity:.4; transform:scale(1); border-color:var(--muted); box-shadow:none;
  background:radial-gradient(circle, rgba(143,163,189,.1) 0%, rgba(143,163,189,0) 72%);
}
.df__organ.is-calm{
  opacity:.16; transform:scale(1); border-color:var(--muted); box-shadow:none;
  background:radial-gradient(circle, rgba(143,163,189,.1) 0%, rgba(143,163,189,0) 72%);
}
.df__organ.is-hot{
  opacity:1; transform:scale(1); border-color:#d9553f;
  background:radial-gradient(circle, rgba(217,85,63,.2) 0%, rgba(217,85,63,0) 72%);
  box-shadow:0 0 0 4px rgba(217,85,63,.22), 0 0 22px rgba(217,85,63,.35);
  animation:dfOrganPulse 1.15s ease-in-out infinite;
}
@keyframes dfOrganPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .df__organ{ animation:none; } }

/* consent line under forms (dgb-disclosures 2026-09-08) */
.form-consent{font-size:.85rem;line-height:1.5;opacity:.85;margin:.75rem 0 0;max-width:60ch}
.form-consent a{text-decoration:underline}

/* Contact form: honeypot and send states (wired 2026-09-09).
   The honeypot is hidden from people but not with display:none, which some
   bots skip. The status line never says "sent" unless the server confirmed. */
.field--trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{
  margin:14px 0 0; font-family:var(--grotesk); font-size:13.5px; line-height:1.55;
  padding:11px 14px; border-left:3px solid var(--muted); background:rgba(255,255,255,.04);
}
.form-status--sending{ border-left-color:var(--muted); color:var(--muted); }
.form-status--ok{ border-left-color:var(--accent); color:#dbeafc; background:rgba(79,158,217,.1); }
.form-status--error{ border-left-color:#d9553f; color:#f4d4cd; background:rgba(217,85,63,.1); }
.btn[disabled]{ opacity:.6; cursor:progress; }

/* Disease Flow 3D swap. The two-panel build is only hidden once the scene has
   confirmed it mounted (see lib/disease-3d/loader.js). It stays in the DOM so a
   later failure can restore it without a reload. */
.df[data-df3d-fallback="hidden"]{ display:none; }

/* Disease Flow 3D stage. Sized by CSS so the section's layout is never decided
   by JavaScript: if the scene fails, nothing here can collapse the page. */
.df3d{
  margin-top:34px;
  /* Break out of the 860px text column. The stage was rendering at 700px wide
     on an 1800px screen, boxed by the section's reading-width container. It
     now centres on the viewport at up to 1180px, leaving the prose column
     where it is for the copy around it. */
  position:relative; left:50%; transform:translateX(-50%);
  width:min(1180px, calc(100vw - 2 * var(--side-padding, 24px)));
}
.df3d__stage{
  position:relative; width:100%; aspect-ratio:16/10;
  /* Capped against the viewport, not just a fixed number, so the picture,
     the explanation beneath it and the rail all fit on one screen. 740px flat
     was taller than a laptop viewport once the readout and rail sat under it.
     The subtraction is nav plus readout plus rail plus breathing room. */
  min-height:340px; max-height:min(740px, calc(100vh - 390px));
  border-radius:4px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, #1b2b3e 0%, #14202e 62%, #101c29 100%);
  box-shadow:0 30px 70px -16px rgba(6,11,18,.6);
}
.df3d__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.df3d__labels{ position:absolute; inset:0; pointer-events:none; }
@media (max-width:767px){ .df3d__stage{ aspect-ratio:4/5; max-height:none; } }

/* Disease Flow 3D labels. Real DOM text projected from 3D anchors, never drawn
   into the canvas, so they stay crisp, selectable, translatable and readable by
   a screen reader. Type scale from docs/df3d-visual-bible.md section 4. */
.df3d-label{
  position:absolute; top:0; left:0; will-change:transform;
  transform:translate3d(-9999px,-9999px,0);
  margin-left:10px; margin-top:-9px;
  white-space:nowrap; pointer-events:auto; cursor:default;
  transition:opacity .25s ease;
  text-shadow:0 1px 10px rgba(9,14,20,.9), 0 0 3px rgba(9,14,20,.8);
}
.df3d-label--organ{
  font-family:var(--grotesk); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.df3d-label--marker{
  font-family:var(--grotesk); font-size:12.5px; font-weight:500;
  letter-spacing:.02em; color:#c9d6e4;
}
.df3d-label--sub{
  font-family:var(--grotesk); font-size:12.5px; font-weight:500;
  letter-spacing:.02em; color:#c9d6e4;
}
/* The step heading and sentence, above the stage in normal flow. They are not
   overlaid on the canvas any more: at a 700px stage the caption box reached the
   marker column and collided with the labels. Outside the picture they are
   bigger, always legible, and cannot collide with anything. */
/* The explanation sits BELOW the picture, in the same order as the "how it
   works" block at the top of the page, and is set larger and brighter than
   that block's caption because here it is the point, not a footnote. It was
   above the stage in muted 13.5px serif, and Drew found it easy to miss. */
.df3d__readout{
  margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--border-dark);
}
.df3d-title{
  font-family:var(--display); font-weight:500; color:#fff;
  font-size:clamp(19px,.8vw + 15px,24px); line-height:1.25; letter-spacing:-.008em;
  margin:0 0 10px;
}
.df3d-caption{
  font-family:var(--grotesk); font-size:15.5px; line-height:1.7; color:#c9d6e4;
  max-width:82ch; margin:0;
}
.df3d-title--target{ color:#f0b8ae; }

@media (max-width:767px){
  .df3d__readout{ margin-top:16px; padding-top:14px; }
  .df3d-caption{ font-size:14px; }
  .df3d-label--organ{ font-size:9.5px; letter-spacing:.1em; }
  .df3d-label--marker,.df3d-label--sub{ font-size:11px; }
}

/* Disease Flow 3D pinning. Desktop only: the shell grows tall and the stage
   sticks inside it, so scrolling the shell scrubs the timeline. Phones never
   pin, because a pinned element fights iOS Safari's resizing address bar. */
.df__rail--df3d{ margin-top:22px; }
/* Inside the pin the rail is a compact progress strip, not a tall stack: it has
   to fit beside the stage in one viewport. The step body is hidden here because
   the 3D stage already prints that exact sentence as its caption, so showing it
   twice on one screen is pure repetition. The step NAME stays. */
.df__rail--df3d{ display:flex; flex-wrap:wrap; gap:4px 8px; }
.df__rail--df3d .df__step{ padding:7px 0 7px 14px; flex:1 1 auto; }
.df__rail--df3d .df__step-body{ display:none; }
.df__rail--df3d .df__step-name{ font-size:.78rem; }
@media (max-width:767px){
  .df__rail--df3d{ display:block; }
  .df__rail--df3d .df__step-body{ display:block; }
  .df__rail--df3d .df__step-name{ font-size:inherit; }
}
@media (prefers-reduced-motion:reduce){
  .df__rail--df3d{ display:block; }
  .df__rail--df3d .df__step-body{ display:block; }
  .df__rail--df3d .df__step-name{ font-size:inherit; }
}
/* Organ labels that sit left of their anchor, so crowded pairs on the narrow
   body panel fan apart instead of overlapping. */
.df3d-label--left{ margin-left:0; transform-origin:100% 50%; }
.df3d-label--left::after{ content:""; }
.df3d-label.df3d-label--left{ translate:-100% 0; margin-left:-10px; }

/* "Walk the disease cascade" chip in the Technology hero. The disease flow had
   no entry point of its own: it was a section you could only find by scrolling. */
.df-chip{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 44px;
  font-family:var(--grotesk); font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(79,158,217,.4); border-radius:2px; padding:10px 16px;
  text-decoration:none; transition:background-color .25s ease, border-color .25s ease;
}
.df-chip svg{ width:14px; height:14px; }
.df-chip:hover{ background:rgba(79,158,217,.12); border-color:var(--accent); }
.df-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* The Disease teaser on the home page. Same family as .tease, but wider, since
   it is one feature rather than one of a row of four. */
.dteaser{
  display:grid; grid-template-columns:1fr; gap:22px; text-decoration:none;
  border:1px solid var(--border-dark); border-radius:2px; overflow:hidden;
  background:linear-gradient(180deg, rgba(79,158,217,.07) 0%, rgba(79,158,217,.02) 100%);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
@media (min-width:860px){ .dteaser{ grid-template-columns:1.1fr 1fr; gap:0; align-items:center; } }
.dteaser:hover{ border-color:rgba(79,158,217,.45); }
.dteaser__media{ position:relative; overflow:hidden; line-height:0; }
.dteaser__media img{
  width:100%; height:auto; display:block; transition:transform .6s var(--ease);
  /* Hold the box even before the image decodes, so the card never collapses
     or stretches while loading. */
  aspect-ratio:700/438; object-fit:cover; background:#111b27;
}
.dteaser:hover .dteaser__media img{ transform:scale(1.03); }
.dteaser__body{ padding:6px 26px 28px; }
@media (min-width:860px){ .dteaser__body{ padding:34px 40px; } }
.dteaser__title{
  font-family:var(--display); font-weight:300; color:var(--white);
  font-size:clamp(1.25rem,1rem + 1vw,1.8rem); line-height:1.18; letter-spacing:-.015em;
  margin:0 0 16px; text-wrap:balance; transition:color .2s ease;
}
.dteaser:hover .dteaser__title{ color:var(--accent); }
.dteaser__steps{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 16px; }
.dteaser__steps span{
  font-family:var(--grotesk); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border-dark); border-radius:2px; padding:5px 9px;
}
.dteaser__text{ font-family:var(--serif); font-size:13.5px; line-height:1.7; color:var(--muted); margin:0 0 18px; max-width:46ch; }

/* Leadership roster mode. Used when no one in a group has a photo or a bio yet,
   which is the Scientific Advisory Board's state until those members give
   permission to appear. Names are listed plainly rather than as a grid of empty
   photo plates, because blank frames read as an unfinished page. */
.team__roster{ list-style:none; margin:0; padding:0; max-width:760px;
  border-top:1px solid var(--border-dark); }
.team__roster-item{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  padding:18px 2px; border-bottom:1px solid var(--border-dark);
}
.team__roster-name{
  font-family:var(--display); font-weight:400; color:var(--white);
  font-size:clamp(1rem,.92rem + .3vw,1.15rem); letter-spacing:-.01em;
}
.team__roster-role{
  font-family:var(--grotesk); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
/* The one-line description sits on its own line under the name, set as
   running text rather than a caps label so it reads as a credential. */
.team__roster-cred{
  flex-basis:100%; font-family:var(--grotesk); font-size:.92rem;
  line-height:1.5; color:var(--muted); max-width:62ch;
}
@media (max-width:600px){
  .team__roster-item{ padding:15px 2px; gap:3px 0; flex-direction:column; }
  .team__roster-cred{ font-size:.88rem; }
}

/* The teaser's header row put the eyebrow and the CTA on one line, which ran
   the CTA off the right edge on a phone. Wrap it there. */
@media (max-width:600px){
  #disease-teaser .cluster__head{ flex-wrap:wrap; gap:10px 14px; }
  #disease-teaser .cluster__head .cta-link{ margin-left:0; }
}

/* Leader lines for the organ labels: a hairline from each label in its side
   column to the organ it names. This is what makes floating text read as a
   diagram. Drawn in an SVG that covers the stage; endpoints move each frame. */
.df3d-leaders{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.df3d-leader{ stroke:rgba(159,180,201,.55); stroke-width:1; fill:none; transition:opacity .25s ease; }
/* Organ labels no longer hang off their anchor; the column places them. */
.df3d-label--organ{ margin-left:0; margin-top:0; }
.df3d-label.df3d-label--left{ translate:0 0; margin-left:0; }
/* Long organ names wrap to two lines rather than reaching across the figure.
   "Olfactory Mucosa" is the case: on one line it is wider than the column. */
.df3d-label--organ{ white-space:normal; max-width:96px; line-height:1.25; }

/* Bio and program dialogs on phones: tighter padding so more of a long bio
   is visible per screen, and the panel fills the width. */
@media (max-width:600px){
  .modal{ padding:12px; }
  .modal__panel{ padding:28px 22px 30px; }
}


/* ============================================================
   2026-09-11 call with Christine: sizes on large desktops
   The nav, eyebrows, role lines and pipeline stage labels were fixed pixel
   sizes (12px, 11px, 10.5px) at every width, so on a large monitor they read
   tiny beside a hero headline that scales. They now start at their laptop
   size and grow with the viewport, capped so nothing turns shouty.
   ============================================================ */
@media (min-width:1025px){
  .nav__link,.nav__cta{ font-size:clamp(13px, .42vw + 7px, 15.5px); }
  .nav__link{ margin-left:clamp(28px, 1.5vw + 6px, 40px); }
  .nav__logo img,.nav__brand img{ height:clamp(46px, 1.6vw + 23px, 56px); }
  .nav.scrolled .nav__logo img,.nav.scrolled .nav__brand img{ height:clamp(42px, 1.2vw + 25px, 50px); }
  .eyebrow{ font-size:clamp(12px, .28vw + 8px, 14px); }
  .track__stages span{ font-size:clamp(12px, .32vw + 7.4px, 14.5px); }
  .track__name .track__status{ font-size:clamp(11.5px, .28vw + 7.5px, 13.5px); }
  .cta-link{ font-size:clamp(14px, .3vw + 9.7px, 16px); }
}
/* Everything set in rem grows a step on big monitors. */
@media (min-width:1680px){ html{ font-size:19px; } }
@media (min-width:2200px){ html{ font-size:20px; } }

/* "Leadership and Board" and the group names (Board of Directors, Management)
   read as headings now, not as fine print. */
.team__head .eyebrow{ font-size:clamp(15px, .5vw + 8px, 19px); letter-spacing:.12em; }
.team__divider .eyebrow{ font-size:clamp(14px, .38vw + 8.6px, 17px); color:var(--white); }

/* Role lines (Chairman, Founder and Vice Chairman) a step larger everywhere. */
.person__role{ font-size:clamp(12px, .3vw + 7.7px, 14.5px); line-height:1.35; }

/* Cards are <button>s, and a browser vertically centres a button's content.
   The grid stretched every card to the tallest one (Christine's, whose title
   wraps to two lines), so everyone else's content sat ~5px lower and she read
   as "higher up". Cards now keep their natural height and align at the top. */
.team__grid{ align-items:start; }

/* The featured artwork is a finished slide with its own title across the top.
   Cropping it to a wide box with cover cut the lettering; it now shows at its
   own proportions, uncropped. */
.featured__image{ max-height:none; aspect-ratio:1376 / 768; }
.featured__image img{ max-height:none; height:100%; }

/* Board Advisors / Scientific Advisory Board: larger, with an arrow that nudges
   so it reads as a door to who these people are. */
.team__more{ gap:26px 48px; margin-top:38px; }
.team__more .cta-link{ font-size:clamp(15px, .35vw + 10px, 18px); }
.team__more .cta-link svg{ width:17px; height:17px; animation:tiNudge 2.6s var(--ease) infinite; }
.team__more .cta-link:hover svg,.team__more .cta-link:focus-visible svg{ animation:none; transform:translateX(7px); }
@keyframes tiNudge{ 0%,62%,100%{ transform:translateX(0); } 76%{ transform:translateX(6px); } 88%{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .team__more .cta-link svg{ animation:none; } }

/* ============================================================
   WHY TECHIMMUNE (10-01 team review)
   The need comes first and the numbers are the loudest thing on the
   page (Dr. BenMohamed: "the most important numbers"). Then the story
   in the order Dr. Cavanaugh set: problem, gap, technology, solution,
   why us. The film closes the section.
   ============================================================ */
.why{ position:relative; overflow:hidden; padding:var(--block-spacer) 0 calc(var(--block-spacer) + 10px);
  background:radial-gradient(60% 50% at 18% 0%, rgba(79,158,217,.14), transparent 70%), linear-gradient(180deg,#0f1b28 0%, #121f2e 100%); }
.why__inner{ margin:0 var(--side-padding); max-width:1440px; }
@media (min-width:1600px){ .why__inner{ margin:0 auto; padding:0 var(--side-padding); } }
.why__head{ border-top:1px solid var(--border-dark); padding-top:10px; }
.why__title{ margin:22px 0 0; font-family:var(--display); font-weight:300; color:var(--white);
  font-size:clamp(1.65rem,1.1rem + 2.2vw,3rem); line-height:1.14; letter-spacing:-.01em; max-width:26ch; text-wrap:balance; }

.why__stats{ display:grid; grid-template-columns:1fr; gap:0; margin:clamp(36px,5vw,64px) 0 0; }
.wstat{ position:relative; padding:24px 0 26px; border-top:1px solid var(--border-dark); }
.wstat::before{ content:""; position:absolute; top:-1px; left:0; width:0; height:2px; background:var(--accent); transition:width .9s var(--ease) .15s; }
.wstat.in::before{ width:64px; }
.wstat__num{ font-family:var(--grotesk); font-weight:700; color:var(--white); line-height:.95; letter-spacing:-.035em;
  font-size:clamp(3.4rem,2rem + 6vw,7.4rem); font-variant-numeric:tabular-nums; }
.wstat__num .suffix{ color:var(--accent); }
.wstat--words .wstat__num{ font-size:clamp(2.5rem,1.4rem + 4.2vw,5.2rem); letter-spacing:-.03em; }
.wstat__num [data-suffix=" trillion"] .suffix{ font-size:.62em; letter-spacing:-.02em; }
.wstat__label{ margin:14px 0 0; font-family:var(--grotesk); font-weight:500; color:#c9d6e4;
  font-size:clamp(1rem,.9rem + .45vw,1.3rem); line-height:1.4; max-width:28ch; }
@media (min-width:768px){
  .why__stats{ grid-template-columns:1fr 1fr; column-gap:clamp(28px,4vw,72px); }
  .wstat{ padding:30px 0 40px; }
}

.why__story{ list-style:none; margin:clamp(40px,6vw,80px) 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:0;
  counter-reset:none; }
.wstep{ border-top:1px solid var(--border-dark); padding:20px 0 26px; }
.wstep__n{ display:block; font-family:var(--grotesk); font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--accent); }
.wstep__title{ margin:10px 0 0; font-family:var(--grotesk); font-weight:600; color:var(--white); font-size:clamp(1.15rem,1rem + .5vw,1.45rem); line-height:1.25; }
.wstep__text{ margin:10px 0 0; font-family:var(--serif); color:var(--muted); font-size:.95rem; line-height:1.65; max-width:46ch; }
@media (min-width:768px){ .why__story{ grid-template-columns:1fr 1fr; column-gap:clamp(28px,4vw,72px); } }
@media (min-width:1200px){ .why__story{ grid-template-columns:repeat(4,1fr); column-gap:32px; } .wstep{ padding-bottom:10px; } }

.why__us{ margin:clamp(36px,5vw,64px) 0 0; }
.why__us-head{ border-top:1px solid var(--border-dark); padding-top:10px; }
.why__us-grid{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:14px; }
.wus{ background:rgba(79,158,217,.06); border:1px solid var(--border-dark); border-left:3px solid var(--accent); padding:20px 22px 22px; }
.wus__title{ font-family:var(--grotesk); font-weight:600; color:var(--white); font-size:1.08rem; line-height:1.3; }
.wus__text{ margin:8px 0 0; font-family:var(--serif); color:var(--muted); font-size:.9rem; line-height:1.6; }
@media (min-width:768px){ .why__us-grid{ grid-template-columns:1fr 1fr; gap:18px; } }
@media (min-width:1200px){ .why__us-grid{ grid-template-columns:repeat(4,1fr); } }

/* The film card: a real button, so it works by keyboard and screen reader. */
.film{ position:relative; display:block; width:100%; margin:clamp(40px,6vw,80px) 0 0; padding:0; border:0; background:#0a1420;
  aspect-ratio:16/9; overflow:hidden; color:var(--white); text-align:left; cursor:pointer; border-radius:2px; }
.film__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition:transform 1.2s var(--ease); }
.film__shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,12,21,.92) 0%, rgba(5,12,21,.5) 38%, rgba(5,12,21,.05) 70%); }
.film__play{ position:absolute; left:50%; top:46%; width:clamp(64px,8vw,104px); height:clamp(64px,8vw,104px); transform:translate(-50%,-50%);
  border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(79,158,217,.55); transition:transform .4s var(--ease), background .2s ease; animation:filmPulse 2.6s ease-out infinite; }
.film__play svg{ width:38%; height:38%; margin-left:0; display:block; }
@keyframes filmPulse{ 0%{ box-shadow:0 0 0 0 rgba(79,158,217,.5); } 70%{ box-shadow:0 0 0 26px rgba(79,158,217,0); } 100%{ box-shadow:0 0 0 0 rgba(79,158,217,0); } }
.film__cap{ position:absolute; left:clamp(16px,3vw,40px); right:clamp(16px,3vw,40px); bottom:clamp(14px,3vw,36px); display:block; }
.film__title{ display:block; margin-top:8px; font-family:var(--grotesk); font-weight:600; font-size:clamp(1.05rem,.8rem + 1.2vw,2rem); line-height:1.2; max-width:30ch; }
.film__meta{ display:block; margin-top:8px; font-family:var(--grotesk); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#c9d6e4; }
.film:hover .film__poster, .film:focus-visible .film__poster{ transform:scale(1.04); }
.film:hover .film__play, .film:focus-visible .film__play{ transform:translate(-50%,-50%) scale(1.07); background:var(--accent-hover); }
.film:focus-visible{ outline:2px solid var(--white); outline-offset:4px; }
@media (max-width:575px){ .film{ aspect-ratio:4/3; } .film__play{ top:40%; } }

/* Hero: "Watch our mission" sits beside the walkthrough link */
.hero__ctas{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; margin-top:28px; }
.hero__ctas .hero__walk{ margin-top:0; }
.hero__mission{ display:inline-flex; align-items:center; gap:12px; padding:10px 20px 10px 10px; min-height:48px;
  border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(10,17,25,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--white); font-family:var(--grotesk); font-size:15px; font-weight:600; letter-spacing:.01em; transition:background .2s ease, border-color .2s ease; }
.hero__mission:hover{ background:rgba(79,158,217,.28); border-color:var(--accent); }
.hero__mission:focus-visible{ outline:2px solid var(--white); outline-offset:3px; }
.hero__mission-icon{ width:30px; height:30px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex:none; }
.hero__mission-icon svg{ width:13px; height:13px; margin-left:0; display:block; color:#fff; }
.hero__mission-time{ color:#c9d6e4; font-weight:500; margin-left:4px; }

/* Film dialog */
.modal__panel--film{ padding:clamp(18px,3vw,36px); background:#0a1420; }
.film__dlg-title{ font-family:var(--grotesk); font-weight:600; color:var(--white); font-size:clamp(18px,2vw,24px); margin:0 44px 14px 0; }
.film__video{ display:block; width:100%; aspect-ratio:16/9; background:#000; }
.film__note{ margin:14px 0 0; font-family:var(--grotesk); font-size:12.5px; line-height:1.5; color:var(--muted); }

@media (prefers-reduced-motion:reduce){
  .film__play{ animation:none; } .film__poster, .film__play{ transition:none; }
  .wstat::before{ transition:none; }
}

/* Hero labels, more pronounced and on screen longer (Dr. BenMohamed, 10-01) */
.hero__lbl{ font-size:clamp(12px,1.15vw,16px); font-weight:600; padding:10px 16px 10px 14px;
  background:rgba(8,14,22,.72); border-left-width:3px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.hero__lbl::before{ width:7px; height:7px; }
.walk__lbl{ font-size:13px; font-weight:600; padding:7px 12px; background:rgba(8,14,22,.8); border-left-width:3px; }
@media (max-width:640px){ .walk__lbl{ font-size:10.5px; letter-spacing:.08em; padding:5px 8px; } }
.dteaser__media img.dteaser__img--organ{ object-position:72% 50%; }

/* ---------- Why: stat visuals (10-01, "cool analytics") ----------
   Each mirrors its scene in the mission film. They illustrate, they do not
   chart: no axis, no implied share or trend. The $1 trillion bars are equal on
   purpose, one per year, because the cost repeats rather than grows. */
.viz{ display:block; height:72px; width:auto; max-width:100%; margin:6px 0 20px; overflow:visible; }
@media (min-width:768px){ .viz{ height:110px; margin-bottom:26px; } }
.viz__halo{ fill:rgba(79,158,217,.08); }
.viz__lat{ fill:none; stroke:rgba(79,158,217,.25); stroke-width:1; }
.viz--tiles .viz__tiles rect, .viz--bars .viz__bars rect{ filter:drop-shadow(0 0 8px rgba(79,158,217,.55)); }
.viz__ring{ fill:none; stroke:rgba(143,211,255,.28); stroke-width:1; }
.viz__meridian{ fill:none; stroke:rgba(79,158,217,.35); stroke-width:1; transform-box:fill-box; transform-origin:center; }
.viz--globe .viz__dots circle{ fill:#8fd3ff; opacity:0; }
.viz--crowd .viz__dots circle{ fill:#4d5d72; }
.viz__tiles rect{ fill:#4f9ed9; opacity:0; transform-box:fill-box; transform-origin:center; }
.viz__bars rect{ fill:#4f9ed9; opacity:.85; transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); }
.viz__base{ stroke:rgba(143,211,255,.3); stroke-width:1; }

.wstat.in .viz--globe .viz__dots circle{ animation:vizDot .7s var(--ease) var(--d) forwards; }
.wstat.in .viz__meridian{ animation:vizSpin 7s linear infinite; }
.wstat.in .viz__meridian--b{ animation-duration:9s; animation-direction:reverse; }
.wstat.in .viz--crowd .viz__dots circle{ animation:vizLight .6s var(--ease) calc(var(--d) + .2s) forwards; }
.wstat.in .viz__tiles rect{ animation:vizTile .55s var(--ease) calc(var(--d) + .2s) forwards, vizGlow 3.2s ease-in-out calc(var(--d) + 1.2s) infinite; }
.wstat.in .viz__bars rect{ animation:vizBar .8s var(--ease) calc(var(--d) + .2s) forwards; }

@keyframes vizDot{ to{ opacity:var(--o); } }
@keyframes vizSpin{ 0%{ transform:scaleX(1); } 50%{ transform:scaleX(-1); } 100%{ transform:scaleX(1); } }
@keyframes vizLight{ to{ fill:#8fd3ff; } }
@keyframes vizTile{ 0%{ opacity:0; transform:scale(.6); } 100%{ opacity:1; transform:scale(1); } }
@keyframes vizGlow{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@keyframes vizBar{ to{ transform:scaleY(1); } }

/* Reduced motion: show the finished state, nothing moves. */
@media (prefers-reduced-motion:reduce){
  .viz--globe .viz__dots circle{ opacity:var(--o) !important; animation:none !important; }
  .viz--crowd .viz__dots circle{ fill:#8fd3ff !important; animation:none !important; }
  .viz__tiles rect{ opacity:1 !important; transform:none !important; animation:none !important; }
  .viz__bars rect{ transform:none !important; animation:none !important; }
  .viz__meridian{ animation:none !important; }
}
.why__src{ margin:18px 0 0; font-family:var(--grotesk); font-size:12px; line-height:1.5; color:#8fa3bd; }
.why__src em{ font-style:italic; }