/* ==========================================================================
   SELEMIKA · site.css
   Reusable system for all pages (nav, footer, shell, type, buttons, chips,
   spec tables, bands, reveals) + a clearly separated HOME HERO section at
   the end. See assets/css/README.md for the class vocabulary.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* brand */
  --c-forest:       #2D8659;
  --c-forest-dark:  #1F5F3E;
  --c-amber:        #E8700A;
  --c-amber-light:  #F4A857;
  --c-amber-deep:   #9C4D03;   /* amber for TEXT on light surfaces (contrast) */
  --c-ink:          #161616;

  /* surfaces */
  --c-paper:        #FBFAF7;
  --c-paper-warm:   #F5F1E8;
  --c-amber-wash:   #FAF0E1;
  --c-night:        #121A15;   /* hero / instrument surface */
  --c-night-panel:  #16211A;

  /* ink variants */
  --c-ink-soft:     rgba(22, 22, 22, 0.68);
  --c-ink-faint:    rgba(22, 22, 22, 0.45);
  --c-line:         rgba(22, 22, 22, 0.14);
  --c-line-strong:  rgba(22, 22, 22, 0.32);

  /* on-dark ink */
  --c-chalk:        #F2F0EA;
  --c-chalk-soft:   rgba(242, 240, 234, 0.66);
  --c-chalk-faint:  rgba(242, 240, 234, 0.38);
  --c-night-line:   rgba(242, 240, 234, 0.12);
  --c-green-bright: #3FA477;   /* green for TEXT/marks on dark surfaces */

  /* dataviz (validated on --c-night) */
  --viz-load:       #E8E5DE;
  --viz-amber:      #E56E0E;
  --viz-green:      #2D8659;

  /* type */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.45rem, 1.2rem + 3.4vw, 4.05rem);
  --fs-h2:      clamp(1.85rem, 1.1rem + 2vw, 2.75rem);
  --fs-h3:      1.22rem;
  --fs-lede:    clamp(1.02rem, 0.95rem + 0.25vw, 1.16rem);
  --fs-body:    1rem;
  --fs-body-lg: 1.13rem;
  --fs-mono:    0.8rem;
  --fs-eyebrow: 0.7rem;

  /* rhythm */
  --space-section: clamp(3.5rem, 2rem + 4.5vw, 6.5rem);
  --shell-max: 1240px;
  --shell-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 72px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --radius: 10px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 200; padding: 0.7rem 1.2rem;
  background: var(--c-ink); color: var(--c-chalk);
  font: 600 0.85rem var(--font-display);
  text-decoration: none;
}
.skip-link:focus-visible { left: 0.5rem; top: 0.5rem; }

/* ---------- 3. Layout: shell + split grids ---------- */
.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.split { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--6-6 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.split--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.split--gap-xl { gap: clamp(2.5rem, 6vw, 6.5rem); }
.split--middle { align-items: center; }

@media (max-width: 900px) {
  .split--4-8, .split--5-7, .split--6-6, .split--8-4 { grid-template-columns: 1fr; }
}

.center-col { max-width: 700px; margin-inline: auto; text-align: center; }

/* ---------- 4. Sections + bands ---------- */
.section { padding-block: var(--space-section); }
.section--ruled { border-top: 1px solid var(--c-line); }
.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }

.band-amber  { background: var(--c-amber-wash); }
.band-forest { background: var(--c-forest-dark); color: var(--c-chalk); }
.band-night  { background: var(--c-night); color: var(--c-chalk); }

.band-forest .eyebrow, .band-night .eyebrow { color: var(--c-amber-light); }
.band-forest :focus-visible, .band-night :focus-visible { outline-color: var(--c-amber-light); }
.band-cta { text-align: right; }
@media (max-width: 900px) { .band-cta { text-align: left; } }

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

/* ---------- 5. Typography ---------- */
.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.h2--onband { color: var(--c-chalk); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-amber-deep);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
/* no leading rule: it read as a stray dash */
.eyebrow--dark { color: var(--c-amber-light); }

.lede { font-size: var(--fs-lede); line-height: 1.7; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.75; color: var(--c-ink-soft); max-width: 62ch; }
.center-col .body-lg { margin-inline: auto; }

.standout {
  margin-top: 1.6rem;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--c-forest-dark);
  border-left: 3px solid var(--c-amber);
  padding-left: 1.1rem;
  max-width: 46ch;
}

.mono-note {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.center-col .mono-note { justify-content: center; margin-top: 1.4rem; }

.h2 + .body-lg, .h2 + .lede { margin-top: 1.4rem; }
.body-lg + p, .standout + p, .mono-note + p { margin-top: 1.75rem; }

/* ---------- 6. Buttons + arrow links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: 700 0.95rem/1 var(--font-display);
  letter-spacing: 0.01em;
  padding: 1rem 1.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 0.68rem 1.2rem; font-size: 0.86rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.02rem; }

.btn-primary { background: var(--c-amber); color: var(--c-ink); }
.btn-primary:hover { background: var(--c-amber-light); }

.btn-outline { background: transparent; border-color: var(--c-line-strong); color: var(--c-ink); }
.btn-outline:hover { border-color: var(--c-ink); }
.btn-outline--dark { border-color: rgba(242, 240, 234, 0.35); color: var(--c-chalk); }
.btn-outline--dark:hover { border-color: var(--c-chalk); }

.btn-arrow { font-family: var(--font-display); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 700 0.98rem var(--font-display);
  color: var(--c-forest-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap 0.2s var(--ease-out), border-color 0.2s ease;
}
.arrow-link:hover { gap: 0.8rem; border-bottom-color: var(--c-forest-dark); }

/* ---------- 7. Chips: live / default / manual ---------- */
.chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem 0.14rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
  white-space: nowrap;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.chip--live    { color: var(--c-forest); }
.chip--default { color: var(--c-ink-soft); }
.chip--default::before { border-radius: 0; }
.chip--manual  { color: var(--c-amber-deep); }
.chip--manual::before { border-radius: 0; transform: rotate(45deg); }

/* on dark surfaces */
.hero .chip--live, .band-night .chip--live, .band-forest .chip--live { color: var(--c-green-bright); }
.hero .chip--default, .band-night .chip--default, .band-forest .chip--default { color: var(--c-chalk-soft); }
.hero .chip--manual, .band-night .chip--manual, .band-forest .chip--manual { color: var(--c-amber-light); }

.chip-legend { display: inline-flex; gap: 0.45rem; flex-wrap: wrap; }

/* ---------- 8. Spec table (instrument panel) ---------- */
.spec-table {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.spec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.4rem;
  background: var(--c-paper-warm);
  border-bottom: 1px solid var(--c-line);
}
.spec-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.spec-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
  border-radius: 3px;
  padding: 0.22rem 0.5rem;
}
.spec-table dl { margin: 0; }
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.85rem 1.4rem;
}
.spec-row + .spec-row { border-top: 1px solid var(--c-line); }
.spec-key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.spec-val {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-forest-dark);
  text-align: right;
}

/* ---------- 9. Credibility strip ---------- */
.strip {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-paper);
}
.strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem 1.1rem;
  padding-block: 1.15rem;
}
.strip-item {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
}
.strip-sep { color: var(--c-amber); font-weight: 700; }

/* ---------- 10. Pillars ---------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; } }

.pillar {
  border-top: 2px solid var(--c-ink);
  padding-top: 1.4rem;
  position: relative;
}
.pillar-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-ink-soft);
  margin-bottom: 1.6rem;
}
.pillar-index::before { content: "0"; }
.pillar-icon {
  color: var(--c-forest);
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
  margin-bottom: 1.1rem;
  display: block;
}
.pillar .h3 { margin-bottom: 0.7rem; max-width: 20ch; }
.pillar p:not(.pillar-index) { color: var(--c-ink-soft); font-size: 0.97rem; }

/* ---------- 11. Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-nav.is-scrolled {
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 24px rgba(22, 22, 22, 0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.nav-word {
  font: 800 1.18rem var(--font-display);
  letter-spacing: -0.015em;
  color: var(--c-forest-dark);
}
.nav-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.1rem);
}
.nav-links a {
  font: 600 0.92rem var(--font-display);
  color: var(--c-forest-dark);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--c-amber-deep); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--c-amber); }
.nav-actions { display: flex; align-items: center; gap: 0.9rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 10px;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--c-forest-dark);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s ease;
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    padding: 0.5rem var(--shell-pad) 1rem;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 0.85rem 0; border-bottom: 1px solid var(--c-line); font-size: 1rem; }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--c-amber); }
  .site-nav.is-open-menu { border-bottom-color: var(--c-line); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- 12. Footer ---------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-chalk-soft);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.75rem;
}
@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr; } }
.footer-logo { display: inline-block; margin-bottom: 1rem; }
.footer-tagline { font-size: 0.95rem; color: var(--c-chalk-soft); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.footer-head {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  margin-bottom: 1rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.footer-col a {
  color: var(--c-chalk-soft);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--c-chalk); }
.site-footer :focus-visible { outline-color: var(--c-amber-light); }
.footer-bottom {
  border-top: 1px solid rgba(242, 240, 234, 0.14);
  padding-top: 1.5rem;
}
.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--c-chalk-soft);
}

/* ---------- 13. Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   HOME HERO · page-specific. Everything below is scoped to .hero and is NOT
   part of the shared vocabulary. Other pages: stop reading here.
   ========================================================================== */

.hero {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(45, 134, 89, 0.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(232, 112, 10, 0.07), transparent 55%),
    var(--c-night);
  color: var(--c-chalk);
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vh, 5rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch; /* columns share one baseline + one bottom edge */
  width: 100%;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1020px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-lede {
  color: var(--c-chalk-soft);
  margin-top: 1.5rem;
  max-width: 56ch;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.1rem;
}
.hero-provenance {
  margin-top: 2.2rem;
  color: var(--c-chalk-soft);
}

/* --- instrument panel --- */
.hero-panel {
  background: rgba(22, 33, 26, 0.72);
  border: 1px solid var(--c-night-line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 0.9rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(242, 240, 234, 0.05);
  display: flex;
  flex-direction: column; /* chart absorbs any stretched height, foot stays pinned */
}
.hero-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.9rem;
}
.hero-panel-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-green-bright);
  flex: none;
}
.hero-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber-light);
  border: 1px solid rgba(244, 168, 87, 0.45);
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

/* readout tiles */
.hero-readouts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-night-line);
  border-block: 1px solid var(--c-night-line);
  margin: 0;
}
@media (max-width: 560px) { .hero-readouts { grid-template-columns: 1fr 1fr; } }
.hero-tile {
  background: var(--c-night-panel);
  padding: 0.75rem 0.85rem 0.7rem;
  transition: background-color 0.5s ease;
}
.hero-tile--demand { background: rgba(45, 134, 89, 0.14); } /* final frame */
.hero-tile dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.4rem;
  margin-bottom: 0.45rem;
  min-height: 2rem;
}
.hero-tile dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-chalk);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.1;
}
.hero-unit { font-size: 0.66rem; color: var(--c-chalk-soft); font-weight: 500; letter-spacing: 0.06em; }
.hero-tile-sub {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-amber-light);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 168, 87, 0.6);
  margin-top: 0.3rem;
}

/* chart */
.hero-chart-wrap {
  padding-top: 0.9rem;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-chart { width: 100%; height: auto; display: block; }

.hero-chart text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--c-chalk-faint);
  letter-spacing: 0.06em;
}
.hc-unit { font-size: 10px; }
.hc-gridline { stroke: rgba(242, 240, 234, 0.07); }
.hc-axis { stroke: rgba(242, 240, 234, 0.25); }

.hc-anno { font-size: 10.5px; letter-spacing: 0.1em; }
.hc-anno--amber { fill: var(--c-amber-light); }
.hc-anno--green { fill: #8FD4B2; }
.hc-anno--chalk { fill: var(--c-chalk-soft); }
.hc-anno--muted { fill: var(--c-chalk-faint); }

.hc-load, .hc-load2 {
  fill: none;
  stroke: var(--viz-load);
  stroke-width: 2;
  stroke-linecap: round;
}
/* final frame: the pre-shave curve has already been replaced by the shaved one */
.hc-load { opacity: 0; }
.hc-threshold-line {
  stroke: rgba(244, 168, 87, 0.55);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}
.hc-peak-path {
  fill: none;
  stroke: var(--viz-amber);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0; /* final frame: the exposure line has been shaved away */
}
.hc-peak-dot { fill: var(--viz-amber); opacity: 0; }
.hc-peak-label { opacity: 0.55; }
.hc-ghost {
  fill: none;
  stroke: rgba(244, 168, 87, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}
.hc-shaved {
  fill: none;
  stroke: var(--c-green-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
}
/* Economics inset. Rest state = docked top-left, opaque card with a real edge.
   Act 4 scales it up to center stage (see timeline below). */
.hc-fin { transform: translate(68px, 26px) scale(0.88); }
.hc-fin-shadow { fill: rgba(0, 0, 0, 0.38); }
.hc-fin-card {
  fill: #1B2721;
  stroke: rgba(242, 240, 234, 0.22);
}
.hc-fin-line { fill: none; stroke-width: 2; stroke-linecap: round; }
.hc-fin-line--amber { stroke: var(--viz-amber); }
.hc-fin-line--green { stroke: var(--c-green-bright); }
.hc-fin-label { font-size: 9.5px; }
.hc-fin-dot { fill: var(--c-chalk); }
.hc-fin-ring { fill: none; stroke: var(--c-chalk); stroke-width: 1; opacity: 0.5; }

.hc-scan-line { stroke-width: 1.5; } /* stroke = soft vertical-fade gradient, set in the SVG */

/* panel foot: legend + replay */
.hero-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.3rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--c-night-line);
  margin-top: 0.4rem;
}
.hero-key {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero-swatch { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.hero-swatch--load { background: var(--viz-load); }
.hero-swatch--amber { background: var(--viz-amber); }
.hero-swatch--green { background: var(--viz-green); height: 7px; opacity: 0.8; }
.hero-replay {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  background: none;
  border: 1px solid var(--c-night-line);
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero-replay:hover { color: var(--c-chalk); border-color: var(--c-chalk-soft); }
.no-js .hero-replay { display: none; }

/* --------------------------------------------------------------------------
   HERO TIMELINE
   Default state (no JS, or prefers-reduced-motion) = composed final frame.
   JS adds .hero--animate (resets everything) then .hero--p1 … .hero--p5.
   -------------------------------------------------------------------------- */

/* -- reset state under .hero--animate -- */
.hero--animate .hc-grid, .hero--animate .hc-ylabels, .hero--animate .hc-xlabels {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.hero--animate .hc-load { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero--animate .hc-load2 { opacity: 0; transition: opacity 0.9s ease; }
.hero--animate .hc-load-label { opacity: 0; transition: opacity 0.5s ease; }
.hero--animate .hc-threshold { opacity: 0; transition: opacity 0.6s ease; }
.hero--animate .hc-peak-path { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero--animate .hc-peak-dot, .hero--animate .hc-peak-label { opacity: 0; transition: opacity 0.45s ease; }
.hero--animate .hero-tile--demand { background: var(--c-night-panel); }
.hero--animate .hc-batt { opacity: 0; transform: translateY(10px); transition: opacity 0.9s ease, transform 0.9s var(--ease-out); }
.hero--animate .hc-ghost { opacity: 0; transition: opacity 0.8s ease; }
.hero--animate .hc-shaved { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero--animate .hc-day { transition: opacity 0.7s ease, transform 0.7s var(--ease-out); }
.hero--animate .hc-fin { opacity: 0; transform: translate(197px, 91px) scale(1.42); transition: opacity 0.65s ease, transform 0.8s var(--ease-out); }
.hero--animate .hc-fin-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero--animate .hc-fin-dot, .hero--animate .hc-fin-ring { opacity: 0; transition: opacity 0.4s ease; }
.hero--animate .hc-fin text { opacity: 0; transition: opacity 0.5s ease; }
.hero--animate .hc-scan { opacity: 0; transition: opacity 1.2s ease; }
.hero--animate .hero-tile-sub { opacity: 0; transition: opacity 0.6s ease; }
.hero--animate .hero-dot { opacity: 0.25; }

/* copy column entrance */
.hero--animate .hero-eyebrow,
.hero--animate .hero-heading-in,
.hero--animate .hero-lede,
.hero--animate .hero-ctas,
.hero--animate .hero-provenance {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out);
}
.hero--p1 .hero-eyebrow, .hero--p1 .hero-heading-in, .hero--p1 .hero-lede,
.hero--p1 .hero-ctas, .hero--p1 .hero-provenance {
  opacity: 1; transform: none;
}
.hero--p1 .hero-heading-in { transition-delay: 0.06s; }
.hero--p1 .hero-lede { transition-delay: 0.14s; }
.hero--p1 .hero-ctas { transition-delay: 0.22s; }
.hero--p1 .hero-provenance { transition-delay: 0.34s; }

/* -- p1: axes + load curve -- */
.hero--p1 .hc-grid, .hero--p1 .hc-ylabels, .hero--p1 .hc-xlabels { opacity: 1; }
.hero--p1 .hc-load {
  transition: stroke-dashoffset 1.9s cubic-bezier(0.45, 0, 0.2, 1);
  stroke-dashoffset: 0;
}
.hero--p1 .hc-load-label { opacity: 1; transition-delay: 1.5s; }

/* -- p2: threshold + amber peak -- */
.hero--p2 .hc-threshold { opacity: 1; }
.hero--p2 .hc-peak-path {
  transition: stroke-dashoffset 1s cubic-bezier(0.45, 0, 0.2, 1) 0.25s;
  stroke-dashoffset: 0;
}
.hero--p2 .hc-peak-dot, .hero--p2 .hc-peak-label { opacity: 1; transition-delay: 1s; }
.hero--p2 .hero-tile--demand { background: rgba(229, 110, 14, 0.14); }

/* -- p3: battery shaves the peak -- */
.hero--p3 .hc-load { opacity: 0; transition: opacity 0.9s ease 0.3s; }
.hero--p3 .hc-load2 { opacity: 1; transition-delay: 0.3s; }
.hero--p3 .hc-batt { opacity: 1; transform: none; }
.hero--p3 .hc-shaved {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.15s;
  stroke-dashoffset: 0;
}
.hero--p3 .hc-ghost { opacity: 1; transition-delay: 0.3s; }
.hero--p3 .hc-peak-path { opacity: 0; transition: opacity 0.7s ease 0.2s; }
.hero--p3 .hc-peak-dot { opacity: 0; transition: opacity 0.4s ease; }
.hero--p3 .hc-peak-label { opacity: 0.55; }
.hero--p3 .hero-tile-sub { opacity: 1; transition-delay: 0.9s; }
.hero--p3 .hero-tile--demand { background: rgba(45, 134, 89, 0.14); }

/* -- p4: the climax. The day recedes, the economics take center stage -- */
.hc-day { transform-box: fill-box; transform-origin: center; }
.hero--p4 .hc-day { opacity: 0.15; transform: scale(0.985); }
.hero--p4 .hc-fin { opacity: 1; transform: translate(197px, 75px) scale(1.5); }
.hero--p4 .hc-fin-line--amber {
  transition: stroke-dashoffset 0.9s var(--ease-out) 0.25s;
  stroke-dashoffset: 0;
}
.hero--p4 .hc-fin-line--green {
  transition: stroke-dashoffset 0.9s var(--ease-out) 0.45s;
  stroke-dashoffset: 0;
}
.hero--p4 .hc-fin-dot, .hero--p4 .hc-fin-ring { opacity: 1; transition-delay: 1.1s; }
.hero--p4 .hc-fin text { opacity: 1; transition-delay: 1.2s; }

/* -- p5: the day returns, the economics dock top-left, settle into the loop -- */
.hero--p5 .hc-day { opacity: 1; transform: none; transition-delay: 0.2s; }
.hero--p5 .hc-fin { transform: translate(68px, 26px) scale(0.88); transition: opacity 0.65s ease, transform 1s var(--ease-out) 0.1s; }
.hero--p5 .hc-scan { opacity: 1; transition-delay: 0.9s; }
.hero--p5 .hero-dot { opacity: 1; transition: opacity 0.8s ease; }

/* steady-state loop animations (also run in the static final frame) */
@media (prefers-reduced-motion: no-preference) {
  .hc-scan-mover { animation: heroScan 13s linear infinite; }
  @keyframes heroScan {
    from { transform: translateX(120px); }
    to   { transform: translateX(768px); }
  }
  .hero--animate:not(.hero--p5) .hc-scan-mover { animation-play-state: paused; }

  .hc-batt-area { animation: heroBreathe 6s ease-in-out infinite; }
  @keyframes heroBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
  }

  .hero-dot { animation: heroBlink 2.6s ease-in-out infinite; }
  @keyframes heroBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 164, 119, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(63, 164, 119, 0); }
  }

  .hc-fin-ring { transform-box: fill-box; transform-origin: center; animation: heroRing 2.4s ease-out infinite; }
  @keyframes heroRing {
    0% { transform: scale(1); opacity: 0.6; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
  }
}

/* small screens: chart text scales with viewBox, so bump user-unit sizes and
   drop minor annotations */
@media (max-width: 640px) {
  .hero-chart text { font-size: 13px; }
  .hc-anno { font-size: 15px; letter-spacing: 0.04em; }
  .hc-fin-label { font-size: 14px; }
  .hc-anno-minor, .hc-fin, .hc-batt-label { display: none; }
  .hero-panel { padding: 0.85rem 0.85rem 0.7rem; }
  .hero-tile dt { min-height: 0; }
}

/* ==========================================================================
   ===== INNER PAGES =====
   Page-specific rules for services / assessments / pricing / about /
   contact. Appended per the system contract; shared rules above untouched.
   ========================================================================== */

/* ---------- Shared: page header + helpers ---------- */
.page-head {
  padding-block: clamp(3.25rem, 2.25rem + 3.5vw, 5.5rem) clamp(2.5rem, 1.75rem + 2.5vw, 3.75rem);
  border-bottom: 1px solid var(--c-line);
}
.page-head .lede { margin-top: 1.4rem; color: var(--c-ink-soft); max-width: 58ch; }
.page-head .mono-note { margin-top: 1.8rem; }

.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) { .split--7-5 { grid-template-columns: 1fr; } }

.eyebrow--center { justify-content: center; }

/* Manrope turns "(c)" into a copyright ligature; this switches it off */
.no-lig { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0, "dlig" 0; }

.band-forest .body-lg, .band-night .body-lg { color: var(--c-chalk-soft); }
.arrow-link--dark { color: var(--c-chalk); }
.arrow-link--dark:hover { border-bottom-color: var(--c-chalk); }

/* Pending value: an unset figure shown honestly (pricing rates, contact slots) */
.val-pending {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  border: 1px dashed var(--c-line-strong);
  border-radius: 3px;
  padding: 0.3rem 0.6rem 0.26rem;
  white-space: nowrap;
}

/* In-development tag (dark instrument surfaces) */
.dev-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber-light);
  border: 1px solid rgba(244, 168, 87, 0.45);
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
}

/* ---------- Flow: engagement path (services, contact) ---------- */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0.9rem;
  margin-top: 2.1rem;
}
.flow-step {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.05rem;
}
.flow-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-amber-deep);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.55rem;
}
.flow-name {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.flow-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: 0.55rem;
}
.flow-arrow { color: var(--c-amber-deep); align-self: center; justify-self: center; flex: none; }
@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); }
}

/* ---------- Services ---------- */
.svc-lead { border-top: 2px solid var(--c-ink); padding-top: 1.4rem; }
.svc-lead .pillar-icon { margin: 0.35rem 0 1.2rem; }
.svc-lead .h2 { max-width: 15ch; }
.svc-lead .body-lg { margin-top: 1.3rem; }
@media (min-width: 901px) {
  .svc-lead { position: sticky; top: calc(var(--nav-h) + 2.25rem); }
  .split--7-5 > .svc-lead { order: 2; }
}
.svc-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 0.4rem;
}
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.7rem;
  color: var(--c-ink-soft);
  line-height: 1.62;
}
.svc-list li + li { border-top: 1px solid var(--c-line); }
.svc-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.42rem;
  width: 7px;
  height: 7px;
  background: var(--c-forest);
}
.svc-body .spec-table { margin-top: 2.25rem; }

/* ---------- Assessments ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
@media (max-width: 1080px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-night-line);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(242, 240, 234, 0.05);
}
.tool-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.3rem;
}
.tool-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-chalk-soft);
  font-variant-numeric: tabular-nums;
}
.tool-card .pillar-icon { color: var(--c-green-bright); }
.tool-card .h3 { color: var(--c-chalk); margin-bottom: 0.75rem; max-width: 18ch; }
.tool-desc { color: var(--c-chalk-soft); font-size: 0.95rem; line-height: 1.7; }
.tool-card .mono-note { color: var(--c-chalk-soft); margin-top: 1.1rem; }
.tool-outputs-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  margin: 1.6rem 0 0.2rem;
}
.tool-outputs { list-style: none; margin: 0; padding: 0; }
.tool-outputs li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--c-chalk);
  padding: 0.62rem 0;
  border-top: 1px solid var(--c-night-line);
  font-variant-numeric: tabular-nums;
}
.tool-outputs .out-i { color: var(--c-green-bright); font-weight: 600; flex: none; }
.tool-foot { margin-top: auto; padding-top: 1.5rem; }
.tool-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  border: 1px dashed rgba(242, 240, 234, 0.32);
  border-radius: 999px;
  padding: 0.72rem 1.15rem;
}
.tool-launch .dev-tag { font-size: 0.54rem; padding: 0.18rem 0.4rem; }
.tool-foot p { margin-top: 1.05rem; }

/* ---------- Pricing ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .price-grid, .price-grid--2 { grid-template-columns: 1fr; } }
.price-grid .spec-table { display: flex; flex-direction: column; }
.spec-body {
  padding: 1.1rem 1.4rem 1.25rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
  flex: 1 1 auto;
}

/* ---------- About ---------- */
.about-statement {
  font-size: clamp(1.55rem, 1rem + 2.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.center-col--wide { max-width: 880px; }
.about-bio p + p { margin-top: 1.5rem; }
.belief-ledger { border-bottom: 1px solid var(--c-line); }
.belief {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1rem, 3vw, 4rem);
  align-items: start;
  padding-block: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  border-top: 1px solid var(--c-line);
}
@media (max-width: 900px) { .belief { grid-template-columns: 1fr; gap: 0.85rem; } }
.belief-title {
  display: flex;
  align-items: baseline;
  gap: 1.15rem;
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
}
.belief-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--c-amber-deep);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.belief-body { color: var(--c-ink-soft); font-size: var(--fs-body-lg); line-height: 1.7; max-width: 48ch; }
.belief-body .mono-note { margin-top: 1rem; }

/* ---------- Contact ---------- */
.book-panel {
  background: var(--c-night);
  color: var(--c-chalk);
  border: 1px solid var(--c-night-line);
  border-radius: 14px;
  padding: 1.15rem 1.25rem 1.1rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(242, 240, 234, 0.05);
  display: flex;
  flex-direction: column;
}
.book-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.9rem;
}
.book-panel-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.book-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-amber-light); flex: none; }
.book-slot {
  border: 1px dashed rgba(242, 240, 234, 0.3);
  border-radius: 10px;
  min-height: clamp(280px, 38vh, 380px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: 2.25rem 1.5rem;
}
.book-slot-title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-chalk);
}
.book-slot-note { font-size: 0.88rem; line-height: 1.6; color: var(--c-chalk-soft); max-width: 34ch; }
.book-panel-foot {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-chalk-soft);
  border-top: 1px solid var(--c-night-line);
  margin-top: 1rem;
  padding-top: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.contact-direct { margin-top: 2.5rem; }
.spec-val a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--c-line-strong); }
.spec-val a:hover { border-bottom-color: var(--c-forest-dark); }

/* ===== TEAM (about page) =====================================================
   Portraits arrive from different sources (a studio headshot, a phone photo),
   so a shared duotone holds them in one system. Any face added later inherits
   it automatically. Colour returns on hover so the people still read as people.
   ============================================================================ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.portrait {
  position: relative;
  margin: 0 0 1.5rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04);
  transition: filter .5s var(--ease-out), transform .5s var(--ease-out);
}

/* forest wash, multiplied over the desaturated photo */
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-forest-dark);
  mix-blend-mode: multiply;
  opacity: .34;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}

.team-member:hover .portrait img,
.team-member:focus-within .portrait img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.02);
}
.team-member:hover .portrait::after,
.team-member:focus-within .portrait::after { opacity: 0; }

.team-name {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.team-role {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-amber-deep);
  margin: .6rem 0 0;
}

.team-bio {
  color: var(--c-ink-soft);
  margin: 1.1rem 0 0;
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .portrait img { transition: none; }
  .portrait::after { transition: none; }
  .team-member:hover .portrait img,
  .team-member:focus-within .portrait img { transform: none; }
}

/* compact team grid: sits in the 8-column cell on the home page */
.team-grid--compact {
  margin-top: 0;
  gap: clamp(1.5rem, .75rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.team-grid--compact .portrait { margin-bottom: 1.15rem; }
.team-grid--compact .team-name { font-size: 1.25rem; }
.team-grid--compact .team-bio { font-size: .95rem; margin-top: .85rem; }