/* ============================================================
   Phi Earth Technologies : Redesign Mockup Stylesheet v2
   Brand palette per official Phi Earth brand guide
   Headings: Ano (brand, self-hosted) with Futura PT / Euclid Flex / Poppins fallback
   Body: Inter | Data and labels: JetBrains Mono
   Implements: 03-design-system.md
   ============================================================ */

/* Brand font, Ano (licensed from Dinamo). Add the licensed files to a /fonts folder
   for production and uncomment. Until then headings fall back to Poppins automatically. */
/*
@font-face {
  font-family: 'Ano';
  src: url('fonts/Ano-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ano';
  src: url('fonts/Ano-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand palette (official) */
  --aqua:       #63CACF;  /* turquoise */
  --ampliblue:  #2CAFCE;  /* sky blue */
  --earth:      #239BAF;  /* teal, primary brand accent */
  --roots:      #0A0A0A;  /* black */
  --moss:       #1D3C38;  /* Moss: sampled, confirm exact hex from brand guide */
  --future:     #FAFAFA;  /* white */

  /* Derived tints and darks */
  --earth-dark:   #17707F;  /* body-size text links, chip text on tint */
  --aqua-wash:    rgba(99, 202, 207, 0.10);
  --aqua-wash-strong: rgba(99, 202, 207, 0.16);
  --ampliblue-wash: rgba(44, 175, 206, 0.12);
  --earth-wash:   rgba(35, 155, 175, 0.10);
  --earth-border: rgba(35, 155, 175, 0.25);
  --aqua-border:  rgba(99, 202, 207, 0.35);
  --line:         rgba(10, 10, 10, 0.10);
  --line-soft:    rgba(10, 10, 10, 0.06);

  /* Text */
  --text-primary:   var(--roots);
  --text-secondary: #3D4442;
  --text-muted:     #6B7472;

  /* Status chips (AA-compliant) */
  --status-operational-bg:   rgba(35, 155, 175, 0.12);
  --status-operational-text: #135A66;
  --status-operational-dot:  #239BAF;

  --status-trial-bg:   #FFF4E0;
  --status-trial-text: #7A4800;
  --status-trial-dot:  #C87700;

  --status-mou-bg:   rgba(44, 175, 206, 0.14);
  --status-mou-text: #135A78;
  --status-mou-dot:  #2CAFCE;

  --status-dev-bg:   #EEF0EF;
  --status-dev-text: #4A5250;
  --status-dev-dot:  #8A9492;

  /* Typography
     Brand font is Ano (licensed, Dinamo). It is not on Google Fonts, so it must be
     self-hosted in production via the @font-face block below. Until the licensed files
     are added, headings fall back through the brand's stated fallbacks (Futura PT Light,
     Euclid Flex Regular) to Poppins, which is loaded and stands in visually.
     Brand rules: -50 tracking on short headlines (<=12 words), leading set to regular,
     bold used sparingly in headings, italics not used for full titles, upper and lower case. */
  --font-display: 'Ano', 'Futura PT', 'Euclid Flex', 'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --tracking-ano: -0.05em;  /* -50 tracking, for Ano short headlines */

  --text-display: 4.25rem;
  --text-h1:      3.25rem;
  --text-h2:      2.125rem;
  --text-h3:      1.375rem;
  --text-h4:      1.125rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-xs:      0.75rem;
  --text-mono:    0.8125rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  --leading-tight:  1.12;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.1em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --max-content: 1160px;
  --max-text:    680px;
  --gutter:      var(--space-8);
  --radius:      6px;
}

/* ── 2. Reset / Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--future);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--earth-dark); }

:focus-visible { outline: 2px solid var(--earth); outline-offset: 3px; }

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.prose { max-width: var(--max-text); }
.prose p + p { margin-top: var(--space-4); }
.prose p { color: var(--text-secondary); }
.legal-copy { max-width: 760px; }
.legal-hero { padding-bottom: var(--space-8); }
.legal-section { padding-top: var(--space-8); }
.legal-copy h2 { margin-top: var(--space-12); margin-bottom: var(--space-5); }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { line-height: 1.8; }

/* Headings: Ano (brand) with fallback, sentence case, light-leaning.
   Short headlines carry the brand -50 tracking. */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-ano);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-ano);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-ano);
}

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-small     { font-size: var(--text-small); }

/* ── 3. Eyebrow Label ──────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--earth);
  display: block;
  margin-bottom: var(--space-4);
}
.eyebrow--rule {
  padding-top: var(--space-3);
  position: relative;
}
.eyebrow--rule::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px;
  border-top: 2px solid var(--earth);
}

/* ── 4. Status Chips ───────────────────────────────────────── */
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: 100px;
  white-space: nowrap;
  line-height: 1.6;
}
.badge::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge--operational { background: var(--status-operational-bg); color: var(--status-operational-text); }
.badge--operational::before { background: var(--status-operational-dot); animation: pulse 2.5s ease-in-out infinite; }
.badge--trial { background: var(--status-trial-bg); color: var(--status-trial-text); }
.badge--trial::before { background: var(--status-trial-dot); }
.badge--mou {
  background: transparent;
  color: var(--status-mou-text);
  padding: 0;
  border-radius: 0;
}
.badge--mou::before { background: var(--status-mou-dot); }
.section--dark .badge--mou,
.cta-band .badge--mou { color: var(--aqua); }
.badge--dev { background: var(--status-dev-bg); color: var(--status-dev-text); }
.badge--dev::before { background: var(--status-dev-dot); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── 5. Buttons ────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.btn--primary {
  background: var(--moss);
  color: var(--future);
  border: 1.5px solid var(--moss);
}
.btn--primary:hover { background: var(--roots); border-color: var(--roots); }
.btn--secondary {
  background: transparent;
  color: var(--earth-dark);
  border: 1.5px solid var(--earth);
}
.btn--secondary:hover { background: var(--earth-wash); }

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

/* Arrow text link */
.arrow-link {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-semi);
  color: var(--earth-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.arrow-link:hover { border-color: var(--earth-dark); }
.arrow-link svg { display: none; }

/* ── 6. Image Slot (placeholder for commissioned assets) ───── */
.img-slot {
  position: relative;
  border: 1px dashed var(--earth-border);
  border-radius: var(--radius);
  background-color: var(--aqua-wash);
  /* Inline SVG contour pattern, brand teal strokes at low opacity */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%23239BAF' stroke-opacity='0.18' stroke-width='1'%3E%3Cpath d='M200 268c-92 6-186-26-204-86-18-62 50-124 142-142 92-18 200 0 244 56 44 56 8 144-60 176-40 18-80-6-122-4z'/%3E%3Cpath d='M204 234c-72 5-146-20-160-67-14-48 39-97 111-111 72-14 156 0 190 44 35 44 7 113-46 138-31 14-63-5-95-4z'/%3E%3Cpath d='M208 200c-53 4-107-15-117-49-10-35 28-71 81-81 53-10 114 0 139 32 26 32 5 82-34 101-22 10-46-4-69-3z'/%3E%3Cpath d='M212 168c-36 2-73-10-80-33-7-24 19-49 55-56 36-7 78 0 95 22 18 22 4 56-23 69-15 7-31-3-47-2z'/%3E%3Cpath d='M216 138c-21 1-43-6-47-20-4-14 11-29 32-33 21-4 46 0 56 13 11 13 3 33-13 41-9 4-19-2-28-1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.img-slot__label {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--earth-dark);
  background: rgba(250, 250, 250, 0.88);
  padding: var(--space-1) var(--space-2);
  border-radius: 3px;
  max-width: calc(100% - var(--space-6));
}

.img-slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.img-slot--screen > img { object-position: center; }
/* Aspect ratio variants */
.img-slot--16x9  { aspect-ratio: 16 / 9; }
.img-slot--16x10 { aspect-ratio: 16 / 10; }
.img-slot--4x5   { aspect-ratio: 4 / 5; }
.img-slot--4x3   { aspect-ratio: 4 / 3; }
.img-slot--3x2   { aspect-ratio: 3 / 2; }
.img-slot--1x1   { aspect-ratio: 1 / 1; }

/* Product-screen variant: browser-chrome top bar drawn in CSS */
.img-slot--screen { padding-top: 34px; }
.img-slot--screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  background: var(--future);
  border-bottom: 1px solid var(--earth-border);
}
.img-slot--screen::after {
  content: '';
  position: absolute;
  top: 13px; left: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 16px 0 0 var(--ampliblue), 32px 0 0 var(--earth);
}

/* ── 7. Top Navigation ─────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--future);
  border-bottom: 1px solid var(--line);
}
.nav-bar {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.brand img { height: 40px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
a.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-1) 0;
  transition: border-color 150ms ease, color 150ms ease;
}
a.nav-link:hover { border-color: var(--aqua); color: var(--text-primary); }
a.nav-link[aria-current="page"] {
  color: var(--earth-dark);
  border-bottom: 2px solid var(--earth);
  font-weight: var(--weight-semi);
}
.nav-cta { flex-shrink: 0; }
.nav-cta-mobile { display: none; } /* shown only in mobile menu via media query */

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-primary);
  align-items: center;
  gap: var(--space-2);
}
.nav-toggle svg { width: 16px; height: 16px; }

/* ── 8. Hero ───────────────────────────────────────────────── */
.hero {
  padding: var(--space-24) 0 var(--space-16);
}
.hero--sub { padding: var(--space-24) 0 var(--space-16); }
.hero-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-16);
  align-items: center;
}
.hero h1 { max-width: 15em; }
.hero-sub-copy {
  max-width: var(--max-text);
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-h4);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}
.hero .btn-row { margin-top: var(--space-8); }

/* Mono-label strip under hero */
.mono-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--aqua-wash);
  padding: var(--space-3) 0;
}
.mono-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--earth-dark);
}

/* ── 9. Sections ───────────────────────────────────────────── */
.section { padding: var(--space-24) 0; }
.section--wash { background: var(--aqua-wash); }
.section--tight { padding: var(--space-16) 0; }
.section--dark {
  background: var(--moss);
  color: var(--future);
}
.section--dark .eyebrow { color: var(--aqua); }
.section--dark .eyebrow--rule::before { border-color: var(--aqua); }
.section--dark .prose p,
.section--dark p { color: rgba(250, 250, 250, 0.82); }
.section--dark h2, .section--dark h3 { color: var(--future); }
.section-head { margin-bottom: var(--space-12); }
.section-head h2 { max-width: 24em; }
.section-head .section-lede {
  margin-top: var(--space-4);
  max-width: var(--max-text);
  color: var(--text-secondary);
}

/* Generic grids */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--sidebar { grid-template-columns: 7fr 5fr; gap: var(--space-16); }
.grid--sidebar-rev { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
.grid--split { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }

/* ── 10. Cards ─────────────────────────────────────────────── */
.card {
  border: 1px solid var(--line);
  background: var(--future);
  padding: var(--space-8);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color 150ms ease, transform 150ms ease;
}
.card:hover { border-color: var(--earth); transform: translateY(-2px); }
.card .eyebrow { margin-bottom: 0; }
.card h3 { font-size: var(--text-h3); }
.card p { color: var(--text-secondary); font-size: var(--text-small); line-height: var(--leading-normal); flex-grow: 1; }
.card .badge-row, .card .arrow-link { margin-top: auto; }
.card--flat:hover { transform: none; }
.card--wash { background: var(--aqua-wash); border-color: var(--earth-border); }
/* Feature card: highlights the core technology offering in a card grid */
.card--feature { background: var(--aqua-wash); border-color: var(--earth); border-width: 1.5px; }
.card--feature .eyebrow { color: var(--earth-dark); }

/* Card SVG line icon */
.card-icon {
  width: 36px; height: 36px;
  color: var(--earth);
  margin-bottom: var(--space-2);
}
.card-icon svg { width: 100%; height: 100%; }

/* Photo-header card (pilot trial cards) */
.card--media { padding: 0; overflow: hidden; }
.card--media .img-slot { border: none; border-bottom: 1px dashed var(--earth-border); border-radius: 0; }
.card--media .card-body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-grow: 1;
}
.card--media .card-body p { color: var(--text-secondary); font-size: var(--text-small); flex-grow: 1; }

/* ── 11. Stat blocks (why now band) ────────────────────────── */
.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.stat-block {
  border-top: 2px solid var(--earth);
  padding-top: var(--space-6);
}
.stat-num {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--earth-dark);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-4);
}
.stat-block h3 { font-size: var(--text-h4); margin-bottom: var(--space-3); }
.stat-block p { color: var(--text-secondary); font-size: var(--text-small); line-height: var(--leading-normal); }

/* ── 12. Step / Process List (horizontal, connected) ───────── */
.steps-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  position: relative;
}
.steps-flow::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 20px; right: 20px;
  border-top: 1px solid var(--earth-border);
}
.step-flow { position: relative; }
.step-flow .step-num {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--future);
  background: var(--earth);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}
.step-flow h3 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.step-flow p { color: var(--text-secondary); font-size: var(--text-small); line-height: var(--leading-normal); }

/* Vertical timeline (pilots methodology) */
.timeline {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-left: var(--space-12);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px; bottom: 8px;
  border-left: 1.5px solid var(--earth-border);
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-12) + 1px);
  top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--earth);
  border: 3px solid var(--future);
  box-shadow: 0 0 0 1.5px var(--earth);
}
.timeline-item .eyebrow { margin-bottom: var(--space-2); }
.timeline-item h3 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.timeline-item p { color: var(--text-secondary); font-size: var(--text-small); max-width: var(--max-text); }

/* ── 13. Chain-of-custody flow diagram ─────────────────────── */
.coc-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  counter-reset: coc;
}
.coc-node {
  counter-increment: coc;
  position: relative;
  border: 1px solid var(--earth-border);
  border-radius: var(--radius);
  background: var(--aqua-wash);
  padding: var(--space-6) var(--space-4);
}
.coc-node::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--space-4) + 3px);
  top: 50%;
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--earth);
  border-right: 1.5px solid var(--earth);
  transform: translateY(-50%) rotate(45deg);
}
.coc-node:last-child::after { display: none; }
.coc-node .coc-step {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--earth-dark);
  display: block;
  margin-bottom: var(--space-2);
}
.coc-node .coc-step::before { content: '0' counter(coc) ' · '; }
.coc-node h3 { font-size: var(--text-body); margin-bottom: var(--space-2); }
.coc-node p { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }

/* ── 14. Callout (what we have not yet proven) ─────────────── */
.callout {
  border-left: 4px solid var(--moss);
  background: var(--aqua-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-8);
}
.callout .section-lede { color: var(--text-secondary); max-width: var(--max-text); }

/* Claim-evidence rows */
.claim-evidence {
  display: grid;
  grid-template-columns: 7fr 5fr;
  border-top: 1px solid var(--line);
}
.claim-evidence:last-of-type { border-bottom: 1px solid var(--line); }
.claim-cell {
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
  border-right: 1px solid var(--line);
}
.claim-cell h3, .claim-cell h4 { margin-bottom: var(--space-3); }
.claim-cell p { color: var(--text-secondary); font-size: var(--text-small); max-width: 38em; }
.evidence-cell {
  padding: var(--space-8) 0 var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
.evidence-data {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--text-secondary);
  line-height: 1.7;
}
.section--dark .evidence-data { color: rgba(250, 250, 250, 0.82); }
.evidence-cell .badge { align-self: flex-start; }

/* ── 15. Definition rows ───────────────────────────────────── */
.def-list { border-top: 1px solid var(--line); }
.def-row {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}
.def-term {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--earth-dark);
  padding-top: 2px;
}
.def-desc { color: var(--text-secondary); font-size: var(--text-small); max-width: 44em; }
.def-desc strong { color: var(--text-primary); font-weight: var(--weight-semi); }

/* ── 16. Audience Columns ──────────────────────────────────── */
.audience-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.audience-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.audience-col .img-slot { margin-bottom: var(--space-2); }
.audience-col h3 { font-size: var(--text-h4); }
.audience-col p { color: var(--text-secondary); font-size: var(--text-small); flex-grow: 1; }
.audience-col .arrow-link { margin-top: auto; }

/* ── 17. Team Grid ─────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.team-member {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  background: var(--future);
  transition: border-color 150ms ease;
}
.team-member:hover { border-color: var(--earth); }
.avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--aqua-wash-strong);
  border: 1px solid var(--aqua-border);
  color: var(--earth-dark);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-small);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar--photo { object-fit: cover; object-position: center top; padding: 0; }
.team-name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-body); line-height: var(--leading-snug); }
.team-title { font-size: var(--text-small); color: var(--text-secondary); margin-top: 2px; }

/* ── 18. Principles ────────────────────────────────────────── */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.principle {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  background: var(--future);
}
.principle h3 { font-size: var(--text-h4); margin-bottom: var(--space-3); }
.principle p { color: var(--text-secondary); font-size: var(--text-small); }

/* ── 19. CTA band (dark) ───────────────────────────────────── */
.cta-band {
  background: var(--moss);
  color: var(--future);
  padding: var(--space-24) 0;
}
.cta-band .cta-rule {
  width: 56px;
  border: none;
  border-top: 3px solid var(--aqua);
  margin-bottom: var(--space-8);
}
.cta-band .eyebrow { color: var(--aqua); }
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 16em;
  color: var(--future);
}
.cta-band p {
  margin-top: var(--space-6);
  max-width: var(--max-text);
  color: rgba(250, 250, 250, 0.82);
}
.cta-band .btn-row { margin-top: var(--space-8); }
/* On dark backgrounds invert: primary = Aqua bg + Roots text */
.cta-band .btn--primary,
.section--dark .btn--primary {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--roots);
}
.cta-band .btn--primary:hover,
.section--dark .btn--primary:hover { background: #7FD6DA; border-color: #7FD6DA; }
.cta-band .btn--secondary,
.section--dark .btn--secondary {
  color: var(--future);
  border-color: rgba(250, 250, 250, 0.5);
}
.cta-band .btn--secondary:hover,
.section--dark .btn--secondary:hover { background: rgba(250, 250, 250, 0.1); }
.cta-band .cta-logo { height: 48px; width: auto; margin-bottom: var(--space-8); }
.section--dark .arrow-link { color: var(--aqua); }
.section--dark .arrow-link:hover { border-color: var(--aqua); }

/* ── 20. Footer (light, quiet) ─────────────────────────────── */
.site-footer {
  background: var(--future);
  border-top: 1px solid var(--line);
  color: rgba(10, 10, 10, 0.65);
  padding: var(--space-16) 0 var(--space-8);
  font-size: var(--text-small);
}
.footer-grid {
  display: grid;
  grid-template-columns: 4fr 2.5fr 2.5fr 3fr;
  gap: var(--space-8) var(--space-8);
}
.footer-logo { height: 36px; width: auto; margin-bottom: var(--space-4); }
.footer-tagline { color: rgba(10, 10, 10, 0.6); max-width: 22em; }
.footer-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--earth-dark);
  margin-bottom: var(--space-4);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a {
  color: rgba(10, 10, 10, 0.7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}
.footer-links a:hover { color: var(--earth-dark); border-color: var(--aqua); }
.footer-contact p { margin-bottom: var(--space-3); }
.footer-contact a { color: rgba(10, 10, 10, 0.7); text-decoration: none; border-bottom: 1px solid rgba(10, 10, 10, 0.2); }
.footer-contact a:hover { color: var(--earth-dark); border-color: var(--aqua); }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.linkedin-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--earth-dark);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  color: rgba(10, 10, 10, 0.45);
  font-size: var(--text-xs);
}
.footer-bottom a { color: rgba(10, 10, 10, 0.45); text-decoration: none; }
.footer-bottom a:hover { color: var(--earth-dark); }
.footer-legal { display: flex; gap: var(--space-6); list-style: none; }

/* ── 21. Forms / Contact ───────────────────────────────────── */
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--future);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color 150ms ease;
}
.contact-card:hover { border-color: var(--earth); }
.contact-card h3 { font-size: var(--text-h4); }
.contact-card p { color: var(--text-secondary); font-size: var(--text-small); flex-grow: 1; }
.contact-meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--text-secondary);
  line-height: 1.8;
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.contact-meta a { color: var(--earth-dark); text-decoration: none; border-bottom: 1px solid var(--earth-border); }
.contact-meta a:hover { border-color: var(--earth-dark); }
.contact-meta .meta-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.contact-meta .meta-label:first-child { margin-top: 0; }

.office-block {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.9;
  color: var(--text-secondary);
}
.office-block .meta-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}
.office-block a { color: var(--earth-dark); text-decoration: none; border-bottom: 1px solid var(--earth-border); }
.office-block a:hover { border-color: var(--earth-dark); }

/* ── 21b. Updates page: filters, post cards ────────────────── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.filter-pill {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--earth-dark);
  background: transparent;
  border: 1.5px solid var(--earth);
  border-radius: 100px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.filter-pill:hover { background: var(--earth-wash); }
.filter-pill[aria-pressed="true"] {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--future);
}

/* Category chips on post cards */
.cat-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 100px;
  line-height: 1.6;
}
.cat-chip--news    { background: var(--ampliblue-wash); color: #135A78; }
.cat-chip--article { background: var(--earth-wash);     color: #135A66; }

.post-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Post thumbnails: fixed 16:10, cover crop */
.post-thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--aqua-wash);
}
.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Post card */
.post-card h3 { font-size: var(--text-h4); line-height: var(--leading-snug); }
.post-card h3 a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 150ms ease;
}
.post-card h3 a:hover { color: var(--earth-dark); }
.post-card .post-thumb,
.post-card .img-slot { margin-bottom: var(--space-2); }
.post-card .img-slot { aspect-ratio: 16 / 10; }

/* Featured post: thumbnail left, content right */
.post-featured {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-12);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--future);
  padding: var(--space-8);
  transition: border-color 150ms ease;
}
.post-featured:hover { border-color: var(--earth); }
.post-featured h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
.post-featured h2 a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 150ms ease;
}
.post-featured h2 a:hover { color: var(--earth-dark); }
.post-featured p { color: var(--text-secondary); }
.post-featured .post-meta { margin-bottom: var(--space-4); }
.post-featured .arrow-link { margin-top: var(--space-6); }

@media (max-width: 768px) {
  .post-featured { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
}

/* Migrated article archive */
.article-hero { padding: var(--space-16) 0 0; }
.article-image { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--radius); }
.article-page { padding: var(--space-12) 0 var(--space-24); }
.article-body { max-width: 780px; margin: 0 auto; }
.article-body h1 { margin-bottom: var(--space-6); }
.article-body h2, .article-body h3, .article-body h4, .article-body h5 { margin: var(--space-12) 0 var(--space-4); }
.article-body p, .article-body ul, .article-body ol, .article-body blockquote { margin: 0 0 var(--space-6); color: var(--text-secondary); }
.article-body ul, .article-body ol { padding-left: var(--space-6); }
.article-body img { width: 100%; height: auto; margin: var(--space-8) 0; }
.article-body .qodef-e-about-info { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }

/* ── 22. Utility ───────────────────────────────────────────── */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

.rule { border: none; border-top: 1px solid var(--line); }

.note-strip {
  border-left: 3px solid var(--earth);
  background: var(--aqua-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-small);
  color: var(--text-secondary);
  max-width: var(--max-text);
}
.note-strip strong { color: var(--text-primary); }

/* ── 23. Responsive: single breakpoint at 768px ────────────── */
@media (max-width: 768px) {
  :root {
    --gutter: var(--space-4);
    --text-display: 2.75rem;
    --text-h1: 2.125rem;
    --text-h2: 1.625rem;
  }

  .section { padding: var(--space-16) 0; }
  .hero, .hero--sub { padding: var(--space-16) 0 var(--space-12); }
  .cta-band { padding: var(--space-16) 0; }
  .site-footer { padding: var(--space-16) 0 var(--space-8); }
  .section-head { margin-bottom: var(--space-8); }

  /* Nav collapses */
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-bar { height: 64px; }
  .brand img { height: 32px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0; right: 0;
    background: var(--future);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--line-soft); }
  .nav-links li:last-child { border-bottom: none; }
  a.nav-link {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: none;
  }
  a.nav-link[aria-current="page"] { border-bottom: none; }
  .nav-links .nav-cta-mobile { display: block; margin-top: var(--space-4); border-bottom: none; }
  .nav-links .nav-cta-mobile .btn { display: block; width: 100%; }

  /* Split layouts stack: image slot after copy */
  .hero-split, .grid--split, .grid--sidebar, .grid--sidebar-rev,
  .grid--2, .grid--3, .grid--4,
  .stat-band, .audience-split, .principles, .footer-grid { grid-template-columns: 1fr; }
  .grid--sidebar, .grid--sidebar-rev, .grid--split, .hero-split { gap: var(--space-8); }
  .grid--sidebar-rev > :first-child { order: 2; }
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* Process steps stack vertically with left line */
  .steps-flow { grid-template-columns: 1fr; gap: var(--space-8); }
  .steps-flow::before {
    top: 20px; bottom: 20px; left: 19px; right: auto;
    border-top: none;
    border-left: 1px solid var(--earth-border);
  }
  .step-flow { padding-left: var(--space-16); }
  .step-flow .step-num { position: absolute; left: 0; top: 0; margin-bottom: 0; }

  /* Chain-of-custody flow wraps vertically */
  .coc-flow { grid-template-columns: 1fr; }
  .coc-node::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(-1 * var(--space-4) + 2px);
    transform: translateX(-50%) rotate(135deg);
  }

  .claim-evidence { grid-template-columns: 1fr; }
  .claim-cell { border-right: none; padding: var(--space-6) 0 var(--space-3); }
  .evidence-cell { padding: 0 0 var(--space-6); }

  .def-row { grid-template-columns: 1fr; gap: var(--space-2); }

  .timeline { padding-left: var(--space-8); }
  .timeline-item::before { left: calc(-1 * var(--space-8) + 1px); }

  /* CTAs full width */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }

  .callout { padding: var(--space-6); }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Technology page
   Two-layer stack, mechanism cards, results table,
   digital-layer steps, sub-heads, status callout.
   ============================================================ */

/* Sub-section headings within a section */
.sub-head {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
}
.sub-lede {
  color: var(--text-secondary);
  max-width: var(--max-text);
  margin-bottom: var(--space-8);
}
.eyebrow--rule + .sub-lede { margin-top: var(--space-4); }

/* THE STACK: two summary cards + connector */
.stack-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  position: relative;
}
.stack-card {
  border: 1px solid var(--earth-border);
  background: var(--future);
  border-radius: var(--radius);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stack-card .eyebrow { margin-bottom: 0; }
.stack-card h3 { font-size: var(--text-h3); }
.stack-card p { color: var(--text-secondary); font-size: var(--text-small); }
.stack-connector {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 2px solid var(--earth-border);
  color: var(--text-secondary);
  font-size: var(--text-small);
  max-width: var(--max-text);
  position: relative;
}
.stack-connector::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--aqua-wash);
  border-right: 2px solid var(--earth-border);
  border-bottom: 2px solid var(--earth-border);
}

/* Mechanism cards (Layer 1, five biological mechanisms) */
.mech-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.mech-card {
  display: grid;
  grid-template-columns: 5rem minmax(14rem, 0.7fr) minmax(18rem, 1fr);
  column-gap: var(--space-8);
  align-items: baseline;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: var(--space-8) 0;
}
.mech-card:hover { border-color: var(--line); }
.mech-num {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--earth-dark);
  display: block;
  margin: 0;
}
.mech-card h4 { font-size: var(--text-h4); margin: 0; }
.mech-card p { color: var(--text-secondary); font-size: var(--text-small); line-height: var(--leading-normal); }

[hidden] { display: none !important; }

/* Documented results table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.results-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: var(--text-small);
}
.results-table th,
.results-table td {
  text-align: left;
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.results-table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--earth-dark);
  border-bottom: 2px solid var(--earth-border);
}
.results-table tbody th {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
}
.results-table td.num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--earth-dark);
  white-space: nowrap;
}
.results-table td:last-child { color: var(--text-secondary); padding-right: 0; }

/* Status separation callout: visually distinct from the results table above */
.callout--status {
  border-left: 4px solid var(--moss);
  background: var(--aqua-wash-strong);
  box-shadow: 0 1px 0 var(--earth-border);
}
.callout--status h3 { color: var(--text-primary); }

/* Before you deploy: bordered consideration list */
.consider-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 100%;
}
.consider-list .note-strip { max-width: 100%; }

/* Layer 2 digital: three numbered layers (vertical) */
.layer-stack {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.layer-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--future);
  padding: var(--space-6);
}
.layer-num {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--future);
  background: var(--earth);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.layer-step h4 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.layer-step p { color: var(--text-secondary); font-size: var(--text-small); line-height: var(--leading-normal); }

@media (max-width: 768px) {
  .stack-pair { grid-template-columns: 1fr; }
  .stack-connector::before { left: 28px; }
  .mech-grid { grid-template-columns: 1fr; }
  .mech-card {
    grid-template-columns: 3rem 1fr;
    row-gap: var(--space-3);
  }
  .mech-card p { grid-column: 2; }
}

/* ============================================================
   Projects
   Project-as-product-page model: reusable spec block,
   project header subhead, highlight bullets, partner block.
   Reuses .card--media, .img-slot, .timeline, .badge--*,
   .cta-band, eyebrow labels, and the mono evidence styling.
   ============================================================ */

/* Spec block: the product-spec strip (label + value pairs, mono).
   Horizontal on desktop, stacking on mobile. Used in the project
   header, repeated at the bottom of each project page. */
.spec-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-12);
  align-items: flex-start;
  border-top: 1px solid var(--earth-border);
  border-bottom: 1px solid var(--earth-border);
  padding: var(--space-6) 0;
}
.spec-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.spec-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
}
.spec-value {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--earth-dark);
  line-height: var(--leading-snug);
  max-width: 22em;
}
.spec-item--status { justify-content: flex-start; }
.spec-item--status .badge-row { margin-top: 2px; }

/* Condensed spec list for portfolio cards (vertical key/value lines) */
.spec-condensed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-4);
  margin: 0;
}
.spec-condensed > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  column-gap: var(--space-5);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.spec-condensed dt,
.spec-condensed .spec-c-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.spec-condensed dd,
.spec-condensed .spec-c-value {
  color: var(--earth-dark);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Project header: location subhead under the H1 */
.project-subhead {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--earth-dark);
  margin-top: var(--space-4);
}

/* Highlight bullets: bold block label + detail, border-top accent */
.highlight-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.highlight-item {
  border-top: 2px solid var(--earth);
  padding-top: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
}
.highlight-item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h4);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

/* Partner logo cards */
.partner-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.partner-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--future);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.partner-logo-slot {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  box-shadow: 0 8px 24px rgba(14, 35, 31, 0.06);
}

.partner-logo-slot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 72px;
  object-fit: contain;
}

.partner-strip__logos .partner-logo-slot img {
  height: 58px;
  margin-inline: auto;
}

.partner-strip__logos .partner-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
}
.partner-name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h4);
}
.partner-item p { color: var(--text-secondary); font-size: var(--text-small); }

/* Pipeline card (no link): quieter than active project cards */
.card--pipeline { opacity: 0.92; }
.card--pipeline:hover { transform: none; border-color: var(--line); }

/* Homepage partner strip */
.partner-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-12) 0;
  background: var(--future);
}
.partner-strip__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--space-6);
}
.partner-strip__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}
.partner-strip__logos .partner-logo-slot { min-width: 160px; text-align: center; }
.card--pipeline .pipeline-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: auto;
}

@media (max-width: 768px) {
  .spec-block { flex-direction: column; gap: var(--space-6); }
  .highlight-list { grid-template-columns: 1fr; gap: var(--space-6); }
  .partner-list { grid-template-columns: 1fr; }
}