/** Shopify CDN: Minification failed

Line 2197:1 Unexpected "}"
Line 2202:1 Unexpected "}"
Line 2206:1 Unexpected "}"
Line 2209:1 Unexpected "}"

**/
/* BoobyBiome pre-launch site v22.8 - transferred verbatim from the prototype (14 Sep 2026).
   The first rule block is the artifact host reset the prototype was designed under. */
:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}

/* ==========================================================================
   BYOMI TOP FOLD - Nav · Hook splash · Hero · Trust (fragment prototype)
   BB WEB DESIGN SYSTEM TEST v0.1 - single-theme by design (brand canvas)
   ========================================================================== */

@font-face { font-family: 'Source Serif 4'; src: url(//boobybiome.com/cdn/shop/t/4/assets/bb-source-serif-4.woff2?v=41254528001622583711789406416) format('woff2'); font-weight: 300 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url(//boobybiome.com/cdn/shop/t/4/assets/bb-source-serif-4-italic.woff2?v=30921593735277605531789406416) format('woff2'); font-weight: 300 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sabon'; src: url(//boobybiome.com/cdn/shop/t/4/assets/bb-sabon.ttf?v=176385688295308069671789406416) format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sabon'; src: url(//boobybiome.com/cdn/shop/t/4/assets/bb-sabon-italic.ttf?v=102813333772033033421789406416) format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url(//boobybiome.com/cdn/shop/t/4/assets/bb-ibm-plex-sans.woff2?v=129850947111319454031789406415) format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(//boobybiome.com/cdn/shop/t/4/assets/bb-ibm-plex-mono.woff2?v=68201987897955973861789406415) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --holder-teal: #1F4A4A;
  --pod-milk: #EDE4D4;
  --dewy-white: #F4F1E8;
  --eucalyptus: #B8C9B5;
  --soft-mint: #D4E2D0;
  --glasshouse: #2A4A40;
  --soft-blush: #E8C4BC;
--blush-deep: #A04A37;
--blush-mid: #D08776;   /* Soft Blush hue at L64: still reads as blush, 2.3:1 on Pod Milk, for a single accent word in display size */   /* --soft-blush at a readable weight: same hue, 4.7:1 on Pod Milk. Also satisfies .field-error, which referenced this token before it existed. */
  --cream-deeper: #E3D8C2;

  --surface: var(--dewy-white);
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: var(--pod-milk);
  --surface-container: #E5DDCC;
  --surface-deepest: var(--glasshouse);

  --on-surface: var(--holder-teal);
  --on-surface-muted: #1F4A4AB3;
  --on-surface-subtle: #1F4A4A80;
  --on-dark: var(--dewy-white);
  --on-dark-muted: #F4F1E8B3;
  --on-dark-subtle: #F4F1E866;

  --cta: var(--soft-blush);
  --cta-on: var(--glasshouse);

  --ghost-outline: rgba(42, 74, 64, 0.12);
  --ghost-outline-strong: rgba(42, 74, 64, 0.20);
  --ghost-outline-dark: rgba(244, 241, 232, 0.16);

  --shadow-float: 0 30px 80px rgba(42, 74, 64, 0.12);

  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --gutter: clamp(24px, 4vw, 48px);
  --section-pad-y: clamp(64px, 8vw, 112px);
  --content-marketing: 1200px;

  --ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-morph: cubic-bezier(0.65, 0, 0.35, 1);        /* easeInOutCubic - on-screen morph */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);   /* entrances */
  --dur-morph: 520ms;
  --shadow-modal: 0 40px 120px rgba(42, 74, 64, 0.28), 0 2px 6px rgba(42, 74, 64, 0.10);
  --dur-quick: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 1600ms;

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body: 'Sabon', Georgia, serif;
  --font-eyebrow: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --fs-display-xl: clamp(56px, 7.5vw, 120px);
  --fs-display-lg: clamp(44px, 5.5vw, 88px);
  --fs-display-md: clamp(36px, 4.2vw, 64px);
  --fs-h3: 22px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-eyebrow: 13px;
  --fs-data: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "onum" 1, "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-block;
}
.label-line {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.data {
  font-family: var(--font-data);
  font-size: var(--fs-data);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
}

::selection { background: var(--soft-blush); color: var(--glasshouse); }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.pill:focus-visible, .nav-cta:focus-visible { border-radius: var(--radius-full); }
.band-dark ::selection { background: var(--eucalyptus); color: var(--glasshouse); }

/* ---- Buttons: full pill, Plex Sans caps, press settles ---- */
.pill {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  padding: 16px 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  transition: opacity var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover { opacity: 0.85; }
}
.pill:active { transform: scale(0.98); }
.pill-bright { background: var(--dewy-white); color: var(--glasshouse); }   /* brightest element on dark bands */
.pill-ghost-dark { background: transparent; color: var(--dewy-white); box-shadow: inset 0 0 0 1px var(--ghost-outline-dark); }
.pill-blush { background: var(--cta); color: var(--cta-on); }               /* THE 4% moment */
.pill-quiet {
  background: transparent; color: var(--on-surface);
  padding: 16px 10px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ghost-outline-strong);
  transition: text-decoration-color var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) {
  .pill-quiet:hover { opacity: 1; text-decoration-color: currentColor; }
}
/* A quiet link opening a row has 10px of padding holding its underline off the margin;
   pull it back so the text aligns with the heading above, keeping the tap target. */
.bridge-ctas .pill-quiet:first-child { margin-left: -10px; }


/* ==========================================================================
   NAV - floating pill, Glasshouse 92% + blur, the only permanently shadowed el
   ========================================================================== */
/* Nav lives in two states: wide and quiet over the hook, condensing into the
   floating pill as soon as the page moves (the system's signature nav). */
.nav {
  --mark-h: 58px;
  --mark-h-pill: 56px;   /* Paul (14 Sep): wordmark larger once the bar becomes the pill */
  --nav-w-pill: min(calc(100% - 32px), 880px);
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(24px, 4vw, 48px);
  background: rgba(42, 74, 64, 0);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 rgba(42, 74, 64, 0), inset 0 0 0 1px rgba(244, 241, 232, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  will-change: transform, width, padding, background;
  /* Fallback (no scroll-driven animations): every morphing property rides ONE curve,
     so the bar reads as a single object condensing rather than four things snapping. */
  transition:
    transform var(--dur-morph) var(--ease-morph),
    width var(--dur-morph) var(--ease-morph),
    padding var(--dur-morph) var(--ease-morph),
    background var(--dur-morph) var(--ease-morph),
    box-shadow var(--dur-morph) var(--ease-morph),
    backdrop-filter var(--dur-morph) var(--ease-morph),
    -webkit-backdrop-filter var(--dur-morph) var(--ease-morph);
}
.nav.scrolled {
  transform: translate(-50%, 14px);
  width: var(--nav-w-pill);
  padding: 4px 10px 4px 14px;
  background: rgba(42, 74, 64, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline-dark);
}
.nav-wordmark { display: flex; align-items: center; text-decoration: none; flex: none; }
.nav-links, .nav-cta { flex: none; }
.nav-wordmark img {
  height: var(--mark-h);
  width: auto;
  display: block;
  transform-origin: left center;
  transition: height var(--dur-morph) var(--ease-morph);
}
.nav.scrolled .nav-wordmark img { height: var(--mark-h-pill); }
@media (max-width: 720px) {
  .nav { --mark-h: 40px; --mark-h-pill: 30px; padding: 14px 20px; gap: 14px; }
  .nav.scrolled { padding: 3px 8px 3px 12px; }
}

/* Where the browser can drive an animation from the scroll position, the morph is
   scrubbed 1:1 by the first 160px of scroll - reversible at any instant, no timer,
   nothing to interrupt. (Apple: direct manipulation; the thought and the gesture in
   parallel.) The class-based transition above remains the fallback. */
@supports (animation-timeline: scroll()) {
  .nav, .nav.scrolled {
    transition: none;
    animation: navMorph linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 160px;
  }
  .nav-wordmark img, .nav.scrolled .nav-wordmark img {
    transition: none;
    animation: navMark linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 160px;
  }
  @keyframes navMorph {
    from {
      transform: translate(-50%, 0);
      width: 100%;
      padding: 18px clamp(24px, 4vw, 48px);
      background: rgba(42, 74, 64, 0);
      box-shadow: 0 0 0 rgba(42, 74, 64, 0), inset 0 0 0 1px rgba(244, 241, 232, 0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
    }
    to {
      transform: translate(-50%, 14px);
      width: var(--nav-w-pill);
      padding: 4px 10px 4px 14px;
      background: rgba(42, 74, 64, 0.92);
      box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline-dark);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
  }
  @keyframes navMark {
    from { height: var(--mark-h); }
    to   { height: var(--mark-h-pill); }
  }
  @media (max-width: 720px) {
    @keyframes navMorph {
      from {
        transform: translate(-50%, 0);
        width: 100%;
        padding: 14px 20px;
        background: rgba(42, 74, 64, 0);
        box-shadow: 0 0 0 rgba(42, 74, 64, 0), inset 0 0 0 1px rgba(244, 241, 232, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
      }
      to {
        transform: translate(-50%, 10px);
        width: var(--nav-w-pill);
        padding: 3px 8px 3px 12px;
        background: rgba(42, 74, 64, 0.92);
        box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline-dark);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }
    }
  }
}
/* Pages that open on cream (legal) have no dark band for the wide nav to sit on:
   the pill is the resting state there, and the scroll morph is switched off. */
body[data-light-top] .nav, body[data-light-top] .nav.scrolled {
  animation: none; transition: none;
  transform: translate(-50%, 14px); width: var(--nav-w-pill); padding: 4px 10px 4px 14px;
  background: rgba(42, 74, 64, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline-dark);
}
body[data-light-top] .nav-wordmark img, body[data-light-top] .nav.scrolled .nav-wordmark img { animation: none; transition: none; height: var(--mark-h-pill); }
@media (max-width: 720px) { body[data-light-top] .nav, body[data-light-top] .nav.scrolled { transform: translate(-50%, 10px); padding: 3px 8px 3px 12px; } }
@media (prefers-reduced-motion: reduce) {
  .nav, .nav.scrolled, .nav-wordmark img, .nav.scrolled .nav-wordmark img {
    animation: none;
    transition: background var(--dur-base) linear, box-shadow var(--dur-base) linear;
  }
}
.nav-links { display: flex; gap: clamp(18px, 3vw, 34px); }
.nav-links a {
  padding: 12px 4px; margin: -12px -4px;   /* 44px hit area, same visual position */
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 14px;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--dewy-white); }
}
.nav-cta {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--pod-milk);
  color: var(--glasshouse);
  border-radius: var(--radius-full);
  padding: 12px 22px;
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) { .nav-cta:hover { opacity: 0.85; } }
.nav-cta:active { transform: scale(0.98); }
.lbl-short { display: none; }
@media (max-width: 720px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 13px; white-space: nowrap; }
  .nav .lbl-full { display: none; }
  .nav .lbl-short { display: inline; }
  .nav-cta { padding: 11px 16px; }
}
@media (max-width: 359px) { .nav-links { display: none; } }

/* ---- Mobile menu: one button, one small panel anchored to it. Origin top-right (Emil: popovers scale from their trigger). ---- */
.nav-menu-btn {
  display: none; width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; cursor: pointer; padding: 0;
  background: rgba(244, 241, 232, 0.10); box-shadow: inset 0 0 0 1px var(--ghost-outline-dark); color: var(--dewy-white);
  position: relative; flex: none;
  transition: background var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
.nav-menu-btn:active { transform: scale(0.94); }
.nav-menu-btn .bar {
  position: absolute; left: 13px; width: 18px; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform 220ms var(--ease-out-strong), top 220ms var(--ease-out-strong);
}
.nav-menu-btn .bar:nth-child(1) { top: 18px; }
.nav-menu-btn .bar:nth-child(2) { top: 25px; }
.nav-menu-btn[aria-expanded="true"] .bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-menu-btn[aria-expanded="true"] .bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.nav-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 20px; min-width: 232px;   /* inset to the gutter in the wide state; the pill state overrides */
  background: var(--surface); color: var(--on-surface); border-radius: var(--radius-lg); padding: 10px;
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline);
  transform-origin: top right; opacity: 0; transform: scale(0.96) translateY(-4px);
  transition: opacity 180ms var(--ease-out-strong), transform 180ms var(--ease-out-strong);
}
.nav-menu.is-open { opacity: 1; transform: none; }
.nav-menu.is-closing { opacity: 0; transform: scale(0.97) translateY(-3px); transition-duration: 140ms; }
.nav-menu-link {
  display: block; padding: 14px 16px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--glasshouse); text-decoration: none;
  transition: background var(--dur-quick) var(--ease-gentle);
}
.nav-menu-link:active { background: rgba(42, 74, 64, 0.06); }
.nav-menu-link.active { color: var(--holder-teal); }
.nav-menu-cta { display: flex; justify-content: center; margin: 8px 4px 4px; padding: 15px 18px; }
@media (max-width: 720px) {
  .nav { --mark-h: 54px; --mark-h-pill: 54px; }
  .nav-links, .nav-cta { display: none; }
  .nav-menu-btn { display: grid; }
  .nav-menu:not([hidden]) { display: block; }
  .nav.scrolled .nav-menu { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-menu.is-closing { transition: opacity 120ms linear; transform: none !important; }
  .nav-menu-btn .bar { transition: none; }
}

/* ==========================================================================
   HOOK SPLASH - Glasshouse gallery band, typed accent word
   ========================================================================== */
.hook {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--surface-deepest);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* full-bleed baby image - it's inside the baby's gut that we're helping */
.hook-bg { position: absolute; inset: 0; overflow: hidden; }
.hook-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 42%; display: block; }
.hook-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(42,74,64,0.96) 0%, rgba(42,74,64,0.86) 26%, rgba(42,74,64,0.42) 55%, rgba(42,74,64,0.10) 78%, rgba(42,74,64,0.30) 100%),
    linear-gradient(180deg, rgba(42,74,64,0.55) 0%, rgba(42,74,64,0) 26%, rgba(42,74,64,0) 72%, rgba(42,74,64,0.45) 100%);
}
@media (max-width: 900px) {
  .hook { min-height: 88vh; min-height: 88svh; }
  .hook-inner { padding-top: 96px; padding-bottom: 30px; }
  .hook-bg img { object-position: 62% 30%; }
  .hook-bg::after {
    background:
      linear-gradient(180deg, rgba(42,74,64,0.62) 0%, rgba(42,74,64,0.30) 34%, rgba(42,74,64,0.62) 64%, rgba(42,74,64,0.88) 100%);
  }
  .hook-inner { align-self: flex-end; }
}

.hook-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-marketing);
  margin: 0 auto;
  padding: clamp(120px, 16vh, 180px) var(--gutter) clamp(72px, 10vh, 120px);
}
.hook-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-xl);
  line-height: 0.98;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
.hook-word-line { display: block; min-height: 1.12em; }
.hook-word { font-style: italic; color: var(--eucalyptus); }
.caret {
  display: inline-block;
  width: 0.045em;
  height: 0.82em;
  margin-left: 0.06em;
  background: var(--eucalyptus);
  vertical-align: -0.08em;
  opacity: 1;
}
.caret.idle { animation: blink 1.06s steps(1, end) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.hook-sub {
  margin: 30px 0 0;
  max-width: 44ch;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--on-dark-muted);
}
.hook-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.hook-cred { margin: 34px 0 0; color: var(--on-dark-subtle); }

/* atmospheric entrance - the one long register */
.reveal { opacity: 0; transform: translateY(12px); animation: reveal var(--dur-reveal) var(--ease-gentle) forwards; }
.reveal.d1 { animation-delay: 120ms; }
.reveal.d2 { animation-delay: 240ms; }
.reveal.d3 { animation-delay: 360ms; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   HERO - product first; scroll assembles pod + holder + bottle
   ========================================================================== */
.assembly { position: relative; height: 200vh; background: var(--surface); }
.assembly-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.assembly-grid {
  width: 100%;
  max-width: var(--content-marketing);
  margin: 0 auto;
  padding: 96px var(--gutter) 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-eyebrow { color: var(--on-surface-muted); margin-bottom: 22px; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-md);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--glasshouse); }
.hero-sub { margin: 24px 0 0; max-width: 46ch; font-size: var(--fs-body-lg); line-height: 1.55; color: var(--on-surface-muted); }
.hero-data { margin-top: 26px; color: var(--on-surface-muted); }
.hero-ctas { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-top: 34px; }   /* top-aligned: the primary carries a note beneath */
.cta-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; }
.cta-note { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; color: var(--on-surface-subtle); white-space: nowrap; }

/* the pedestal */
.illo-wrap { position: relative; margin: 0 auto; width: min(100%, 400px); }
.pedestal-circles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  aspect-ratio: 1;
  pointer-events: none;
}
.pedestal-circles circle { fill: none; stroke: var(--glasshouse); }
.illo-stage { position: relative; aspect-ratio: 2 / 3; }
.illo-stage .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: opacity, transform;
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 62%, transparent 88%);
  mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 62%, transparent 88%);
}
/* base = exploded render clipped to the jar (its own pod/ring hidden) */
#imgBase { clip-path: inset(46.4% 0 0 0); }
/* the travelling cut-outs, placed at their exploded positions (fractions of the render frame) */
.part-img { position: absolute; height: auto; display: block; will-change: transform, opacity; }
#imgPod  { left: 33.2%;  top: 13.6%;  width: 33.7%;  z-index: 3; }
#imgRing { left: 30.66%; top: 34.77%; width: 38.57%; z-index: 2; }
/* final render fades in on top, roughly aligned to the exploded jar */
#imgAssembled {
  opacity: 0;
  z-index: 4;
  transform-origin: 50% 0;
  transform: translateY(-3.45%) scale(1.15);
}

/* mono annotations - leader line draws from the part, dot lands, text rises */
.anno {
  position: absolute;
  z-index: 5;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  line-height: 1.6;
  pointer-events: none;
  white-space: nowrap;
}
.anno .anno-strong { color: var(--on-surface); }
.anno::before {
  content: '';
  position: absolute;
  top: 0.75em;
  width: 34px;
  height: 1px;
  background: var(--ghost-outline-strong);
  transform: scaleX(0);
  transition: transform 320ms var(--ease-gentle);
}
.anno::after {
  content: '';
  position: absolute;
  top: calc(0.75em - 2.5px);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--glasshouse);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 220ms var(--ease-gentle), transform 220ms var(--ease-gentle);
}
.anno .anno-txt {
  display: inline-block;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 300ms var(--ease-gentle) 170ms, transform 300ms var(--ease-gentle) 170ms;
}
.anno.on::before { transform: scaleX(1); }
.anno.on::after { opacity: 0.55; transform: scale(1); transition-delay: 90ms; }
.anno.on .anno-txt { opacity: 1; transform: translateY(0); }
.anno-r { text-align: left; }
.anno-r::before { left: -46px; transform-origin: left center; }
.anno-r::after { left: -55px; }
.anno-l { text-align: right; }
.anno-l::before { right: -46px; transform-origin: right center; }
.anno-l::after { right: -55px; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--on-surface-muted);
  transition: opacity var(--dur-base) var(--ease-gentle);
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 34px;
  background: var(--ghost-outline-strong);
}

@media (max-width: 900px) {
  /* phones: no sticky runway. The 100svh viewport clipped the eyebrow at the top and the buttons at the bottom;
     the panel now flows at its natural height and the parts assemble as it scrolls into view (see onScroll). */
  .assembly { height: auto; }
  .assembly-viewport { position: static; height: auto; min-height: 0; display: block; overflow: visible; }
  .assembly-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 72px var(--gutter) 40px;
    align-content: start;
  }
  .hero-eyebrow { margin-bottom: 10px; font-size: 11px; }
  .hero-title { font-size: clamp(28px, 7.4vw, 36px); }
  .hero-sub { font-size: 15px; margin-top: 10px; line-height: 1.5; }
  .hero-data { display: none; }
  .hero-ctas { margin-top: 16px; gap: 4px 12px; }
  .pill { padding: 13px 22px; font-size: 11px; }
  .illo-wrap { width: min(44vw, 180px); margin-top: 4px; }
  .illo-annos { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; align-items: center; }
  .anno { position: static; text-align: center; font-size: clamp(9.5px, 2.95vw, 11px); letter-spacing: 0.06em; line-height: 1.6; white-space: nowrap; }   /* one line each, always */
  .anno br { display: none; }
  .anno .anno-strong::after { content: ': '; color: var(--on-surface-muted); }
  .anno::before, .anno::after { display: none; }   /* no leader lines or landing dots when the annotations are a caption list */
  .scroll-cue { display: none; }
}
@media (min-width: 901px) {
  .illo-annos { display: contents; }
}

/* ==========================================================================
   FOUNDERS - the gallery band: who BoobyBiome are, told with wonder
   ========================================================================== */
.founders {
  position: relative;
  background: var(--surface-deepest);
  color: var(--on-dark);
  padding: var(--section-pad-y) var(--gutter);
  overflow: hidden;
}
/* the lab, alive behind everything - boobybiome.com's own footage, felt not watched */
.founders-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.9);
}
.founders-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42,74,64,0.97) 0%, rgba(42,74,64,0.88) 30%, rgba(42,74,64,0.86) 70%, rgba(42,74,64,0.97) 100%);
}
/* narrower than the marketing column - keeps the see-saw taut at full width */
.founders-inner { position: relative; max-width: 960px; margin: 0 auto; }

/* the founders, revealed like a print developing */
.founders-photo { margin: clamp(48px, 7vw, 88px) 0 0; max-width: 860px; }
.founders-photo img {
  width: 100%;
  display: block;
  border-radius: var(--radius-xl);
  clip-path: inset(0 0 100% 0 round var(--radius-xl));
  transform: scale(1.05);
  transition: clip-path 1400ms var(--ease-gentle), transform 1400ms var(--ease-gentle);
}
.founders-photo.in img {
  clip-path: inset(0 0 0 0 round var(--radius-xl));
  transform: scale(1);
}
.founders-names { display: flex; }
.founders-names span { flex: 1 1 0; text-align: center; }
.founders-photo figcaption {
  margin-top: 14px;
  color: var(--on-dark-subtle);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-gentle) 700ms, transform 600ms var(--ease-gentle) 700ms;
}
.founders-photo.in figcaption { opacity: 1; transform: translateY(0); }
.founders .eyebrow { color: var(--on-dark-muted); }
.founders-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-md);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  max-width: 16ch;
  text-wrap: balance;
}
.founders-title em { font-style: italic; color: var(--eucalyptus); }

/* the discovery, revealed word by word */
.founders-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.7vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  max-width: 34ch;
  margin: clamp(40px, 6vw, 72px) 0 0 auto;   /* pulled right - editorial asymmetry */
  color: var(--on-dark);
}
[data-word-reveal] .w {
  opacity: 0.14;
  transition: opacity 500ms var(--ease-gentle);
  transition-delay: calc(var(--i) * 55ms);
}
[data-word-reveal].in .w { opacity: 1; }
[data-word-reveal] .w.accent-w { font-style: italic; }
.founders-quote .w.accent-w { color: var(--eucalyptus); }
.mission-lede .w.accent-w { color: var(--glasshouse); }

/* circular stat dials - the Micro-Biome Cluster */
.dials {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
  margin-top: clamp(48px, 7vw, 88px);
  align-items: flex-start;
  justify-content: space-between;
  max-width: 860px;   /* aligned with the photo above */
}
.dial { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 168px; }
.dial-face { position: relative; width: 148px; height: 148px; }
.dial-face svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.dial-face .ring-bg { fill: none; stroke: var(--ghost-outline-dark); stroke-width: 1.5; }
.dial-face .ring-fg {
  fill: none;
  stroke: var(--eucalyptus);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 427;      /* 2πr, r=68 */
  stroke-dashoffset: 427;
  transition: stroke-dashoffset 1400ms var(--ease-gentle);
}
.dial.in .ring-fg { stroke-dashoffset: 0; }
.dial-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 38px;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
.dial-label {
  font-family: var(--font-data);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  text-align: center;
  line-height: 1.7;
}
.founders-inst { margin: clamp(36px, 5vw, 56px) 0 0; color: var(--on-dark-subtle); }
.founders-mission {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); gap: 12px clamp(24px, 4vw, 64px); align-items: start;
  margin: clamp(28px, 4vw, 44px) 0 0; padding-top: 22px; border-top: 1px solid var(--ghost-outline-dark);
}
.founders-mission-label { color: var(--eucalyptus); padding-top: 7px; }
.founders-mission-text { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.38; letter-spacing: -0.01em; color: var(--on-dark); max-width: 38ch; }
.founders-mission-text em { font-style: italic; color: var(--eucalyptus); }
.founders-cta { margin-top: 34px; }

/* in-view reveal (observer-driven, staggered via --d) */
.fx {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms var(--ease-gentle), transform 800ms var(--ease-gentle);
  transition-delay: var(--d, 0ms);
}
.fx.in { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .founders-quote { margin-left: 0; max-width: 30ch; }
  .dials { gap: 4vw; justify-content: space-between; margin-top: 48px; }
  .dial { width: 30%; min-width: 96px; gap: 10px; }
  .dial-face { width: min(26vw, 110px); height: min(26vw, 110px); }
  .dial-num { font-size: clamp(20px, 6vw, 28px); }
  .dial-label { font-size: 8.5px; letter-spacing: 0.06em; }
  .founders-mission { grid-template-columns: 1fr; gap: 8px; padding-top: 18px; }
  .founders-mission-text { font-size: 19px; }
  .founders-photo img { border-radius: var(--radius-lg); clip-path: inset(0 0 100% 0 round var(--radius-lg)); }
  .founders-photo.in img { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}

/* ---- closing strip: fragment note ---- */
.endnote {
  background: var(--surface-deepest);
  color: var(--on-dark-subtle);
  padding: 26px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; animation: none; }
  .assembly { height: auto; }
  .assembly-viewport { position: static; height: auto; padding: 120px 0 64px; }
  .scroll-cue { display: none; }
  .caret { display: none; }
  .anno { opacity: 1 !important; }
}

/* ==========================================================================
   ROUTER - three pages, one document
   ========================================================================== */
[data-page] { display: none; }
[data-page].current { display: block; }
.nav-links a { position: relative; }
.nav-links a.active { color: var(--dewy-white); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -9px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--eucalyptus);
  transition: bottom var(--dur-morph) var(--ease-morph);   /* fallback: class-based morph */
}
/* The link carries a 12px hit-area pad, so -9px sits 21px under the text: fine in the bar, over the edge of the pill.
   In the pill the dot tucks up into the gap between the text and the pill's rim. */
.nav.scrolled .nav-links a.active::after { bottom: 1px; }
@supports (animation-timeline: scroll()) {
  .nav-links a.active::after, .nav.scrolled .nav-links a.active::after {
    transition: none;
    animation: navDot linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 160px;
  }
  @keyframes navDot { from { bottom: -9px; } to { bottom: 1px; } }
}

/* ---- shared section scaffolding for the new pages ---- */
.sec-inner { max-width: 960px; margin: 0 auto; padding: var(--section-pad-y) var(--gutter); }
.sec-inner--wide { max-width: 1140px; }
.sec-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-md);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  max-width: 17ch;
  text-wrap: balance;
}
.sec-title em { font-style: italic; }
.band-dark .sec-title em, .sci-hero em, .story-hero em { color: var(--eucalyptus); }
[data-page] section:not(.band-dark) .sec-title em { color: var(--glasshouse); }
.sec-lede { font-size: var(--fs-body-lg); line-height: 1.55; max-width: 46ch; margin: 22px 0 0; }
[data-page] section:not(.band-dark) .sec-lede { color: var(--on-surface-muted); }
.band-dark .sec-lede { color: var(--on-dark-muted); }
[data-page] p { text-wrap: pretty; }
.sci-oxygen p, .began-copy p, .story-mission p { margin: 18px 0 0; max-width: 52ch; }

/* ==========================================================================
   SCIENCE PAGE
   ========================================================================== */
.sci-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  background: var(--surface-deepest);
  color: var(--on-dark);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.sci-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.sci-hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; display: block;
}
.sci-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(42,74,64,0.92) 0%, rgba(42,74,64,0.72) 34%, rgba(42,74,64,0.28) 70%, rgba(42,74,64,0.42) 100%),
    linear-gradient(180deg, rgba(42,74,64,0.5) 0%, rgba(42,74,64,0.05) 35%, rgba(42,74,64,0.55) 100%);
}
.sci-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-marketing);
  margin: 0 auto;
  padding: clamp(140px, 20vh, 220px) var(--gutter) clamp(90px, 12vh, 130px);
}
.sci-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display-lg);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 20px 0 0;
  max-width: 15ch;
  text-wrap: balance;
}
.sci-title em { font-style: italic; color: var(--eucalyptus); }
.sci-lede { font-size: var(--fs-body-lg); line-height: 1.55; max-width: 46ch; margin: 24px 0 0; color: var(--on-dark-muted); }

/* the sequencing ticker - the lab, murmuring */
.ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 0;
  color: var(--on-dark-subtle);
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--ghost-outline-dark);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: inline-block; animation: tick 60s linear infinite; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* specimen gallery */
.sci-mission { background: var(--surface); }
.sci-mission .sec-inner { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.mission-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.mission-ledger { list-style: none; margin: 28px 0 0; padding: 0; max-width: 54ch; }
.mission-ledger li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--ghost-outline); line-height: 1.5; color: var(--on-surface-muted); }
.mission-ledger li:last-child { border-bottom: 1px solid var(--ghost-outline); }
.mission-ledger .data { color: var(--on-surface-subtle); }
.mission-ledger b { font-weight: 400; color: var(--glasshouse); }
.mission-fig { margin: 0; }
.mission-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius-xl); }
.mission-fig figcaption { margin-top: 14px; color: var(--on-surface-subtle); text-align: center; }
@media (max-width: 900px) {
  .mission-grid { grid-template-columns: 1fr; gap: 28px; }
  .mission-fig { order: -1; }
  .mission-fig img { aspect-ratio: 4 / 3; object-position: 50% 38%; border-radius: var(--radius-lg); }
  .mission-fig figcaption { text-align: left; margin-top: 10px; }
}
.sci-specimens { background: var(--surface); overflow-x: clip; --res-gap: 24px; --res-bleed: min(200px, max(0px, (100vw - min(100vw, 1140px)) / 2 + var(--gutter))); }
.sci-specimens .sec-inner { padding-top: clamp(44px, 5.5vw, 68px); padding-bottom: clamp(44px, 5.5vw, 72px); }
.res-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.res-head .sec-title { font-size: clamp(34px, 3.7vw, 56px); margin-top: 14px; }
.res-head-r .sec-lede { margin-top: 0; max-width: 44ch; font-size: var(--fs-body); }
/* the track runs off both edges of the page: whole cards in the column, the neighbours arriving and departing a little smaller */
.res-carousel { position: relative; margin-top: clamp(28px, 3.5vw, 40px); margin-left: calc(-1 * var(--res-bleed)); margin-right: calc(-1 * var(--res-bleed)); }
.res-viewport { position: relative; }
.res-viewport::before, .res-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: min(120px, var(--res-bleed)); pointer-events: none; z-index: 1;
  transition: opacity var(--dur-base) var(--ease-gentle);
}
.res-viewport::after { right: 0; background: linear-gradient(90deg, rgba(244,241,232,0) 0%, rgba(244,241,232,0.8) 100%); }
.res-viewport::before { left: 0; background: linear-gradient(270deg, rgba(244,241,232,0) 0%, rgba(244,241,232,0.8) 100%); opacity: 0; }
.res-carousel.has-prev .res-viewport::before { opacity: 1; }
.res-carousel.at-end .res-viewport::after { opacity: 0; }
.res-track {
  list-style: none; margin: 0; padding: 6px var(--res-bleed); display: flex; gap: var(--res-gap); align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: var(--res-bleed);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.res-track::-webkit-scrollbar { display: none; }
.res-track:focus-visible { outline: 2px solid var(--eucalyptus); outline-offset: 6px; border-radius: var(--radius-lg); }
.res-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; transition: transform 520ms var(--ease-gentle), opacity 520ms var(--ease-gentle); transform-origin: center center; }   /* one whole card fills the content column; the track's padding equals the bleed */
.res-slide.is-away { transform: scale(0.955); opacity: 0.7; }
.specimen-card { margin: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); background: var(--surface-container-low); border-radius: var(--radius-lg); overflow: hidden; }
.res-media { display: flex; flex-direction: column; min-height: 100%; }
.specimen-card img { width: 100%; flex: 1; min-height: 240px; object-fit: cover; display: block; }
.specimen-mono { padding: 10px 22px; min-height: 58px; display: flex; align-items: center; background: var(--cream-deeper); color: var(--on-surface-muted); }
.specimen-mono > span { display: block; }
.specimen-card figcaption { padding: 26px 32px 30px; align-self: center; }
.specimen-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
.specimen-card figcaption p { margin: 0; color: var(--on-surface-muted); font-size: 15px; line-height: 1.6; }
/* the arrows float over the faded neighbours, centred in the bleed; each appears only when there is somewhere to go */
.res-arrow {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; cursor: pointer;
  background: var(--dewy-white); color: var(--glasshouse); box-shadow: inset 0 0 0 1px var(--ghost-outline-strong), 0 10px 28px rgba(42,74,64,0.14);
  font-family: var(--font-data); font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(-50%); opacity: 1; transition: opacity var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle), box-shadow var(--dur-base) var(--ease-gentle);
}
.res-arrow--prev { left: calc(var(--res-bleed) / 2 - 22px); }
.res-arrow--next { right: calc(var(--res-bleed) / 2 - 22px); }
.res-arrow:hover { transform: translateY(calc(-50% - 1px)); box-shadow: inset 0 0 0 1px var(--ghost-outline-strong), 0 14px 32px rgba(42,74,64,0.2); }
.res-arrow:active { transform: translateY(-50%) scale(0.96); }
.res-arrow:focus-visible { outline: 2px solid var(--eucalyptus); outline-offset: 3px; }
.res-arrow.is-hidden { opacity: 0; pointer-events: none; }
.res-arrow-ico { display: block; width: 16px; height: 16px; }   /* geometric centring, no font metrics */
.res-arrow--prev .res-arrow-ico { transform: scaleX(-1); }
.res-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 20px var(--res-bleed) 0; }
.res-count { color: var(--on-surface-subtle); font-feature-settings: "tnum" 1; }
.res-dots { display: flex; gap: 10px; align-items: center; }
.res-dot { width: 8px; height: 8px; border-radius: var(--radius-full); border: 0; padding: 0; cursor: pointer; background: rgba(42,74,64,0.18); transition: background var(--dur-base) var(--ease-gentle), transform var(--dur-base) var(--ease-gentle); }
.res-dot.on { background: var(--glasshouse); transform: scale(1.25); }
.res-dot:focus-visible { outline: 2px solid var(--eucalyptus); outline-offset: 3px; }
@media (max-width: 900px) {
  .sci-specimens { --res-bleed: var(--gutter); --res-gap: 14px; }
  .res-head { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .res-head-r .sec-lede { margin-top: 4px; }
  .res-slide { flex: 0 0 88%; }
  .specimen-card { grid-template-columns: 1fr; }
  .specimen-card img { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
  .specimen-mono { padding: 10px 18px; }
  .specimen-card figcaption { padding: 18px 18px 22px; align-self: start; }
  .specimen-card h3 { font-size: 24px; }
  .res-viewport::before, .res-viewport::after { width: 28px; }
  .res-arrow { display: none; }              /* phones swipe */
  .res-controls { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .res-track { scroll-behavior: auto; } .res-dot, .res-arrow, .res-slide { transition: none; } }


/* the oxygen problem */
.sci-oxygen { background: var(--surface-container-low); }
.oxy-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .oxy-grid { grid-template-columns: 1fr; } }
.oxy svg { width: 100%; height: auto; display: block; }
.oxy-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.oxy-toggle { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.oxy-chip {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  padding: 10px 18px;
  background: var(--surface-container);
  color: var(--on-surface-muted);
  transition: background var(--dur-base) var(--ease-gentle), color var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
.oxy-chip:active { transform: scale(0.97); }
.oxy-chip.on { background: var(--glasshouse); color: var(--dewy-white); }
@media (hover: hover) and (pointer: fine) { .oxy-chip:not(.on):hover { color: var(--on-surface); } }
.oxy-key { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 6px; color: var(--on-surface-muted); }
.key-dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 8px; vertical-align: -1px; }
.key-a { background: var(--glasshouse); }
.key-b { background: rgba(42,74,64,0.4); }
.oxy-lbl { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.04em; fill: var(--on-surface-muted); }
.oxy-lbl--y { fill: var(--on-surface-subtle); }
#oxyPts { transition: opacity 400ms var(--ease-gentle); }
/* bars: grow from the baseline, whiskers settle after */
#oxyBars .bar { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 700ms var(--ease-out-strong); }
#oxyBars.grow .bar { transform: scaleY(0.01); transition: none; }
#oxyBars .bar-a { fill: #2A4A40; }
#oxyBars .bar-b { fill: rgba(42,74,64,0.16); stroke: rgba(42,74,64,0.45); stroke-width: 1; }
#oxyBars .err { stroke: var(--holder-teal); stroke-width: 1.2; fill: none; opacity: 1; transition: opacity 320ms var(--ease-gentle) 520ms; }
#oxyBars .err-b { stroke: rgba(31,74,74,0.55); }
#oxyBars.grow .err { opacity: 0; transition: none; }
#oxyBars .oxy-lbl { transition: opacity 320ms var(--ease-gentle) 300ms; }
#oxyBars.grow .oxy-lbl { opacity: 0; transition: none; }
#oxyPts circle { fill: var(--surface-container-low); stroke-width: 1.5; }
#oxyPts .pa { stroke: #2A4A40; }
#oxyPts .pb { stroke: rgba(42,74,64,0.45); }
.oxy-sub { font-size: 8px; }
#oxyTicks line { stroke: rgba(42,74,64,0.2); stroke-width: 1; }
#oxyYTicks { transition: opacity var(--dur-base) var(--ease-gentle); }
.oxy-flag { margin: 4px 0 0; color: var(--on-surface-subtle, rgba(31,74,74,0.5)); }

/* research band */
.sci-research { background: var(--surface-deepest); color: var(--on-dark); }
.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) { .research-grid { grid-template-columns: 1fr; } .research-fig { order: -1; } .research-fig img { aspect-ratio: 3 / 2; } }
.sci-research p { margin: 18px 0 0; max-width: 46ch; color: var(--on-dark-muted); }
.research-copy { align-self: center; }
.research-tags { color: var(--on-dark-subtle) !important; }
.research-fig { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.research-fig img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
/* the source sits under the claim, quiet but reachable */
.research-cite { margin-top: 26px !important; max-width: 44ch; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: 0.03em; text-transform: none; line-height: 1.7; color: var(--on-dark-subtle); }
.research-cite em { font-style: italic; }
.research-cite a { color: var(--on-dark-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ghost-outline-dark); white-space: nowrap; transition: color var(--dur-base) var(--ease-gentle), text-decoration-color var(--dur-base) var(--ease-gentle); }
@media (hover: hover) and (pointer: fine) { .research-cite a:hover { color: var(--dewy-white); text-decoration-color: currentColor; } }

/* bridge */
.sci-bridge { background: var(--surface); }
/* A deliberately unfinished panel: it should read as a note to ourselves, never as design. */
.panel-todo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  min-height: clamp(200px, 26vw, 300px); padding: 32px 24px;
  border: 1px dashed var(--ghost-outline-strong); border-radius: var(--radius-lg); background: var(--surface-container);
}
.panel-todo-label { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-subtle); }
.panel-todo-text { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; color: var(--on-surface-muted); }
.home-bridge { background: var(--surface); }
.home-bridge .sec-inner { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.bridge-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }

/* ==========================================================================
   STORY PAGE
   ========================================================================== */
.story-hero {
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  background: var(--surface-deepest);
  color: var(--on-dark);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.story-hero-bg { position: absolute; inset: 0; }
.story-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; display: block; filter: saturate(0.72) contrast(1.03); }
/* Phones: the photograph is shown whole (all three founders) as the top of the hero; the headline sits on Glasshouse beneath it,
   and the scrim's lower edge melts the bench into the band so the two read as one surface. */
@media (max-width: 720px) {
  .story-hero { min-height: 0; display: block; }
  .story-hero-bg { position: relative; inset: auto; width: 100%; aspect-ratio: 1920 / 1790; }
  .story-hero-bg img { object-position: 50% 50%; }
  .story-hero-bg::after {
    background:
      linear-gradient(180deg, rgba(42,74,64,0.62) 0%, rgba(42,74,64,0.22) 30%, rgba(42,74,64,0.22) 62%, rgba(42,74,64,0.98) 100%),
      linear-gradient(90deg, rgba(42,74,64,0.18) 0%, rgba(42,74,64,0.06) 50%, rgba(42,74,64,0.18) 100%);
  }
  .story-hero .story-hero-inner { padding: 0 var(--gutter) 56px; margin-top: -14vw; }
}
.story-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(42,74,64,0.66) 0%, rgba(42,74,64,0.30) 28%, rgba(42,74,64,0.46) 52%, rgba(42,74,64,0.90) 100%),
    linear-gradient(90deg, rgba(42,74,64,0.42) 0%, rgba(42,74,64,0.12) 45%, rgba(42,74,64,0.10) 100%);
}
.story-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-marketing);
  margin: 0 auto;
  padding: clamp(140px, 20vh, 220px) var(--gutter) clamp(56px, 8vh, 88px);
}

.story-began { background: var(--surface); }
.began-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .began-grid { grid-template-columns: 1fr; } }
.began-fig { margin: 0; position: sticky; top: 110px; }
@media (max-width: 900px) { .began-fig { position: static; } }
.began-fig img { width: 100%; border-radius: var(--radius-lg); display: block; }
.began-fig figcaption { margin-top: 12px; color: var(--on-surface-muted); }

.story-mission { background: var(--surface-container-low); }
.mission-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  max-width: 38ch;
  margin: clamp(32px, 5vw, 56px) 0 0 auto;   /* pulled right - the page's see-saw */
  color: var(--on-surface);
}
.story-mission > .sec-inner > p:last-child { margin-left: auto; max-width: 38ch; }
@media (max-width: 900px) { .mission-lede, .story-mission > .sec-inner > p:last-child { margin-left: 0; } }

.story-founders { background: var(--surface); }
.portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 24px);
  margin-top: clamp(36px, 5vw, 56px);
}
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); display: block; }
.portrait figcaption { margin-top: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.portrait-name {
  font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--glasshouse); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ghost-outline-strong);
  transition: text-decoration-color var(--dur-base) var(--ease-gentle), color var(--dur-base) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) { .portrait-name:hover { text-decoration-color: currentColor; color: var(--holder-teal); } }
.portrait-role { color: var(--on-surface-muted); font-size: 10.5px; }
@media (max-width: 900px) and (min-width: 721px) { .portrait-name { font-size: 15px; } .portrait-role { font-size: 9px; letter-spacing: 0.05em; } }
/* Phones: a list. Round portrait at the left, name and role beside it, one founder per row, names never wrap. */
@media (max-width: 720px) {
  .portraits { display: flex; flex-direction: column; gap: 0; }
  .portrait { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ghost-outline); }
  .portrait:last-child { border-bottom: 1px solid var(--ghost-outline); }
  .portrait img { width: 84px; height: 84px; aspect-ratio: 1; border-radius: 50%; object-position: 50% 25%; }
  .portrait figcaption { margin: 0; align-items: flex-start; text-align: left; gap: 5px; }
  .portrait-name { font-size: 19px; }
  .portrait-role { font-size: 10px; }
}

.story-values { background: var(--surface-container-low); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(36px, 5vw, 56px);
}
.value-card { background: var(--surface); border-radius: var(--radius-lg); padding: 30px 28px 34px; }
.value-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); margin: 0 0 12px; }
.value-card p { margin: 0; color: var(--on-surface-muted); }

.story-join { background: var(--surface); }
/* ==========================================================================
   IN THE PRESS - cream ground. Left: eyebrow and a loose grid of marks in their own colours.
   Right: the Times clipping, whole, as a card. Phones: eyebrow, card, then one row of marks.
   ========================================================================== */
.story-press { background: var(--surface); padding: 0; }
.press-wrap {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: stretch;
  padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 104px);
}
.press-left { display: flex; flex-direction: column; }
.press-eyebrow { color: var(--on-surface-muted); }
.press-logos {
  list-style: none; padding: 0; margin: auto 0;                  /* centred in the height the card sets */
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center;
  gap: clamp(64px, 8vw, 110px) clamp(24px, 3vw, 48px);
  padding-right: clamp(0px, 3vw, 40px);
}
.press-logos li { display: flex; align-items: center; }
.press-logo { display: inline-block; text-decoration: none; transition: transform var(--dur-base) var(--ease-gentle), opacity var(--dur-base) var(--ease-gentle); }
.press-logo img { display: block; height: auto; }
.logo-forbes30 { width: clamp(120px, 12vw, 176px); }
.logo-times    { width: clamp(150px, 15vw, 222px); }
.logo-c4       { width: clamp(52px, 5.2vw, 76px); }
.logo-bbc      { width: clamp(104px, 10.4vw, 152px); }
@media (hover: hover) and (pointer: fine) {
  .press-logo:hover { transform: translateY(-2px); opacity: 0.85; }
  .press-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline); }
}
.press-logo:active { transform: scale(0.98); }
/* the clipping: white card, soft tinted shadow, the whole article visible */
.press-card {
  display: block; align-self: start; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-container-lowest);
  box-shadow: inset 0 0 0 1px var(--ghost-outline);
  transition: transform var(--dur-slow) var(--ease-gentle), box-shadow var(--dur-slow) var(--ease-gentle), opacity var(--dur-slow) var(--ease-gentle);
}
.press-card img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .press-wrap { display: flex; flex-direction: column; gap: 22px; padding-bottom: clamp(48px, 7vw, 80px); }
  .press-left { display: contents; }
  .press-eyebrow { order: 1; }
  .press-card { order: 2; margin: 0; }
  .press-logos { order: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 0; padding: 0 10px; }
  .press-li-times { order: 1; } .press-li-forbes { order: 2; } .press-li-c4 { order: 3; } .press-li-bbc { order: 4; }
  .logo-times { width: 92px; } .logo-forbes30 { width: 68px; } .logo-c4 { width: 26px; } .logo-bbc { width: 64px; }
}
@media (prefers-reduced-motion: reduce) { .press-logo, .press-card { transition: opacity var(--dur-base) linear; transform: none !important; } }


/* ==========================================================================
   FOOTER - from the pre-launch wireframe
   ========================================================================== */
.footer { background: var(--surface-deepest); color: var(--on-dark); padding: var(--section-pad-y) var(--gutter) 56px; }
.footer-inner { max-width: var(--content-marketing); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(36px, 6vw, 100px); row-gap: 0; }
@media (max-width: 900px) { .footer-inner { row-gap: 48px; } .footer-links { padding-top: 0; } }
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 3.4vw, 44px);   /* one step under display-md: the longer 'who it is for' heading holds to three lines */
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}
.footer-title em { font-style: italic; color: var(--soft-blush); }
.footer-sub { margin: 18px 0 0; color: var(--on-dark-muted); max-width: 34ch; }
.capture-zone { position: relative; margin-top: 28px; }
.capture-zone > * { transition: opacity var(--dur-base) var(--ease-gentle), filter var(--dur-base) var(--ease-gentle); }
.capture { display: flex; gap: 10px; flex-wrap: wrap; }
.field {
  flex: 1 1 200px;
  min-width: 0;
  background: rgba(244, 241, 232, 0.07);
  border: none;
  border-radius: var(--radius-full);
  padding: 15px 22px;
  font-family: var(--font-label);
  font-size: 15px;
  color: var(--dewy-white);
  box-shadow: inset 0 0 0 1px var(--ghost-outline-dark);
}
.field::placeholder { color: var(--on-dark-subtle); }
.field:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--eucalyptus); }
.micro { margin: 14px 0 0; color: var(--on-dark-subtle); text-transform: none; letter-spacing: 0.04em; }
.capture-zone[data-done] .capture-form { opacity: 0; filter: blur(3px); pointer-events: none; position: absolute; inset: 0; }
.capture-done { opacity: 0; filter: blur(3px); position: absolute; inset: 0; pointer-events: none; }
.capture-zone[data-done] .capture-done { opacity: 1; filter: blur(0); position: static; pointer-events: auto; }
.capture-done h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); margin: 8px 0 0; }

.footer-links { display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(4px, 0.8vw, 12px); }
.footer-links-label { color: var(--on-dark-muted); margin-bottom: 6px; }
.footer-links .sitemap-link:first-of-type { border-top: 1px solid var(--ghost-outline-dark); }
.sitemap-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--dewy-white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  padding: 22px 0;
  border-bottom: 1px solid var(--ghost-outline-dark);
  opacity: 0.82;
  transition: opacity var(--dur-quick) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
.sitemap-link span {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .sitemap-link:hover { opacity: 1; transform: translateY(-2px); } }
.footer-meta {
  grid-column: 1 / -1;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(36px, 4.2vw, 56px);
  border-top: 1px solid var(--ghost-outline-dark);
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(150px, 1fr));
  gap: 32px clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .footer-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-meta { grid-template-columns: 1fr; } }
/* The lockup already carries the strapline - it is set large enough to read it. */
.footer-brand { display: flex; align-items: flex-start; }
.footer-lockup { height: clamp(64px, 6.6vw, 92px); width: auto; display: block; margin: -8px 0 0 -22px; }
.eyebrow--sm { font-size: 11px; letter-spacing: 0.16em; }
.footer-meta .eyebrow { color: var(--on-dark-muted); }
.footer-meta-copy { margin: 14px 0 0; font-size: var(--fs-body-sm); line-height: 1.75; color: var(--on-dark-muted); }
.footer-social { display: flex; gap: 18px; margin-top: 14px; }
.footer-social a { display: inline-flex; padding: 6px; margin: -6px; text-decoration: none; color: var(--dewy-white); opacity: 0.86; transition: opacity var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle); }
.footer-social svg { width: 44px; height: 44px; display: block; }
@media (hover: hover) and (pointer: fine) { .footer-social a:hover { opacity: 1; transform: translateY(-1px); color: var(--dewy-white); } }
.footer-meta-copy a {
  display: inline-block; padding: 6px 0; margin: -6px 0;
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ghost-outline-dark);
  transition: color var(--dur-base) var(--ease-gentle), text-decoration-color var(--dur-base) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) { .footer-meta-copy a:hover { color: var(--dewy-white); text-decoration-color: currentColor; } }
/* Legal strip: quieter than everything above it, one register down. */
.footer-legal {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--ghost-outline-dark);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 28px;
}
.footer-legal-left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.footer-legal .micro { margin: 0; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal-links a { white-space: nowrap; }
.footer-legal-links a {
  font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: 0.04em; text-transform: none;
  color: var(--on-dark-subtle); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ghost-outline-dark); padding: 6px 0;
  transition: color var(--dur-base) var(--ease-gentle), text-decoration-color var(--dur-base) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) { .footer-legal-links a:hover { color: var(--on-dark-muted); text-decoration-color: currentColor; } }
.footer-legal-links a:focus-visible { color: var(--dewy-white); }
.footer-flag { margin: 0; color: var(--on-dark-subtle); }

/* ==========================================================================
   BYOMI PAGE - product story in one place. Shared sections are moved in by the router.
   ========================================================================== */
.home-only, .byomi-only { display: none; }
body[data-route="home"] .home-only { display: inline; }
body[data-route="byomi"] .byomi-only { display: inline; }
body[data-route="home"] a.home-only { display: inline-flex; }
body[data-route="home"] .cta-stack.home-only { display: inline-flex; }
body[data-route="home"] .byomi-only-block { display: none; }   /* the shared assembly panel drops its label line on the home page */   /* the stacked primary + note keeps its column */
body[data-route="byomi"] a.byomi-only { display: inline-flex; }
body[data-route="byomi"] .hero-data { display: none; }
.byomi-hero-meta .nw { white-space: nowrap; }
.hero-eyebrow .home-only, .hero-eyebrow .byomi-only { display: none; }
body[data-route="home"] .hero-eyebrow .home-only, body[data-route="byomi"] .hero-eyebrow .byomi-only { display: inline; }
body[data-route="byomi"] .scroll-cue { display: none; }

.byomi-hero { position: relative; min-height: 78vh; min-height: 78svh; background: var(--surface-deepest); color: var(--on-dark); display: flex; align-items: flex-end; overflow: hidden; }
.byomi-rings { position: absolute; right: -8vw; top: 50%; width: min(60vw, 720px); height: auto; transform: translateY(-50%); }
.byomi-hero-inner { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; padding: clamp(140px, 20vh, 220px) var(--gutter) clamp(64px, 9vh, 100px); }
.byomi-hero .sci-title { max-width: 14ch; }
.byomi-hero .sci-lede { max-width: 46ch; }
.byomi-hero-meta { margin: 26px 0 0; color: var(--on-dark-subtle); }
.byomi-hero .hook-ctas { margin-top: 28px; }
/* hero image concept: the exploded assembly on its own Glasshouse ground, edges masked so it sits in the band */
.byomi-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.byomi-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
/* legibility scrim: heavy under the copy on the left, gone by mid-frame so the jar keeps its light; a light lid under the nav */
.byomi-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(42, 74, 64, 0.92) 0%, rgba(42, 74, 64, 0.66) 30%, rgba(42, 74, 64, 0.18) 50%, rgba(42, 74, 64, 0) 62%),
              linear-gradient(180deg, rgba(42, 74, 64, 0.45) 0%, rgba(42, 74, 64, 0) 28%);
}
.byomi-hero-inner { z-index: 1; }
.byomi-hero .sci-lede { max-width: 40ch; }
.byomi-hero .byomi-rings { display: none; }
@media (max-width: 900px) {
  /* phones: the photograph sits above the copy instead of behind it */
  .byomi-hero { display: block; min-height: 0; }
  .byomi-hero-bg { position: relative; inset: auto; aspect-ratio: 4 / 3; width: 100%; margin-top: 72px; }   /* clears the 68px phone nav so the lid is not under the menu button */
  .byomi-hero-bg img { object-position: 74% 50%; }
  .byomi-hero-bg::after { background: linear-gradient(180deg, rgba(42, 74, 64, 0.35) 0%, rgba(42, 74, 64, 0) 22%, rgba(42, 74, 64, 0) 62%, rgba(42, 74, 64, 1) 100%); }
  .byomi-hero-inner { padding-top: 8px; }
}

/* in use */
.inuse { background: var(--surface-container-low); }
.inuse-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.inuse-lede { margin: 0 0 6px; max-width: 36ch; font-size: var(--fs-body-lg, 19px); line-height: 1.5; color: var(--on-surface-muted); }
/* five moments: portrait photographs in a row, alternate columns dropped a little so the row reads as a hand-laid strip */
.moments { list-style: none; margin: clamp(44px, 5.5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: start; }
.moment { display: flex; flex-direction: column; }
.moment:nth-child(even) { padding-top: clamp(28px, 3.5vw, 48px); }
.moment-fig { margin: 0; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-container); }
.moment-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) { .moment:hover .moment-fig img { transform: scale(1.07); } }
.moment-cap { padding: 16px 2px 0; }
.moment-n { display: block; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; color: var(--on-surface-subtle); }
.moment-verb { margin: 8px 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; color: var(--glasshouse); }
.moment-cap p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--on-surface-muted); }
@media (max-width: 900px) {
  .inuse-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .inuse-lede { font-size: 17px; }
  /* phones: one snap strip, each moment ~70% wide so the next one shows */
  .moments { display: flex; gap: 12px; margin: 28px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .moments::-webkit-scrollbar { display: none; }
  .moment { flex: 0 0 70vw; max-width: 320px; scroll-snap-align: start; }
  .moment:nth-child(even) { padding-top: 0; }
  .moment-fig { border-radius: var(--radius-md); }
  .moment-cap { padding-top: 12px; }
  .moment-verb { font-size: 22px; }
}

/* faqs: one open at a time; the answer's height animates via grid rows (the one place height is allowed) */
.faq { background: var(--surface); }
.faq-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; max-width: 1140px; }
.faq-head { position: sticky; top: 120px; }
.faq-item { border-top: 1px solid var(--ghost-outline); }
.faq-item:last-child { border-bottom: 1px solid var(--ghost-outline); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 22px 0; color: var(--glasshouse);
  font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -0.01em;
  transition: color var(--dur-base) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) { .faq-q:hover { color: var(--holder-teal); } }
.faq-icon { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ghost-outline-strong); transition: background var(--dur-base) var(--ease-gentle); }
.faq-icon span { position: absolute; left: 8px; top: 13.25px; width: 12px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 240ms var(--ease-out-strong); }
.faq-icon span:last-child { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon span:last-child { transform: rotate(0deg); }
.faq-q[aria-expanded="true"] .faq-icon { background: rgba(42,74,64,0.06); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out-strong); }
.faq-a[data-open] { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { margin: 0 0 18px; max-width: 54ch; line-height: 1.6; color: var(--on-surface-muted); }
.faq-lead { color: var(--glasshouse); font-size: var(--fs-body-lg); }
.faq-a-inner > p:last-child { margin-bottom: 26px; }
@media (max-width: 900px) {
  .faq-inner { grid-template-columns: 1fr; gap: 20px; }
  .faq-head { position: static; }
  .faq-q { font-size: 18px; padding: 18px 0; }
}
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-icon span { transition: none; } }

/* launch band: the page's single waitlist moment */
.launch { background: var(--surface-container-low); }
.launch-inner { text-align: left; }

/* ==========================================================================
   CONTACT - who are you, then one field that matters. Intensity 01.
   ========================================================================== */
.contact { background: var(--surface); color: var(--on-surface); padding: calc(var(--section-pad-y) + 40px) var(--gutter) var(--section-pad-y); }
.contact-inner { max-width: var(--content-marketing); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .contact-inner { grid-template-columns: 1fr; } }
.contact-title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-md); line-height: 1.04; letter-spacing: -0.02em; margin: 18px 0 0; color: var(--glasshouse); text-wrap: balance; }
.contact-title em { font-style: italic; color: var(--holder-teal); }
.contact-lede { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--on-surface-muted); margin: 22px 0 0; max-width: 36em; }
.contact-form { margin-top: 36px; }
.field-label { display: block; font-family: var(--font-label); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-muted); margin: 0 0 12px; }
.field-label .opt { text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: var(--on-surface-subtle); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  font-family: var(--font-label); font-weight: 500; font-size: 14px; letter-spacing: 0.01em;
  padding: 12px 18px; border-radius: var(--radius-full); border: 0; cursor: pointer;
  background: transparent; color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--ghost-outline-strong);
  transition: background var(--dur-base) var(--ease-gentle), color var(--dur-base) var(--ease-gentle), box-shadow var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
.choice:active { transform: scale(0.97); }
.choice[aria-checked="true"] { background: var(--glasshouse); color: var(--dewy-white); box-shadow: inset 0 0 0 1px var(--glasshouse); }
@media (hover: hover) and (pointer: fine) { .choice:not([aria-checked="true"]):hover { box-shadow: inset 0 0 0 1px var(--glasshouse); } }
.choice:focus-visible { outline: 2px solid var(--glasshouse); outline-offset: 3px; }
/* the hint under the chips: the one place the page speaks back */
.choice-hint { margin: 14px 0 0; min-height: 1.6em; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--on-surface-muted); transition: opacity var(--dur-base) var(--ease-gentle); }
.choice-hint.swap { opacity: 0; }
.contact-fields { display: grid; gap: 22px; margin-top: 30px; }
.contact-fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .contact-fields .two { grid-template-columns: 1fr; } }
.contact .field { width: 100%; flex: none; background: rgba(42, 74, 64, 0.06); color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--ghost-outline); }
.contact .field::placeholder { color: var(--on-surface-subtle); }
.contact .field:focus { box-shadow: inset 0 0 0 1.5px var(--holder-teal); }
.contact .field[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--blush-deep); }
.field-area { border-radius: var(--radius-lg); min-height: 150px; resize: vertical; line-height: 1.55; padding: 16px 22px; font-family: var(--font-body); font-size: var(--fs-body); }
.field-error { margin: 8px 0 0 4px; font-family: var(--font-label); font-size: 13px; color: var(--blush-deep); display: none; }
.field-error.show { display: block; }
.contact-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.contact .capture-zone { margin-top: 0; }
.contact .capture-done h3 { color: var(--glasshouse); font-size: 28px; }
.contact .capture-done p { margin: 10px 0 0; color: var(--on-surface-muted); }
.contact .micro { color: var(--on-surface-subtle); }
/* aside: the other doors, quiet */
.contact-aside { padding-top: clamp(0px, 6vw, 96px); display: grid; gap: 28px; }
.aside-block .eyebrow { font-size: 11px; letter-spacing: 0.16em; color: var(--on-surface-muted); }
.aside-block p { margin: 10px 0 0; line-height: 1.6; color: var(--on-surface-muted); }
.aside-block a { color: var(--holder-teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ghost-outline-strong); transition: text-decoration-color var(--dur-base) var(--ease-gentle); }
@media (hover: hover) and (pointer: fine) { .aside-block a:hover { text-decoration-color: currentColor; } }
.aside-card { background: var(--surface-container-low); border-radius: var(--radius-lg); padding: 24px 26px; }
.aside-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--glasshouse); }
.aside-card h3 em { font-style: italic; color: var(--holder-teal); }
.aside-card p { margin: 10px 0 0; font-size: var(--fs-body-sm); }
.aside-card .pill { margin-top: 16px; }
.footer-alt { margin: 14px 0 0; }
.footer-alt a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ghost-outline-dark); transition: color var(--dur-base) var(--ease-gentle), text-decoration-color var(--dur-base) var(--ease-gentle); }
@media (hover: hover) and (pointer: fine) { .footer-alt a:hover { color: var(--dewy-white); text-decoration-color: currentColor; } }

/* ==========================================================================
   LEGAL PAGES - Intensity 01: Dewy White dominant, no blush, prose width.
   ========================================================================== */
.legal { background: var(--surface); color: var(--on-surface); padding: calc(var(--section-pad-y) + 40px) var(--gutter) var(--section-pad-y); }
.legal-inner { max-width: 720px; margin: 0 auto; }
.legal-eyebrow { color: var(--on-surface-muted); }
.legal-title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-md);
  line-height: 1.04; letter-spacing: -0.02em; margin: 18px 0 0; color: var(--glasshouse); text-wrap: balance;
}
.legal-title em { font-style: italic; color: var(--holder-teal); }
.legal-lede { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--on-surface-muted); margin: 22px 0 0; max-width: 34em; }
.legal-meta { margin: 22px 0 0; color: var(--on-surface-subtle); text-transform: none; letter-spacing: 0.04em; }
.legal-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ghost-outline-strong); }

/* The short version: a Pod Milk tier, no line, sits flush on the cream. */
.legal-summary {
  margin: 40px 0 0; padding: 26px 28px; background: var(--surface-container-low); border-radius: var(--radius-lg);
}
.legal-summary .eyebrow { font-size: 11px; letter-spacing: 0.16em; color: var(--on-surface-muted); }
.legal-summary ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.legal-summary li { padding-left: 22px; position: relative; color: var(--glasshouse); line-height: 1.5; }
.legal-summary li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--eucalyptus); }

.legal h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12;
  letter-spacing: -0.015em; margin: 56px 0 0; color: var(--glasshouse);
}
.legal h2 em { font-style: italic; color: var(--holder-teal); }
.legal h3 { font-family: var(--font-label); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 32px 0 0; color: var(--on-surface-muted); }
.legal p { margin: 16px 0 0; line-height: 1.6; }
.legal p + p { margin-top: 14px; }
.legal ul.plain { margin: 14px 0 0; padding-left: 20px; line-height: 1.6; }
.legal ul.plain li + li { margin-top: 6px; }
.legal a { color: var(--holder-teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ghost-outline-strong); transition: text-decoration-color var(--dur-base) var(--ease-gentle); }
@media (hover: hover) and (pointer: fine) { .legal a:hover { text-decoration-color: currentColor; } }
.legal .note { color: var(--on-surface-muted); font-size: var(--fs-body-sm); }

/* Cookie table: mono for names and durations, hairlines only (inputs and tables are the sanctioned exception). */
.cookie-table-wrap { margin: 20px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cookie-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-body-sm); }
.cookie-table th {
  text-align: left; font-family: var(--font-label); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-surface-muted); padding: 0 14px 12px 0; border-bottom: 1px solid var(--ghost-outline-strong);
}
.cookie-table td { padding: 12px 14px 12px 0; vertical-align: top; border-bottom: 1px solid var(--ghost-outline); line-height: 1.5; }
.cookie-table td:first-child { font-family: var(--font-data); font-size: 13px; letter-spacing: 0.02em; color: var(--glasshouse); white-space: nowrap; }
.cookie-table td:nth-child(2) { white-space: nowrap; color: var(--on-surface-muted); }
.cookie-table td:last-child { font-family: var(--font-data); font-size: 12px; letter-spacing: 0.04em; color: var(--on-surface-muted); white-space: nowrap; }
/* ---- Smell test panel: the number, two paired scales, the words, the so-what ---- */
.smell { display: none; }
.smell.show { display: block; }
.smell-intro { margin: 0 0 22px; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--on-surface-muted); max-width: 60ch; }
.smell-grid { display: grid; grid-template-columns: 190px 1fr; gap: 24px 44px; align-items: center; }
.smell-big { position: relative; width: 190px; }
.smell-ring { width: 190px; height: 190px; display: block; }
.smell-arc { transition: stroke-dashoffset 1400ms var(--ease-gentle) 200ms; }
.smell.show.in .smell-arc { stroke-dashoffset: 16; }        /* 84% of the circumference */
.smell-num { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font-family: var(--font-display); font-weight: 300; font-size: 54px; line-height: 1; letter-spacing: -0.03em; color: var(--glasshouse); }
.smell-pct { font-size: 26px; margin-left: 2px; }
.smell-big-cap { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--on-surface-muted); }
.smell-big-cap .data { color: var(--on-surface-subtle); text-transform: none; letter-spacing: 0.04em; }
.dv-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dv-head .data { text-transform: none; letter-spacing: 0.04em; color: var(--on-surface-subtle); font-size: 11px; }
.dv-head .data:last-child { text-align: right; color: var(--glasshouse); }
.dv-chart { width: 100%; height: auto; display: block; overflow: visible; }
.dv-bar { transform-box: fill-box; transition: transform 1100ms var(--ease-gentle); }
.dv-pos { fill: var(--glasshouse); transform-origin: left center; transform: scaleX(0); }
.dv-neg { fill: rgba(42,74,64,0.28); transform-origin: right center; transform: scaleX(0); }
.smell.show.in .dv-bar { transform: scaleX(1); }
.dv-bar:nth-of-type(2) { transition-delay: 80ms; } .dv-bar:nth-of-type(3) { transition-delay: 160ms; } .dv-bar:nth-of-type(4) { transition-delay: 240ms; } .dv-bar:nth-of-type(5) { transition-delay: 320ms; }
.dv-lab { font-family: var(--font-label); font-size: 13px; font-weight: 500; fill: var(--glasshouse); }
.dv-val { font-family: var(--font-data); font-size: 12px; fill: var(--on-surface-muted); opacity: 0; transition: opacity 400ms var(--ease-gentle) 700ms; }
.smell.show.in .dv-val { opacity: 1; }
.dv-foot { margin: 6px 0 0; text-transform: none; letter-spacing: 0.04em; color: var(--on-surface-subtle); text-align: center; }
.smell-scales { display: grid; gap: 22px; }
.smell-scale-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.smell-scale-head .label-line { font-size: 12px; color: var(--glasshouse); }
.smell-scale-head .data { color: var(--on-surface-subtle); text-transform: none; letter-spacing: 0.04em; }
.smell-row { display: grid; grid-template-columns: 64px 1fr 34px; align-items: center; gap: 12px; margin-top: 8px; }
.smell-who { font-family: var(--font-label); font-size: 12px; font-weight: 500; color: var(--on-surface-muted); }
.smell-track { display: block; height: 10px; border-radius: var(--radius-full); background: rgba(42,74,64,0.08); overflow: hidden; }
.smell-bar { display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0); transition: transform 1100ms var(--ease-gentle); }
.smell-bar-a { background: var(--glasshouse); }
.smell-bar-b { background: rgba(42,74,64,0.32); }
.smell.show.in .smell-bar { transform: scaleX(var(--v)); }
.smell-row:nth-child(3) .smell-bar { transition-delay: 120ms; }
.smell-val { font-family: var(--font-data); font-size: 12px; color: var(--on-surface-muted); text-align: right; font-feature-settings: "tnum" 1; }
.smell-words { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ghost-outline); }
.smell-word-group .data { color: var(--on-surface-subtle); text-transform: none; letter-spacing: 0.04em; }
.smell-word-group p { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--glasshouse); letter-spacing: -0.01em; }
.smell-word-group--b p { color: var(--on-surface-muted); font-weight: 300; }
.smell-so { margin: 22px 0 0; font-size: var(--fs-body); line-height: 1.55; color: var(--glasshouse); max-width: 56ch; }
/* staggered settle */
.smell .smell-intro, .smell .smell-big, .smell .dv, .smell .smell-so { opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-out-strong), transform 420ms var(--ease-out-strong); }
.smell.show.in .smell-intro, .smell.show.in .smell-big, .smell.show.in .dv, .smell.show.in .smell-so { opacity: 1; transform: none; }
.smell.show.in .smell-big { transition-delay: 60ms; }
.smell.show.in .dv { transition-delay: 140ms; }
.smell.show.in .smell-so { transition-delay: 320ms; }
@media (max-width: 720px) {
  .smell-grid { grid-template-columns: 1fr; gap: 22px; }
  .smell-big { margin: 0 auto; }
  .dv-lab { font-size: 16px; }      /* SVG units: reads ~12px once the chart scales to a phone */
  .dv-val { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .smell *, .smell .dv-bar, .smell .smell-arc { transition: none !important; transform: none !important; }
  .smell.show .dv-bar { transform: scaleX(1) !important; }
  .smell.show .smell-arc { stroke-dashoffset: 16; }
}

.oxy-caption { display: none; margin: 10px 0 0; color: var(--on-surface-subtle); text-transform: none; letter-spacing: 0.04em; }
@media (max-width: 720px) {
  .oxy-lbl--y, #oxyYTicks { display: none; }
  .oxy-lbl { font-size: 19px; letter-spacing: 0.02em; }
  .oxy-caption { display: block; }
}
.legal-flag { margin: 48px 0 0; color: var(--on-surface-subtle); text-transform: none; letter-spacing: 0.04em; }

.cookie-table tr.tbc td { color: var(--on-surface-subtle); }
.cookie-table tr.tbc td:first-child { color: var(--on-surface-muted); font-style: italic; font-family: var(--font-body); font-size: var(--fs-body-sm); }

/* Privacy page: definition rows for "what / why / basis / how long" - one object, repeated. */
.legal-block { margin: 22px 0 0; padding: 22px 24px; background: var(--surface-container-low); border-radius: var(--radius-md); }
.legal-block + .legal-block { margin-top: 14px; }
.legal-block h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--glasshouse); }
.legal-block dl { margin: 12px 0 0; display: grid; grid-template-columns: 96px 1fr; gap: 8px 16px; font-size: var(--fs-body-sm); line-height: 1.5; }
.legal-block dt { font-family: var(--font-label); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-muted); padding-top: 3px; }
.legal-block dd { margin: 0; color: var(--on-surface); }
@media (max-width: 480px) { .legal-block dl { grid-template-columns: 1fr; gap: 2px; } .legal-block dd + dt { margin-top: 10px; } }
.legal-block .tbc { color: var(--on-surface-subtle); font-style: italic; }
.rights-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rights-list li { padding-left: 22px; position: relative; line-height: 1.55; }
.rights-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--eucalyptus); }
.rights-list b { font-weight: 400; color: var(--glasshouse); }
.rights-list li, .legal p { color: var(--on-surface-muted); }
.legal p b { font-weight: 400; color: var(--glasshouse); }

/* ==========================================================================
   CONSENT NOTICE - a card, never a wall. Reject is one tap, like accept.
   Bottom-left on desktop; a low sheet on phones. Materialises 320ms, leaves 200ms.
   ========================================================================== */
.cc {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  width: min(400px, calc(100vw - 40px));
  background: var(--surface); color: var(--on-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline);
  padding: 24px 24px 22px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 320ms var(--ease-out-strong), transform 320ms var(--ease-out-strong);
  pointer-events: none;
}
.cc.is-open { opacity: 1; transform: none; pointer-events: auto; }
.cc.is-closing { opacity: 0; transform: translateY(12px); transition-duration: 200ms; pointer-events: none; }
.cc[hidden] { display: none; }
.cc-title { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; margin: 0; color: var(--glasshouse); }
.cc-title em { font-style: italic; color: var(--holder-teal); }
.cc-text { margin: 12px 0 0; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--on-surface-muted); }
.cc-text a { color: var(--on-surface); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31, 74, 74, 0.35); }
@media (hover: hover) and (pointer: fine) { .cc-text a:hover { text-decoration-color: var(--on-surface); } }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.cc .pill { padding: 14px 16px; font-size: 11px; justify-content: center; text-align: center; white-space: nowrap; }
.pill-glass { background: var(--glasshouse); color: var(--dewy-white); }
.pill-ghost { background: transparent; color: var(--glasshouse); box-shadow: inset 0 0 0 1px var(--ghost-outline-strong); }
.cc-links { display: flex; gap: 18px; margin-top: 16px; }
.cc-links a, .cc-back {
  font-family: var(--font-label); font-size: 13px; font-weight: 500; color: var(--on-surface-muted); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--ghost-outline-strong); background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur-base) var(--ease-gentle);
}
@media (hover: hover) and (pointer: fine) { .cc-links a:hover, .cc-back:hover { color: var(--glasshouse); } }
.cc-view { display: none; }
.cc[data-view="notice"] .cc-view-notice, .cc[data-view="settings"] .cc-view-settings { display: block; }
.cc-rows { margin: 18px 0 0; display: grid; gap: 14px; }
.cc-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.cc-row-name { font-family: var(--font-label); font-weight: 500; font-size: 14px; color: var(--glasshouse); }
.cc-row-desc { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--on-surface-muted); }
.cc-row-always { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-subtle); padding-top: 6px; white-space: nowrap; }
/* Switch: transform-only knob, 140ms. Track Glasshouse when on. */
.sw { position: relative; width: 44px; height: 26px; border-radius: var(--radius-full); border: 0; cursor: pointer; padding: 0;
  background: var(--ghost-outline-strong); transition: background var(--dur-quick) var(--ease-gentle); flex: none; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--dewy-white);
  box-shadow: 0 1px 2px rgba(42, 74, 64, 0.25); transition: transform var(--dur-quick) var(--ease-gentle); }
.sw[aria-checked="true"] { background: var(--glasshouse); }
.sw[aria-checked="true"]::after { transform: translateX(18px); }
.sw:focus-visible { outline: 2px solid var(--glasshouse); outline-offset: 3px; }
.cc-back { margin-top: 14px; }
@media (max-width: 720px) {
  .cc { left: 0; right: 0; bottom: 0; width: 100%; border-radius: 22px 22px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); transform: translateY(28px); }
  .cc.is-closing { transform: translateY(28px); }
  .cc-title { font-size: 24px; }
  .cc-actions { grid-template-columns: 1fr; }   /* one tap each, stacked, equal width */
}
@media (prefers-reduced-motion: reduce) {
  .cc, .cc.is-closing { transition: opacity 180ms linear; transform: none !important; }
  .sw, .sw::after { transition: none; }
}

/* ==========================================================================
   WAITLIST DIALOG - the site's one modal. Native dialog element: focus trap, Escape,
   inert page, top layer. Scrim + panel materialise together; exits faster,
   along the same path it entered.
   ========================================================================== */
.wl {
  position: fixed; inset: 0; margin: 0; padding: clamp(16px, 3vw, 40px); border: 0;
  width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  background: rgba(42, 74, 64, 0);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  color: var(--on-surface);
  overflow: hidden;
  transition:
    background 260ms var(--ease-out-strong),
    backdrop-filter 260ms var(--ease-out-strong),
    -webkit-backdrop-filter 260ms var(--ease-out-strong);
}
.wl::backdrop { background: transparent; }
.wl[open] { display: grid; place-items: center; }
.wl.is-open { background: rgba(31, 74, 74, 0.46); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wl.is-closing { transition-duration: 200ms; }
body:has(dialog.wl[open]) { overflow: hidden; }

.wl-panel {
  position: relative;
  width: min(100%, 880px);
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: minmax(0, 1fr);   /* the row is capped to the panel, so the body scrolls instead of being clipped */
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.965);
  transition: opacity 320ms var(--ease-out-strong), transform 320ms var(--ease-out-strong);
}
.wl.is-open .wl-panel { opacity: 1; transform: none; }
.wl.is-closing .wl-panel { opacity: 0; transform: translateY(10px) scale(0.975); transition-duration: 200ms; }

.wl-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: var(--radius-full); border: 0; cursor: pointer;
  background: rgba(42, 74, 64, 0.06); color: var(--on-surface);
  display: grid; place-items: center;
  transition: background var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
.wl-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .wl-close:hover { background: rgba(42, 74, 64, 0.11); } }
.wl-close:active { transform: scale(0.94); }

/* Visual column - Intensity 02: Eucalyptus is the confident product moment. */
.wl-visual {
  position: relative; background: var(--eucalyptus); min-height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px;
  overflow: hidden;
}
.wl-visual .pedestal-circles { position: absolute; left: 50%; top: 42%; width: 150%; height: auto; transform: translate(-50%, -50%); stroke: var(--glasshouse); fill: none; }
.wl-pod {
  position: absolute; left: 50%; top: 42%; width: 62%; max-width: 250px;
  transform: translate(-50%, -50%) translateY(6px); filter: drop-shadow(0 26px 30px rgba(42, 74, 64, 0.22));
  transition: transform 700ms var(--ease-out-strong) 80ms;
}
.wl.is-open .wl-pod { transform: translate(-50%, -50%); }
.wl-pod::after { content: ""; }
.wl-visual .label-line { position: relative; color: var(--glasshouse); opacity: 0.8; font-size: 11px; }
.wl-visual .label-line b { font-weight: 500; opacity: 1; }

.wl-body { padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 52px) clamp(26px, 3.4vw, 40px); overflow-y: auto; }
.wl-eyebrow { color: var(--on-surface-muted); }
.wl-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 14px 0 0; color: var(--glasshouse); text-wrap: balance;
}
.wl-title em { font-style: italic; color: var(--holder-teal); }
.wl-lede { margin: 16px 0 0; font-size: var(--fs-body); color: var(--on-surface-muted); max-width: 40ch; }
.wl-hello { margin-top: 16px; }
.wl .capture-zone[data-done] .wl-hello { display: none; }
.wl-hello a { color: var(--holder-teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ghost-outline-strong); transition: text-decoration-color var(--dur-base) var(--ease-gentle); }
@media (hover: hover) and (pointer: fine) { .wl-hello a:hover { text-decoration-color: currentColor; } }
.wl.is-open .wl-hello { transition-delay: 120ms; }
.wl-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.wl-list li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--on-surface-muted); }
.wl-list li b { font-weight: 400; color: var(--glasshouse); }
.wl-list svg { width: 20px; height: 20px; margin-top: 1px; stroke: var(--holder-teal); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Staggered settle - three items, 45ms apart. Transitions, not keyframes, so re-opening never restarts mid-flight. */
.wl-body > * , .wl-list li { opacity: 0; transform: translateY(6px); transition: opacity 380ms var(--ease-out-strong), transform 380ms var(--ease-out-strong); }
.wl-list { opacity: 1; transform: none; }
.wl.is-open .wl-body > *, .wl.is-open .wl-list li { opacity: 1; transform: none; }
.wl.is-open .wl-title { transition-delay: 60ms; }
.wl.is-open .wl-lede { transition-delay: 100ms; }
.wl.is-open .wl-list li:nth-child(1) { transition-delay: 140ms; }
.wl.is-open .wl-list li:nth-child(2) { transition-delay: 185ms; }
.wl.is-open .wl-list li:nth-child(3) { transition-delay: 230ms; }
.wl.is-open .wl-capture { transition-delay: 150ms; }
.wl.is-closing .wl-body > *, .wl.is-closing .wl-list li { transition-delay: 0ms; transition-duration: 160ms; }

.wl-capture { margin-top: 26px; }
/* In the panel the form is deliberately stacked: field, then a full-width blush pill. */
.wl .capture { flex-direction: column; gap: 12px; }
.wl .capture .field { flex: none; width: 100%; }
.wl .capture .pill { justify-content: center; width: 100%; }
.wl .field {
  background: rgba(42, 74, 64, 0.06); color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--ghost-outline);
}
.wl .field::placeholder { color: var(--on-surface-subtle); }
.wl .field:focus { box-shadow: inset 0 0 0 1.5px var(--holder-teal); }
.wl .micro { color: var(--on-surface-subtle); }
.capture-consent { line-height: 1.6; }
.capture-consent a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; transition: color var(--dur-base) var(--ease-gentle); }
@media (hover: hover) and (pointer: fine) { .footer .capture-consent a:hover { color: var(--dewy-white); } .wl .capture-consent a:hover { color: var(--glasshouse); } }
.wl .capture-done h3 { color: var(--glasshouse); }
.wl .capture-done .micro { margin-top: 10px; }
.wl-after { display: inline-flex; margin-top: 18px; }

@media (max-width: 720px) {
  .wl { padding: 0; align-items: end; }
  .wl[open] { place-items: end center; }
  .wl-panel {
    grid-template-columns: 1fr;
    width: 100%; max-height: 94dvh;
    grid-template-rows: auto minmax(0, 1fr);   /* sheet: the image keeps its height, the body is the row that scrolls */
    border-radius: 28px 28px 0 0;
    transform: translateY(32px);           /* sheet: enters from the bottom edge… */
  }
  .wl.is-closing .wl-panel { transform: translateY(32px); } /* …and leaves the same way */
  .wl-visual { min-height: 150px; padding: 18px 22px; }
  .wl-visual { flex-direction: row; align-items: center; justify-content: flex-start; }
  .wl-visual .pedestal-circles { left: 72%; top: 50%; width: 110%; }
  .wl-pod { left: auto; right: 15%; top: 52%; width: 30%; max-width: 120px; transform: translateY(-50%) translateY(6px); }
  .wl.is-open .wl-pod { transform: translateY(-50%); }
  .wl-visual .label-line { max-width: 52%; line-height: 1.5; }
  .wl-close { top: 12px; right: 12px; background: rgba(244, 241, 232, 0.7); }
  .wl-body { padding: 24px 22px 28px; }
  .wl-list { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl, .wl-panel, .wl-pod, .wl-body > *, .wl-list li { transition: opacity 180ms linear !important; transform: none !important; transition-delay: 0ms !important; }
  .wl { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .wl.is-open { background: rgba(31, 74, 74, 0.72); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- Home hero, Pod Milk edition: mother and baby at the table, the type in teal, the menu on a teal bar ---- */
@media (min-width: 721px) {
body[data-route="home"] .hook { background: var(--pod-milk); color: var(--holder-teal); }
@media (min-width: 901px) {
  /* shorter on desktop so the product panel shows beneath in one screen; the photo is cropped at the foot */
  body[data-route="home"] .hook { min-height: 0; height: 88svh; min-height: 700px; }
  body[data-route="home"] .hook-inner { padding-top: 120px; padding-bottom: 56px; }
}
/* desktop: the photograph takes the right 60% only, so more of its height fits and the baby's tummy stays in shot */
body[data-route="home"] .hook-bg { inset: 0 0 0 40%; }
body[data-route="home"] .hook-bg img { object-position: 50% 52%; }
body[data-route="home"] .hook-bg::after {
  background:
    linear-gradient(90deg, rgba(237,228,212,1) 0%, rgba(237,228,212,0.92) 14%, rgba(237,228,212,0.58) 32%, rgba(237,228,212,0.18) 54%, rgba(237,228,212,0) 72%),
    linear-gradient(180deg, rgba(237,228,212,0.26) 0%, rgba(237,228,212,0) 18%, rgba(237,228,212,0) 84%, rgba(237,228,212,0.40) 100%);
}
body[data-route="home"] .hook-title { color: var(--holder-teal); }
body[data-route="home"] .hook-word { color: var(--holder-teal); }
body[data-route="home"] .caret { background: var(--holder-teal); }
body[data-route="home"] .hook-sub { color: var(--on-surface-muted); }
body[data-route="home"] .hook-cred { color: var(--on-surface-subtle); }
body[data-route="home"] .hook .pill-bright { background: var(--soft-blush); color: var(--cta-on); }   /* Read the science: the brand CTA colour, as on every other primary */
body[data-route="home"] .hook .pill-ghost-dark { color: var(--glasshouse); box-shadow: inset 0 0 0 1px var(--ghost-outline-strong); }
@keyframes navMorphBar {
  from {
    transform: translate(-50%, 0);
    width: 100%;
    padding: 18px clamp(24px, 4vw, 48px);
    background: rgba(31, 74, 74, 1);
    border-radius: 0;
    box-shadow: 0 0 0 rgba(42, 74, 64, 0), inset 0 0 0 1px rgba(244, 241, 232, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    transform: translate(-50%, 14px);
    width: var(--nav-w-pill);
    padding: 4px 10px 4px 14px;
    background: rgba(31, 74, 74, 0.94);   /* same Holder Teal as the bar: the pill only changes shape, never hue */
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline-dark);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
body[data-route="home"] .nav { animation-name: navMorphBar; border-radius: 0; }
body[data-route="home"] .nav.scrolled { border-radius: var(--radius-full); background: rgba(31, 74, 74, 0.94); }
}

@media (min-width: 721px) and (max-width: 900px) {
  body[data-route="home"] .hook-bg { inset: 0 0 auto 0; height: 54svh; min-height: 360px; }
  body[data-route="home"] .hook-bg img { object-position: 50% 58%; }
  body[data-route="home"] .hook-bg::after {
    background: linear-gradient(180deg, rgba(237,228,212,0.08) 0%, rgba(237,228,212,0) 12%, rgba(237,228,212,0) 58%, rgba(237,228,212,0.72) 84%, rgba(237,228,212,1) 100%);
  }
  body[data-route="home"] .hook-inner { padding-top: 50svh; padding-bottom: 40px; }
}

/* ==== Our story: Sioned's edit (12 Sep 2026), styles copied from her artifact and layered last ==== */
/* ---- Buttons: full pill, Plex Sans caps, press settles ---- */
.pill {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  padding: 16px 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  transition: opacity var(--dur-base) var(--ease-gentle), transform var(--dur-quick) var(--ease-gentle);
}
.mission-lede .w.accent-w { color: var(--glasshouse); }
.founders-mission {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); gap: 12px clamp(24px, 4vw, 64px); align-items: start;
  margin: clamp(28px, 4vw, 44px) 0 0; padding-top: 22px; border-top: 1px solid var(--ghost-outline-dark);
}
.founders-mission-label { color: var(--eucalyptus); padding-top: 7px; }
.founders-mission-text { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.38; letter-spacing: -0.01em; color: var(--on-dark); max-width: 38ch; }
.founders-mission-text em { font-style: italic; color: var(--eucalyptus); }
.band-dark .sec-title em, .sci-hero em, .story-hero em { color: var(--eucalyptus); }
.sci-oxygen p, .began-copy p, .story-mission p { margin: 18px 0 0; max-width: 52ch; }
/* Our story: founders section runs full width, hero and section headings get a wider measure */
.story-founders .sec-inner > p { margin: 22px 0 0; max-width: none; margin-left: 0; }
/* Our story, founders: credential ledger + argument, then a pulled-right closing statement */
.founders-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(30px, 4vw, 44px); }
.founders-note, .founders-arg { margin: 0; border-top: 1px solid var(--ghost-outline); padding-top: 20px; }
.founders-note, .founders-arg { font-size: var(--fs-body); line-height: 1.62; max-width: none; }
.founders-note b { font-weight: 400; color: var(--glasshouse); }
/* Our story, mission: the statement runs the full width, the body sits beneath it */
.story-mission .mission-statement { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.24; letter-spacing: -0.018em; max-width: none; margin: clamp(22px, 3vw, 34px) 0 0; }
.story-founders .sec-title { max-width: none; }
.story-hero .sci-title { max-width: 26ch; }
/* How it began: figure matches the height of the copy column */
.began-grid { align-items: stretch; }
.began-fig { position: static; display: flex; flex-direction: column; }
.began-img { position: relative; flex: 1 1 auto; min-height: clamp(320px, 52vw, 540px); border-radius: var(--radius-lg); overflow: hidden; }
.began-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* specimen gallery */
.sci-mission { background: var(--surface); }
.sci-mission .sec-inner { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.mission-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.mission-ledger { list-style: none; margin: 28px 0 0; padding: 0; max-width: 54ch; }
.mission-ledger li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--ghost-outline); line-height: 1.5; color: var(--on-surface-muted); }
.mission-ledger li:last-child { border-bottom: 1px solid var(--ghost-outline); }
.mission-ledger .data { color: var(--on-surface-subtle); }
.mission-ledger b { font-weight: 400; color: var(--glasshouse); }
.mission-fig { margin: 0; }
.mission-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: var(--radius-xl); }
.mission-fig figcaption { margin-top: 14px; color: var(--on-surface-subtle); text-align: center; }
/* ==========================================================================
   STORY PAGE
   ========================================================================== */
.story-hero {
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  background: var(--surface-deepest);
  color: var(--on-dark);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.story-hero-bg { position: absolute; inset: 0; }
.story-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; display: block; filter: saturate(0.72) contrast(1.03); }
.story-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(42,74,64,0.66) 0%, rgba(42,74,64,0.30) 28%, rgba(42,74,64,0.46) 52%, rgba(42,74,64,0.90) 100%),
    linear-gradient(90deg, rgba(42,74,64,0.42) 0%, rgba(42,74,64,0.12) 45%, rgba(42,74,64,0.10) 100%);
}
.story-hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-marketing);
  margin: 0 auto;
  padding: clamp(140px, 20vh, 220px) var(--gutter) clamp(56px, 8vh, 88px);
}
.story-began { background: var(--surface-deepest); color: var(--on-dark); }
.story-began .eyebrow { color: var(--on-dark-muted); }
.story-began .began-fig figcaption, .story-began .data { color: var(--on-dark-subtle); }
.began-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.began-fig { margin: 0; position: sticky; top: 110px; }
.began-fig img { width: 100%; border-radius: var(--radius-lg); display: block; }
.began-fig figcaption { margin-top: 12px; color: var(--on-surface-muted); }
.story-mission { background: var(--surface); }
.mission-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  max-width: 38ch;
  margin: clamp(32px, 5vw, 56px) 0 0 auto;   /* pulled right - the page's see-saw */
  color: var(--on-surface);
}
.story-mission > .sec-inner > p:last-child { margin-left: auto; max-width: 38ch; }
.story-founders { background: var(--surface-container-low); }
.portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 24px);
  margin-top: clamp(36px, 5vw, 56px);
}
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-md); display: block; }
.portrait figcaption { margin-top: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.portrait-name {
  font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--glasshouse); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--ghost-outline-strong);
  transition: text-decoration-color var(--dur-base) var(--ease-gentle), color var(--dur-base) var(--ease-gentle);
}
.portrait-role { color: var(--on-surface-muted); font-size: 10.5px; }
/* Phones: a list. Round portrait at the left, name and role beside it, one founder per row, names never wrap. */
@media (max-width: 720px) {
  .portraits { display: flex; flex-direction: column; gap: 0; }
  .portrait { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ghost-outline); }
  .portrait:last-child { border-bottom: 1px solid var(--ghost-outline); }
  .portrait img { width: 84px; height: 84px; aspect-ratio: 1; border-radius: 50%; object-position: 50% 25%; }
  .portrait figcaption { margin: 0; align-items: flex-start; text-align: left; gap: 5px; }
  .portrait-name { font-size: 19px; }
  .portrait-role { font-size: 10px; }
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(36px, 5vw, 56px);
}
.story-join { background: var(--surface); }
/* ==========================================================================
   IN THE PRESS - cream ground. Left: eyebrow and a loose grid of marks in their own colours.
   Right: the Times clipping, whole, as a card. Phones: eyebrow, card, then one row of marks.
   ========================================================================== */
.story-press { background: var(--surface); padding: 0; }
.press-wrap {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: stretch;
  padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 104px);
}
.press-left { display: flex; flex-direction: column; }
.press-eyebrow { color: var(--on-surface-muted); }
.press-logos {
  list-style: none; padding: 0; margin: auto 0;                  /* centred in the height the card sets */
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between;
  justify-items: center; align-items: center;
  gap: clamp(64px, 8vw, 110px) clamp(24px, 3vw, 48px);
  padding-right: clamp(0px, 3vw, 40px);
}
.press-logos li { display: flex; align-items: center; }
.press-logo { display: inline-block; text-decoration: none; transition: transform var(--dur-base) var(--ease-gentle), opacity var(--dur-base) var(--ease-gentle); }
.press-logo img { display: block; height: auto; }
.logo-forbes30 { width: clamp(120px, 12vw, 176px); }
.logo-forbes { width: clamp(92px, 9.2vw, 136px); }
.logo-fti { width: clamp(68px, 7vw, 100px); border-radius: 50%; }
.logo-times    { width: clamp(150px, 15vw, 222px); }
.logo-c4       { width: clamp(52px, 5.2vw, 76px); }
.logo-bbc      { width: clamp(104px, 10.4vw, 152px); }
.press-logo:active { transform: scale(0.98); }
/* the clipping: white card, soft tinted shadow, the whole article visible */
.press-card {
  display: block; align-self: start; border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-container-lowest);
  box-shadow: inset 0 0 0 1px var(--ghost-outline);
  transition: transform var(--dur-slow) var(--ease-gentle), box-shadow var(--dur-slow) var(--ease-gentle), opacity var(--dur-slow) var(--ease-gentle);
}
.press-card img { display: block; width: 100%; height: auto; }
/* ==========================================================================
   BYOMI PAGE - product story in one place. Shared sections are moved in by the router.
   ========================================================================== */
.home-only, .byomi-only { display: none; }
@media (max-width: 900px) {
  .founders-mission { grid-template-columns: 1fr; gap: 8px; padding-top: 18px; }
  .founders-mission-text { font-size: 19px; }
  .mission-grid { grid-template-columns: 1fr; gap: 28px; }
  .mission-fig { order: -1; }
  .mission-fig img { aspect-ratio: 4 / 3; object-position: 50% 38%; border-radius: var(--radius-lg); }
  .mission-fig figcaption { text-align: left; margin-top: 10px; }
  .began-grid { grid-template-columns: 1fr; }
  .began-fig { position: static; }
  .mission-lede, .story-mission > .sec-inner > p:last-child { margin-left: 0; }
  .press-wrap { display: flex; flex-direction: column; gap: 22px; padding-bottom: clamp(48px, 7vw, 80px); }
  .press-left { display: contents; }
  .press-eyebrow { order: 1; }
  .press-card { order: 2; margin: 0; }
  .press-logos { order: 3; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; justify-items: center; align-items: center; gap: 20px 12px; margin: 18px 0 0; padding: 0 10px; }
  .press-li-times { order: 1; }
  .press-li-forbes { order: 2; }
  .press-li-forbesart { order: 3; }
  .press-li-fti { order: 4; }
  .press-li-c4 { order: 5; }
  .press-li-bbc { order: 6; }
  .logo-times { width: 92px; }
  .logo-forbes30 { width: 68px; }
  .logo-forbes { width: 56px; }
  .logo-fti { width: 48px; }
  .logo-c4 { width: 26px; }
  .logo-bbc { width: 64px; }
}}
@media (hover: hover) and (pointer: fine) {
  .portrait-name:hover { text-decoration-color: currentColor; color: var(--holder-teal); }
  .press-logo:hover { transform: translateY(-2px); opacity: 0.85; }
  .press-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline); }
}}
@media (max-width: 900px) and (min-width: 721px) {
  .portrait-name { font-size: 15px; }
  .portrait-role { font-size: 9px; letter-spacing: 0.05em; }
}}
@media (prefers-reduced-motion: reduce) {
  .press-logo, .press-card { transition: opacity var(--dur-base) linear; transform: none !important; }
}}

/* ==== Home founders band: Sioned's layout (12 Sep 2026): title and quote as a pair, everything on one measure ==== */
/* narrower than the marketing column - keeps the see-saw taut at full width */
.founders-inner { position: relative; max-width: 960px; margin: 0 auto; }
/* Home founders band: title and quote as a pair, everything on one measure */
.founders-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: end; }
.founders-inner .founders-title { max-width: none; margin: 14px 0 0; }
.founders-head .founders-quote { margin: 0; max-width: none; font-size: clamp(19px, 2vw, 26px); line-height: 1.42; }
.founders-inner .founders-photo { max-width: none; }
.founders-inner .dials { max-width: none; }
.founders-inner .founders-inst { margin-top: clamp(32px, 4.5vw, 52px); }

/* ==== Our discovery (home): Holder Teal band, the study chart in cream ==== */
.home-discovery { background: var(--holder-teal); color: var(--on-dark); }
.home-discovery .oxy-grid { align-items: start; }   /* the three views differ in height; top-aligned, the chip row never moves */
.home-discovery .eyebrow { color: var(--on-dark-muted); }
.home-discovery .sec-title { color: var(--dewy-white); }
.home-discovery .sec-title em { color: var(--soft-blush); }
.home-discovery .oxy-copy p { color: var(--on-dark-muted); max-width: 46ch; }
.home-discovery .hook-ctas { margin-top: 26px; }
.home-discovery .oxy-chip { background: rgba(244,241,232,0.10); color: var(--on-dark-muted); }
.home-discovery .oxy-chip:hover { background: rgba(244,241,232,0.16); }
.home-discovery .oxy-chip.on { background: var(--dewy-white); color: var(--holder-teal); }
.home-discovery .oxy svg > line { stroke: rgba(244,241,232,0.28); }
.home-discovery #oxyTicks line { stroke: rgba(244,241,232,0.35); }
.home-discovery #oxyBars line { stroke: rgba(244,241,232,0.10); }
.home-discovery .oxy-lbl { fill: var(--on-dark-muted); }
.home-discovery .oxy-lbl--y { fill: var(--on-dark-subtle); }
.home-discovery #oxyP1 { stroke: var(--dewy-white); }
.home-discovery #oxyP2 { stroke: rgba(244,241,232,0.5); }
.home-discovery #oxyT1 { fill: var(--dewy-white); }
.home-discovery #oxyT2 { fill: rgba(244,241,232,0.6); }
.home-discovery #oxyPts .pa { stroke: var(--dewy-white); fill: var(--holder-teal); }
.home-discovery #oxyPts .pb { stroke: rgba(244,241,232,0.55); fill: var(--holder-teal); }
.home-discovery #oxyBars .bar-a { fill: var(--dewy-white); }
.home-discovery #oxyBars .bar-b { fill: rgba(244,241,232,0.22); stroke: rgba(244,241,232,0.6); }
.home-discovery #oxyBars .err-a, .home-discovery #oxyBars .err-b { stroke: rgba(244,241,232,0.8); }
.home-discovery .oxy-key { color: var(--on-dark-muted); }
.home-discovery .key-a { background: var(--dewy-white); }
.home-discovery .key-b { background: rgba(244,241,232,0.5); }
.home-discovery .oxy-caption, .home-discovery .oxy-flag { color: var(--on-dark-subtle); }
.home-discovery .smell-intro, .home-discovery .smell-big-cap, .home-discovery .smell-who, .home-discovery .smell-val { color: var(--on-dark-muted); }
.home-discovery .smell-num, .home-discovery .smell-word-group p, .home-discovery .smell-so, .home-discovery .smell-scale-head .label-line { color: var(--dewy-white); }
.home-discovery .smell-word-group--b p { color: var(--on-dark-muted); }
.home-discovery .smell-big-cap .data, .home-discovery .smell-scale-head .data, .home-discovery .smell-word-group .data, .home-discovery .dv-head .data, .home-discovery .dv-foot { color: var(--on-dark-subtle); }
.home-discovery .dv-head .data:last-child { color: var(--dewy-white); }
.home-discovery .smell-ring circle { stroke: rgba(244,241,232,0.18); }
.home-discovery .smell-arc { stroke: var(--dewy-white); }
.home-discovery .smell-track { background: rgba(244,241,232,0.12); }
.home-discovery .smell-bar-a { background: var(--dewy-white); }
.home-discovery .smell-bar-b { background: rgba(244,241,232,0.4); }
.home-discovery .dv-pos { fill: var(--dewy-white); }
.home-discovery .dv-neg { fill: rgba(244,241,232,0.38); }
.home-discovery .dv-lab { fill: var(--dewy-white); }
.home-discovery .dv-val { fill: var(--on-dark-muted); }
.home-discovery .smell-words { border-top-color: rgba(244,241,232,0.16); }
@media (max-width: 900px) { .home-discovery .oxy-grid { grid-template-columns: 1fr; } }

/* ===== Home nav at rest (desktop and tablet): clear. Glasshouse type over the cream hero, no bar. The pill fills in
   over 30-90px of scroll and the type swaps to cream in one brisk step (45-75px) as it does. The wordmark's height
   animation lives on the anchor; each image carries only its own opacity swap. ===== */
@media (min-width: 721px) {
  body[data-route="home"] .nav-wordmark { position: relative; height: var(--mark-h); }
  body[data-route="home"] .nav.scrolled .nav-wordmark { height: var(--mark-h-pill); }
  body[data-route="home"] .nav-wordmark img { height: 100%; width: auto; transition: none; }
  body[data-route="home"] .nav-wordmark img.nav-mark-ink { position: absolute; left: 0; top: 0; pointer-events: none; }
  body[data-route="home"] .nav.scrolled .nav-wordmark img.nav-mark-ink { opacity: 0; }
  body[data-route="home"] .nav { background: rgba(31, 74, 74, 0); }
  body[data-route="home"] .nav:not(.scrolled) .nav-links a { color: rgba(42, 74, 64, 0.78); }
  body[data-route="home"] .nav:not(.scrolled) .nav-links a.active { color: var(--glasshouse); }
  body[data-route="home"] .nav:not(.scrolled) .nav-wordmark img:not(.nav-mark-ink) { opacity: 0; }
  body[data-route="home"] .nav:not(.scrolled) .nav-cta { background: var(--glasshouse); color: var(--dewy-white); }
  @supports (animation-timeline: scroll()) {
    body[data-route="home"] .nav, body[data-route="home"] .nav.scrolled { animation: navMorphBar linear both, navFill linear both; animation-timeline: scroll(root); animation-range: 0px 160px, 30px 90px; }
    @keyframes navMorphBar {
      from { transform: translate(-50%, 0); width: 100%; padding: 18px clamp(24px, 4vw, 48px); border-radius: 0; }
      to   { transform: translate(-50%, 14px); width: var(--nav-w-pill); padding: 4px 10px 4px 14px; border-radius: var(--radius-full); }
    }
    @keyframes navFill {
      from { background: rgba(31, 74, 74, 0); box-shadow: 0 0 0 rgba(42, 74, 64, 0), inset 0 0 0 1px rgba(244, 241, 232, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
      to   { background: rgba(31, 74, 74, 0.94); box-shadow: var(--shadow-float), inset 0 0 0 1px var(--ghost-outline-dark); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    }
    body[data-route="home"] .nav-wordmark, body[data-route="home"] .nav.scrolled .nav-wordmark { animation: navMark linear both; animation-timeline: scroll(root); animation-range: 0px 160px; transition: none; }
    body[data-route="home"] .nav-wordmark img.nav-mark-ink, body[data-route="home"] .nav.scrolled .nav-wordmark img.nav-mark-ink { opacity: 1; animation: navMarkInk linear both; animation-timeline: scroll(root); animation-range: 45px 75px; }
    body[data-route="home"] .nav-wordmark img:not(.nav-mark-ink), body[data-route="home"] .nav.scrolled .nav-wordmark img:not(.nav-mark-ink) { opacity: 1; animation: navMarkCream linear both; animation-timeline: scroll(root); animation-range: 45px 75px; }
    @keyframes navMarkInk { from { opacity: 1; } to { opacity: 0; } }
    @keyframes navMarkCream { from { opacity: 0; } to { opacity: 1; } }
    body[data-route="home"] .nav-links a, body[data-route="home"] .nav.scrolled .nav-links a { color: var(--on-dark-muted); animation: navInk linear both; animation-timeline: scroll(root); animation-range: 45px 75px; transition: none; }
    body[data-route="home"] .nav-links a.active, body[data-route="home"] .nav.scrolled .nav-links a.active { animation-name: navInkActive; }
    @keyframes navInk { from { color: rgba(42, 74, 64, 0.78); } to { color: rgba(244, 241, 232, 0.7); } }
    @keyframes navInkActive { from { color: rgba(42, 74, 64, 1); } to { color: rgba(244, 241, 232, 1); } }
    body[data-route="home"] .nav-cta, body[data-route="home"] .nav.scrolled .nav-cta { animation: navCta linear both; animation-timeline: scroll(root); animation-range: 45px 75px; }
    @keyframes navCta { from { background: rgba(42, 74, 64, 1); color: rgba(244, 241, 232, 1); } to { background: rgba(237, 228, 212, 1); color: rgba(42, 74, 64, 1); } }
  }
  /* Class-based end state, after the @supports block so it wins on order: the swap holds even where scroll-driven
     animations stall (and it is what engines without them use). */
  body[data-route="home"] .nav.scrolled .nav-wordmark img.nav-mark-ink { opacity: 0; }
  body[data-route="home"] .nav.scrolled .nav-wordmark img:not(.nav-mark-ink) { opacity: 1; }
}
/* Phones keep the dark full-bleed hero (the site's default hook) and the default nav: cream type over a teal wash on the photo. */
@media (max-width: 720px) { .nav-wordmark img.nav-mark-ink { display: none; } }
body:not([data-route="home"]) .nav-mark-ink { display: none; }
.ledger-todo div { color: var(--on-surface-subtle); } .ledger-todo b { color: var(--on-surface-muted); font-style: italic; }   /* copy still to come: reads as a note, not as content */
[data-page] section.sci-oxygen:not(.band-dark) .sec-title em { color: var(--blush-mid); }   /* outranks the generic light-section glasshouse rule */   /* "Oxygen" on the shared science section, Science and Byomi pages (Sam, 14 Sep) */
@media (max-width: 720px) {
  /* Typed hook phrase stays on one line on phones: the longest phrase ("builds immunity.") measures 347px at 56px on a 375px screen
     against a 327px column, so the title scales with the viewport until 56px is safe again (~418px wide). (Sam, 14 Sep) */
  .hook-title { font-size: min(var(--fs-display-xl), 13vw); }
  .hook-word-line { white-space: nowrap; }
  .hook-sub { color: #FFFFFF; }   /* phones: hero paragraph in bright white over the photo (Sam, 14 Sep); desktop keeps the muted teal */
  .hook-word { color: #FFFFFF; }   /* phones: typed phrase in the same white as the paragraph (Sam, 14 Sep) */
  .caret { background: #FFFFFF; }
}