/* ══════════════════════════════════════════════════════════════
   Bombay Bioworks, Design System v1.0  ("Linear Swapped")
   Tokens copied verbatim from the BB Design System artifact.
   This file is the seed for the full site; the holding page
   uses a subset. Do not redefine colours outside :root.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Primary, Forest Green (leads the brand) */
  --p:       #3E6448;
  --p-lt:    #6BA870;
  --p-dk:    #2d4c34;
  --p-c:     #C8E4D0;

  /* Secondary, Steel Blue */
  --s:       #5C9AB8;
  --s-dk:    #3A7A96;
  --s-lt:    #D4EEF8;

  /* Tertiary, Cranberry (CarbonFuel / industrial energy ONLY) */
  --t:       #A85268;
  --t-dk:    #7C3A4E;
  --t-mid:   #C27A90;
  --t-lt:    #F3D4DB;

  /* Neutrals */
  --dark:    #0A0A0A;
  --surf-pg: #F2F5F2;
  --surf-cd: #ffffff;
  --out:     rgba(0,0,0,.07);
  --out-md:  rgba(0,0,0,.12);

  /* Dark mode surfaces */
  --dm-bg:   #0A0A0A;
  --dm-cd:   rgba(255,255,255,.04);
  --dm-out:  rgba(255,255,255,.06);
  --dm-out2: rgba(255,255,255,.12);
  --dm-tx:   #EDEDEC;
  --dm-tx2:  rgba(237,237,236,.55);
  --dm-tx3:  rgba(237,237,236,.35);

  /* Typography */
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing (8px base) */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  /* Border radius */
  --r-sm:   4px;
  --r-md:   7px;
  --r-lg:   12px;
  --r-full: 9999px;

  /* Motion */
  --ease:      cubic-bezier(.25,.46,.45,.94);
  --ease-up:   cubic-bezier(.16,1,.3,1);
  --dur-fast:  150ms;
  --dur-base:  200ms;
  --dur-slow:  300ms;

  /* Semantic roles, light mode (remapped by body.dark) */
  --bg:      var(--surf-pg);
  --card:    var(--surf-cd);
  --tx:      var(--dark);
  --tx2:     rgba(10,10,10,.5);
  --tx3:     rgba(10,10,10,.4);
  --line:    var(--out);
  --line-hv: var(--out-md);
  --nav-bg:  rgba(255,255,255,.9);
}

body.dark {
  --bg:      var(--dm-bg);
  --card:    var(--dm-cd);
  --tx:      var(--dm-tx);
  --tx2:     var(--dm-tx2);
  --tx3:     var(--dm-tx3);
  --line:    var(--dm-out);
  --line-hv: var(--dm-out2);
  --nav-bg:  rgba(10,10,10,.85);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Layout rule, the "first fold": nav + .hero together always fill
   exactly one viewport (min-height, so short content never leaves a gap
   and short viewports grow rather than clip). Today .footer sits inside
   this same flex column because nothing follows it, so the whole page
   happens to be one screen. THE FIRST TIME A REAL SECTION IS ADDED BELOW
   THE HERO: move .footer out to follow that new content instead of
   staying a flex sibling here, and give body plain block flow instead of
   this flex column, nav + .hero then keep this exact min-height:100dvh
   sizing on their own (wrap them in one element if body no longer flexes
   them directly). Documented alongside in the BB Design System, §06. */
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--tx);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease);
}

/* Dark-mode noise overlay, DS §07. Never intercepts clicks. */
body.dark::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .4;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; }

/* The hidden attribute must beat author display rules. Without this a
   class like .nav-panel { display:flex } overrides the UA [hidden] rule
   and the panel stays visible when JS marks it hidden. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: 56px;
  display: flex; align-items: center;
  padding: 0 var(--sp-xl);
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
}
.nav-logo {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  color: var(--tx); text-decoration: none;
}
.nav-logo-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, var(--p), var(--p-lt));
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; letter-spacing: 0;
  flex-shrink: 0;
}
.nav-spacer { flex: 1; }

/* Theme toggle */
.theme-toggle {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--tx2);
  border: 1px solid var(--line-hv);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.theme-toggle:hover { color: var(--tx); border-color: var(--tx3); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }
.theme-toggle .icon-moon { display: none; }
body.dark .theme-toggle .icon-sun  { display: none; }
body.dark .theme-toggle .icon-moon { display: block; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  flex: 1;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-4xl) var(--sp-xl);
}
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 15% 25%, rgba(62,100,72,.11)  0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 75%, rgba(92,154,184,.08) 0%, transparent 60%),
    radial-gradient(ellipse 30% 45% at 75% 15%, rgba(168,82,104,.06) 0%, transparent 55%);
  transition: opacity var(--dur-slow) var(--ease);
}
body.dark .hero-mesh {
  background:
    radial-gradient(ellipse 55% 50% at 15% 25%, rgba(62,100,72,.18)  0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 85% 75%, rgba(92,154,184,.14) 0%, transparent 60%),
    radial-gradient(ellipse 30% 45% at 75% 15%, rgba(168,82,104,.10) 0%, transparent 55%);
}
/* Motif canvas sits above the mesh, below the content column. Bug note:
   this used to be a blanket `.hero > * { position: relative }` rule, which
   silently overrode .hero-mesh's `position: absolute` (equal specificity,
   later in source order wins) and collapsed it to a 0×0 box, the mesh has
   been invisible since launch. Targeted rules below fix that. */
.bb-motif-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.hero-inner { position: relative; z-index: 2; max-width: 720px; }

/* ── Badge ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  padding: 5px 14px 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(62,100,72,.22);
  background: rgba(62,100,72,.06);
  color: var(--p);
  font-size: 12px; font-weight: 500; letter-spacing: -.005em;
  margin-bottom: var(--sp-lg);
}
body.dark .badge {
  border-color: rgba(62,100,72,.3);
  background: rgba(62,100,72,.1);
  color: var(--p-lt);
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-lt);
  flex-shrink: 0;
}
body.dark .badge-dot { box-shadow: 0 0 6px rgba(107,168,112,.6); }

/* Pulsing dot, the one piece of ambient motion on the page */
@media (prefers-reduced-motion: no-preference) {
  .badge-dot { animation: pulse 2.4s var(--ease) infinite; }
  @keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%      { opacity: .45; transform: scale(.85); }
  }
}

/* ── Type ──────────────────────────────────────────────────── */
.hero h1 {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.02;
  text-wrap: balance;
  margin-bottom: var(--sp-md);
}
.grad {
  background: linear-gradient(90deg, var(--p) 0%, var(--p-lt) 55%, var(--s) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.strike {
  position: relative;
  display: inline-block;
  color: var(--tx3);
}
.strike::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
}
.hero h1 .grad { opacity: 1; }

/* Sequenced reveal, "black" strikes through, then "green carbon."
   answers in the gradient. Kept short on purpose (~0.6s total, starts
   almost immediately), a hint of motion, not a wait. */
@media (prefers-reduced-motion: no-preference) {
  .strike::after {
    transform: scaleX(0);
    animation: strikeIn .22s ease-out .12s forwards;
  }
  .hero h1 .grad {
    opacity: 0;
    transform: translateY(6px);
    animation: gradIn .28s ease-out .32s forwards;
  }
}
@keyframes strikeIn { to { transform: scaleX(1); } }
@keyframes gradIn    { to { opacity: 1; transform: translateY(0); } }
.hero-sub {
  font-size: 17px;
  color: var(--tx2);
  line-height: 1.65;
  letter-spacing: -.01em;
  max-width: 520px;
  margin: 0 auto var(--sp-xl);
  text-wrap: pretty;
}

/* ── Product chips ─────────────────────────────────────────── */
.chip-row {
  display: flex; gap: var(--sp-sm);
  flex-wrap: wrap; justify-content: center;
  margin-bottom: var(--sp-xl);
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  border: 1px solid;
  font-size: 12px; font-weight: 500; letter-spacing: -.005em;
}
.chip-primary   { background: rgba(62,100,72,.08);  color: var(--p);    border-color: rgba(62,100,72,.2);  }
.chip-secondary { background: rgba(92,154,184,.08); color: var(--s-dk); border-color: rgba(92,154,184,.2); }
.chip-tertiary  { background: rgba(168,82,104,.08); color: var(--t-dk); border-color: rgba(168,82,104,.2); }

/* Hover swaps the full label for its one-word form. The default label
   stays in flow (sets the chip's width, it's the longer of the two);
   the hover label sits absolutely on top so nothing reflows. */
.chip-label { position: relative; display: inline-block; }
.chip-label-hover {
  position: absolute; left: 0; top: 0;
  white-space: nowrap; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .chip-label-default, .chip-label-hover { transition: opacity var(--dur-fast) var(--ease); }
}
.chip:hover .chip-label-default { opacity: 0; }
.chip:hover .chip-label-hover   { opacity: 1; }

body.dark .chip-primary   { background: rgba(62,100,72,.15);  color: var(--p-lt);  border-color: rgba(62,100,72,.25);  }
body.dark .chip-secondary { background: rgba(92,154,184,.12); color: var(--s);     border-color: rgba(92,154,184,.25); }
body.dark .chip-tertiary  { background: rgba(168,82,104,.12); color: var(--t-mid); border-color: rgba(168,82,104,.25); }

.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.chip-dot-p { background: var(--p-lt); }
.chip-dot-s { background: var(--s);    }
.chip-dot-t { background: var(--t);    }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-sans);
  font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  padding: 10px 24px;
  border-radius: var(--r-md);
  border: none; cursor: pointer; text-decoration: none;
  transition: all var(--dur-base) var(--ease-up);
}
.btn-primary {
  background: var(--p); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 4px 12px rgba(62,100,72,.2);
}
.btn-primary:hover { background: var(--p-dk); transform: translateY(-1px); }
.btn-secondary {
  background: transparent; color: var(--s-dk);
  border: 1px solid rgba(92,154,184,.3);
}
.btn-secondary:hover { border-color: rgba(92,154,184,.5); background: rgba(92,154,184,.05); }
body.dark .btn-secondary { color: var(--dm-tx2); border-color: var(--dm-out2); }
body.dark .btn-secondary:hover { color: var(--dm-tx); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-lg) var(--sp-xl);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap;
  transition: border-color var(--dur-slow) var(--ease);
}
.footer-brand {
  font-size: 13px; font-weight: 600; letter-spacing: -.02em;
  color: var(--tx2);
}
.footer-meta {
  font-family: var(--f-mono);
  font-size: 11px; color: var(--tx3);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav    { padding: 0 var(--sp-lg); }
  .hero   { padding: var(--sp-3xl) var(--sp-lg); }
  .footer { padding: var(--sp-lg); justify-content: center; text-align: center; }
  .hero-sub { font-size: 16px; }
}

/* Compact desktop/laptop windows (1280×720 and similar), a light trim,
   just enough to close the few px this design's generous hero padding
   otherwise overflows by. Nothing else changes at this tier. */
@media (max-height: 800px) {
  .hero { padding: var(--sp-2xl) var(--sp-xl); }
}

/* Short viewports (landscape phones), the "first fold" rule holds
   regardless of height: nav + .hero must never force a scrollbar.
   Vertical rhythm tightens further here. Threshold covers landscape
   phones (~360–430px tall). */
@media (max-height: 560px) {
  .hero      { padding: var(--sp-sm) var(--sp-xl); }
  .badge     { margin-bottom: var(--sp-xs); }
  .hero h1   { font-size: clamp(20px, 4.5vw, 40px); margin-bottom: var(--sp-xs); }
  .hero-sub  { font-size: 13px; line-height: 1.45; margin-bottom: var(--sp-xs); }
  .chip-row  { margin-bottom: var(--sp-xs); }
  .footer    { padding: var(--sp-xs) var(--sp-xl); }
}

/* ══════════════════════════════════════════════════════════════
   MULTI PAGE SHELL  (added for the seven page build)

   Fold behaviour, and why it is split two ways:
   - Homepage has nothing after the hero, so nav + hero + footer must
     total exactly one viewport. That is the existing flex column with
     .hero as the flex:1 member. Unchanged.
   - Content pages have sections after the hero, so nav + .fold total
     one viewport and the footer sits at the true end of the document.
   Both cases inherit the same short viewport trims further down.
   ══════════════════════════════════════════════════════════════ */
:root { --nav-h: 56px; }

main { flex: 1; }

.fold {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: var(--sp-4xl) var(--sp-xl);
  text-align: center;
}
.fold-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.fold h1 {
  font-size: clamp(32px, 5.4vw, 62px); font-weight: 700;
  letter-spacing: -.04em; line-height: 1.04;
  text-wrap: balance; margin-bottom: var(--sp-md);
}
.fold-sub {
  font-size: 17px; color: var(--tx2); line-height: 1.65;
  letter-spacing: -.01em; max-width: 560px; margin: 0 auto;
  text-wrap: pretty;
}
.fold-scroll {
  position: absolute; left: 50%; bottom: var(--sp-lg);
  transform: translateX(-50%); z-index: 2;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.fold-scroll::after {
  content: ''; width: 1px; height: 22px;
  background: linear-gradient(to bottom, var(--tx3), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .fold-scroll { animation: foldNudge 2.6s var(--ease) infinite; }
  @keyframes foldNudge {
    0%, 100% { opacity: .75; transform: translateX(-50%) translateY(0); }
    50%      { opacity: .35; transform: translateX(-50%) translateY(4px); }
  }
}

/* ── Navigation, multi page ─────────────────────────────────── */
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: var(--sp-lg); }
.nav-links a {
  font-size: 13px; font-weight: 500; letter-spacing: -.01em;
  color: var(--tx2); text-decoration: none;
  padding: 6px 12px; border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-links a:hover { color: var(--tx); background: rgba(0,0,0,.05); }
body.dark .nav-links a:hover { background: rgba(255,255,255,.07); }
.nav-links a.is-here { color: var(--p); background: rgba(62,100,72,.09); }
body.dark .nav-links a.is-here { color: var(--p-lt); background: rgba(62,100,72,.18); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-sm); }

.nav-burger {
  display: none;
  width: 32px; height: 32px; border-radius: var(--r-md);
  align-items: center; justify-content: center;
  background: transparent; color: var(--tx2);
  border: 1px solid var(--line-hv); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.nav-burger:hover { color: var(--tx); border-color: var(--tx3); }
.nav-burger svg { width: 15px; height: 15px; display: block; }
.nav-burger .ic-close { display: none; }
body.nav-open .nav-burger .ic-open  { display: none; }
body.nav-open .nav-burger .ic-close { display: block; }

.nav-panel {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: var(--nav-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-sm) var(--sp-lg) var(--sp-lg);
  display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.nav-panel a {
  font-size: 16px; font-weight: 500; letter-spacing: -.02em;
  color: var(--tx); text-decoration: none;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.nav-panel a:last-child { border-bottom: none; }
.nav-panel a.is-here { color: var(--p); }
body.dark .nav-panel a.is-here { color: var(--p-lt); }

@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (min-width: 900px) {
  .nav-panel { display: none !important; }
}

/* ── Footer, multi page variant ─────────────────────────────── */
.footer-rich {
  border-top: 1px solid var(--line);
  padding: var(--sp-3xl) var(--sp-xl) var(--sp-xl);
}
.footer-rich-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: var(--sp-2xl);
  grid-template-columns: 1.4fr 1fr 1fr;
}
.footer-col h5 {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: var(--sp-md);
}
.footer-col a {
  display: block; font-size: 13.5px; color: var(--tx2);
  text-decoration: none; padding: 5px 0;
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: var(--tx); }
.footer-blurb { font-size: 13.5px; color: var(--tx2); line-height: 1.65; max-width: 320px; margin-top: var(--sp-md); }
.footer-base {
  max-width: 1200px; margin: var(--sp-2xl) auto 0;
  padding-top: var(--sp-lg); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap;
}
@media (max-width: 760px) {
  .footer-rich-inner { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .footer-base { justify-content: center; text-align: center; }
}

/* Short viewport trims apply to the interior fold as well */
@media (max-height: 800px) {
  .fold { padding: var(--sp-2xl) var(--sp-xl); }
}
@media (max-height: 560px) {
  .fold { padding: var(--sp-sm) var(--sp-xl); }
  .fold h1 { font-size: clamp(20px, 4.5vw, 40px); }
  .fold-sub { font-size: 13px; }
  .fold-scroll { display: none; }
}