/* ==========================================================================
   Aroma Biotech
   One stylesheet. No framework, no build step.
   Order: tokens, reset, layout, type, components, blocks, motion, responsive.
   ========================================================================== */

:root{
  /* ---- color ---- */
  --cream:#F8F4EC;
  --white:#FFFFFF;
  --crimson:#BF092F;
  --crimson-dark:#9E0726;
  --navy:#153A67;
  --cyan:#30ADDB;
  --yellow:#FFC000;
  --ink:#1A1A1A;
  --grey:#8C8579;
  --grey-text:#6E675C;
  --rule:rgba(21,58,103,.14);
  --hairline:rgba(21,58,103,.08);
  --shadow-card:0 2px 24px rgba(21,58,103,.06);
  --acc-teal:#2E8B9E;
  --acc-orange:#F0A02A;
  --acc-coral:#EE5B5B;
  --acc-cyan:#30ADDB;
  /* Brand cyan measures 4.43:1 on navy, so 13px kicker type uses a tint of it
     at 5.8:1. The brand rule that cyan never carries small text still holds. */
  --cyan-light:#6FC5E8;

  /* ---- surface tokens, flipped by panel classes ---- */
  --surface:var(--cream);
  --text:var(--navy);
  --text-quiet:var(--grey-text);
  --display:var(--crimson);
  --kicker:var(--crimson);
  --line:var(--rule);

  /* ---- type ---- */
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,sans-serif;
  /* Tops out at 72px. At 120px the headline ran to six lines on a 1440x900
     screen and pushed the buttons and the cut-out off the bottom of it, which
     costs more than the extra height buys. Unchanged at 390. */
  --t-hero:clamp(2.75rem, 1.30rem + 4.10vw, 4.5rem);
  --t-h2:clamp(2rem, 1.10rem + 2.80vw, 3.5rem);
  --t-h3:clamp(1.5rem, 1.15rem + 1.10vw, 2rem);
  --t-h4:1.25rem;
  --t-stat:clamp(2.5rem, 1.40rem + 3.40vw, 4rem);
  --t-stat-solo:clamp(3.5rem, 1.20rem + 7.10vw, 8rem);
  --t-plate:clamp(1.5rem, 0.80rem + 2.20vw, 2.5rem);
  --t-quote:clamp(1.375rem, 1.05rem + 1.00vw, 1.75rem);
  --t-body:1rem;
  --t-lede:1.25rem;
  --t-small:0.9375rem;
  --t-caption:0.875rem;
  --t-kicker:0.8125rem;
  --lh-hero:0.98; --lh-h2:1.06; --lh-h3:1.2;
  --lh-body:1.65; --lh-tight:1.35;
  --ls-display:-0.02em; --ls-mid:-0.01em; --ls-kicker:0.14em;
  --measure:62ch;
  --measure-lede:48ch;

  /* ---- layout ---- */
  --maxw:1280px;
  --maxw-band:1440px;
  --margin:24px;
  --gutter:20px;
  --col:minmax(0,1fr);
  --nav-h:64px;

  /* ---- spacing, 8px base ---- */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:80px; --s9:96px; --s10:120px; --s11:160px;
  --sec-y:88px;
  --sec-y-tight:56px;

  /* ---- surfaces ---- */
  --radius-card:20px;
  --radius-pill:999px;

  /* ---- motion ---- */
  --dur:600ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  --rise:24px;
  --stagger:80ms;
  --parallax-depth:0.15;
}

@media (min-width:768px){
  :root{ --margin:40px; --t-body:1.125rem; --sec-y:120px; --nav-h:72px; }
}
@media (min-width:1024px){
  :root{ --margin:56px; --gutter:32px; --t-lede:1.375rem; }
}
@media (min-width:1440px){
  :root{ --margin:80px; --sec-y:160px; }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ overflow-x:clip; }
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font:400 var(--t-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; }
img{ display:block; height:auto; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--navy);
  border-radius:2px;
}
.panel--navy :focus-visible{ box-shadow:0 0 0 4px var(--yellow); }

.skip{
  position:absolute; left:8px; top:-64px; z-index:60;
  display:inline-flex; align-items:center; min-height:44px;
  background:var(--crimson); color:#fff; padding:0 20px;
  border-radius:var(--radius-pill); font:600 15px/1 var(--font-body);
  text-decoration:none; transition:top 180ms var(--ease);
}
.skip:focus{ top:8px; }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--margin);
  display:grid; grid-template-columns:repeat(4,var(--col)); gap:var(--gutter);
}
.wrap--band{ max-width:var(--maxw-band); }
.wrap > *{ grid-column:1 / -1; min-width:0; }

.blk{
  background:var(--surface);
  color:var(--text);
  padding-block:var(--sec-y);
  scroll-margin-top:96px;
}
.blk--image_band{ padding-block:0; }
.blk--hero{ padding-block:0; }

/* Pairings: four adjacencies that read as one section. */
.blk--hero        + .blk--text          { padding-top:0; }
.blk--assets      + .blk--stats         { padding-top:0; }
.blk--locator_map + .blk--stats         { padding-top:0; }
.blk--process     + .blk--assets        { padding-top:0; }
.blk--contact     + .blk--image_band    { padding-top:0; }
.blk--image_band  + .blk                { padding-top:var(--sec-y-tight); }

.panel--navy{
  --surface:var(--navy); --text:#FFFFFF; --text-quiet:rgba(255,255,255,.78);
  --display:#FFFFFF; --kicker:var(--cyan-light); --line:rgba(255,255,255,.22);
}
.panel--crimson{
  --surface:var(--crimson); --text:#FFFFFF; --text-quiet:rgba(255,255,255,.86);
  --display:#FFFFFF; --kicker:rgba(255,255,255,.9); --line:rgba(255,255,255,.28);
}
/* A panel bleeds edge to edge; its content stays on the grid. */
.blk--problem,.blk--timeline{ padding-block:0; background:var(--cream); }
.panel{ background:var(--surface); color:var(--text); }
.panel__body{ padding-block:var(--sec-y); }
.panel__media + .panel__body{ padding-top:var(--sec-y-tight); }

/* ==========================================================================
   Type
   ========================================================================== */

.kicker{
  font:600 var(--t-kicker)/1.2 var(--font-body);
  letter-spacing:var(--ls-kicker);
  text-transform:uppercase;
  color:var(--kicker);
  margin-bottom:var(--s3);
}
.kicker__rule{
  display:block; width:40px; height:2px;
  background:var(--kicker); margin-bottom:var(--s2);
}

.sec__head{ margin-bottom:var(--s7); }
.sec__title{
  font:700 var(--t-h2)/var(--lh-h2) var(--font-display);
  letter-spacing:var(--ls-display);
  color:var(--display);
  text-wrap:balance;
  max-width:20ch;
}
.sec__title--wide{ max-width:26ch; }
.sec__title--sub{ font-size:var(--t-h3); line-height:var(--lh-h3); letter-spacing:var(--ls-mid); }
.sec__lede{
  font-size:var(--t-lede); line-height:1.5;
  max-width:var(--measure-lede);
  margin-top:var(--s4);
  color:var(--text);
}

.prose{ max-width:var(--measure); }
.prose p{ margin-bottom:var(--s3); }
.prose p:last-child{ margin-bottom:0; }
.prose h3{
  font:700 var(--t-h3)/var(--lh-h3) var(--font-display);
  letter-spacing:var(--ls-mid); color:var(--text);
  margin:var(--s6) 0 var(--s2);
}
.prose ul,.prose ol{ margin:var(--s3) 0; padding-left:0; }
.prose ol{ counter-reset:n; }
.prose li{ position:relative; padding-left:var(--s3); margin-bottom:12px; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--crimson);
}
.prose ol li{ counter-increment:n; }
.prose ol li::before{
  content:counter(n) "."; position:absolute; left:0; top:0;
  color:var(--crimson); font-weight:600;
}
.prose a,.contact__email a{
  color:var(--crimson); text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:2px;
}
.prose a:hover{ color:var(--crimson-dark); }
.panel--navy .prose a,.panel--crimson .prose a{ color:#fff; }

/* ==========================================================================
   Buttons and tags
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding-inline:28px; border-radius:var(--radius-pill);
  font:600 16px/1.2 var(--font-body); letter-spacing:.01em;
  text-decoration:none; text-align:center;
  transition:background 200ms var(--ease), color 200ms var(--ease);
}
.btn--primary{ background:var(--crimson); color:#fff; }
.btn--primary:hover{ background:var(--crimson-dark); color:#fff; }
.btn--secondary{ border:1.5px solid var(--navy); color:var(--navy); background:transparent; }
.btn--secondary:hover{ background:var(--navy); color:#fff; }

.tags{ display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:var(--s5); }
.tag{
  display:inline-flex; min-height:32px; align-items:center; padding:0 14px;
  border:1px solid var(--rule); border-radius:var(--radius-pill);
  font:600 14px/1 var(--font-body); color:var(--navy); background:transparent;
}

.marks li{
  position:relative; padding-left:var(--s3); margin-bottom:12px;
  font-weight:600; line-height:1.5;
}
.marks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--crimson);
}
.marks--small li{ font-size:var(--t-caption); font-weight:400; color:var(--text-quiet); }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:sticky; top:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background 240ms var(--ease), border-color 240ms var(--ease);
}
.nav.is-stuck{
  background:rgba(248,244,236,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--rule);
}
.nav__inner{
  max-width:var(--maxw-band); margin-inline:auto;
  padding-inline:var(--margin);
  min-height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s4);
}
.nav__logo{ display:flex; align-items:center; min-height:44px; margin-right:auto; }
.nav__logo img{ height:30px; width:auto; }
.nav__links{ display:none; }
.nav__links ul{ display:flex; gap:var(--s5); }
.nav__links a{
  display:inline-flex; align-items:center; min-height:44px; padding-block:14px;
  font:600 15px/1 var(--font-body); text-decoration:none; color:var(--navy);
  transition:color 200ms var(--ease);
}
.nav__links a:hover{ color:var(--crimson); }
.nav__links a[aria-current="page"]{
  text-decoration:underline; text-decoration-color:var(--crimson);
  text-decoration-thickness:2px; text-underline-offset:6px;
}
.nav__cta{ display:none; min-height:44px; padding-inline:22px; font-size:15px; }
.nav__toggle{
  min-width:44px; min-height:44px; padding:0 12px;
  background:transparent; border:1.5px solid var(--navy);
  border-radius:var(--radius-pill);
  font:600 14px/1 var(--font-body); color:var(--navy); cursor:pointer;
}
.nav__drawer{
  position:fixed; inset:var(--nav-h) 0 0 0;
  background:var(--cream); padding:var(--s7) var(--margin) var(--s8);
  display:flex; flex-direction:column; gap:var(--s6);
  overflow-y:auto;
}
.nav__drawer[hidden]{ display:none; }
.nav__drawer ul{ display:flex; flex-direction:column; gap:var(--s3); }
.nav__drawer a:not(.btn){
  display:block; padding-block:8px;
  font:700 28px/1.2 var(--font-display); letter-spacing:var(--ls-mid);
  color:var(--navy); text-decoration:none;
}
.nav__drawer .btn{ align-self:flex-start; }

@media (min-width:768px){
  .nav__logo img{ height:36px; }
  .nav__links{ display:block; }
  .nav__cta{ display:inline-flex; }
  .nav__toggle{ display:none; }
  .nav__drawer{ display:none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero__frame{ position:relative; padding-top:calc(var(--nav-h) + var(--s8)); }
.hero__wrap{ align-items:end; }
.hero__slogan{
  font:600 15px/1.4 var(--font-body); letter-spacing:.06em;
  color:var(--grey-text); margin-bottom:var(--s3); max-width:44ch;
}
.hero__headline{
  font:800 var(--t-hero)/var(--lh-hero) var(--font-display);
  letter-spacing:var(--ls-display); color:var(--crimson);
  hyphens:none; text-wrap:balance;
}
.hero__lede{
  margin-top:var(--s4); font-size:var(--t-lede); line-height:1.5;
  max-width:var(--measure-lede); color:var(--navy);
}
.hero__actions{ margin-top:var(--s6); display:flex; flex-wrap:wrap; gap:var(--s2); }
.hero__cutout{ margin-top:var(--s6); }
.hero__cutout--wide img{
  width:100%; max-height:180px; object-fit:contain; object-position:bottom center;
}
.hero__cutout--tall img{
  width:100%; max-height:260px; object-fit:contain; object-position:bottom center;
}
.hero__facts{ margin-top:var(--s8); }
.factrail{ display:grid; gap:var(--s4); }
.factrail__item{
  font:400 var(--t-small)/1.5 var(--font-body);
  color:var(--navy); max-width:34ch;
  padding-top:var(--s2); border-top:2px solid var(--crimson);
}

@media (min-width:768px){
  .hero__cutout--wide img{ max-height:200px; }
  .factrail{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .hero__frame{
    min-height:92svh; display:flex; flex-direction:column; justify-content:flex-end;
    padding-top:calc(var(--nav-h) + var(--s10));
  }
  .hero__text{ grid-column:1 / span 8; }
  /* Ten columns, so the headline settles into three lines instead of six.
     The reserve under it holds the cut-out and 34px of clearance, no more:
     every pixel past that pushes the image below the fold. */
  .hero--wide .hero__text{ grid-column:1 / span 10; }
  .hero--wide .hero__frame{ padding-bottom:300px; }
  .hero--wide .hero__cutout--wide{
    position:absolute; inset:auto 0 0 0; margin:0;
    width:100vw; left:50%; transform:translateX(-50%);
  }
  .hero--wide .hero__cutout--wide img{
    width:100%; max-height:320px; object-fit:contain; object-position:bottom center;
  }
  .hero--tall .hero__text{ grid-column:1 / span 6; }
  .hero--tall .hero__cutout--tall{
    grid-column:7 / span 6; margin:0; align-self:end;
  }
  .hero--tall .hero__cutout--tall img{
    max-height:68vh; width:100%; object-fit:contain; object-position:bottom right;
  }
  .factrail{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1440px){
  .hero--wide .hero__cutout--wide img{ max-height:320px; }
}

/* ==========================================================================
   Problem panel
   ========================================================================== */

.panel__media{ height:clamp(220px,32vw,420px); overflow:hidden; }
/* Greyscale, then multiply. Luminosity over a saturated crimson returns the
   photograph as hot pink; multiply darkens it into the panel instead. */
.panel__media img{
  width:100%; height:112%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.05);
  mix-blend-mode:multiply;
}
.costs{ display:grid; gap:var(--s4); margin-top:var(--s7); }
.cost{ padding-top:var(--s3); border-top:2px solid rgba(255,255,255,.9); }
.cost__index{
  display:block; font:800 24px/1 var(--font-display);
  letter-spacing:var(--ls-display); color:rgba(255,255,255,.8);
  margin-bottom:var(--s2);
}
.cost__label{
  font:600 14px/1.3 var(--font-body); letter-spacing:var(--ls-kicker);
  text-transform:uppercase; color:#fff; margin-bottom:12px;
}
.cost__text{ font-size:var(--t-body); line-height:var(--lh-body); max-width:var(--measure); }

@media (min-width:768px){
  .costs{ grid-template-columns:repeat(2,1fr); }
  .cost__index{ font-size:32px; }
}
@media (min-width:1024px){
  .costs--3,.costs--5,.costs--6{ grid-template-columns:repeat(3,1fr); }
}

/* ==========================================================================
   Service cards
   ========================================================================== */

/* Equal-height cards only once they sit side by side. In one column an equal
   row height just leaves a hole under the shortest card. */
.cards{ display:grid; gap:var(--gutter); }
.card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--hairline);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card__media{ aspect-ratio:16/9; }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{ display:flex; flex-direction:column; flex:1; padding:var(--s3); }
.card__title{
  font:700 clamp(1.25rem, 0.95rem + 0.9vw, 1.5rem)/1.2 var(--font-display);
  letter-spacing:var(--ls-mid); color:var(--navy);
  hyphens:none; overflow-wrap:normal; word-break:normal; text-wrap:balance;
}
.card__summary{
  margin-top:12px; font-size:var(--t-body); line-height:1.5; color:var(--grey-text);
}
.card__bullets{ margin-top:var(--s3); }
.card__bullets li{
  position:relative; padding-left:var(--s3); margin-bottom:12px;
  font:600 var(--t-body)/1.5 var(--font-body); color:var(--navy);
}
.card__bullets li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--crimson);
}
.card__bullets li:nth-child(n+4){
  font-size:var(--t-small); font-weight:400; color:var(--grey-text); padding-left:0;
}
.card__bullets li:nth-child(n+4)::before{ display:none; }
.card__bullets li:nth-child(4){
  margin-top:var(--s3); padding-top:20px; border-top:1px solid var(--rule);
}
.card__outcome{
  margin-top:var(--s3); padding-top:var(--s2); position:relative;
  font:600 var(--t-small)/1.5 var(--font-body); color:var(--crimson);
}
.card__outcome::before{
  content:""; position:absolute; left:0; top:0; width:40px; height:2px; background:var(--crimson);
}
.card__body > .card__outcome{ margin-top:auto; padding-top:var(--s5); }
.card__body > .card__outcome::before{ top:var(--s3); }

@media (hover:hover) and (pointer:fine){
  .card:hover{ transform:translateY(-4px); box-shadow:0 8px 32px rgba(21,58,103,.10); }
}
@media (min-width:768px){
  .cards{ grid-template-columns:repeat(2,1fr); gap:var(--s3); grid-auto-rows:1fr; }
  .card__media{ aspect-ratio:4/3; }
  .card__body{ padding:var(--s4); }
}
/* Two across, not four. Four cards on a 1280px grid leave about 110px of text
   in each one, which hyphenates the headings and runs every bullet to three
   lines. Two across gives each card a readable column at every desktop width. */
@media (min-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr); gap:var(--s4); }
  .card__media{ aspect-ratio:16/9; }
  .card__body{ padding:var(--s5); }
}

/* ==========================================================================
   Process flow
   ========================================================================== */

.flow{ position:relative; margin-top:var(--s7); }
.flow__rail{
  position:absolute; left:7px; top:12px; bottom:12px; width:2px;
  background:var(--rule); transform-origin:top; transform:scaleY(0);
  transition:transform 900ms var(--ease);
}
.flow.is-in .flow__rail{ transform:scaleY(1); }
.flow__steps{ display:grid; gap:var(--s5); }
.flow__step{ position:relative; padding-left:var(--s5); }
.flow__pip{
  position:absolute; left:0; top:6px; width:16px; height:16px;
  border-radius:50%; background:var(--crimson);
  box-shadow:0 0 0 3px var(--cream);
}
.flow__step:last-child .flow__pip{
  background:var(--cream); border:2px solid var(--crimson);
}
.flow__index{
  display:block; font:800 14px/1 var(--font-display);
  letter-spacing:var(--ls-display); color:var(--crimson); margin-bottom:var(--s1);
}
.flow__label{
  font:700 var(--t-h4)/1.25 var(--font-display);
  letter-spacing:var(--ls-mid); color:var(--navy); text-wrap:balance;
}
.flow__caption{
  margin-top:var(--s1); font-size:var(--t-small); line-height:1.5;
  color:var(--grey-text); max-width:26ch;
}

@media (min-width:768px){
  .flow__rail{
    left:0; right:0; top:38px; bottom:auto; width:auto; height:2px;
    transform:scaleX(0); transform-origin:left;
  }
  .flow.is-in .flow__rail{ transform:scaleX(1); }
  .flow__steps{
    grid-template-columns:repeat(var(--n,4),1fr); gap:var(--s4);
  }
  .flow__step{ padding-left:0; padding-top:60px; }
  .flow__index{ position:absolute; top:0; left:0; font-size:20px; }
  .flow__pip{ top:30px; }
  .flow__label{ margin-top:var(--s1); }
  .flow__step:not(:last-child)::after{
    content:""; position:absolute; top:34px;
    right:calc(-1 * var(--s4) / 2 - 3px);
    width:6px; height:8px; background:var(--crimson);
    clip-path:polygon(0 0, 100% 50%, 0 100%);
  }
}
@media (min-width:768px) and (max-width:1023px){
  .flow__steps{ grid-template-columns:repeat(3,1fr); row-gap:var(--s7); }
}

/* ==========================================================================
   Timeline rail
   ========================================================================== */

.rail{ position:relative; margin-top:var(--s3); }
.rail__line{
  position:absolute; left:20px; top:6px; bottom:6px; width:2px;
  background:rgba(255,255,255,.28);
  transform-origin:top; transform:scaleY(0);
  transition:transform 900ms var(--ease);
}
.rail.is-in .rail__line{ transform:scaleY(1); }
.rail__marks{ display:grid; gap:var(--s6); }
.rail__mark{ position:relative; padding-left:var(--s6); }
.rail__pip{
  position:absolute; left:13px; top:8px; width:14px; height:14px;
  border-radius:50%; background:var(--acc-teal);
}
.rail__mark:nth-child(4n+2) .rail__pip{ background:var(--acc-orange); }
.rail__mark:nth-child(4n+3) .rail__pip{ background:var(--acc-coral); }
.rail__mark:nth-child(4n+4) .rail__pip{ background:var(--acc-cyan); }
.rail__mark.is-last .rail__pip{
  left:11px; top:6px; width:18px; height:18px;
  background:transparent; border:2px solid var(--yellow);
}
.rail__drop{ display:none; }
.rail__year{
  display:block; font:800 24px/1 var(--font-display);
  letter-spacing:var(--ls-mid); color:#fff;
}
.rail__text{
  display:block; margin-top:12px; font-size:var(--t-small); line-height:1.5;
  color:rgba(255,255,255,.78); max-width:52ch;
}

@media (min-width:1024px){
  /* The rail becomes a horizontal axis. Marks are spaced at least one mark
     width apart by `year_pos`, which hands the width back as `--markw`, so no
     two years or captions can ever print over each other. */
  .rail{ position:relative; margin-top:var(--s2); padding-top:72px;
         padding-bottom:calc(170px + var(--maxtier,0) * 152px); }
  .rail__line{
    left:0; right:0; top:72px; bottom:auto; width:auto; height:2px;
    transform:scaleX(0); transform-origin:left;
  }
  .rail.is-in .rail__line{ transform:scaleX(1); }
  .rail__marks{ display:block; }
  .rail__mark{
    position:absolute; left:var(--pct); top:72px; width:var(--markw,16%); height:0;
    padding-left:0;
  }
  /* Scoped to .rail so the horizontal centring survives the generic
     `.js .u-rise.is-in { transform:none }` further down the sheet. */
  .rail .rail__mark{ transform:translateX(-50%); }
  .rail .rail__mark.is-first{ transform:translateX(0); }
  .rail .rail__mark.is-last{ transform:translateX(-100%); }
  .js .rail .rail__mark{ transform:translate3d(0,var(--rise),0) translateX(-50%); }
  .js .rail .rail__mark.is-first{ transform:translate3d(0,var(--rise),0) translateX(0); }
  .js .rail .rail__mark.is-last{ transform:translate3d(0,var(--rise),0) translateX(-100%); }
  .js .rail .rail__mark.is-in{ transform:translateX(-50%); }
  .js .rail .rail__mark.is-first.is-in{ transform:translateX(0); }
  .js .rail .rail__mark.is-last.is-in{ transform:translateX(-100%); }

  .rail__pip{ position:absolute; top:-7px; left:calc(50% - 7px); }
  .rail__mark.is-first .rail__pip{ left:0; }
  .rail__mark.is-last .rail__pip{ left:auto; right:0; top:-9px; }

  /* Marks butt up against one another exactly, so the type inside each one
     holds a half-gutter back from both edges and the ends give theirs up to
     stay flush with the axis. */
  .rail__year{
    position:absolute; left:var(--s2); right:var(--s2); text-align:center; font-size:28px;
    bottom:calc(20px + var(--tier,0) * 44px);
  }
  .rail__text{
    position:absolute; left:var(--s2); right:var(--s2); text-align:center; margin-top:0;
    top:calc(24px + var(--tier,0) * 152px);
  }
  .rail__mark.is-first .rail__year,.rail__mark.is-first .rail__text{ text-align:left; left:0; }
  .rail__mark.is-last .rail__year,.rail__mark.is-last .rail__text{ text-align:right; right:0; }

  .rail__drop{
    display:block; position:absolute; width:1px; left:calc(50% - .5px);
    top:10px; height:calc(10px + var(--tier,0) * 152px);
    background:rgba(255,255,255,.28);
  }
  .rail__mark.is-first .rail__drop{ left:7px; }
  .rail__mark.is-last .rail__drop{ left:auto; right:7px; }
}

/* ==========================================================================
   Science, portrait plate and citation rail
   ========================================================================== */

.plate{ max-width:280px; }
.plate__img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
/* A held place, not a missing image. A cream field, a crimson rule across it,
   and the line that names whose portrait belongs here. No frame: an empty
   bordered rectangle is what a broken image looks like. */
.plate__reserved{
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%; aspect-ratio:4/5; padding:var(--s4);
  background:var(--cream); box-shadow:inset 0 0 0 100vmax rgba(21,58,103,.035);
}
.plate__rule{ display:block; width:56px; height:2px; background:var(--crimson); }
.plate__reserved-note{
  display:block; margin-top:var(--s3); max-width:24ch;
  font:400 var(--t-caption)/1.5 var(--font-body); color:var(--grey-text);
}
.plate__caption{ margin-top:var(--s2); padding-top:var(--s2); border-top:2px solid var(--crimson); }
.plate__name{
  display:block; font:700 var(--t-h4)/1.25 var(--font-display);
  letter-spacing:var(--ls-mid); color:var(--navy);
}
.plate__role{
  display:block; margin-top:4px;
  font:600 14px/1.45 var(--font-body); color:var(--crimson);
}

.sci__aside{ margin-bottom:var(--s7); }
.sci__main .sec__head{ margin-bottom:var(--s4); }

/* A bibliography, set as one. Every line is a citation of the same kind, so
   every line gets the same size, colour, and rule under it. */
.cite{ margin-top:var(--s7); border-top:1px solid var(--rule); }
.cite__row{
  padding-block:var(--s3); border-bottom:1px solid var(--hairline);
  font-size:var(--t-small); line-height:1.55; color:var(--navy);
  max-width:var(--measure);
}

@media (min-width:1024px){
  .sci{ align-items:start; }
  .sci__aside{ grid-column:1 / span 4; position:sticky; top:112px; margin-bottom:0; }
  .sci__main{ grid-column:6 / span 7; }
  .plate{ max-width:none; }
}

/* ==========================================================================
   Facilities
   ========================================================================== */

.pxwrap{ overflow:hidden; }
.pxwrap img{ width:100%; height:112%; object-fit:cover; }
.pxwrap--3x2{ aspect-ratio:3/2; }

.facilities__media{ margin-bottom:var(--s6); }
.facilities__second{ margin-top:var(--s6); }
.facilities__second img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

@media (min-width:1024px){
  .facilities{ align-items:start; }
  .facilities__media{ grid-column:1 / span 7; margin-bottom:0; }
  .facilities__text{ grid-column:8 / span 5; }
  .facilities--textonly .facilities__text{ grid-column:1 / span 8; }
}
@media (max-width:1023px){
  .facilities__second{ display:none; }
}

/* ==========================================================================
   Statistics
   ========================================================================== */

.figures{ margin-top:var(--s7); }
.figures__rows{ display:grid; gap:var(--s5); }
.fig{ display:grid; gap:var(--s3); }
.fig + .fig{ padding-top:var(--s5); border-top:1px solid var(--hairline); }
/* A figure is one thing and reads as one thing: "USD 50bn+" never breaks
   between the currency and the number. The numeral tops out at 48px and the
   column runs to 360px so the longest value the block allows, "USD 12-15bn",
   still sits on a single line at every width down to 320px. */
.fig__number{
  display:block; white-space:nowrap;
  font:800 clamp(1.75rem, 1.05rem + 2.10vw, 3rem)/1 var(--font-display);
  letter-spacing:var(--ls-display); color:var(--crimson);
}
.fig__label{
  display:block; margin-top:12px;
  font:600 14px/1.3 var(--font-body); letter-spacing:var(--ls-kicker);
  text-transform:uppercase; color:var(--navy);
}
.fig__context{
  display:block; margin-top:var(--s1);
  font-size:14px; line-height:1.45; color:var(--grey-text); max-width:34ch;
}
.fig__plot{
  position:relative; height:14px; align-self:center;
  background:linear-gradient(var(--rule),var(--rule)) left center/100% 1px no-repeat;
}
.fig__bar,.fig__range{
  position:absolute; top:0; height:100%;
  transform-origin:left; transform:scaleX(0);
  transition:transform 900ms var(--ease); transition-delay:inherit;
}
.fig__bar{ left:0; width:var(--lo); background:var(--crimson); }
.fig__range{
  left:var(--lo); width:calc(var(--hi) - var(--lo));
  background:repeating-linear-gradient(45deg,
    rgba(191,9,47,.35) 0 4px, transparent 4px 8px);
}
.fig.is-in .fig__bar,.fig.is-in .fig__range{ transform:scaleX(1); }
.figures__note{
  margin-top:var(--s3); font-size:13px; line-height:1.45; color:var(--grey-text);
  background:var(--cream); display:inline-block; padding:var(--s1);
}
/* A single figure runs at display scale, held to a share of the viewport so a
   long value cannot push past the margin now that it is not allowed to wrap. */
.figures--solo .fig__number{
  font-size:min(var(--t-stat-solo),12vw); line-height:.92; letter-spacing:-.03em;
}

@media (min-width:1024px){
  .figures{ grid-column:1 / span 10; }
  .fig{ grid-template-columns:360px 1fr; gap:var(--s6); align-items:center; }
  .fig--nobar{ grid-template-columns:1fr; }
  .fig__plot{ height:20px; }
  .figures__note{ margin-left:calc(360px + var(--s6)); }
  .figures--solo .fig{ grid-template-columns:1fr; }
}

/* Date rail: two or three dates attached to the section above. */
.daterail{
  display:grid; gap:var(--s4); margin-top:var(--s7);
  padding-top:var(--s4); border-top:1px solid var(--rule);
}
.daterail__value{
  display:block; font:800 var(--t-stat)/.95 var(--font-display);
  letter-spacing:var(--ls-display); color:var(--crimson);
}
.daterail__label{
  display:block; margin-top:12px;
  font:600 14px/1.3 var(--font-body); letter-spacing:var(--ls-kicker);
  text-transform:uppercase; color:var(--navy);
}
.daterail__context{
  display:block; margin-top:var(--s1);
  font-size:14px; line-height:1.45; color:var(--grey-text); max-width:34ch;
}
@media (min-width:768px){
  .daterail{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .daterail{ grid-template-columns:repeat(3,1fr); }
}

/* ==========================================================================
   Locator map
   ========================================================================== */

.locator{ margin-top:var(--s3); }
/* Cap the width, not the height. A max-height on an SVG with a fixed viewBox
   letterboxes the drawing and shrinks the labels with it. */
.locator__svg{ width:100%; max-width:900px; height:auto; display:block; margin-inline:auto; }
.locator__land path{ fill:rgba(21,58,103,.06); stroke:var(--navy); stroke-width:1.25; }
.locator__route{
  fill:none; stroke:var(--crimson); stroke-width:1.5; stroke-dasharray:6 6;
  stroke-dashoffset:100; transition:stroke-dashoffset 900ms var(--ease);
}
.locator.is-in .locator__route{ stroke-dashoffset:0; }
.locator__routelabel{
  font:600 17px var(--font-body); fill:var(--navy);
}
.locator__import path{ fill:var(--crimson); stroke:var(--crimson); stroke-width:1.5; }
.locator__import .locator__head{ stroke:none; }
.locator__pip{
  fill:var(--crimson); stroke:var(--cream); stroke-width:3;
  transform-box:fill-box; transform-origin:center; transform:scale(0);
  transition:transform 500ms var(--ease);
  transition-delay:calc(120ms * var(--i,0) + 200ms);
}
.locator.is-in .locator__pip{ transform:scale(1); }
.locator__leader{ stroke:var(--crimson); stroke-width:1.25; fill:none; }
.locator__label{ font:600 18px var(--font-body); fill:var(--navy); }

.locator__legend{ margin-top:var(--s5); }
.locator__legend ul{ display:grid; gap:var(--s3); }
.locator__entry{ padding-top:var(--s2); border-top:2px solid var(--crimson); }
.locator__entry--import{ border-top-color:var(--rule); }
.locator__place{
  display:block; font:600 14px/1.3 var(--font-body);
  letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--navy);
}
.locator__role{
  display:block; margin-top:var(--s1);
  font-size:var(--t-small); line-height:1.5; color:var(--grey-text);
}
@media (max-width:767px){
  .locator__label,.locator__routelabel{ display:none; }
}
@media (min-width:768px){
  .locator__legend ul{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
}

/* ==========================================================================
   Quotes
   ========================================================================== */

.quotes{ display:grid; gap:var(--gutter); margin-top:var(--s7); }
.qcard{
  background:var(--white); border:1px solid var(--hairline);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:var(--s3);
}
.qcard--empty{
  background:transparent; border:1px dashed var(--rule); box-shadow:none;
}
.qcard__mark{
  display:block; font:700 32px/1 var(--font-display);
  color:var(--crimson); margin-bottom:var(--s1);
}
.qcard__quote p{
  font:500 var(--t-quote)/var(--lh-tight) var(--font-display);
  letter-spacing:var(--ls-mid); color:var(--navy);
}
.qcard--empty .qcard__quote p{
  font:400 var(--t-body)/var(--lh-body) var(--font-body);
  letter-spacing:0; color:var(--grey-text);
}
.qcard__by{ display:flex; align-items:center; gap:var(--s2); margin-top:var(--s3); }
.qcard__portrait{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.qcard__name{
  display:block; font:600 14px/1.4 var(--font-body); color:var(--crimson);
}
.qcard--empty .qcard__name{ color:var(--grey-text); }
.qcard__role{
  display:block; font-size:14px; line-height:1.45; color:var(--grey-text);
}
.qcard--solo{ padding:var(--s4); }
@media (min-width:768px){
  .quotes{ grid-template-columns:repeat(2,1fr); }
  .qcard{ padding:var(--s4); }
}
@media (min-width:1024px){
  .quotes{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
  .qcard--solo{ grid-column:3 / span 9; }
}

/* ==========================================================================
   Team grid
   ========================================================================== */

.people{ display:grid; gap:var(--s6); }
.person__bio{ margin-top:var(--s3); font-size:var(--t-body); line-height:var(--lh-body); max-width:40ch; }
.person .marks{ margin-top:var(--s3); }
@media (min-width:768px){
  .people:not(.people--1){ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .people:not(.people--1):not(.people--2){ grid-template-columns:repeat(3,1fr); }
  /* A single member sets the portrait beside the bio. A lone 280px column with
     the other two thirds of the row empty reads as a layout that broke. */
  .people--1 .person{
    display:grid; grid-template-columns:280px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:var(--s7); row-gap:0; align-items:start;
  }
  .people--1 .person > .plate{ grid-row:1 / span 2; }
  .people--1 .person__bio{ margin-top:0; }
}

/* ==========================================================================
   Image band
   ========================================================================== */

.band{ display:block; }
.band__frame{ width:100%; }
.band--short .band__frame{ height:220px; }
.band--tall .band__frame{ height:340px; }
.band__caption{ margin-top:var(--s2); }
.band__caption span{ font-size:14px; line-height:1.45; color:var(--grey-text); }
@media (min-width:768px){
  .band--short .band__frame{ height:clamp(240px,30vw,420px); }
  .band--tall .band__frame{ height:clamp(360px,52vw,720px); }
}
@media (min-width:1024px){
  .band__caption span{ display:block; max-width:50%; }
}

/* ==========================================================================
   Rich text variants
   ========================================================================== */

.rt--coda{
  border-top:1px solid var(--rule); padding-top:var(--s5); text-align:center;
}
.rt--coda .prose{
  max-width:none;
}
.rt--coda .prose p{
  font:500 var(--t-h3)/var(--lh-tight) var(--font-display);
  letter-spacing:var(--ls-mid); color:var(--crimson); text-wrap:balance;
  max-width:30ch; margin-inline:auto;
}
.blk--text:has(.rt--coda){ padding-block:var(--sec-y-tight); }

@media (min-width:1024px){
  .rt:not(.rt--coda) .sec__head,.rt:not(.rt--coda) .prose{ max-width:none; }
  .blk--text .wrap > .rt:not(.rt--coda){ grid-column:1 / span 8; }
  .blk--text .wrap > .rt--coda{ grid-column:3 / span 9; }
}

/* Variant A: a rich text block that follows the hero reads as a credential rail. */
.blk--hero + .blk--text .rt{ border-top:1px solid var(--rule); padding-top:var(--s5); }
@media (min-width:768px){
  .blk--hero + .blk--text .prose ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
}
@media (min-width:1024px){
  .blk--hero + .blk--text .prose ul{ grid-template-columns:repeat(3,1fr); }
}
.blk--hero + .blk--text .prose ul li{
  padding-left:0; padding-top:var(--s2); margin-bottom:0;
  border-top:2px solid var(--crimson);
  font-size:var(--t-small); max-width:34ch;
}
.blk--hero + .blk--text .prose ul li::before{ display:none; }

/* ==========================================================================
   Contact
   ========================================================================== */

.blk--contact{ padding-bottom:calc(var(--sec-y) + 40px); }
.contact__action{ margin-top:var(--s6); }
.contact__aside{
  margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--rule);
}
.contact__email a{
  font:700 var(--t-h4)/1.3 var(--font-display); letter-spacing:var(--ls-mid);
  color:var(--crimson); text-underline-offset:6px;
}
.contact__places{ display:grid; gap:var(--s3); margin-top:var(--s4); }
.contact__place{
  display:block; font:600 14px/1.3 var(--font-body);
  letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--navy);
}
.contact__detail{
  display:block; margin-top:4px;
  font-size:var(--t-small); line-height:1.5; color:var(--grey-text);
}
@media (min-width:1024px){
  .contact__main{ grid-column:1 / span 6; }
  .contact__aside{
    grid-column:9 / span 4; margin-top:0; padding-top:0; border-top:0;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{
  border-top:1px solid var(--rule);
  padding-top:var(--sec-y-tight); padding-bottom:var(--s6);
  background:var(--cream);
}
.foot__grid{ row-gap:var(--s6); }
.foot__logo{ height:30px; width:auto; }
.foot__tagline{ margin-top:var(--s2); font-size:15px; line-height:1.5; color:var(--grey-text); max-width:34ch; }
.foot__links{ display:grid; gap:12px; }
.foot__links a,.foot__contact a{
  font:600 15px/1.4 var(--font-body); color:var(--navy); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; padding-block:8px;
}
.foot__links a:hover,.foot__contact a:hover{ color:var(--crimson); }
.foot__contact{ display:grid; gap:4px; }
.foot__note{
  font-size:14px; line-height:1.55; color:var(--grey-text);
  max-width:92ch; text-wrap:pretty;
}
@media (min-width:768px){
  .foot__grid > .foot__col{ grid-column:span 2; }
}
@media (min-width:1024px){
  .foot__grid > .foot__col:nth-child(1){ grid-column:1 / span 3; }
  .foot__grid > .foot__col:nth-child(2){ grid-column:5 / span 2; }
  .foot__grid > .foot__col:nth-child(3){ grid-column:8 / span 2; }
  .foot__grid > .foot__col:nth-child(3){ grid-column:8 / span 3; }
  /* The disclosure line reads as a footnote across the full width, not as a
     fourth column, where it stacked into a 160px-wide, 264px-tall ribbon. */
  .foot__grid > .foot__col:nth-child(4){
    grid-column:1 / -1; margin-top:var(--s4);
    padding-top:var(--s3); border-top:1px solid var(--hairline);
  }
}

/* ==========================================================================
   Motion
   ========================================================================== */

.u-rise{ opacity:1; }
.js .u-rise{
  opacity:0; transform:translate3d(0,var(--rise),0);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(min(var(--i,0),5) * var(--stagger));
}
.js .u-rise.is-in{ opacity:1; transform:none; }
.u-parallax{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .js .u-rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .u-parallax{ transform:none !important; }
  .flow__rail,.rail__line{ transform:none !important; transition:none !important; }
  .fig__bar,.fig__range{ transform:scaleX(1) !important; transition:none !important; }
  .locator__pip{ transform:scale(1) !important; transition:none !important; }
  .locator__route{ stroke-dashoffset:0 !important; transition:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* The horizontal rail centres each mark on its own position with a transform,
   which the rule above would otherwise strip. It has to come back, but only at
   the width where the rail is horizontal: below 1024 the marks are a stacked
   list and a translate there pushes them off the left edge of the page. */
@media (prefers-reduced-motion:reduce) and (min-width:1024px){
  .js .rail__mark{ transform:translateX(-50%) !important; }
  .js .rail__mark.is-first{ transform:translateX(0) !important; }
  .js .rail__mark.is-last{ transform:translateX(-100%) !important; }
}

@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}

/* ==========================================================================
   Twelve columns from 768 up
   ========================================================================== */

@media (min-width:768px){
  .wrap{ grid-template-columns:repeat(12,var(--col)); }
}


/* Team photo not yet supplied: a deliberate placeholder, not a broken frame. */
.plate__reserved--labelled{
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s2);
  aspect-ratio:4/5; width:100%; padding:var(--s3);
  background:var(--cream); border:1px solid var(--hairline);
}
.plate__reserved-rule{ display:block; width:40px; height:2px; background:var(--crimson); }
.plate__reserved-text{
  font:600 var(--t-caption)/var(--lh-tight) var(--font-body);
  color:var(--text-quiet); letter-spacing:.02em;
}


/* A timeline whose entries carry paragraphs, not captions, keeps the stacked
   layout at every width. The horizontal axis reserves a fixed vertical band
   per mark, so long text overflowed the section it sits in. */
@media (min-width:1024px){
  .rail--prose{ padding-top:0; padding-bottom:0; }
  .rail--prose .rail__line{ left:0; right:auto; top:0; bottom:0; width:2px; height:auto;
    transform:scaleY(0); transform-origin:top; }
  .rail--prose.is-in .rail__line{ transform:scaleY(1); }
  .rail--prose .rail__marks{ display:grid; grid-template-columns:repeat(2,1fr);
    gap:var(--s6) var(--s7); }
  .rail--prose .rail__mark,
  .js .rail--prose .rail__mark,
  .js .rail--prose .rail__mark.is-in{
    position:relative; left:auto; top:auto; width:auto; height:auto;
    padding-left:var(--s6); transform:none;
  }
  .rail--prose .rail__pip{ position:absolute; top:4px; left:0; }
  .rail--prose .rail__mark.is-last .rail__pip{ left:0; right:auto; top:2px; }
  .rail--prose .rail__drop{ display:none; }
  .rail--prose .rail__year,
  .rail--prose .rail__mark.is-first .rail__year,
  .rail--prose .rail__mark.is-last .rail__year{
    position:static; text-align:left; left:auto; right:auto; bottom:auto; font-size:24px;
  }
  .rail--prose .rail__text,
  .rail--prose .rail__mark.is-first .rail__text,
  .rail--prose .rail__mark.is-last .rail__text{
    position:static; text-align:left; left:auto; right:auto; top:auto;
    margin-top:var(--s2); display:block;
  }
}


/* Tighten the run-in between a section's intro paragraph and the graphic that
   follows it. The default 64px head margin plus the graphic's own top reserve
   was leaving a dead band of 176px on the timeline and 120px on the map. */
.blk--timeline .sec__head,
.blk--locator_map .sec__head{ margin-bottom:var(--s4); }
.locator{ margin-top:var(--s2); }
@media (min-width:1024px){
  .locator__svg{ margin-block:-24px; }
}


/* A team member with no photograph gets no frame at all: the caption and bio
   stand on their own rather than sitting under an empty rectangle. */
.plate--nophoto{ background:none; border:0; padding:0; }
.plate--nophoto .plate__caption{ padding-left:0; }