/* ============================================================
   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%; }
.person__name{ font-family:var(--grotesk); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; color:var(--white); }
.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; }
  .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; }
}

/* ============================================================
   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-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.3rem,1rem+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;
  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 ---- */
.modal{ position:fixed; inset:0; z-index:9000; display:flex;
  align-items:center; justify-content:center; padding:24px; }
.modal__backdrop{ position:absolute; 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%);
  max-height:86vh; overflow-y:auto;
  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; }