/* ==========================================================================
   Caeruleum Biotechnologies, INC. — site stylesheet
   --------------------------------------------------------------------------
   YOU PROBABLY DO NOT NEED TO EDIT THIS FILE.
   All page text lives in the .html files. This file only controls how things
   LOOK. If you want to change a colour or a font size across the whole site,
   change it once in the ":root" block directly below and every page updates.

   Built mobile-first: the plain rules are the phone layout. Anything inside
   a "@media (min-width: ...)" block only applies on wider screens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND TOKENS — the single place to change colour, type and spacing.
   Values come from Caeruleum Brand Guidelines v1 (June 2026).
   -------------------------------------------------------------------------- */
:root {
  /* --- Colour ----------------------------------------------------------- */
  --crlm:  #385BB9;   /* Caeruleum Blue — the brand colour                  */
  --deep:  #2A4794;   /* Deep — for depth and hover states                  */
  --sky:   #6E92E0;   /* Sky — accent only. Too light for body text.        */
  --mist:  #DBE5F6;   /* Mist — pale tint, used on blue backgrounds         */
  --ink:   #1C2330;   /* Ink — main text colour                            */
  --paper: #FFFFFF;   /* Paper — main background                           */
  --panel: #F5F7FC;   /* Panel — the pale grey-blue section background      */
  --line:  #E9ECF2;   /* Line — hairline borders                           */

  /* Guidelines list muted text as #8B93A3. That is too pale to read
     (3.1:1 contrast, below the 4.5:1 accessibility minimum), so the text
     token below is darkened. #8B93A3 is kept for decorative rules only.   */
  --muted:      #5A6375;
  --muted-deco: #8B93A3;
  --on-blue:    #DBE5F6;   /* secondary text when sitting on Caeruleum Blue */

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Sora', 'Trebuchet MS', sans-serif;      /* headlines     */
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif; /* everything else */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes grow smoothly between phone and desktop — no jumps.             */
  --fs-display: clamp(2.125rem, 1.35rem + 3.9vw, 4rem);      /* 34 -> 64px */
  --fs-h1:      clamp(1.875rem, 1.35rem + 2.6vw, 2.75rem);   /* 30 -> 44px */
  --fs-h2:      clamp(1.5rem,   1.2rem  + 1.5vw, 2rem);      /* 24 -> 32px */
  --fs-h3:      clamp(1.1875rem,1.08rem + 0.55vw,1.5rem);    /* 19 -> 24px */
  --fs-lead:    clamp(1.0625rem,1.02rem + 0.25vw,1.1875rem); /* 17 -> 19px */
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* --- Spacing ---------------------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 2.5rem;   --s8: 3.5rem;
  --section-y: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); /* space above/below sections */
  --gutter:    clamp(1.125rem, 0.75rem + 1.6vw, 2.5rem); /* space at screen edges   */
  --wrap: 1560px;                                     /* max content width      */

  /* Height of the fixed header. Content that must clear it uses this. */
  --header-h: calc(var(--gutter) * 2 + 42px);   /* logo + border + rounding */

  --radius: 14px;
  --radius-sm: 10px;
  --focus: 3px solid var(--deep);
}

/* --------------------------------------------------------------------------
   2. SELF-HOSTED FONTS (no third-party request — faster on mobile networks)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/figtree-var.woff2') format('woff2-variations'),
       url('../assets/fonts/figtree-var.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/sora-var.woff2') format('woff2-variations'),
       url('../assets/fonts/sora-var.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Anchor targets must not land underneath the fixed header. */
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* page itself never scrolls sideways */
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.3; }

p  { margin: 0 0 var(--s4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--crlm); text-underline-offset: .18em; }
a:hover { color: var(--deep); }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

/* Screen-reader-only text (used for accessible labels) */
.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;
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--crlm); color: #fff; padding: var(--s3) var(--s4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600;
  text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--panel  { background: var(--panel); }
.section--blue   { background: var(--crlm); color: #fff; }
.section--blue h1, .section--blue h2, .section--blue h3 { color: #fff; }
.section--blue p  { color: var(--on-blue); }
.section--blue a:not(.btn) { color: #fff; }
.section--tight  { padding-block: clamp(2rem, 1.4rem + 3vw, 3.25rem); }

.measure    { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

.stack > * + * { margin-top: var(--s4); }

/* Generic auto-fitting grid. Cards reflow from 1 column upward on their own,
   so there are no fixed widths and no breakpoint to maintain.              */
.grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 34em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 34em) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Two-column "text beside picture" band. One column on phones.            */
.split { display: grid; gap: clamp(var(--s5), 4vw, var(--s8)); align-items: center; }
@media (min-width: 54em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media  { grid-template-columns: 5fr 6fr; }
  .split--wide-text   { grid-template-columns: 6fr 5fr; }
  .split--flip > :first-child { order: 2; }
}
/* Align columns to the top instead of centring them — used where one column
   is much taller than the other, e.g. the contact form beside its info card. */
.split--top { align-items: start; }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHIC PIECES
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--crlm); margin: 0 0 var(--s3);
}
.section--blue .eyebrow { color: var(--mist); }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--muted); }
.section--blue .lead { color: var(--on-blue); }

.display { font-size: var(--fs-display); font-weight: 800; line-height: 1.02; letter-spacing: -.025em; }

.small  { font-size: var(--fs-small); }
.muted  { color: var(--muted); }
.cite   { font-size: .75rem; line-height: 1.45; color: var(--muted); }
.section--blue .cite { color: #C2D2F1; }

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
/* Fixed and transparent, so full-bleed heroes run underneath it. The frosted
   panel appears on hover; the logo fades once the page has been scrolled. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-header:hover,
.site-header:focus-within {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(255,255,255,.5);
}
/* Vertical padding matches the left/right page margin so the top of the site
   is framed the same way as its sides. */
.site-header__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--gutter);
}

/* The logo is supplied as artwork. In the header it is split in two so the
   wordmark can unfold from the mark on hover; the footer uses the whole
   lockup. Height is what you change; width follows. */
.lockup { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.lockup img { height: 35px; width: auto; display: block; }
@media (min-width: 30em) {
  :root { --header-h: calc(var(--gutter) * 2 + 49px); }
  .lockup img { height: 42px; }
}
/* The footer lockup is the same two pieces of artwork as the header, just in
   white — so the two match exactly rather than one being live text. */
.lockup--footer .lockup__mark { opacity: 1; }
.lockup--footer .lockup__word { opacity: 1; }
.lockup--footer img { height: 34px; }
.lockup__word { display: block; margin-left: .5rem; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: var(--fs-small);
  color: var(--ink); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem .85rem; min-height: 44px; cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 16px; height: 10px; flex: none; }
.nav-toggle__bars::before, .nav-toggle__bars::after,
.nav-toggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--crlm); border-radius: 2px; transition: transform .18s, opacity .18s;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span    { top: 4px; }
.nav-toggle__bars::after  { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-4px) rotate(-45deg); }

/* On phones the menu drops onto its own full-width row below the logo. */
.nav { display: none; flex-basis: 100%; }
.nav[data-open="true"] { display: block; }
.nav__list {
  list-style: none; margin: 0; padding: 0 0 var(--s5);
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--line);
}
.nav__link {
  display: block; padding: var(--s3) 0;
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--crlm); }
.nav .btn { margin-top: var(--s4); }

@media (min-width: 68em) {
  .nav-toggle { display: none; }
  /* On wider screens the menu sits on the same row, pushed to the right. */
  .nav { display: block !important; flex-basis: auto; margin-left: auto; }
  .nav__list {
    flex-direction: row; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
    padding: 0; border-top: 0;
  }
  .nav__link { padding: 0; border-bottom: 0; font-size: var(--fs-small); }
  .nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: .4em; }
  .nav .btn { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: .8125rem 1.375rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
  min-height: 44px;                      /* comfortable tap target        */
}
.btn--primary   { background: var(--crlm); color: #fff; border-color: var(--crlm); }
.btn--primary:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.btn--secondary { background: transparent; color: var(--crlm); border-color: rgba(56,91,185,.4); }
.btn--secondary:hover { background: var(--crlm); color: #fff; border-color: var(--crlm); }
.btn--on-blue   { background: #fff; color: var(--crlm); border-color: #fff; }
.btn--on-blue:hover { background: var(--mist); color: var(--deep); border-color: var(--mist); }
.btn--ghost-on-blue { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-on-blue:hover { background: #fff; color: var(--crlm); border-color: #fff; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --------------------------------------------------------------------------
   8. FIGURES (device renderings)
   -------------------------------------------------------------------------- */
.figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.figure img { width: 100%; }
.figure figcaption {
  border-top: 1px solid var(--line); padding: .7rem 1rem;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.figure figcaption b { color: var(--crlm); font-weight: 500; }
.section--blue .figure { border-color: rgba(255,255,255,.25); }

/* --------------------------------------------------------------------------
   9. CARDS, STATS, LISTS
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); background: var(--paper);
  display: flex; flex-direction: column; gap: var(--s3);
}
.card h3 { margin: 0; }
.card p  { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.card__link {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: auto; padding-top: var(--s3);
  font-weight: 600; font-size: var(--fs-small); text-decoration: none;
}
.card__link::after { content: " \2192"; }
.section--panel .card { background: var(--paper); }
/* Cards on Caeruleum Blue use a Deep tint rather than a white one. A white
   overlay lightens the blue enough to drop the body text below the 4.5:1
   contrast minimum; Deep darkens it and takes the text to about 5.4:1. */
.section--blue  .card { background: var(--deep); border-color: rgba(255,255,255,.16); }
.section--blue  .card p { color: var(--on-blue); }

.stat { display: flex; flex-direction: column; gap: var(--s2); }
.stat__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); line-height: 1;
  letter-spacing: -.02em; color: var(--crlm);
}
.section--blue .stat__num { color: #fff; }
.stat__label { font-size: var(--fs-small); color: var(--muted); }
.section--blue .stat__label { color: var(--on-blue); }

/* A row of short factual chips — used for company stage.                  */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; color: var(--muted);
  background: var(--paper);
}
.section--blue .chips li { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.08); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.ticks li { padding-left: 1.6rem; position: relative; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--crlm);
}
.section--blue .ticks li::before { background: #fff; }

/* Numbered mechanism list */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s5); }
.steps > li { counter-increment: step; display: grid; gap: var(--s2); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .1em; color: var(--crlm);
}
.steps h3 { margin: 0; }
.steps p  { margin: 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   10. TEAM
   -------------------------------------------------------------------------- */
.people { display: grid; gap: clamp(var(--s6), 4vw, var(--s8)); }

.person { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 40em) {
  /* The second column is capped so bio lines stay readable on a wide screen
     instead of running the full width of the page. */
  .person { grid-template-columns: minmax(160px, 240px) minmax(0, 74ch);
            gap: clamp(var(--s5), 3vw, var(--s7)); }
}
.person__photo {
  width: 100%; max-width: 240px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
.person__name { margin: 0 0 var(--s1); }
.person__role {
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--crlm);
  margin: 0 0 var(--s4);
}
.person__bio { margin: 0; }
.person__affil {
  margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: var(--fs-caption); line-height: 1.7; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}

/* --------------------------------------------------------------------------
   11. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s5); }
.field { display: grid; gap: var(--s2); }
.field > label { font-weight: 600; font-size: var(--fs-small); }
.field__hint { font-size: var(--fs-caption); color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;             /* 16px stops iOS zooming in */
  color: var(--ink); background: var(--paper);
  border: 1px solid #C8D0E0; border-radius: var(--radius-sm);
  padding: .75rem .875rem; width: 100%; min-height: 46px;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--crlm); }
.field__error { font-size: var(--fs-caption); color: #B3261E; font-weight: 600; }
.req { color: #B3261E; }

/* Honeypot — hidden from people, visible to bots. */
.gotcha { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Formspree hides these until a submission finishes, then adds
   data-fs-active. These rules carry a class so they win over the small
   stylesheet the Formspree library injects at runtime.               */
.form-note {
  border-radius: var(--radius-sm); padding: var(--s4);
  font-size: var(--fs-small); line-height: 1.55; margin: 0;
}
.form-note[data-fs-success],
.form-note[data-fs-error] { display: none; }
.form-note[data-fs-success][data-fs-active],
.form-note[data-fs-error][data-fs-active] { display: block; }
.form-note--ok[data-fs-success][data-fs-active] {
  background: #EAF3EC; border: 1px solid #A8CBB2; color: #17492B;
  padding: var(--s4); border-radius: var(--radius-sm); font-size: var(--fs-small);
}
.form-note--err[data-fs-error][data-fs-active] {
  background: #FBEDEC; border: 1px solid #E2B4B0; color: #7A231C;
  padding: var(--s4); border-radius: var(--radius-sm); font-size: var(--fs-small);
}
.form-note--err a { color: #7A231C; }
.form-note strong { display: block; margin-bottom: .2rem; }
.form-note:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* Per-field validation messages, same idea. */
.field__error[data-fs-error] { display: none; margin: 0; }
.field__error[data-fs-error][data-fs-active] { display: block; color: #B3261E; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #B3261E; }

/* --------------------------------------------------------------------------
   12. FOOTER — deliberately compact: one row of links, one legal line.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: #C6CCD8;
  padding-block: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-size: var(--fs-small);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--mist); text-decoration: underline; }
.section--blue :where(a, button, summary):focus-visible,
.site-footer :where(a, button, summary):focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
}

.site-footer__top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4) var(--s6);
}

.footer-nav {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  font-weight: 600;
}
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-nav--end { margin-left: auto; }

.site-footer__legal {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: space-between; align-items: baseline;
  font-size: var(--fs-caption); line-height: 1.6; color: #9AA4B8;
}

/* The regulated statement. Required on every page. */
.regulatory { margin: 0; color: #B9C2D2; max-width: 72ch; }
.regulatory strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   13. WIDE CONTENT SAFETY
   Anything that cannot shrink (a wide table) scrolls inside its own box
   rather than making the whole page scroll sideways.
   -------------------------------------------------------------------------- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* --------------------------------------------------------------------------
   14. PRODUCT LOCKUP — the LunaFlex name plus its tagline.
   Per the brand guidelines: taglines are Sora caps, letter-spaced +18-22%.
   -------------------------------------------------------------------------- */
.product-lockup { display: grid; gap: var(--s3); margin: 0 0 var(--s5); }
.product-lockup__eyebrow {
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin: 0;
}
.section--blue .product-lockup__eyebrow { color: var(--mist); }
.product-lockup__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 1.35rem + 3.2vw, 3.25rem); line-height: 1;
  letter-spacing: -.02em; color: var(--crlm); margin: 0;
}
.section--blue .product-lockup__name { color: #fff; }
.product-lockup__tagline {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(.75rem, .68rem + .35vw, .875rem);
  text-transform: uppercase; letter-spacing: .2em; color: var(--crlm); margin: 0;
}
.product-lockup__tagline b { font-weight: 700; }
.section--blue .product-lockup__tagline { color: var(--mist); }

/* Hero: text and picture side by side on wider screens, stacked on phones. */
/* First section on a normal page clears the fixed header, then adds the same
   breathing room as the left and right page margins. */
.hero { padding-block: calc(var(--header-h) + var(--gutter)) var(--section-y); }
.hero__media { width: 100%; }

/* --------------------------------------------------------------------------
   15. LUNAFLEX HERO — the full-width product statement on the home page.
   On a phone the picture sits above the words. On a wider screen the words
   move on top of the picture, into the clear space to the right of the
   device. The two crops in assets/device/ are framed for exactly that.
   -------------------------------------------------------------------------- */
.hero-lf { display: grid; background: var(--panel); }

.hero-lf__media { grid-column: 1; grid-row: 1; margin: 0; }
.hero-lf__media img { width: 100%; height: auto; display: block; }



.hero-lf__text {
  grid-column: 1; grid-row: 2;
  padding: var(--s6) var(--gutter) var(--s7);
  background: var(--paper);
}
/* inline-grid so the block shrink-wraps to the wordmark, which lets the
   eyebrow above it justify to exactly the wordmark's width — the lockup in
   the approved reference. */
.hero-lf__h1 {
  display: inline-grid; gap: .4rem; margin: 0;
  justify-items: start; text-align: left;
}
.hero-lf__h1 > * { min-width: 0; }

.hero-lf__eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--crlm);
  /* Sora's uppercase L has a wider left sidebearing than the A above it.
     This paint-only correction aligns the visible letter edges without
     changing the wordmark's measured right edge. */
  transform: translateX(clamp(.125rem, .68vw, .76rem));
}
.hero-lf__name {
  font-family: var(--font-display); font-weight: 800;
  /* 9.84vw reproduces the reference exactly: the wordmark spans 50.9% of the
     viewport, and the eyebrow above justifies to the same width. */
  font-size: clamp(2.5rem, 9.84vw, 11rem);
  line-height: .86; letter-spacing: -.035em; color: var(--crlm);
  text-transform: uppercase;
}
.hero-lf__tag {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(.875rem, .45rem + 1.95vw, 2rem);
  text-transform: uppercase; letter-spacing: .01em; color: #4A5260;
  transform: translateX(clamp(.1rem, .61vw, .69rem));
}

@media (min-width: 54em) {
  /* Words move on top of the picture, right-hand side, vertically centred.
     Their right edge mirrors the logo's left edge at every viewport width. */
  .hero-lf__text {
    grid-row: 1; align-self: center; justify-self: end;
    width: auto; background: none;
    padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 0 0;
    /* Raised off dead centre so the wordmark sits level with the ring rather
       than with the plinth beneath it. */
    transform: translateY(var(--hero-text-lift, 0));
  }
  .hero-lf__eyebrow {
    font-size: min(1.7484vw, 1.9515rem);
    letter-spacing: .1em;
  }
}

/* --------------------------------------------------------------------------
   16. READING WIDTH
   The page is wide so pictures and grids can be generous, but a line of text
   longer than roughly 75 characters is tiring to read. These caps keep prose
   comfortable without narrowing the layout around it.
   -------------------------------------------------------------------------- */
:root { --measure-text: 58ch; --measure-cite: 64ch; }

.split > div > p,
.stack > p,
.steps p,
.person__bio { max-width: var(--measure-text); }

.person__affil,
.cite { max-width: var(--measure-cite); }

/* --------------------------------------------------------------------------
   17. FULL-BLEED HERO WITH OVERLAID TEXT
   Used for the tray picture at the top of The LunaFlex page. Same pattern as
   the LunaFlex hero: picture above the words on a phone, words over the
   picture on a wider screen.
   -------------------------------------------------------------------------- */
.bleed-hero { display: grid; background: var(--panel); }
.bleed-hero__media { grid-column: 1; grid-row: 1; margin: 0; }
.bleed-hero__media img { width: 100%; height: auto; display: block; }
.bleed-hero__text {
  grid-column: 1; grid-row: 2;
  padding: var(--s6) var(--gutter) var(--s7);
  background: var(--paper);
}
.bleed-hero__text > * { max-width: 46ch; }

@media (min-width: 54em) {
  /* The tray photograph is busy everywhere, so the words sit on a solid card
     rather than directly on the picture. That keeps them readable no matter
     what image is used here. */
  .bleed-hero__text {
    grid-row: 1; align-self: end; justify-self: start;
    width: min(52%, 620px);
    margin: 0 0 clamp(3.5rem, 8vw, 6.5rem) clamp(1.5rem, 4vw, 4rem);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
    border-radius: var(--radius);
  }
  .bleed-hero__media img {
    height: min(100svh, 700px);
    object-fit: cover;
    /* Lower Y shows more of the top of the frame — the visible crop moves up. */
    object-position: 50% 30%;
  }

  /* The Team hero uses an approved, uncropped top-down render. Its broad
     negative space keeps the copy clear while the full suture field remains
     visible at the right edge. */
  .bleed-hero--team { --team-device-scale: 1.1; }
  .bleed-hero--team .bleed-hero__text {
    align-self: center;
    width: min(48%, 660px);
    margin: 0 0 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    position: relative;
    z-index: 1;
  }
  .bleed-hero--team .bleed-hero__media { overflow: hidden; }
  .bleed-hero--team .bleed-hero__media img {
    height: min(100svh, 760px);
    object-fit: cover;
    /* Anchor the uncropped suture field to the right. If a narrower desktop
       needs a horizontal crop, it comes entirely from the empty left side. */
    object-position: 100% 50%;
    transform: scale(var(--team-device-scale));
    transform-origin: 100% 100%;
  }
}

@media (min-width: 64em) {
  /* A compact desktop still gets the requested three-line lockup, at a
     slightly smaller display size so the card and left suture do not clash. */
  .bleed-hero--team .bleed-hero__text { width: min(60%, 38rem); }
  .bleed-hero--team .team-title {
    max-width: none;
    font-size: 3.5rem;
  }
  .team-title__line {
    display: block;
    white-space: nowrap;
  }
}

@media (min-width: 76em) {
  /* On a full desktop canvas the Team headline is a deliberate three-line
     lockup, while the card grows into the image's unused left-side space. */
  .bleed-hero--team { --team-device-scale: 1.25; }
  .bleed-hero--team .bleed-hero__text {
    width: min(56%, 720px);
  }
  .bleed-hero--team .team-title { font-size: var(--fs-display); }
}

/* --------------------------------------------------------------------------
   18. CALLOUT — a single sentence that must not be skimmed past.
   -------------------------------------------------------------------------- */
.callout {
  display: inline-block;
  margin: 0;
  padding: var(--s4) var(--s5);
  border-radius: 999px;
  background: var(--crlm);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, .92rem + .38vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -.005em;
  max-width: 46ch;
}
/* On narrow screens a pill with two lines of text looks wrong, so square it off. */
@media (max-width: 40em) { .callout { border-radius: var(--radius); display: block; } }

/* Full-width banner version: one line, centred, with its source close beneath. */
.callout--wide { display: block; width: 100%; max-width: none; text-align: center; }
@media (min-width: 62em) { .callout--wide { white-space: nowrap; } }
.callout-source { max-width: none; text-align: center; margin-top: var(--s3); }
.section--blue .callout { background: #fff; color: var(--deep); }

/* --------------------------------------------------------------------------
   19. PLATFORM DIAGRAM — component cards beside an annotated device.
   The numbered markers live in an SVG that shares the picture's coordinate
   system, so they stay pinned to the right spot at every screen size.
   -------------------------------------------------------------------------- */
.platform { display: grid; gap: clamp(var(--s6), 4vw, var(--s8)); align-items: start; }
.platform > * { min-width: 0; }
@media (min-width: 60em) {
  .platform { grid-template-columns: 1fr 1fr; }
  /* Pull the illustration up so its top sits level with the section heading
     rather than with the first card. */
  .platform > div:last-child { margin-top: calc(var(--s8) * -1 - 5.5rem); }
}

.platform__cards { display: grid; gap: var(--s4); }
.pcard {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
  align-items: center;
  border: 1px solid var(--line); border-left: 4px solid var(--crlm);
  border-radius: var(--radius); background: var(--paper);
  padding: var(--s5) var(--s6);
}
.pcard__icon { width: 54px; height: 54px; color: var(--crlm); flex: none; }
.pcard h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); }
.pcard p { margin: 0; color: var(--muted); font-size: var(--fs-body); max-width: none; }

/* Held to a size that balances the three cards beside it. The whole drawing
   is always visible — nothing is cropped. */
.platform__figure { position: relative; margin: 0 auto; width: 100%; max-width: 470px; }
.platform__figure img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.platform__pins {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.platform__pins circle { fill: var(--crlm); }
.platform__pins text { fill: #fff; font-family: var(--font-display); font-weight: 700; }

/* Compact key, sitting directly under the illustration it explains. */
.platform__legend {
  list-style: none; margin: var(--s4) auto 0; padding: 0; max-width: 42rem;
  display: grid; gap: .3rem;
}
/* The key uses two columns only when each entry has enough room to keep its
   approved title and explanation on exactly two lines. */
.platform__key {
  width: 100%;
  grid-template-columns: 1fr;
  gap: .45rem var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
@media (min-width: 40em) and (max-width: 59.99em) {
  .platform__key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 76em) {
  .platform__key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.platform__legend li {
  display: grid; grid-template-columns: 1.15rem 1fr; gap: .55rem;
  align-items: baseline;
  font-size: var(--fs-small); line-height: 1.45;
}
.platform__legend b {
  display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--crlm); color: #fff; font-family: var(--font-mono);
  font-size: .625rem; font-weight: 500; align-self: center;
}
.platform__legend span { color: var(--muted); }
.platform__legend strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   20. THESIS GRID — small icon above a short point.
   -------------------------------------------------------------------------- */
.points { display: grid; gap: var(--s6); }
@media (min-width: 40em) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .points { grid-template-columns: repeat(4, 1fr); } }
.point__icon {
  width: 40px; height: 40px; color: var(--crlm); margin-bottom: var(--s4); display: block;
}
.point h3 { margin: 0 0 var(--s3); }
.point p { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: none; }

/* --------------------------------------------------------------------------
   21. TEAM — a card grid rather than a stack of wide rows.
   -------------------------------------------------------------------------- */
.team-grid { display: grid; gap: clamp(var(--s5), 2.5vw, var(--s7)); }
/* Keep one wide card per row on tablets. Each card already contains its own
   photo/text columns, so splitting the page grid too early crushes the bio. */
@media (min-width: 60em) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

.member {
  display: grid; gap: var(--s5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: clamp(var(--s5), 2vw, var(--s6));
  align-content: start;
}
@media (min-width: 30em) { .member { grid-template-columns: minmax(130px, 180px) 1fr; } }

.member__photo {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--panel);
}
.member__name { margin: 0 0 var(--s1); font-size: var(--fs-h3); }
.member__role {
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--crlm); margin: 0 0 var(--s4);
}
.member__bio { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: none; }
.member__affil {
  margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: .6875rem; line-height: 1.65; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; max-width: none;
}

/* --------------------------------------------------------------------------
   22. CONTACT — the materials request and general enquiries must not look
   like the same thing. The request is a solid brand-blue panel; general
   enquiries is a quiet outlined box.
   -------------------------------------------------------------------------- */
.request-panel {
  background: var(--crlm); color: #fff;
  border-radius: var(--radius); padding: clamp(var(--s5), 3vw, var(--s7));
}
.request-panel h2, .request-panel .eyebrow { color: #fff; }
.request-panel .eyebrow { color: var(--mist); }
.request-panel p { color: var(--on-blue); }
.request-panel .field > label { color: #fff; }
.request-panel .field__hint { color: var(--mist); }
.request-panel .field input,
.request-panel .field textarea {
  background: #fff; border-color: transparent; color: var(--ink);
}
.request-panel .field input:focus,
.request-panel .field textarea:focus { border-color: var(--ink); }
.request-panel .req { color: #FFD5D0; }
.request-panel .cite { color: var(--mist); max-width: none; }
.request-panel :where(a, button, input, textarea):focus-visible { outline: 3px solid #fff; }

.enquiry-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(var(--s5), 2.5vw, var(--s6)); background: var(--paper);
  display: grid; gap: var(--s5); align-content: start;
}
.enquiry-box h2 { font-size: var(--fs-h3); margin: 0; }
.enquiry-box p { margin: 0; max-width: none; }

/* A label and the thing it labels are one group; the box gap sits between
   groups, never between a label and its own value. */
.enquiry-group { display: grid; gap: var(--s3); }
.enquiry-box__label {
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0;
}
/* One size and weight for every value in these boxes. */
.enquiry-box__value { font-size: var(--fs-body); font-weight: 500; line-height: 1.55; }

/* Footer: keep the two regulated sentences on separate lines. */
.regulatory span { display: block; }

/* Nav call-to-action is set in caps to separate it from the plain menu links. */
.btn--caps { text-transform: uppercase; letter-spacing: .07em; font-size: .8125rem; }

/* Home hero byline sits centred beneath the picture, as in the approved mockup. */
.hero-lf__by {
  grid-column: 1; grid-row: 3;
  margin: 0; padding: 0 var(--gutter) var(--s6);
  text-align: center; background: var(--paper);
  font-size: var(--fs-caption); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.hero-lf__by b { font-family: var(--font-display); font-weight: 700; }
@media (min-width: 54em) {
  .hero-lf__by {
    grid-row: 1; align-self: end; justify-self: center;
    background: none; padding-bottom: clamp(1.25rem, 3vw, 2.5rem);
  }
}

/* Keep the whole hero — picture, wordmark and company line — inside one
   laptop screen. Trims the floor and ceiling of the photograph only; the
   device and the text area are untouched. */
@media (min-width: 54em) {
  /* Full bleed: exactly one screen, running edge to edge and underneath the
     transparent header. The crop is framed so the left sutures land on the
     page gutter, in line with the logo; cover only ever trims top and bottom,
     so that horizontal framing is fixed in the asset and cannot drift. */
  .hero-lf { min-height: 100svh; }
  .hero-lf__media { height: 100%; }
  .hero-lf__media picture { display: block; height: 100%; }
  .hero-lf__media img {
    height: 100%; width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}


/* --------------------------------------------------------------------------
   23. THESIS CARDS — a hairline divides the points from their sources.
   -------------------------------------------------------------------------- */
.points-source {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.section--blue .points-source { border-top-color: rgba(255,255,255,.2); }

/* --------------------------------------------------------------------------
   24. WATERMARK PANEL — the brand mark, enlarged and faded, filling the empty
   half of a blue section. Purely decorative.
   -------------------------------------------------------------------------- */
.section--mark { position: relative; overflow: hidden; }
.section--mark > .wrap { position: relative; z-index: 1; }
.section--mark::after {
  content: ""; position: absolute; pointer-events: none;
  right: -3%; bottom: -20%;
  width: min(66%, 780px); aspect-ratio: 900 / 819;
  background: url('/assets/logo/mark-waves-white.webp') no-repeat right bottom / contain;
  opacity: .16;
}
@media (max-width: 54em) { .section--mark::after { display: none; } }

/* --------------------------------------------------------------------------
   25. FULL-BLEED SPLIT — text held to the page grid on one side, picture
   running to the edge of the screen on the other. Removes the dead margin
   around a large diagram.
   -------------------------------------------------------------------------- */
.bleed-split { display: grid; }
.bleed-split__text {
  padding: var(--section-y) var(--gutter);
}
.bleed-split__media { margin: 0; overflow: hidden; }
.bleed-split__media img { width: 100%; height: auto; display: block; }

@media (min-width: 60em) {
  /* The picture fills its half of the screen. The marker overlay uses
     preserveAspectRatio="slice", which is the SVG equivalent of
     object-fit:cover, so the markers crop with the picture and stay pinned. */
  .bleed-split__media img { height: 100%; object-fit: cover; object-position: center; }
}

@media (min-width: 60em) {
  .bleed-split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .bleed-split__text {
    padding: var(--section-y) clamp(2rem, 4vw, 4rem) var(--section-y)
             max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
  .bleed-split--flip .bleed-split__media { order: -1; }
  .bleed-split--flip .bleed-split__text {
    padding-left: clamp(2rem, 4vw, 4rem);
    padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
}

/* Bigger headshots on the team cards. */
@media (min-width: 30em) { .member { grid-template-columns: minmax(150px, 230px) 1fr; } }

/* Patent drawings sit in matched boxes so the pair lines up. */
.drawing-pair { display: grid; gap: var(--s5); }
@media (min-width: 34em) { .drawing-pair { grid-template-columns: 1fr 1fr; } }
.drawing-pair .figure img {
  aspect-ratio: 4 / 3; object-fit: contain; background: #fff;
}


/* The narrower Team layouts keep a natural wrap; the wide desktop treatment
   above switches the same words into its intentional three-line lockup. */
.team-title { max-width: 16ch; }


/* --------------------------------------------------------------------------
   26. FROSTED HEADER (pointer devices, desktop widths only)

   At rest the bar is frosted glass: the page shows through and only the mark
   is visible. On hover — or on keyboard focus — it turns solid white and the
   rest of the header appears:

     · the wordmark unfolds rightward out of the mark
     · the menu links and button fade in, without moving

   Both run on the same duration and easing so they start and finish together.
   Touch devices and phones keep the plain, always-visible header: a menu you
   have to hover to find is no menu at all without a mouse.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 68em) {
  :root { --nav-reveal: 620ms cubic-bezier(.22,.61,.36,1); }

  /* The bar itself is fully transparent at rest — only the logo carries the
     frosted panel, so the hero runs cleanly behind everything else. */
  .site-header {
    background: transparent;
    border-bottom-color: transparent;
    transition: background var(--nav-reveal), border-color var(--nav-reveal);
  }
  .site-header:hover,
  .site-header:focus-within {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: rgba(255,255,255,.55);
  }

  /* Solid at the top of the page. Once content starts passing underneath the
     bar the mark drops back so it does not fight with it, and comes back to
     full strength on hover. */
  .lockup__mark { opacity: 1; transition: opacity var(--nav-reveal); }
  .site-header.is-scrolled .lockup__mark { opacity: .14; }
  .site-header.is-scrolled:hover .lockup__mark,
  .site-header.is-scrolled:focus-within .lockup__mark { opacity: 1; }

  /* Everything else simply fades. Nothing changes width, so the bar does not
     shuffle around as it appears. */
  .lockup__word,
  .nav__item,
  .nav__cta > .btn {
    opacity: 0;
    transition: opacity var(--nav-reveal);
  }
  .site-header:hover .lockup__word,
  .site-header:focus-within .lockup__word,
  .site-header:hover .nav__item,
  .site-header:focus-within .nav__item,
  .site-header:hover .nav__cta > .btn,
  .site-header:focus-within .nav__cta > .btn { opacity: 1; }
}

/* Anyone who has asked for less motion gets the header fully visible, static. */
@media (prefers-reduced-motion: reduce) {
  .site-header { background: var(--paper); }
  .lockup__mark { opacity: 1; }
  .lockup__word, .nav__item, .nav__cta > .btn { opacity: 1; }
  .lockup__word, .nav__item, .nav__cta > .btn, .site-header, .lockup__mark { transition: none; }
}

/* Icon on the "Work with us" cards. */
.card__icon { width: 34px; height: 34px; color: var(--crlm); margin-bottom: var(--s2); }
.section--blue .card__icon { color: #fff; }


/* Full-bleed heroes start below the header by default, so nothing is hidden
   when the bar is solid. The frosted rules further up remove this padding, so
   the picture only runs behind the header where you can actually see through
   it. */
.hero-lf, .bleed-hero { padding-top: var(--header-h); }
#main { scroll-margin-top: var(--header-h); }


/* Where the bar is genuinely see-through, let the picture run behind it.
   Placed last so it wins over the default padding above. */
@media (hover: hover) and (pointer: fine) and (min-width: 68em) {
  .hero-lf, .bleed-hero { padding-top: 0; }
}

/* Reduced motion makes the desktop header solid and always visible, so the
   hero content must clear it instead of continuing underneath it. */
@media (prefers-reduced-motion: reduce) and (min-width: 68em) {
  .hero-lf, .bleed-hero { padding-top: var(--header-h); }
}


/* --------------------------------------------------------------------------
   26. MECHANISM FLOW — the four design-concept points as a sequence on a
   connecting line, rather than another grid of boxes. Reads as a mechanism
   and is visually distinct from every other section on the site.
   -------------------------------------------------------------------------- */
.flow {
  list-style: none; margin: 0; padding: 0; counter-reset: flow;
  display: grid; gap: var(--s6);
}
.flow__step { counter-increment: flow; position: relative; padding-top: var(--s6); }

/* The node is the numeral in a filled disc. The connector is drawn on the
   step itself so it can reach across the grid gap to the next node, instead
   of stopping at the edge of the disc. */
.flow__node {
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--crlm); display: grid; place-items: center; z-index: 1;
}
.flow__node::after {
  content: counter(flow, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 700; font-size: .8125rem;
  color: #fff; letter-spacing: .02em;
}

@media (min-width: 52em) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
  .flow__step { padding-top: calc(2.5rem + var(--s5)); }
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute;
    left: 2.5rem; right: calc(var(--s5) * -1);
    top: 1.25rem; height: 2px; background: var(--line);
  }
}
@media (max-width: 51.99em) {
  .flow__step { padding-left: calc(2.5rem + var(--s4)); padding-top: 0; min-height: 2.5rem; }
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute;
    left: 1.25rem; top: 2.5rem; bottom: calc(var(--s6) * -1);
    width: 2px; background: var(--line); transform: translateX(-1px);
  }
}

.flow__step h3 { margin: 0 0 var(--s3); font-size: var(--fs-h3); max-width: 20ch; }
.flow__step p  { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: 42ch; }

/* --------------------------------------------------------------------------
   27. MAP CARD — a flat, locally stored map beneath the contact boxes.
   -------------------------------------------------------------------------- */
.map-card {
  margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.map-card__image { position: relative; }
.map-card__image img {
  width: 100%; height: auto; display: block;
  filter: grayscale(1) contrast(1.18);
}
.map-card__pin {
  position: absolute; left: 50%; top: 50%;
  width: 1.25rem; height: 1.25rem;
  transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 50%;
  background: var(--crlm);
  box-shadow: 0 2px 8px rgba(28,35,48,.45), 0 0 0 1px rgba(42,71,148,.25);
}
.map-card figcaption {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between; align-items: baseline;
  padding: .7rem 1rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.map-card__credit { color: var(--muted); }
.map-card__credit:hover { color: var(--crlm); }

/* Three-up variant of the points grid. */
@media (min-width: 46em) { .points--three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .points--three { grid-template-columns: repeat(3, 1fr); } }

/* A short bridging band between the hero and the first full section. Full
   section padding around two lines of text reads as a gap, not as breathing
   room, so it gets a smaller share. */
.section--bridge { padding-block: var(--s6); }

/* --------------------------------------------------------------------------
   28. PATIENT INFORMATION — plain-language education with an unmistakable
   development-status hierarchy. The design is intentionally editorial, not
   a treatment funnel or clinical-recruitment page.
   -------------------------------------------------------------------------- */
.patient-hero {
  background: var(--panel);
  padding-block: calc(var(--header-h) + var(--s6)) clamp(var(--s7), 5vw, var(--s8));
}
.patient-hero__grid {
  display: grid; gap: clamp(var(--s6), 5vw, 5rem); align-items: center;
}
.patient-hero__copy { max-width: 680px; }
.patient-hero__copy .display {
  font-size: clamp(2.125rem, 1.42rem + 3vw, 4.25rem);
  max-width: 16ch;
}
.patient-hero__copy > .lead { max-width: 58ch; }

.patient-hero__figure {
  margin: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.patient-hero__figure img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center;
}
.patient-hero__figure figcaption {
  padding: .7rem 1rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

@media (min-width: 68em) {
  .patient-hero { min-height: min(100svh, 860px); display: grid; align-items: center; }
  .patient-hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr); }
}

.development-notice {
  margin-top: var(--s6); padding: var(--s5);
  border: 1px solid #C7D4ED; border-left: 4px solid var(--crlm);
  border-radius: var(--radius-sm); background: #fff;
}
.development-notice p { margin: 0; }
.development-notice__label {
  margin-bottom: var(--s2) !important;
  font-family: var(--font-display); font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--crlm);
}

.patient-anatomy__figure {
  margin: 0 auto; width: 100%; max-width: 540px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff;
}
.patient-anatomy__figure img { width: 100%; }
.patient-source { margin-top: var(--s5); }

.patient-definition {
  display: grid; gap: clamp(var(--s6), 5vw, 5rem); align-items: start;
}
.patient-definition__intro { max-width: 650px; }
.patient-definition__intro .lead { max-width: 43ch; }
.patient-definition__clarifiers {
  display: grid; gap: var(--s5);
}
.patient-definition__clarifiers article {
  border-top: 2px solid var(--crlm); padding-top: var(--s4);
}
.patient-definition__clarifiers h3 { margin-bottom: var(--s3); }
.patient-definition__clarifiers article > p:last-child { color: var(--muted); }
.patient-definition__number {
  margin: 0 0 var(--s3); font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .1em; color: var(--crlm);
}
@media (min-width: 48em) {
  .patient-definition__clarifiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .patient-definition { grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); }
}

.patient-development__intro { max-width: 780px; }
.patient-concepts {
  display: grid; gap: var(--s5); margin-block: var(--s7) var(--s6);
}
.patient-concept {
  padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.35);
}
.patient-concept__number {
  display: inline-grid; place-items: center; width: 2.65rem; height: 2.65rem;
  margin-bottom: var(--s5); border-radius: 50%; background: #fff; color: var(--crlm);
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
}
.patient-concept h3 { margin-bottom: var(--s3); }
.patient-concept p { color: var(--on-blue); max-width: 42ch; }
.patient-development__caution {
  max-width: 70ch; margin: 0 0 var(--s5); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.2); color: #fff !important;
  font-weight: 600;
}
@media (min-width: 54em) {
  .patient-concepts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.patient-status-layout {
  display: grid; gap: clamp(var(--s6), 5vw, 5rem); align-items: start;
}
.development-status-list {
  margin: 0; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--paper);
}
.development-status-list > div {
  display: grid; gap: var(--s3); padding: var(--s5);
  border-bottom: 1px solid var(--line);
}
.development-status-list > div:last-child { border-bottom: 0; }
.development-status-list dt { font-weight: 600; color: var(--ink); }
.development-status-list dd { margin: 0; }
.status-chip {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: .3rem .7rem; border: 1px solid #C9D0DD; border-radius: 999px;
  color: var(--muted); font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.status-chip--current { border-color: var(--crlm); background: var(--crlm); color: #fff; }
@media (min-width: 40em) {
  .development-status-list > div {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  }
}
@media (min-width: 58em) {
  .patient-status-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr); }
}

.patient-faq-layout { display: grid; gap: var(--s7); }
.patient-faq__intro { max-width: 760px; }
.faq-list {
  border-top: 1px solid #C9D0DD;
}
.faq-list details { border-bottom: 1px solid #C9D0DD; }
.faq-list summary {
  list-style: none; position: relative; cursor: pointer;
  padding: var(--s5) 3.25rem var(--s5) 0; min-height: 44px;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
  line-height: 1.35; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; top: 50%; right: .25rem;
  display: grid; place-items: center; width: 2rem; height: 2rem;
  transform: translateY(-50%); border: 1px solid #BFC8D8; border-radius: 50%;
  color: var(--crlm); font-family: var(--font-body); font-size: 1.35rem; font-weight: 400;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > div { padding: 0 3.25rem var(--s5) 0; }
.faq-list details > div p { max-width: 76ch; color: var(--muted); }

.patient-safety-note {
  display: grid; gap: var(--s5); padding: clamp(var(--s5), 3vw, var(--s6));
  border: 1px solid #C7D4ED; border-left: 4px solid var(--crlm);
  border-radius: var(--radius); background: #fff;
}
.patient-safety-note h3 { font-size: 1rem; margin-bottom: var(--s2); }
.patient-safety-note p { color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 48em) {
  .patient-safety-note { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.patient-next {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7);
  align-items: end; justify-content: space-between;
  padding-top: var(--s6); border-top: 1px solid #C9D0DD;
}
.patient-next h2 { margin: 0; }

/* --------------------------------------------------------------------------
   29. FOUNDER SPOTLIGHT — a long-form layer beneath the unchanged team grid.
   Portraits are framed to match the vertical crops in the approved deck.
   -------------------------------------------------------------------------- */
.founder-spotlight__intro { max-width: 780px; }
.founder-profiles { display: grid; gap: clamp(var(--s7), 7vw, 6rem); margin-top: var(--s8); }
.founder-profile {
  display: grid; gap: clamp(var(--s5), 4vw, var(--s8)); align-items: center;
  padding-top: clamp(var(--s6), 4vw, var(--s7)); border-top: 1px solid var(--line);
}
.founder-profile__media {
  margin: 0; width: 100%; max-width: 520px; aspect-ratio: 4 / 5;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.founder-profile__media img { width: 100%; height: 100%; object-fit: cover; }
.founder-profile__media--philip img { object-position: 18% 50%; }
.founder-profile__media--miller img { object-position: 50% 24%; }
.founder-profile__role {
  margin: 0 0 var(--s4); font-family: var(--font-display);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--crlm);
}
.founder-profile__bio { max-width: 72ch; color: var(--muted); }
.founder-facts {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; gap: var(--s3);
}
.founder-facts li {
  padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink);
}
.founder-facts strong { color: var(--crlm); font-weight: 700; }
@media (min-width: 60em) {
  .founder-profile { grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr); }
  .founder-profile--flip { grid-template-columns: minmax(0, 1.22fr) minmax(320px, .78fr); }
  .founder-profile--flip .founder-profile__media { order: 2; justify-self: end; }
  .founder-profile__content { padding-inline: clamp(0rem, 2vw, var(--s6)); }
}