@charset "utf-8";
/* BrainStorm Cell Therapeutics - one stylesheet, no framework.
   Values are lifted from BrainStorm Redesign.dc.html (the approved design), which
   authors everything as inline styles. This file is that design normalised.
   Order: fonts, tokens, reset, base type, layout, chrome, components, pages, responsive. */

/* ============================================================ 1. FONTS
   Variable fonts instanced to the axes actually used (see README). One file per
   family covers every weight in the design, so there is one request, not five. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Metric-matched fallbacks, so the font swap costs no layout shift. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue');ascent-override:97%;descent-override:24%;line-gap-override:0%;size-adjust:107%}
@font-face{font-family:'Serif Fallback';src:local('Georgia'),local('Times New Roman');ascent-override:90%;descent-override:24%;line-gap-override:0%;size-adjust:90%}
@font-face{font-family:'Mono Fallback';src:local('Consolas'),local('Menlo'),local('Courier New');ascent-override:92%;descent-override:24%;line-gap-override:0%;size-adjust:96%}

/* ============================================================ 2. TOKENS */
:root{
  /* - ink */
  --ink-900:#04121D; --ink-800:#08192A; --ink-700:#0B2239; --ink-600:#16344F;
  /* - text. TWO-TONE (Sept 2026): light ground, so dark text; dark bands use --on-dark-*.
       Darker than the v10 values - --paper is tinted, which costs about a fifth of each ratio. */
  --text:#0B2239; --text-2:#16344F; --text-3:#42627A;
  --ui-label:#3E5C72;              /* control labels: filter chips, share pills, subnav */
  --label:#47647A;                 /* small meta/label text - 5.05:1 on --paper */
  /* - text on dark */
  --on-dark-2:#C6D6E2; --on-dark-3:#B4C8D6; --on-dark-4:#9FB6C7;
  --on-dark-meta:#8FAABE;          /* breadcrumbs on dark heroes, footer body */
  --on-dark-5:#7E9AAF; --on-dark-faint:#6E8AA0;   /* footer legal + meta. Was #5E7A90 (3.94:1 on --ink-800) */
  /* - brand. Links take --cyan-deep (5.7:1); brand cyan is 2.2:1 on light - fills only. */
  --cyan:#00AEEF; --cyan-deep:#00648F; --cyan-pale:#8ADCFB;
  --em-a:var(--cyan-deep); --em-b:var(--cyan);
  /* - surfaces. Light BLUE ground; raised surfaces go lighter so they lift off it. */
  --paper:#DFEAF4; --surface:#EFF5FA; --surface-brand:#E7F2FA;
  --card-bg:#F6FAFD;
  /* - lines */
  --line:#C6D9E8; --line-2:#D2E1EC; --line-3:#DFE9F2; --line-input:#B9CFE0;
  /* - lines & fills on dark */
  --dark-fill:rgba(255,255,255,.06);
  --dark-fill-3:rgba(255,255,255,.1); --dark-fill-4:rgba(255,255,255,.12);
  --dark-line:rgba(255,255,255,.14); --dark-line-2:rgba(255,255,255,.16);
  --dark-line-3:rgba(255,255,255,.18); --dark-line-4:rgba(255,255,255,.3);
  /* - status */
  --pos:#0F6B4F; --pos-bg:#DCF0E7;
  --warn-text:#7A5310; --warn-bg:#FAEEDA; --warn-line:#EBD9B8;
  --crit:#8C2A17;
  --info:#1F4E6B; --info-bg:#DFEDF6;

  /* - families */
  /* Inter for UI and body; Instrument Serif is a display cut - headings and italic accents only. */
  --font-ui:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;
  --font-serif:'Instrument Serif','Serif Fallback',Georgia,serif;
  --font-mono:'IBM Plex Mono','Mono Fallback',ui-monospace,monospace;

  /* - fluid type. Each step interpolates 390px→1440px viewport and pins at the
       design's 1440px value. Name = the design's px size at 1440. */
  --fs-hero:clamp(2.5rem,1.618rem + 3.62vw,4.875rem);      /* 40 → 78 */
  --fs-56:clamp(2rem,1.451rem + 2.25vw,3.5rem);
  --fs-54:clamp(2rem,1.489rem + 2.10vw,3.375rem);
  --fs-50:clamp(1.875rem,1.451rem + 1.74vw,3.125rem);
  --fs-46:clamp(1.8125rem,1.428rem + 1.58vw,2.875rem);
  --fs-42:clamp(1.6875rem,1.339rem + 1.43vw,2.625rem);
  --fs-40:clamp(1.625rem,1.300rem + 1.33vw,2.5rem);
  --fs-38:clamp(1.5625rem,1.261rem + 1.24vw,2.375rem);
  --fs-36:clamp(1.5rem,1.222rem + 1.14vw,2.25rem);
  --fs-34:clamp(1.4375rem,1.182rem + 1.05vw,2.125rem);
  --fs-30:clamp(1.375rem,1.189rem + 0.76vw,1.875rem);
  --fs-27:clamp(1.3125rem,1.171rem + 0.57vw,1.6875rem);
  --fs-26:clamp(1.3125rem,1.207rem + 0.43vw,1.625rem);

  /* - vertical rhythm. The design authors 18/20/22/26/30/32/34px for the same
       relationships in different screens; that is authoring noise, not intent.
       Normalised to four steps - see README > Deviations. */
  --sp-2:20px; --sp-4:32px;

  /* - layout */
  --wrap:1320px;
  --gutter:44px;
  --sec:88px;                      /* default section rhythm */
  --stack-top:97px;                /* header 96 + its 1px bottom border. The 36px utility strip
                                      above it is gone, so this dropped by exactly that and
                                      the header now starts at top:0.
                                      Off by that border, the hero pull-up leaves a 1px
                                      seam and the sticky subnav overlaps the header. */
  --r-pill:999px; --r-panel:32px; --r-card:22px; --r-input:14px;
}

/* ============================================================ 3. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Bare URLs in 2014-2021 releases have no break opportunity: 99 of 466 pages scrolled
   sideways on a phone, worst by 437px. Baseline, not a prose class - scoped to .entry it
   missed the standfirst. Needs the min-width:0 below to do anything. */
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-wrap:break-word}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,iframe,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse}
::selection{background:var(--cyan);color:var(--ink-900)}
[id]{scroll-margin-top:calc(var(--stack-top) + 16px)}   /* deep links clear the sticky chrome, no JS */
/* WCAG 2.2 SC 1.4.11 requires a focus indicator to reach 3:1 against what is behind it. The
   brand cyan #00AEEF manages only 2.53:1 on white, so the ring uses the deeper brand blue on
   light backgrounds (6.52:1 on white, 6.00:1 on the palest brand surface) and the pale cyan on
   dark ones (10.5:1 or better). Both measured in tools/a11y.js, which fails the build if either
   drops below 3:1. */
:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.hero :focus-visible{outline-color:var(--cyan-pale)}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--cyan);color:var(--ink-900);
  padding:14px 22px;border-radius:0 0 var(--r-input) 0;font:700 14px/1 var(--font-ui)}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================ 4. BASE TYPE
   The signature device: heading in weight 400, the emphasised phrase in 800 at the
   same size. That is what <strong> means inside a heading here - emphasis, not bold. */
h1,h2,h3,h4{font-family:var(--font-ui);font-weight:400;letter-spacing:-.035em;color:var(--text)}
/* Dark contexts (.panel--dark, .page-hero, .hero, .feature-card, .quote-card) already
   override, which is why this can stop being white. */
h1,h2{font-family:var(--font-serif);font-weight:400;letter-spacing:-.01em;color:var(--text)}
h1{font-size:var(--fs-54);line-height:1.06}
h2{font-size:var(--fs-50);line-height:1.1}
h3{font-weight:700;font-size:1.875rem;line-height:1.2;letter-spacing:-.03em}
h4{font-weight:700;font-size:1.0625rem;line-height:1.3;letter-spacing:-.02em}
/* Serif headings: the emphasised phrase is italic in the blue ombre. */
:is(h3,h4) strong{font-weight:800}
:is(h1,h2) strong{font-weight:400;font-style:italic;background:linear-gradient(135deg,var(--em-a) 0%,var(--em-b) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
p{font-family:var(--font-ui);font-size:1.0625rem;line-height:1.66;color:var(--text-3)}
a{color:var(--cyan-deep);text-decoration:none}
a:hover{color:var(--cyan-pale)}
sup{font-size:.6em;line-height:0;vertical-align:super}
strong{font-weight:700}
sup{font-size:.6em;line-height:0;vertical-align:.5em}

/* Size utilities. Named for the design's 1440px px value so a reviewer can diff the
   design file against this stylesheet by grepping the number. */
.fs-56{font-size:var(--fs-56);line-height:1.05}
.fs-54{font-size:var(--fs-54);line-height:1.05}
.fs-46{font-size:var(--fs-46);line-height:1.1}
.fs-42{font-size:var(--fs-42);line-height:1.14}
.fs-40{font-size:var(--fs-40);line-height:1.12}
.fs-38{font-size:var(--fs-38);line-height:1.14}
.fs-36{font-size:var(--fs-36);line-height:1.14}
.fs-34{font-size:var(--fs-34);line-height:1.16}
.fs-30{font-size:var(--fs-30);line-height:1.16;letter-spacing:-.01em}
.fs-27{font-size:var(--fs-27);line-height:1.2;letter-spacing:-.01em}
.fs-26{font-size:var(--fs-26);line-height:1.24;letter-spacing:-.01em}

.eyebrow{display:block;font:600 11px/1 var(--font-ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan)}
.eyebrow--num{letter-spacing:.16em}
.eyebrow--deep{color:var(--cyan-deep)}
.eyebrow--pale{color:var(--cyan-pale)}
.eyebrow--muted{font-size:10.5px;letter-spacing:.12em;color:var(--label)}

.lede{font-family:var(--font-ui);font-size:1.25rem;line-height:1.55;color:var(--text-2)}
.lede--lg{font-size:1.3125rem;line-height:1.62}
.lede--onDark{color:var(--on-dark-2);font-size:1.1875rem;line-height:1.62}
.prose{font-size:1.09375rem;line-height:1.7;color:var(--text-3)}
.small{font-size:.90625rem;line-height:1.6;color:var(--text-3)}
.meta{font:500 13.5px/1 var(--font-ui);color:var(--label)}
.meta--sm{font-size:11px;font-weight:400}
.crumb{display:block;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--label)}
.crumb--onDark{color:var(--on-dark-meta)}
.crumb__list,.crumb__list li{display:inline}
.crumb__list li + li::before{content:" / ";color:inherit}
.crumb a{color:inherit}
.crumb a:hover{color:var(--cyan)}
.num{font:800 var(--n,2.125rem)/1 var(--font-ui);letter-spacing:-.04em;color:var(--text)}

/* ============================================================ 5. LAYOUT */
.section{padding:var(--sec) var(--gutter) 0}
.section--xs{--sec:44px}
.section--sm{--sec:64px}
.section--md{--sec:72px}
.section--lg{--sec:100px}
.section--flush{padding-inline:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto}
.grid{display:grid;gap:var(--gap,20px);grid-template-columns:repeat(var(--cols,3),1fr)}
.grid--2{--cols:2} .grid--3{--cols:3} .grid--4{--cols:4}
.grid--3-lg{--cols:3;--gap:30px}
.grid--tight{--gap:18px}
.split{display:grid;gap:var(--gap,70px);grid-template-columns:var(--split,1fr 1fr)}
/* min-width defaults to auto on a grid item: never shrink below the longest unbreakable
   word. A 43-character URL forced its column to 437px, so the paragraph was never constrained
   and overflow-wrap had nothing to do. Not `.callout > *` - the callout's label wants its
   min-content width, and letting it shrink broke "MANUFACTURING PARTNERS" mid-word. */
.split > *,.grid > *,.numbered > *,.page-head > *,.steps > li > *,.row > *{min-width:0}
.callout p:not(.eyebrow){min-width:0}
.split--center{align-items:center}
.split--aside{--split:1fr .8fr;--gap:64px}
.split--wide{--split:1.1fr .9fr} .stack{display:flex;flex-direction:column;gap:var(--gap,18px)}
.row{display:flex;align-items:center;gap:var(--gap,12px);flex-wrap:wrap}
.sticky-aside{position:sticky;top:calc(var(--stack-top) + 60px)}
.measure{max-width:var(--m,70ch)}
/* Vertical rhythm inside a text column: eyebrow → heading → prose → action. */
.flow > * + *{margin-top:var(--flow,var(--sp-2))}
.flow > .btn,.flow > .steps{margin-top:var(--sp-4)}
/* "Section title, and a quiet link to the full thing" - home, science, investors, careers. */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:var(--sp-4)}

/* ============================================================ 6. CHROME */
/* Staging ribbon: deliberately unmissable. Amber on near black is 10.4:1. */
.staging-bar{background:#3A2A05;border-bottom:1px solid #6B5010;padding:9px var(--gutter);
  text-align:center}
.staging-bar p{font:600 12.5px/1.45 var(--font-ui);color:#F5C542;letter-spacing:.01em}
.staging-bar strong{color:#FFD866}

/* ---- the newsroom search field (src/templates/tag-news.js) --------------
   Was /search/, the whole-site index; that page is gone and this is the one field left.
   [hidden] is spelled out because display:flex beats the UA rule, and the field ships
   hidden so a visitor without JavaScript is never shown a dead box. */
.searchbar{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;max-width:520px}
.searchbar[hidden]{display:none}
.searchbar__label{font:600 11px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--label)}
.searchbar__row{display:flex;gap:10px}
.searchbar__input{flex:1;min-width:0;min-height:52px;padding:14px 18px;
  font:400 1.0625rem/1.4 var(--font-ui);color:var(--text);
  background:var(--dark-fill);border:1px solid var(--line-input);border-radius:var(--r-input)}
.searchbar__input::placeholder{color:var(--text-3)}
.searchbar__input:focus{border-color:var(--cyan-deep)}
.searchbar__status{color:var(--text-3)}
/* Every filter is a dropdown, reusing .field so there is one styled select. Capped because a
   full-measure control for a 4-digit year is absurd. */
.field--filter select{max-width:min(100%,260px)}

/* The row list. Named for the deleted search page; /investors/sec-filings/ is now its only
   caller, at 947 rows. .search-empty is the newsroom's no-matches line. */
.search-results{list-style:none;margin-top:10px}
.search-results > li{border-top:1px solid var(--line-3)}
.search-result{display:flex;flex-direction:column;gap:4px;padding:16px 0;text-decoration:none;
  min-height:44px}
.search-result:hover .search-result__t{color:var(--cyan-deep)}
.search-result__t{font:600 1.0625rem/1.35 var(--font-ui);letter-spacing:-.015em;color:var(--text)}
.search-result__d{color:var(--text-3)}
.search-empty{padding:26px 0 8px}
.search-empty[hidden]{display:none}

@media (max-width:560px){
  .searchbar__row{flex-direction:column}
}
/* Blur on ::before: backdrop-filter makes an element the containing block for position:fixed
   descendants, so the drawer resolved against this 76px header instead of the viewport and
   collapsed to 48px on all 466 pages. Pseudo at z-index:-1 paints identically. */
.site-header{position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--dark-fill-3)}
/* -1px so the tint reaches under the border; the rule is redrawn as an inset shadow because
   a negative-z-index child paints over its parent's border. */
.site-header::before{content:"";position:absolute;inset:0 0 -1px;z-index:-1;
  background:rgba(11,34,57,.86);box-shadow:inset 0 -1px 0 var(--dark-fill-3);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* 84px until the logo was called too small. --stack-top MUST move with this: it is the utility
   bar plus this bar plus its border, and the hero is pulled up by exactly that much, so growing
   one without the other reopens a gap under the header (or overlaps the sticky subnav). Both
   moved together, 84 -> 96 and 121 -> 133. The logo keeps the same 6px of air above and below. */
.site-header .wrap{display:flex;align-items:center;gap:36px;height:96px;padding-inline:var(--gutter)}
/* Fluid between the drawer breakpoint and the design width: 56px at 900px, 84px at 1440px.
   A fixed size does not fit at ~920px - the CTA gets pushed off the right edge - so both this
   and the nav type interpolate, the same way the site's --fs-* scale does.
   Both ends are the old 48/72 plus 16.7%, which is the middle of the 15-20% that was asked for. */
.site-header__logo img{height:clamp(56px, 5.19vw + 9px, 84px);width:auto}
/* nav, list and item all stretch to the full height of the header bar. The link inside stays
   its own size and centred, so nothing moves visually - but the ITEM now ends exactly where the
   header ends, which is what lets the dropdown open flush against the header's bottom edge
   instead of floating 25px up inside it. It also makes the whole height of the bar the hover
   target, rather than the 36px strip the text occupies. */
.nav{display:flex;align-items:stretch;gap:34px;flex:1;align-self:stretch}
.nav__list{display:flex;align-items:stretch;gap:34px;list-style:none}
.nav__item{position:relative;display:flex;align-items:center}
.nav a{padding:8px 0;font:600 clamp(16px, .556vw + 11px, 19px)/1 var(--font-ui);
  letter-spacing:-.015em;white-space:nowrap;
  color:var(--on-dark-3);border-bottom:2px solid transparent}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;border-bottom-color:var(--cyan)}

/* ---- primary nav dropdown ----------------------------------------------
   No JavaScript. :hover covers the mouse, :focus-within covers the keyboard, and because the
   panel is real markup in the DOM rather than something built on demand, a screen reader and a
   crawler both see every link whether or not the panel is open. visibility (not display) is
   what makes the fade possible and still removes it from the tab order when closed. */
/* top:100% is the bottom of the stretched item, which is the bottom of the header bar, so the
   panel is flush against it and there is no dead gap for the pointer to fall through on its way
   down. That is why this needs no bridging pseudo-element. */
.nav__panel{position:absolute;top:100%;left:-22px;z-index:120;
  min-width:290px;max-width:360px;padding:10px;
  background:var(--ink-700);border:1px solid var(--dark-line-2);
  border-radius:0 0 20px 20px;box-shadow:0 24px 60px rgba(2,10,18,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  /* The delay is on the CLOSE, not the open: it opens instantly, and lingers for a moment so a
     move across to the next item does not flicker the panel shut and open again. */
  transition:opacity .16s ease .18s,visibility 0s linear .34s,transform .16s ease .18s}
/* The trailing panels hang off their item's RIGHT edge instead of its left. A closed panel is
   visibility:hidden, which still occupies layout and still counts toward scrollWidth, so a
   left-anchored panel on the last item pushed the whole page 39px wider at ~920px - a
   horizontal scrollbar produced by a menu nobody had opened. */
.nav__item:nth-last-child(-n+2) > .nav__panel{left:auto;right:-22px}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel{opacity:1;visibility:visible;transform:translateY(0);
  transition-delay:0s,0s,0s}
.nav__panel ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.nav__panel a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:13px;
  border-bottom:0;white-space:normal}
.nav__panel a:hover,.nav__panel a:focus-visible{background:var(--dark-fill-3)}
.nav__panelLabel{font:600 15px/1.3 var(--font-ui);color:#fff;letter-spacing:-.01em}
.nav__panelNote{font:400 12.5px/1.45 var(--font-ui);color:var(--on-dark-4)}
.nav__more{display:none}
@media (prefers-reduced-motion: reduce){
  .nav__panel{transition:opacity .01s linear .18s,visibility 0s linear .18s;transform:none}
  .nav__item:hover > .nav__panel,.nav__item:focus-within > .nav__panel{transform:none}
}

.nav-toggle{display:none}

.subnav{position:sticky;top:var(--stack-top);z-index:40;background:rgba(223,234,244,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.subnav--ruled{border-top:1px solid var(--line-2)}
.subnav .wrap{display:flex;gap:8px;height:60px;align-items:center;overflow-x:auto;
  padding-inline:var(--gutter);scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 17px;font:600 12.5px/1 var(--font-ui);color:var(--ui-label);white-space:nowrap}
.subnav a:hover,.subnav a[aria-current]{background:rgba(0,174,239,.12);border-color:rgba(0,174,239,.5);color:var(--text)}

.site-footer{background:var(--ink-800);color:var(--on-dark-meta);padding:76px var(--gutter) 0;
  margin-top:100px;border-top:1px solid var(--line-3)}
.site-footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px}
.site-footer img{height:50px;width:auto;margin-bottom:18px}
.site-footer p{font-size:.9375rem;line-height:1.65;color:var(--on-dark-meta)}
.site-footer h2{font:600 10.5px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:22px}
.site-footer nav li+li{margin-top:12px}
.site-footer nav a{font:400 14.5px/1.3 var(--font-ui);color:var(--on-dark-meta)}
.site-footer nav a:hover{color:#fff}
.site-footer__social{display:flex;gap:12px;margin-top:22px;list-style:none;padding:0}
.site-footer__social li a{width:38px;height:38px;border-radius:50%;border:1px solid var(--dark-line-3);
  display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--font-ui);color:var(--on-dark-3)}
.site-footer__social li a:hover{border-color:var(--cyan);color:#fff}
.site-footer__legal{border-top:1px solid var(--dark-fill-4);padding:14px 0;text-align:center;
  font-family:var(--font-ui);font-size:.84375rem;line-height:1.65;color:var(--on-dark-faint)}
.site-footer__base{border-top:1px solid var(--dark-fill-4);padding:14px 0 18px;display:flex;
  justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer__base *{font:400 13px/1 var(--font-ui);color:var(--on-dark-faint)}
.site-footer__base a:hover{color:#fff}
.site-footer__base ul{display:flex;gap:22px;flex-wrap:wrap}
@media (min-width:1181px){.site-footer__top p{line-height:32.8px}.site-footer nav{padding-top:39.5px}}

/* ============================================================ 7. COMPONENTS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-pill);padding:15px 26px;font:600 14px/1 var(--font-ui);
  white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
/* Dark text: 7.9:1 on the cyan end, 11.9:1 on the pale end. */
.btn-primary{background:linear-gradient(135deg,var(--cyan) 0%,var(--cyan-pale) 100%);color:var(--ink-900);font-weight:700}
.btn-primary:hover{background:linear-gradient(135deg,var(--cyan-pale) 0%,#fff 100%);color:var(--ink-900);
  box-shadow:0 4px 24px rgba(0,174,239,.25)}
/* The outlined secondary action. */
.btn-dark{background:var(--dark-fill);color:#fff;border:1px solid var(--dark-line-4)}
.btn-dark:hover{background:rgba(0,174,239,.1);border-color:var(--cyan-pale);color:#fff}
.btn-soft{background:var(--surface-brand);color:var(--cyan-deep)}
.btn-soft:hover{background:#DCEFF9;color:var(--cyan-deep)}
.btn-ghost{background:var(--dark-fill-3);color:#fff;border:1px solid var(--dark-line-4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:var(--dark-fill-4);color:#fff}
.btn--lg{padding:18px 30px;font-size:15px}
.btn--sm{padding:12px 20px;font-size:13px}
.btn-text{display:inline-flex;align-items:center;gap:8px;font:700 13.5px/1 var(--font-ui);
  color:var(--cyan-deep)}
.btn-text:hover{color:var(--cyan)}
.btn-text--pale{color:var(--cyan-pale)}
.cta__short{display:none}
/* Scrim: z-index 55 under the header (60), so the panel stays above it. Tapping closes. */
.js[data-nav-open]::after{content:"";position:fixed;inset:0;z-index:55;
  background:rgba(4,18,29,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.arrow{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;font-size:15px}

.pill{display:inline-flex;align-items:center;background:var(--paper);color:var(--ui-label);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 20px;
  font:600 13px/1 var(--font-ui)}
.pill:hover{color:var(--text);border-color:rgba(0,174,239,.5)}
.pill[aria-current="true"]{background:var(--cyan-deep);border-color:transparent;color:#fff}
/* The year rail: thirteen of these sit in one row, so they are narrower and monospaced to line
   up as figures. min-height keeps the TOUCH target at 44px even though the box is only as tall
   as 12.5px type needs - thirteen small targets in a row on a phone is exactly the case where
   that matters. WCAG 2.2 SC 2.5.8 only asks for 24px; this site's own standard is 44. */
.pill--sm{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;
  padding:0 14px;min-height:44px}
.tag{display:inline-block;font:600 10px/1 var(--font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan-deep);background:var(--surface-brand);
  padding:5px 10px;border-radius:var(--r-pill)}
.tag--solid{background:var(--cyan);color:var(--ink-900);font-size:10.5px;letter-spacing:.12em;padding:6px 11px}
.tag--pos{color:var(--pos);background:var(--pos-bg);font-size:11px;letter-spacing:.08em;padding:6px 11px}
.tag--neutral{color:var(--ui-label);background:var(--surface);border:1px solid var(--line);font-size:11px;letter-spacing:.08em;padding:5px 10px}
.tag--muted{color:var(--label);background:transparent;border:1px solid var(--line);font-size:11px;letter-spacing:.08em;padding:5px 10px}
.tag--n{font:600 11px/1 var(--font-ui);letter-spacing:.06em;color:var(--text);
  background:var(--surface-brand);padding:5px 10px;text-transform:none}

.card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px 32px}
.card--surface{background:var(--surface)}
.card--brand{background:var(--surface-brand)}
.card--ruled{border:1px solid var(--line);background:none}
.card--tight{padding:24px 24px 26px;border-radius:20px}
.card--tight h3{font-size:1rem;line-height:1.3;letter-spacing:-.02em;margin-bottom:9px}
.card h3 + p{margin-top:9px}
.card p{color:var(--text-3)}

.panel{border-radius:var(--r-panel);padding:52px 56px 56px}
.panel--surface{background:var(--surface)}
.panel--brand{background:var(--surface-brand)}
.panel--dark{background:var(--ink-700);color:#fff}
.panel--lg{border-radius:34px;padding:58px 60px 62px}
.panel--sm{border-radius:30px;padding:46px 54px 50px}
.panel--dark :is(h1,h2,h3,h4){color:#fff}
.panel--dark p{color:var(--on-dark-3)}
.panel--dark .lede{color:#fff}

.stat{display:block}
.stat__n{display:block;font:800 2.125rem/1 var(--font-ui);letter-spacing:-.04em;
  color:var(--text);margin-bottom:13px}
.stat__l{display:block;font-family:var(--font-ui);font-size:.90625rem;line-height:1.55;
  color:var(--text-3)}
.stat--onDark .stat__n{color:#fff;font-size:1.875rem;margin-bottom:9px}
.stat--onDark .stat__l{font:600 10.5px/1.4 var(--font-ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-4)}

/* data-row - the shared grid row behind trials, publications, releases, spec tables,
   roles and thesis lists. Column template comes in as --c so one class serves all. */
.data-row{display:grid;grid-template-columns:var(--c,1fr);gap:var(--gap,26px);
  align-items:center;padding:var(--pad,26px 0);border-top:1px solid var(--line);width:100%;
  text-align:left}
.data-row--ruled-b{border-top:0;border-bottom:1px solid var(--line)}
.data-row--top{align-items:start}
.data-row--base{align-items:baseline}
a.data-row:hover,button.data-row:hover{background:var(--surface)}
a.data-row:hover :is(.data-row__t,.meta,time),a.data-row:hover .data-row__arr{color:var(--cyan-deep)}
.data-row__k{font:600 10.5px/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--label)}
.data-row__v{font:600 14.5px/1.5 var(--font-ui);color:var(--text)}
.data-row__t{font:600 1.0625rem/1.42 var(--font-ui);letter-spacing:-.015em;color:var(--text)}
.data-row__t--lg{font-size:1.25rem;line-height:1.4}
/* date · headline · arrow - the press-release row on home and /investors/ */
.data-row--release{--c:130px 1fr 40px;--gap:28px;--pad:28px 0}
/* date · title · journal · link - publication rows on /science/ and /publications/ */
.data-row--pub{--c:140px 1fr 230px 80px;--gap:26px;--pad:24px 0}
/* date+kind · title · journal · link - the fuller row on /publications/ */
.data-row--pub-lg{--c:150px 1fr 240px 120px;--gap:26px;--pad:26px 0}
/* phase · location · design · N - trial rows on /patients/clinical-trials/ */
.data-row--trial{--c:250px 1fr;--gap:44px;--pad:30px 0}
.data-row__j{font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;
  line-height:1.45;color:var(--text-3)}
.data-row__arr{font-size:18px;color:var(--cyan);justify-self:end}

.table{border:1px solid var(--line);border-radius:28px;overflow:hidden}
.table__head{display:grid;grid-template-columns:var(--c);background:var(--surface);
  border-bottom:1px solid var(--line)}
.table__head > *{padding:16px 20px;font:600 10.5px/1 var(--font-ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--label);text-align:left}
.table__head > :first-child{padding-inline-start:24px}
.table__row{display:grid;grid-template-columns:var(--c);border-bottom:1px solid var(--line-3);
  align-items:center}
.table__row:last-child{border-bottom:0}
.table__row > *{padding:20px}
.table__row > :first-child{padding-inline-start:24px}

.kv{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.kv > div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:17px 26px;
  border-bottom:1px solid var(--line-3)}
.kv > div:last-child{border-bottom:0}
.kv dt{font:600 10.5px/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--label);margin:0}
.kv dd{font:600 14.5px/1.5 var(--font-ui);color:var(--text);margin:0}
.kv--stacked > div{grid-template-columns:1fr;gap:8px;padding:20px 24px}

.callout{background:var(--surface-brand);border-radius:var(--r-card);padding:30px 32px}
.callout p{font-family:var(--font-ui);font-size:1.03125rem;line-height:1.65;color:var(--text-2)}
.disclaimer{background:var(--surface);border-radius:var(--r-card);padding:24px 30px;
  font-family:var(--font-ui);font-size:.875rem;line-height:1.65;color:var(--text-3)}
.source{font:400 12.5px/1.6 var(--font-mono);color:var(--label)}

.media{position:relative;width:100%;border-radius:26px;overflow:hidden;background:var(--surface)}
.media img{width:100%;height:100%;object-fit:cover}
.media picture{display:block;height:100%}
/* Shown when an image has not been supplied yet. Reads as a deliberate empty surface,
   not a broken asset - build.js prints which stems are missing. */
.media__placeholder{display:block;width:100%;height:100%;min-height:inherit;
  background:linear-gradient(140deg,var(--surface) 0%,var(--surface-brand) 100%)}
.panel--dark .media__placeholder,.page-hero .media__placeholder{
  background:linear-gradient(140deg,var(--ink-700) 0%,var(--ink-600) 100%)}
.media--4x3{aspect-ratio:4/3}
.media--16x11{aspect-ratio:16/11} .media--16x8{aspect-ratio:16/8}

.transcript{border:1px solid var(--line);border-radius:var(--r-card);padding:0 26px;margin-top:18px}
.transcript > summary{padding:18px 0;font:700 14px/1 var(--font-ui);color:var(--text-2);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:12px}
.transcript > summary::-webkit-details-marker{display:none}
.transcript > summary::after{content:'+';font:400 20px/1 var(--font-mono);color:var(--cyan-deep)}
.transcript[open] > summary::after{content:'\2212'}
.transcript > :not(summary){padding-bottom:24px}
.transcript p + p{margin-top:14px}

.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field > label,.form legend{font:600 10.5px/1 var(--font-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--label)}
.field input,.field select,.field textarea{border:1px solid var(--line-input);background:var(--dark-fill);
  border-radius:var(--r-input);padding:15px 18px;font:400 15px/1.4 var(--font-ui);color:var(--text);
  width:100%}
.field textarea{resize:vertical;min-height:120px}
.field input::placeholder,.field textarea::placeholder{color:var(--label)}
.form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.form [role=alert]{font:500 13px/1.5 var(--font-ui);color:var(--crit)}
.form-note{font-family:var(--font-ui);font-size:.78125rem;line-height:1.6;color:var(--label)}

/* ============================================================ 8. HERO */
/* The hero is pulled UP behind the sticky chrome, and pads its own content back down.
   PART 4 asks for the navy header to sit over the animation with no visible seam - and
   structurally that is also what makes a gap impossible. Previously the hero began below
   the chrome, so there was a boundary between the two that scrolling could expose; now the
   animation runs edge to edge from y=0 and the translucent header floats on top of it.
   There is no "between" left to go wrong. */
.hero{position:relative;background:var(--ink-900);
  margin-top:calc(-1 * var(--stack-top));
  padding-top:var(--stack-top);
  /* One viewport tall, so everything from the badge down to the stats row is visible on a
     laptop without scrolling. svh (not vh) so mobile browser chrome cannot push the stats
     below the fold. The 640px floor stops it collapsing on very short windows. */
  min-height:max(640px, 100svh);
  display:flex;align-items:stretch;overflow:hidden;isolation:isolate}
@supports not (height: 100svh){ .hero{min-height:max(640px, 100vh)} }
.hero__bg{position:absolute;inset:0;overflow:hidden;z-index:-2}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The loop is a same-origin <video> now, so it is sized exactly like the poster above it -
   object-fit does the cover crop - instead of the 100vw / 56.25vw / min-width:195vh
   gymnastics the Vimeo iframe needed to hide its letterboxing. Both layers being cropped by
   the same rule is what makes the hand-off invisible: the poster IS this video's first
   frame, at this video's aspect ratio (tools/images.py > MANIFEST). */
.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;pointer-events:none;
  /* Held back until playback is genuinely under way, so a half-decoded first frame never
     flickers over the poster. assets/js/hero-facade.js sets data-video. */
  opacity:0;transition:opacity .4s ease}
.hero[data-video="playing"] .hero__bg video{opacity:1}
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(94deg,rgba(4,18,29,.95) 0%,rgba(5,24,40,.84) 30%,rgba(7,30,48,.42) 62%,rgba(7,30,48,.06) 100%)}
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(110% 76% at 84% 26%,rgba(0,174,239,.2) 0%,rgba(0,174,239,0) 62%)}
/* The dissolve lands on --paper, the same navy as the page below. */
.hero__dissolve{position:absolute;left:0;right:0;bottom:0;height:170px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,18,29,0) 0%,rgba(4,18,29,.35) 60%,#04121D 100%)}
.hero__inner{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:40px var(--gutter) 96px;display:flex;flex-direction:column;justify-content:flex-start}
.hero__copy{max-width:830px}
/* The motto stays in the sans; the emphasised word is weight 700. */
.hero h1{font-family:var(--font-ui);font-size:var(--fs-hero);line-height:1.01;letter-spacing:-.045em;color:#fff;
  margin-bottom:20px}
.hero h1 strong{font-style:normal;font-weight:700;background:linear-gradient(135deg,var(--cyan) 0%,var(--cyan-pale) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero__lede{font-family:var(--font-ui);font-size:1.25rem;line-height:1.6;
  color:var(--on-dark-2);max-width:47ch;margin-bottom:30px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__play{width:24px;height:24px;flex:none;border-radius:50%;background:#fff;color:var(--ink-900);
  display:flex;align-items:center;justify-content:center}
.hero__play svg{width:9px;height:9px;fill:currentColor;margin-left:1px}
.hero__ticker{margin-top:auto;padding-top:40px;display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.hero__ticker > li{padding:0 40px 0 0;margin-right:40px;border-right:1px solid var(--dark-line-2)}
/* The rules separate the three stats; the last one has nothing to its right. */
.hero__ticker > li:last-child{border-right:0;margin-right:0;padding-right:0}

.lightbox{width:min(1180px,100%);max-width:none;max-height:none;border:0;padding:56px;
  background:transparent;overflow:visible;margin:auto;color:#fff}
.lightbox::backdrop{background:rgba(4,18,29,.92);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px)}
.lightbox__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:18px}
.lightbox__head h2{font-size:1.625rem;line-height:1.2;color:#fff}
.lightbox__frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:20px;overflow:hidden;
  background:#000}
.lightbox__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox .btn-ghost{padding:11px 20px;font-size:13px}

/* ============================================================ 9. PAGE PIECES */
/* dark image hero used by /science/, /patients/, /careers/ */
/* Dark image hero, light page: the join is a clean cut. It used to be a 170px dissolve; Uri asked
   for a hard separation on 4 Sept 2026, having asked for the same on the home page's bands. */
.page-hero{--em-a:var(--cyan);--em-b:var(--cyan-pale);
  position:relative;overflow:hidden;background:var(--ink-800);min-height:400px;
  display:flex;align-items:flex-end}
/* The photograph sits far back, a texture behind the words. */
.page-hero > img,.page-hero > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.16;filter:blur(1px)}
.page-hero > picture{position:absolute;inset:0}
/* Pages without a photograph take one of the three medical textures. */
.page-hero--plain{background:var(--ink-800) url(../img/bg-molecular.jpg) center/cover no-repeat}
.page-hero.page-hero--plain::after{background:linear-gradient(135deg,rgba(4,18,29,.96) 0%,rgba(4,40,62,.86) 45%,rgba(4,18,29,.95) 100%)}
[data-page="pipeline"] .page-hero--plain,[data-page="about-leadership"] .page-hero--plain{background-image:url(../img/bg-neural-cells.jpg)}
[data-page="news"] .page-hero--plain,[data-page="publications"] .page-hero--plain,[data-page="contact"] .page-hero--plain{background-image:url(../img/bg-petri-dish.jpg)}
.page-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(4,18,29,.9) 0%,rgba(0,100,143,.16) 45%,rgba(4,18,29,.88) 100%)}
/* The section name ghosted behind the heading, from data-ghost: decorative, never read aloud. */
.page-hero::before{content:attr(data-ghost);position:absolute;right:-1%;bottom:-10%;z-index:1;pointer-events:none;
  font:italic 400 clamp(6rem,16vw,15rem)/0.8 var(--font-serif);color:#fff;opacity:.04;letter-spacing:-.02em;white-space:nowrap}
.page-hero__inner{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:72px var(--gutter) 56px}
.page-hero h1{color:#fff;margin:22px 0 18px;max-width:22ch;text-wrap:balance}
.page-hero p{color:var(--on-dark-2);font-size:1.1875rem;line-height:1.62}
/* Light page head: headline left, standfirst right, baseline-aligned. */
.page-head{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:end;
  margin:28px 0 44px}
/* Numbered two-column section - the Science/Patients "01 · heading | body" pattern. */
.numbered{display:grid;grid-template-columns:320px 1fr;gap:70px;align-items:start}
.numbered__label{position:sticky;top:calc(var(--stack-top) + 70px)}
.numbered__label h2{font-size:var(--fs-30);line-height:1.16}
.panel--dark .numbered__label h2{color:#fff}

.door{display:flex;flex-direction:column;text-align:left}
.door .media{margin-bottom:26px}
.door .eyebrow{margin-bottom:14px}
.door h2,.door h3{font-weight:700;font-size:1.5625rem;line-height:1.22;letter-spacing:-.03em;
  margin-bottom:12px}
.door h2{font-family:var(--font-ui)}
.door p,.door__body{display:block;font-family:var(--font-ui);font-size:1rem;line-height:1.62;
  color:var(--text-3);margin-bottom:18px}
.door:hover h2,.door:hover h3{color:var(--cyan-deep)}
.door:hover .media img{transform:scale(1.03)}
.door .media img{transition:transform .5s ease}

.steps > li{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:20px 0;
  border-top:1px solid var(--line);align-items:start}
.steps__n{font:700 12px/1 var(--font-ui);letter-spacing:.06em;color:var(--cyan);padding-top:4px}
.steps h3{font-weight:700;font-size:1.0625rem;line-height:1.3;letter-spacing:-.02em;margin-bottom:6px}
.steps p{font-size:.96875rem;line-height:1.6}


.site-card{background:var(--card-bg);border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px}
.site-card__city{display:block;font:500 10.5px/1 var(--font-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.site-card h3{font-weight:700;font-size:1rem;line-height:1.32;letter-spacing:-.02em;margin-bottom:12px}
.site-card__pi-label{font-family:var(--font-ui);font-size:.8125rem;line-height:1.5;
  color:var(--label);margin-bottom:3px}
.site-card__pi{font:500 14px/1.4 var(--font-ui);color:var(--text-2)}

.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.res-grid a{border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  font:500 14.5px/1.4 var(--font-ui);color:var(--text-2);display:block}
.res-grid a:hover{border-color:var(--cyan);color:var(--cyan-deep)}

.quote-card{background:var(--ink-700);border-radius:28px;padding:34px 36px 36px;color:#fff}
.quote-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  border-top:1px solid var(--dark-line);padding-top:20px}
.quote-card dt{font:500 10px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-5);margin-bottom:7px}
.quote-card dd{font:500 14.5px/1 var(--font-mono);color:#fff;margin:0}

.milestones li{display:grid;grid-template-columns:16px 1fr;gap:18px;padding:22px 26px;
  border-bottom:1px solid var(--line-3);align-items:start}
.milestones li:last-child{border-bottom:0}
.milestones__dot{width:11px;height:11px;border-radius:50%;background:var(--dot,var(--cyan));margin-top:5px}
.milestones h3{font:600 15.5px/1.4 var(--font-ui);letter-spacing:0;color:var(--text);margin-bottom:6px}
.milestones p{font-size:.875rem;line-height:1.55;color:var(--label)}

.article-card{display:flex;flex-direction:column;text-align:left}
.article-card .media{margin-bottom:20px}
.article-card__meta{display:flex;gap:11px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.article-card h2,.article-card h3{font-family:var(--font-ui);font-weight:600;font-size:1.1875rem;line-height:1.36;
  letter-spacing:-.02em;margin-bottom:12px}
.article-card:hover :is(h2,h3){color:var(--cyan-deep)}
.article-card p{font-size:.9375rem;line-height:1.6}

.feature-card{background:var(--ink-700);border-radius:var(--r-panel);overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;text-align:left;width:100%}
.feature-card__body{padding:52px 54px 56px}
.feature-card h2{font-size:var(--fs-34);line-height:1.2;color:#fff;margin-bottom:18px}
.feature-card p{font-size:1.03125rem;line-height:1.66;color:var(--on-dark-3);margin-bottom:26px}
/* A wire release has no feature image; the card is text-only rather than half empty. */
.feature-card--noimg{grid-template-columns:1fr}

/* overflow-wrap on the release body, and the reason it is not a nicety.
   Press releases from 2014-2021 quote bare URLs in their boilerplate - prnewswire.com
   permalinks, matimop.org.il attachment paths, an alsagoldenwest.org Google Sites link.
   A URL has no break opportunity, so on a 375px phone the paragraph simply grew: 99 of the
   466 pages scrolled sideways, the worst by 437px. The releases are archival and cannot be
   reworded, so the fix belongs here. break-word, not anywhere: it breaks a word only when
   the word cannot fit at all, so ordinary prose wraps exactly as it does today. */
.entry{max-width:74ch;display:flex;flex-direction:column;gap:24px;overflow-wrap:break-word}
.entry a{overflow-wrap:break-word}
.card h2,.card p,.card li,.sticky-aside h2{overflow-wrap:break-word}
.entry p{font-size:1.125rem;line-height:1.75;color:var(--text-2)}
.entry h2{font-size:var(--fs-30);line-height:1.2;margin-top:20px}
.entry h3{font-size:1.25rem}
.entry ul,.entry ol{display:flex;flex-direction:column;gap:12px;padding-left:1.2em}
.entry li{font-family:var(--font-ui);font-size:1.125rem;line-height:1.75;color:var(--text-2);
  list-style:disc}
.entry ol li{list-style:decimal}
.entry a{text-decoration:underline;text-underline-offset:2px}
.refs{counter-reset:ref}
.refs li{font-family:var(--font-ui);font-size:.90625rem;line-height:1.6;color:var(--text-3);
  padding:12px 0;border-top:1px solid var(--line-3);list-style:none;scroll-margin-top:180px}
.refs li:target{background:var(--surface-brand)}
.entry sup a{text-decoration:none;font-weight:600;padding:0 1px}

/* ---- content blocks (src/lib/blocks.js) ----------------------------------
   Each rule here backs one block type, which is named after the Ghost editor card it will
   become. Keep the two in step: a block with no rule is an unstyled paragraph in production,
   and tools/audit.js fails on a class with no rule behind it. */

/* Figures break the 74ch measure deliberately: a chart or a video at reading width is
   unreadable. --wide pushes to the full column, which is what Ghost's "wide" card width does. */
/* .list carries no styling of its own: .entry ul/ol above already style body lists. It exists
   so a list block is identifiable in the markup and so this rule can be found from it. */
.list{}
.fig{display:flex;flex-direction:column;gap:12px;margin:8px 0}
.fig--embed{gap:12px}
.fig--wide{width:min(100%, 1040px);margin-inline:calc(50% - min(50%, 520px))}
.fig figcaption{font-size:.875rem;line-height:1.55;color:var(--text-3)}
.fig picture,.fig img{width:100%;height:auto;border-radius:var(--r-card);display:block}

/* The facade box holds the poster, then holds the player after a click. aspect-ratio reserves
   the space up front so swapping one for the other cannot shift the page (CLS). */
.embed{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--ink-800);
  isolation:isolate}
.embed--16x9{aspect-ratio:16/9}
.embed picture,.embed img,.embed__blank,.embed__frame{position:absolute;inset:0;width:100%;
  height:100%;border:0;display:block}
.embed img{object-fit:cover}
.embed__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:12px;flex-direction:column;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,rgba(4,18,29,.15),rgba(4,18,29,.55))}
.embed__play:hover .embed__playIcon{background:var(--cyan);transform:scale(1.06)}
.embed__playIcon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--ink-900);display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,transform .18s ease}
.embed__playIcon svg{width:19px;height:22px;fill:currentColor;margin-left:3px}
.embed__playText{font:600 13px/1 var(--font-ui);letter-spacing:.02em;
  text-shadow:0 1px 3px rgba(4,18,29,.5)}
.embed[data-embed-state="playing"]{background:#000}
@media (prefers-reduced-motion: reduce){
  .embed__playIcon{transition:none}
  .embed__play:hover .embed__playIcon{transform:none}
}

.gallery{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:12px}
.gallery picture,.gallery img{width:100%;height:100%;object-fit:cover;border-radius:16px}

.pullquote{border-left:3px solid var(--cyan);padding:4px 0 4px 24px;
  display:flex;flex-direction:column;gap:10px}
.pullquote p{font-family:var(--font-serif);font-size:1.375rem;line-height:1.45;color:var(--text)}
.pullquote cite{font-style:normal;font-size:.875rem;color:var(--text-3)}

.rule{border:0;border-top:1px solid var(--line);margin:12px 0}

.callout{display:flex;gap:14px;padding:18px 22px;border-radius:18px;
  background:var(--info-bg);border:1px solid var(--line)}
.callout__emoji{font-size:1.125rem;line-height:1.6;flex:none}
.callout__body{font-size:1rem;line-height:1.65;color:var(--text-2)}
.callout--note{background:var(--surface);border-color:var(--line)}
.callout--warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout--info{background:var(--info-bg);border-color:var(--line)}

.toggle{border:1px solid var(--line);border-radius:18px;background:var(--card-bg);overflow:hidden}
.toggle summary{cursor:pointer;padding:16px 22px;font:600 1rem/1.45 var(--font-ui);
  color:var(--text);list-style:none;display:flex;justify-content:space-between;gap:16px;
  min-height:44px;align-items:center}
.toggle summary::-webkit-details-marker{display:none}
.toggle summary::after{content:'+';font-weight:400;font-size:1.375rem;line-height:1;
  color:var(--cyan-deep);flex:none}
.toggle[open] summary::after{content:'\2212'}
.toggle__body{padding:0 22px 18px;display:flex;flex-direction:column;gap:12px}

.filecard{display:flex;align-items:center;justify-content:space-between;gap:20px;
  text-decoration:none;min-height:44px}
.filecard:hover{background:var(--surface-brand)}
.filecard__meta{display:flex;flex-direction:column;gap:4px}
.filecard__name{font:600 1rem/1.35 var(--font-ui);color:var(--text)}
.filecard__arrow{flex:none;color:var(--cyan-deep)}
.filecard__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}

.bookmark{display:block;text-decoration:none}
.bookmark:hover{background:var(--surface-brand)}
.bookmark__text{display:flex;flex-direction:column;gap:6px}
.bookmark__title{font:600 1.0625rem/1.35 var(--font-ui);color:var(--text)}
.bookmark__site{color:var(--cyan-deep);letter-spacing:.01em}

/* Wide tables scroll inside their own box rather than making the page scroll sideways. */
.code{font:400 12.5px/1.7 var(--font-mono);color:var(--text-2);background:var(--surface);
  padding:16px 18px;border-radius:14px;white-space:pre;display:block}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.9375rem}
.table caption{text-align:left;font-size:.875rem;color:var(--text-3);padding-bottom:10px}
.table th,.table td{text-align:left;padding:11px 16px 11px 0;border-bottom:1px solid var(--line-3);
  vertical-align:top}
.table th{font:600 11px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--label);white-space:nowrap}
.table td{color:var(--text-2);line-height:1.6}

@media (max-width:640px){
  .fig--wide{width:100%;margin-inline:0}
  .gallery{grid-template-columns:1fr 1fr}
  .embed__playIcon{width:52px;height:52px}
}

/* Leadership without photographs. No image slot is reserved at all, so there is no empty box
   and nothing standing in for a picture: a rule, a name, a role. Three columns on a wide
   screen, one on a phone. */
.people{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin-top:8px}
/* A ruled card - still no picture slot, still a name and a role. */
.person{border:1px solid var(--line);border-radius:20px;background:var(--card-bg);transition:border-color .2s,transform .3s}
.person:hover{border-color:rgba(0,174,239,.45);transform:translateY(-2px)}
.person__link{display:flex;flex-direction:column;gap:6px;padding:24px 22px;text-decoration:none;
  min-height:44px}
.person__link:hover .person__name{color:var(--cyan-deep)}
.person__name{font:600 1.0625rem/1.3 var(--font-ui);letter-spacing:-.015em;color:var(--text)}
.person__role{font-size:.90625rem;line-height:1.5;color:var(--text-3)}
@media (max-width:1024px){ .people{grid-template-columns:repeat(2,1fr);gap:14px} }
@media (max-width:640px){ .people{grid-template-columns:1fr} }

.name-list li{border-top:1px solid var(--line);padding:18px 0;font:600 1.125rem/1.35 var(--font-ui);
  letter-spacing:-.02em;color:var(--text)}
.name-list a{color:inherit}
.name-list a:hover{color:var(--cyan-deep)}

.empty-state{background:var(--surface-brand);border-radius:24px;padding:36px 38px;display:grid;
  grid-template-columns:1fr auto;gap:36px;align-items:center}
.empty-state h2{font-family:var(--font-ui);font-weight:700;font-size:1.375rem;line-height:1.28;margin-bottom:10px}
.empty-state p{font-size:1rem;line-height:1.62;max-width:56ch}

/* ============================================================ 10. MOTION */
@keyframes bsFade{from{opacity:0}to{opacity:1}}
@keyframes bsRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero h1{animation:bsRise .8s ease .05s both}
.hero__lede{animation:bsRise .8s ease .15s both}
.hero__actions{animation:bsRise .8s ease .25s both}
.hero__ticker{animation:bsRise .8s ease .35s both}
.lightbox[open]{animation:bsFade .25s ease both}

/* ============================================================ 11. RESPONSIVE */
/* ---- the middle of the range -------------------------------------------
   Card grids used to hold their full column count from 1440 all the way down to 900, then drop
   to a single column in one step. That left the whole tablet range broken: a four-column grid at
   960px gave 178px cards, and at iPad landscape 194px - far too narrow for a card carrying an
   eyebrow, a heading and a paragraph. There was no intermediate tier at all.
   The scale is now graded. --cols is the knob each grid already sets, so stepping it down here
   reaches every grid on the site without naming them one by one. */
@media (max-width:1180px){
  :root{--gutter:32px;--sec:72px}
  .site-footer__top{grid-template-columns:1fr 1fr;gap:40px}
  .feature-card{grid-template-columns:1fr}
  .feature-card__img{min-height:240px;order:-1}
  /* Four is too many below the design width. Three still reads. */
  .grid--4{--cols:3}
}
@media (max-width:1024px){
  /* iPad landscape and small laptops: two columns, never three. */
  .grid--4,.grid--3,.grid--3-lg{--cols:2}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  /* The sticky label column in .numbered stops earning its width here. */
  .numbered{grid-template-columns:1fr;gap:28px}
  .numbered__label{position:static}
}
@media (max-width:900px){
  /* .split carries prose beside prose, so it goes single-column with the drawer breakpoint. */
  .split{--split:1fr!important}
}
@media (max-width:640px){
  /* The ghosted section name is sized in vw; on a phone that runs off both edges. */
  .page-hero::before{font-size:4.5rem;right:auto;left:50%;transform:translateX(-50%);bottom:-4%}
  .site-footer__base{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .site-footer__base ul{justify-content:center;gap:16px 20px}
  .grid--4,.grid--3,.grid--3-lg,.grid--2{--cols:1}
  .res-grid{grid-template-columns:1fr}
  .callout{flex-wrap:wrap}
}
@media (max-width:900px){
  :root{--gutter:24px;--sec:64px;--stack-top:77px}
  /* No JS: the header wraps to two rows and every link stays visible and reachable.
     The drawer only exists once nav.js has set .js on <html> (acceptance criterion 10). */
  .site-header .wrap{height:auto;min-height:76px;gap:14px;flex-wrap:wrap;padding-block:14px}
  /* 48 + 2*14 padding = 76 exactly, so the no-JS bar does not grow. flex-shrink:0:
     the SVG is preserveAspectRatio="none", so a squeezed box is squashed artwork. */
  .site-header__logo{flex-shrink:0}
  .site-header__logo img{height:48px}
  .nav{flex:1 0 100%;flex-wrap:wrap;gap:8px 20px}
  .nav a{font-size:16px}
  .nav__list{flex-wrap:wrap;gap:8px 20px}
  /* There is no hover on a touch screen, so the dropdown flattens: every shortcut is simply
     part of the drawer, indented under the section it belongs to. Nothing is hidden behind an
     interaction the device cannot perform. */
  .nav__panel{position:static;opacity:1;visibility:visible;transform:none;transition:none;
    min-width:0;max-width:none;margin:0;padding:0;background:none;border:0;box-shadow:none}
  .nav__panel::before{display:none}
  .js .site-header .wrap{height:76px;flex-wrap:nowrap;padding-block:0}
  /* Anchored right, under the button, down to the bottom edge so it covers the hero.
     overscroll-behavior stops a flick scrolling the page underneath. All 19 sub-pages open at
     once was 1,049px of list in a 731px panel - a sliver you had to scroll - so they collapse
     behind a chevron and only one section is open at a time. */
  .js .nav{position:fixed;top:var(--drawer-top,var(--stack-top));right:0;bottom:0;left:auto;
    width:min(480px,100vw);background:var(--ink-700);
    border-left:1px solid var(--dark-fill-3);box-shadow:-18px 22px 44px rgba(4,18,29,.38);
    flex:none;flex-direction:column;align-items:stretch;gap:0;
    padding:6px 24px 24px;overflow-y:auto;overscroll-behavior:contain;display:none}
  .js .nav[data-open]{display:flex}
  .js .nav__panel{display:none}
  .js .nav__item[data-open] > .nav__panel{display:block}
  .js .nav__item:last-child > a{border-bottom:0}
  .js .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .js .nav__item{display:block;position:relative}
  .js .nav__more{display:grid;place-items:center;position:absolute;top:0;right:-6px;
    width:58px;height:60px;background:none;border:0;padding:0;cursor:pointer}
  .js .nav__more::before{content:'';width:9px;height:9px;margin-top:-4px;
    border-right:2px solid var(--on-dark-3);border-bottom:2px solid var(--on-dark-3);
    transform:rotate(45deg)}
  .js .nav__item[data-open] .nav__more::before{margin-top:3px;transform:rotate(-135deg)}
  .js .nav__panel a{font-size:16px;padding:12px 0 12px 18px;color:var(--on-dark-3)}
  .js .nav__panelNote{display:none}
  /* display:block - padding on an inline box paints but reserves no line height, so each link
     drew a 62px pill into a 23px slot and the sections overlapped. */
  .js .nav a{display:block;padding:18px 0;font-size:20px;border-bottom:1px solid var(--dark-fill-3)}
  .js .nav a[aria-current]{border-bottom-color:var(--cyan)}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    margin-left:auto;color:#fff;font:600 13px/1 var(--font-ui);
    border:1px solid var(--dark-line-4);border-radius:var(--r-pill);
    padding:10px 18px;min-height:44px}   /* 44px: minimum comfortable touch target */
  /* The investor CTA used to be display:none here - hidden from every phone visitor. Kept,
     compact: no arrow, one-word label. */
  .site-header .btn-primary{margin-left:auto;padding:11px 16px;font-size:13px}
  .site-header .btn-primary .arrow,.site-header .btn-primary .cta__long{display:none}
  .site-header .btn-primary .cta__short{display:inline}
  /* margin-left:auto is on the pill, not the toggle: it pushes the pair right together and
     the toggle, being last, keeps the right edge it always had. */
  .js .site-header .nav-toggle{margin-left:0}
  @media (max-width:380px){
    .site-header__logo{flex-shrink:1}
    .site-header__logo img{height:35px}
    .site-header .wrap{gap:10px}
    .site-header .btn-primary{padding:11px 13px}
  }
  /* .grid is NOT in this list any more. It used to be, with !important, which is what made the
     whole tablet range single-column: an iPad portrait got one 705px-wide card where two fit
     comfortably. Card grids are stepped down by --cols in the graded blocks above instead, and
     only reach one column at 640. These three genuinely are one-column below 900: .split holds
     prose beside prose, .numbered has a sticky label rail, .page-head is a heading pair. */
  /* The chip row goes above the page title on a phone. Emitted after the heading it starts
     775px down on /pipeline/als/ - past a 46px headline and a standfirst - so nobody sees the
     thing that helps them navigate until they have scrolled past it. Scoped to
     main[data-subnav]: five pages, the other 461 keep their block layout. Still sticky, so
     scrolling behaves as before; it just starts visible. */
  main[data-subnav]{display:flex;flex-direction:column}
  main[data-subnav] > .subnav{order:-1}
  .split,.numbered,.page-head{grid-template-columns:1fr!important;gap:var(--gap-sm,34px)}
  .grid{gap:var(--gap-sm,34px)}
  .numbered__label{position:static}
  .page-head{margin-bottom:34px}
  .hero{padding-top:var(--stack-top)}
  /* Bottom padding was 56px, which left the stats row sitting inside the dissolve on an iPad
     in portrait. The ticker is margin-top:auto inside a min-height hero, so this lifts the row
     without making the hero any taller. */
  .hero__inner{padding:24px var(--gutter) 76px}
  /* Three short figures side by side rather than a 270px stack - that column alone put the
     stats row 145px below the fold on a 375x812 phone. */
  .hero__ticker{padding-top:24px;display:grid;
    grid-template-columns:repeat(3,1fr);gap:14px}
  .hero__ticker > li{padding:0 10px 0 0;margin-right:0;border-right:1px solid var(--dark-line-2)}
  .hero__ticker > li:nth-of-type(3){border-right:0}
  .hero .stat--onDark .stat__n{font-size:1.375rem;margin-bottom:5px}
  .hero .stat--onDark .stat__l{font-size:9.5px;letter-spacing:.08em}
  .panel,.panel--lg,.panel--sm{padding:36px 26px 40px;border-radius:26px}
  .feature-card__body{padding:34px 26px 38px}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .table,.table__head,.table__row{border-radius:0}
  .table{border-inline:0;border-radius:0;margin-inline:calc(var(--gutter) * -1);border-left:0;border-right:0}
  .table__head{display:none}
  .table__row{grid-template-columns:1fr;gap:4px;padding:18px var(--gutter)}
  .table__row > *{padding:0}
  .table__row > :first-child{padding-inline-start:0;font-weight:700}
  .table__row > *[data-label]::before{content:attr(data-label) ': ';font:600 10.5px/1.6 var(--font-ui);
    letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
  .data-row{grid-template-columns:1fr!important;gap:10px;align-items:start}
  .data-row__arr{justify-self:start}
  .kv > div{grid-template-columns:1fr;gap:6px}
  .quote-card dl{grid-template-columns:1fr;gap:14px}
  .empty-state{grid-template-columns:1fr;gap:22px}
  .steps > li{grid-template-columns:34px 1fr;gap:12px}
  .lightbox{padding:16px}
  .sticky-aside{position:static}
  .site-footer{padding-top:56px;margin-top:64px}
}
@media (max-width:560px){
  :root{--gutter:20px}
  .site-footer__top{grid-template-columns:1fr;gap:34px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{justify-content:center}
  .hero__ticker{gap:18px}
  .hero__ticker > li{border-right:0;padding-right:0}
  .res-grid{grid-template-columns:1fr}
}

/* Short viewports - a 640px-tall phone leaves ~527px under the chrome, which is not enough
   for a headline, a six-line lede, two stacked buttons and three figures at full size.
   Rather than shrink the hero everywhere, tighten only where the height actually runs out. */
@media (max-width:900px) and (max-height:720px){
  /* Sideways: 277px of usable height, five links at 62px need 310. Tighten, don't scroll. */
  .js .nav a{padding:10px 0;font-size:17px}
  .js .nav{padding-block:2px 12px}
  .hero__lede{font-size:1.0625rem;line-height:1.5;margin-bottom:22px}
  .hero__actions{flex-direction:row;flex-wrap:wrap;gap:10px}
  .hero__actions .btn{padding:14px 20px;font-size:14px}
  .hero__inner{padding-top:16px;padding-bottom:28px}
  .hero__ticker{padding-top:14px}
}

/* ============================================================ 12. PREFERENCES */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;
    scroll-behavior:auto!important}
}
@media print{
  /* Theme is light already; paper just needs the blue ground off so it does not flood. */
  :root{--paper:#fff;--surface:#F5F8FB;--card-bg:#fff}
  h1,h2{color:#000}
  .site-header,.subnav,.hero__bg,.nav-toggle,.lightbox,.page-hero::before{display:none!important}
  .page-hero,.page-hero--plain{background:#fff!important;border:0}
  .page-hero::after{display:none}
  .page-hero h1,.page-hero p{color:#000}
  body{color:#000}
  a[href^="http"]::after{content:' (' attr(href) ')';font-size:.8em;word-break:break-all}
}
@media (forced-colors:active){
  .btn,.pill,.tag{border:1px solid currentColor}
  .hero h1 strong{-webkit-text-fill-color:currentColor;color:currentColor}
}