/* ============================================================
   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:34px; 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:center;
  padding:0 var(--side-padding);
}
.menu.open{ opacity:1; visibility:visible; }
.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;
}
/* 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; }
  .hero__container{ align-items:center; }
  .hero__title{ font-size:2.5rem; line-height:2.75rem; }
}
@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:12px; 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; }
}

/* ---- 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; }
}