/* --- Cinzel + Barlow, self-hosted -----------------------------------------
   Never loaded from fonts.googleapis.com: that would disclose every visitor's
   IP to Google (privacy.html says no font provider sees it), and the CSP in
   _headers only allows font-src 'self', so a Google link would be blocked on
   the live site anyway.

   Latin subset only. Cinzel is one variable file (400-900); Barlow is one
   static file per weight the site uses: 300 (body and subheadings), 300
   italic, and 400/500/600 for labels and buttons. Both are SIL Open Font
   License 1.1, see assets/fonts/Cinzel-OFL.txt and Barlow-OFL.txt.
   Regenerate by re-downloading the latin woff2 that fonts.googleapis.com
   serves for each. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/cinzel-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-300-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens live in css/theme.css */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background-color: var(--surface);
  color: var(--on-surface);
  font-weight: var(--weight-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* All tokens live in css/theme.css, loaded before this file in every page. */

/* --- Typography --- */
.type-headline-xl {
  font-family: var(--font-headline);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.type-headline-lg {
  font-family: var(--font-headline);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.type-headline-md {
  font-family: var(--font-subhead);
  font-size: 22px;
  font-weight: var(--weight-subhead);
  line-height: 1.3;
}
.type-body-lg { font-family: var(--font-body); font-size: 18px; line-height: 1.65; }
.type-body-md { font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
.type-mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; }
.type-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
h1, h2, .type-headline-xl, .type-headline-lg {
  font-family: var(--font-headline);
  letter-spacing: var(--tracking-tight);
}
h3, h4 {
  font-family: var(--font-subhead);
  font-weight: var(--weight-subhead);
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-desktop);
  padding-right: var(--margin-desktop);
}
.container--narrow { max-width: 900px; }
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Site Header --- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  transition: background-color var(--transition-base);
}
.site-header.is-scrolled {
  background-color: rgba(21, 52, 45, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* BUGFIX: position:fixed + z-index makes .site-header its own stacking context,
   so the z-index on .menu-toggle and .site-header__logo resolved INSIDE it,
   the whole header sat at z-index 100, under the overlay at 200. The close X
   and the logo were painted beneath the open menu: invisible, unclickable, no
   way out except the Escape key. Lift the header itself while the menu is open. */
body.menu-is-open .site-header { z-index: calc(var(--z-overlay) + 1); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--margin-desktop);
  max-width: var(--max-width);
  margin: 0 auto;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
/* The supplied EvE lockup, cream leaf plus wordmark, drawn for dark grounds.
   Served at 1x/2x from assets/, generated by tools/build-brand.mjs. Width and
   height are on the <img> so the header reserves space before it decodes. */
.logo-lockup {
  display: block;
  width: 88px;
  height: auto;
  flex-shrink: 0;
}
.logo-lockup--footer { width: 78px; }

.logo-icon {
  flex-shrink: 0;
  color: var(--on-dark);
}
.footer__brand .logo-icon { color: var(--primary-fixed); }
.logo-mark {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--on-dark);
  letter-spacing: 0.01em;
}
.logo-img {
  height: 32px;
  width: auto;
  display: block;
}

/* --- Menu Toggle --- */
.menu-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
  color: var(--on-dark);
}
.menu-toggle__icon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 26px;
}
.menu-toggle__icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* --- Overlay Menu --- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--dark-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 104px var(--margin-desktop) 48px;
  /* Seven links at up to 5rem outgrow a laptop-height viewport, and the body is
     scroll-locked while the menu is open, so the overlay scrolls on its own.
     overscroll-behavior stops the scroll chaining to the page underneath. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--dark-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity var(--transition-menu),
    visibility var(--transition-menu),
    transform var(--transition-menu);
}
.menu-overlay::-webkit-scrollbar { width: 8px; }
.menu-overlay::-webkit-scrollbar-track { background: var(--dark-border); }
.menu-overlay::-webkit-scrollbar-thumb { background: var(--accent); }
.menu-overlay::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-overlay__nav {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 64px;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  flex: 1;
}
.menu-overlay__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--on-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.menu-link:hover,
.menu-link.active { color: var(--accent); }
.menu-link__arrow {
  font-family: var(--font-sans);
  font-size: 0.55em;
  display: inline-block;
  opacity: 0.35;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.menu-link:hover .menu-link__arrow {
  opacity: 1;
  transform: translateX(6px);
}
.menu-overlay__aside {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 12px;
}
.menu-cta { align-self: flex-start; }
.menu-contact__label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-bottom: 8px;
}
.menu-contact__link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--on-dark-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: block;
}
.menu-contact__link:hover { color: var(--accent); }
.menu-overlay__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid var(--dark-border);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
body.menu-is-open { overflow: hidden; }
@media (max-width: 768px) {
  .menu-overlay { padding: 96px var(--margin-desktop) 40px; }
  .menu-overlay__nav { grid-template-columns: 1fr; gap: 40px; }
  .menu-link { font-size: clamp(2rem, 9vw, 3rem); }
}

/* --- Buttons (sharp corners) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: var(--weight-body);
  cursor: pointer;
  border: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.btn--primary { background-color: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background-color: var(--primary-container); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn--secondary:hover { background-color: var(--primary); color: var(--on-primary); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--inverse-primary); border: 1.5px solid rgba(101,151,106,0.4); }
.btn--ghost:hover { border-color: var(--inverse-primary); background-color: rgba(101,151,106,0.1); transform: translateY(-2px); }
.btn--accent {
  background-color: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  transition: background-color var(--transition-fast);
  text-decoration: none;
}
.btn--accent:hover { background-color: var(--accent-dark); }
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--lg { padding: 18px 36px; font-size: 16px; }

/* --- Cards (sharp corners) --- */
.card {
  background-color: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 0;
  padding: 32px;
  transition: all var(--transition-base);
}
/* Only the primary CTA card and the stat block lift, secondary cards (pillars, values, team, prototypes) stay flat */
.card--elevated { box-shadow: var(--shadow-sm); }
.card--elevated:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--primary-fixed-dim); }
.card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bio-moss);
  margin-bottom: 14px;
  display: block;
}
.card__title {
  font-family: var(--font-subhead);
  font-size: 20px;
  font-weight: var(--weight-subhead);
  line-height: 1.25;
  margin-bottom: 10px;
  color: var(--on-surface);
}
.card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface-variant);
}
/* Inline call to action at the end of a card body (the Where we are status cards
   on index.html and built.html). Shared, not page-specific: it is on both. */
.card__link {
  display: inline-block;
  margin-top: 10px;
  font-weight: var(--weight-body);
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card__link:hover { color: var(--primary-container); }

/* --- Tags (no background, plain colored labels) --- */
.tag {
  display: inline;
  background: none;
  padding: 0;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
}
.tag--primary { color: var(--bio-moss); }
.tag--secondary { color: var(--secondary); }
.tag--tertiary { color: var(--tertiary-container); }

/* --- Sections --- */
.section { padding: var(--section-padding) 0; }
.section--dark { background-color: var(--dark-surface); color: var(--on-primary); }
.section--slate { background-color: var(--industrial-slate); color: var(--on-primary); }
.section--tinted { background-color: var(--surface-container-low); }

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bio-moss);
  margin-bottom: 16px;
  display: block;
}
.section--dark .section__eyebrow { color: var(--on-primary-container); }
.section--slate .section__eyebrow { color: var(--primary-fixed-dim); }

.section__title {
  font-family: var(--font-headline);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  color: var(--on-surface);
}
.section--dark .section__title,
.section--slate .section__title { color: var(--primary-fixed); }

.section__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--on-surface-variant);
  max-width: 620px;
}
.section--dark .section__lead,
.section--slate .section__lead { color: var(--on-primary-container); }

.section__lead + .section__lead { margin-top: 18px; }

.section__header { margin-bottom: 60px; }
.section__header--centered { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* --- Stats --- */
.stat__value {
  font-family: var(--font-headline);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--primary);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface-variant);
  margin-top: 10px;
}
.section--dark .stat__value { color: var(--inverse-primary); }
.section--dark .stat__label { color: var(--on-primary-container); }
.stat__basis {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
  margin-top: 4px;
}
.section--dark .stat__basis { color: var(--on-primary-container); }

/* A section whose last child is a full-bleed band ends on that band, rather
   than on a strip of empty padding under it. */
.section--flush-end { padding-bottom: 0; }

/* --- Stage rail (Where we are, home + built) ---
   A full-width track that fills up to where the company actually is. Node
   states: --done (filled dot), --now (half dot), --next (hollow dot). The
   segment leaving a node is filled when the node after it is done or under
   way, so the fill always stops at the last --now node.
   Horizontal from 769px, vertical below it. */
.stage-rail {
  --rail-gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0 var(--bleed-pad);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rail-gap);
  position: relative;
}
.stage-rail::before,
.stage-rail::after {
  content: "";
  position: absolute;
  top: 9px;
  height: 2px;
  left: 0;
}
.stage-rail::before { right: 0; background: var(--dark-border); }
.stage-rail::after { width: var(--bleed-pad); background: var(--accent); }
.stage-rail__node {
  position: relative;
  padding-top: 44px;
  min-width: 0;
}
.stage-rail__node:has(+ .stage-rail__node--done)::before,
.stage-rail__node:has(+ .stage-rail__node--now)::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: calc(100% + var(--rail-gap));
  height: 2px;
  background: var(--accent);
}
.stage-rail__dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: 2px solid var(--accent);
  background: var(--dark-surface);
}
.stage-rail__node--done .stage-rail__dot { background: var(--accent); }
.stage-rail__node--now .stage-rail__dot {
  background: linear-gradient(90deg, var(--accent) 50%, var(--dark-surface) 50%);
}
.stage-rail__node--next .stage-rail__dot { border-color: var(--on-dark-dim); }
.stage-rail__status {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inverse-primary);
  margin-bottom: 8px;
}
.stage-rail__node--next .stage-rail__status { color: var(--on-dark-dim); }
.stage-rail__title {
  font-family: var(--font-subhead);
  font-size: 20px;
  font-weight: var(--weight-subhead);
  line-height: 1.25;
  color: var(--primary-fixed);
  margin-bottom: 10px;
}
.stage-rail__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-primary-container);
}
.stage-rail__link {
  display: inline-block;
  margin-top: 10px;
  font-weight: var(--weight-body);
  color: var(--inverse-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stage-rail__link:hover { color: var(--on-dark); }
.stage-rail :focus-visible { outline-color: var(--inverse-primary); }
@media (max-width: 1024px) {
  .stage-rail { --rail-gap: 24px; }
}
@media (max-width: 768px) {
  .stage-rail { grid-template-columns: 1fr; --rail-gap: 36px; }
  .stage-rail::before,
  .stage-rail::after {
    top: 0;
    bottom: 0;
    left: calc(var(--bleed-pad) + 9px);
    width: 2px;
    height: auto;
  }
  .stage-rail::after { display: none; }
  .stage-rail__node { padding-top: 0; padding-left: 44px; }
  .stage-rail__node:has(+ .stage-rail__node--done)::before,
  .stage-rail__node:has(+ .stage-rail__node--now)::before {
    top: 0;
    left: 9px;
    width: 2px;
    height: calc(100% + var(--rail-gap));
  }
}

/* --- Icon box (sharp corners) --- */
.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background-color: var(--primary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.icon-box svg {
  width: 22px; height: 22px;
  stroke: var(--primary);
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Page hero strip (inner pages) --- */
.page-hero {
  background-color: var(--industrial-slate);
  padding-top: 72px;
  border-bottom: 2px solid rgba(165,208,182,0.12);
}
.page-hero__strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
}
.page-hero__back {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  transition: color var(--transition-fast);
}
.page-hero__back:hover { color: rgba(255,255,255,0.72); }
.page-hero__sep {
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgba(255,255,255,0.18);
  font-weight: 300;
  line-height: 1;
}
.page-hero__title {
  font-family: var(--font-headline);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--primary-fixed);
  letter-spacing: 0.01em;
  margin: 0;
}

/* --- Footer --- */
.footer {
  background-color: var(--inverse-surface);
  color: var(--inverse-on-surface);
  padding: 80px 0 0;
}
.footer__container {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 80px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--margin-desktop) 64px;
}
.footer__brand .nav__logo-mark { color: var(--primary-fixed); }
.footer__brand .nav__logo-text { color: rgba(238,241,240,0.45); }
.footer__brand p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(238,241,240,0.55);
  margin-top: 16px;
  max-width: 260px;
}
.footer__social { display: flex; gap: 16px; margin-top: 20px; }
.footer__social a { color: rgba(238,241,240,0.55); display: flex; transition: color var(--transition-fast); }
.footer__social a:hover { color: var(--inverse-primary); }
.footer__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238,241,240,0.45);
  margin-bottom: 20px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.footer__col a {
  font-size: 14px;
  color: rgba(238,241,240,0.7);
  transition: color var(--transition-fast);
}
.footer__col a:hover { color: var(--inverse-primary); }
.footer__bottom {
  border-top: 1px solid rgba(238,241,240,0.08);
  padding: 24px var(--margin-desktop);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom p {
  font-family: var(--font-mono);
  font-size: 12px;
  /* Was 0.35 alpha = 2.78:1 on Forest Green, below AA. 0.58 gives 5.06:1. */
  color: rgba(238,241,240,0.58);
}

/* --- Scroll animations ---
   The resting state is VISIBLE. The hidden-then-revealed state is applied only
   under html.js, set by an inline <head> script, so if JavaScript is disabled
   or fails to load, every section renders normally instead of sitting at
   opacity: 0 waiting for an IntersectionObserver that will never run. */
.js .fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}
/* The resting state MUST be transform:none, never translateY(0). Any transform
   value other than none makes the element a containing block for absolutely
   positioned descendants, so a .fade-up wrapper silently captures any panel
   inside it that is meant to position against something further up the tree.
   That is what pinned the Our Approach panel inside the 280px figure column
   (it resolved left/right against .intro__stats instead of .intro__grid). */
.js .fade-up.is-visible { opacity: 1; transform: none; }
.js .fade-in {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1);
}
.js .fade-in.is-visible { opacity: 1; }
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }

/* These durations are literals rather than tokens, so theme.css's reduced-motion
   block does not reach them. Reveal everything immediately instead. */
@media (prefers-reduced-motion: reduce) {
  .js .fade-up,
  .js .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- WCAG AA colour corrections ---------------------------------------------
   BRAND DEVIATION, needs Brenden's sign-off. Measured against the brand-guide
   palette, three greens fail WCAG 2.1 AA (1.4.3, 4.5:1 for normal text) when
   used as text on the light Clay Blue / white / tinted surfaces:

     Sprout Green  #65976A on Clay Blue  2.55:1   (eyebrows, labels, tags)
     Sprout Green  #65976A on white      3.39:1
     Seedling Grn  #4B714F on Clay Blue  4.19:1   (links, secondary buttons)

   These are overridden here rather than in theme.css so the brand-guide values
   stay recorded as the source of truth and this correction stays visible and
   revertible. Sprout and Seedling are untouched wherever they are a fill, a
   border, or type on a dark surface, only the light-surface text roles move.

     --bio-moss  #65976A -> #3B5C40   5.66:1 Clay Blue, 7.52:1 white
     --primary   #4B714F -> #446849   4.76:1 Clay Blue, 6.32:1 white
                                      (white on the button fill: 5.56 -> 6.32)

   The same green fails in the other direction on the dark surfaces, where it is
   too dark rather than too light, and --outline was carrying 10-11px label text
   (including the required stat basis labels) at 1.76:1:

     --inverse-primary   #65976A -> #6EA574   3.96 -> 4.67:1 on Forest Green
     --primary-fixed-dim #65976A -> #6EA574   (same role, dark surfaces)
     --outline           #C9C2BC -> #5F5A55   1.76 -> 6.82:1 on white

   All replacements keep the original hue and move only in lightness; none
   introduces a colour outside the guide's green/grey families. --outline is a
   text colour only in this codebase, the borders use --outline-variant. */
:root {
  --bio-moss:          #3B5C40;
  --primary:           #446849;
  --secondary:         #446849;
  --outline:           #5F5A55;
  --inverse-primary:   #6EA574;
  --primary-fixed-dim: #6EA574;
}

/* --- Focus ---
   One visible ring on every interactive element. Forest Green clears 3:1 against
   Clay Blue (9.7:1) and white (12.9:1); Sprout Green clears 3:1 against the
   Forest Green dark surfaces (3.8:1). */
:focus-visible {
  outline: 3px solid var(--forest-green);
  outline-offset: 2px;
}
.site-header :focus-visible,
.menu-overlay :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.section--slate :focus-visible {
  outline-color: var(--inverse-primary);
}

/* The form inputs declare outline:none in their own rules, which out-specifies
   the bare :focus-visible above. Restore a real ring for keyboard users; the
   mouse-focus border/shadow treatment in contact.css is left as it is. */
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.newsletter-form input:focus-visible {
  outline: 3px solid var(--forest-green);
  outline-offset: 2px;
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: calc(var(--z-overlay) + 1);
  padding: 12px 20px;
  background-color: var(--forest-green);
  color: var(--cloud-white);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 8px; }
main:focus { outline: none; }

/* --- Utilities --- */
.text-center { text-align: center; }
/* Hides the contact form's honeypot. It used to carry style="display:none"
   inline, which forced 'unsafe-inline' into the CSP in _headers for the sake of
   one attribute. Keep this rule, without it the honeypot becomes visible and
   real people start filling it in. */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  :root { --margin-desktop: 32px; --section-padding: 72px; }
}
@media (max-width: 768px) {
  :root { --margin-desktop: 20px; --section-padding: 56px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__container { grid-template-columns: 1fr; gap: 40px; }
  .footer__links { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
  .page-hero { padding-top: 60px; }
}
@media (max-width: 480px) {
  .footer__links { grid-template-columns: 1fr; }
}

.footer__legal-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer__legal-link:hover { color: var(--inverse-primary); }