/* ==========================================================================
   distilled.build — styles
   Tokens and rules per distilled-build-design-brief.md §4–§7
   ========================================================================== */

:root {
  --navy: #1A3458;
  --navy-2: #22406A;
  --navy-mist: #B9CBDE;
  --copper: #B06F2E;
  /* WCAG 1.4.3: mid copper is 3.8:1 on cream — too light for small text / button fills.
     copper-a11y passes 4.5:1 on every light ground; keep --copper for decorative art
     (scene, fire, logo) where contrast rules don't apply */
  --copper-a11y: #986027;
  --copper-deep: #8A5A24;
  --copper-light: #D9A15E;
  --cream: #FAF6EE;
  --cream-deep: #F0E2C8;
  --ink-soft: #5A6B82;
  --go: #3A8A5C;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Fraunces settings matching the logo lockup */
  --fraunces-axes: 'opsz' 40, 'SOFT' 50, 'WONK' 0;

  --max-width: 1160px;
  --radius: 14px;

  /* one spacing scale for all section padding (punch list #5) */
  --section-pad: clamp(3.5rem, 7vw, 6rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html { overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fraunces-axes);
  color: var(--navy);
  line-height: 1.08;
}

p { max-width: 62ch; }

a { color: var(--copper-deep); }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- shared atoms ---------------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--copper-a11y);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .glyph { width: 14px; height: 18px; flex: none; }
/* on navy grounds the mid/deep coppers both fail — copper-light passes at 5.5:1 */
.proof .eyebrow, .closing .eyebrow { color: var(--copper-light); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 15px 30px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-copper {
  background: var(--copper-a11y);
  color: var(--cream);
}
.btn-copper:hover {
  background: var(--copper-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(138, 90, 36, 0.28);
}
.btn-ghost-navy {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(250, 246, 238, 0.45);
}
.btn-ghost-navy:hover { border-color: var(--cream); transform: translateY(-2px); }

.link-arrow {
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1.5px solid var(--copper-light);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--copper-deep); border-bottom-color: var(--copper-deep); }

/* --- header ----------------------------------------------------------- */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: 26px 0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header .lockup img { height: 44px; width: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav a:not(.btn) {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--copper-deep); }
.site-nav .btn { padding: 10px 22px; font-size: 15px; }

@media (max-width: 720px) {
  .site-nav a:not(.btn) { display: none; }
  .site-header .lockup img { height: 36px; }
}

/* --- hero ------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cream);
}
/* copy sits left, in the .wrap column, overlapping the scene's empty sky;
   the copy block must stay within ~40% of the viewport so the sub/CTAs
   clear the still's steam and swan neck (scene x ≥ 42%) */
.hero-copy {
  position: relative;
  z-index: 10;
  width: 100%;
  /* 40px wider than .wrap on each side — pushes the copy (and the mirrored
     live-card offset below) out from the center so the still gets breathing room */
  max-width: calc(var(--max-width) + 80px);
  margin: 0 auto;
  text-align: left;
  padding: max(12vh, 120px) 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.hero-copy h1 {
  font-size: clamp(44px, 5.5vw, 80px);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.hero-copy .sub {
  font-size: 19px;
  max-width: 44ch;
  margin: 0;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 8px;
}

/* hero entrance choreography (once per session, ≤1.2s) */
.hero-anim .hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.hero-anim .hero-copy > *:nth-child(2) { animation-delay: 0.1s; }
.hero-anim .hero-copy > *:nth-child(3) { animation-delay: 0.2s; }
.hero-anim .hero-copy > *:nth-child(4) { animation-delay: 0.3s; }
.hero-anim .scene .layer {
  opacity: 0;
  transform: translateY(30px);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.hero-anim .scene .layer-far  { animation-delay: 0.15s; }
.hero-anim .scene .layer-mid  { animation-delay: 0.3s; }
.hero-anim .scene .layer-near { animation-delay: 0.45s; }
.hero-anim .hero-drop {
  animation: hero-drop-fall 0.9s cubic-bezier(0.5, 0, 0.9, 0.4) 0.3s both;
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-drop-fall {
  from { transform: translateY(-260px); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}

/* the illustrated scene — pulled up under the left-aligned copy so its empty
   sky sits behind the text and the left hill line lands 10–20px below the CTA
   row (the -15.4vw is calibrated to the far-hill curve at ~45% of scene height);
   bottom hills still tuck slightly under the (same-navy) proof band */
.scene {
  position: relative;
  margin-top: calc(-15.4vw + 10px);
  margin-bottom: max(-48px, -4vw);
  line-height: 0;
}
/* the sky-trimmed viewBox (y=100) clips the top steam puff mid-drift; let content
   overflow the SVG viewport, then re-clip sides/bottom only so the hills can't
   paint over the proof band — steam gets 120px of headroom above the box */
.scene svg { width: 100%; height: auto; display: block; overflow: visible; clip-path: inset(-120px 0 0 0); }
.scene .layer { will-change: transform; }

/* steam drift + drip loop (subtle ambient motion) */
.steam-puff { animation: steam-drift 9s ease-in-out infinite alternate; }
.steam-puff.s2 { animation-duration: 11s; animation-delay: -3s; }
.steam-puff.s3 { animation-duration: 13s; animation-delay: -6s; }
@keyframes steam-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(26px, -14px); }
}
/* hero drips: emitted at the spout mouth (see EMISSION POINT comment in index.html),
   fall 131px on one vertical line to the glass rim (y 345 → 476), fading as they land */
.drip { animation: drip-fall 2.6s cubic-bezier(0.5, 0, 0.9, 0.4) infinite; opacity: 0; }
.drip.d2 { animation-delay: 1.3s; }
@keyframes drip-fall {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  74%  { transform: translateY(120px); opacity: 1; }
  84%  { transform: translateY(131px); opacity: 0; }
  100% { transform: translateY(131px); opacity: 0; }
}

/* hearth fires under both stills: gentle flame flicker, breathing glow, drifting embers */
.fl {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flick 1.9s ease-in-out infinite alternate;
}
.fl.f2 { animation-duration: 1.5s; animation-delay: -0.6s; }
.fl.f3 { animation-duration: 2.3s; animation-delay: -1.1s; }
.fl.f4 { animation-duration: 1.7s; animation-delay: -0.3s; }
@keyframes flick {
  from { transform: scale(1, 0.94) skewX(0deg); }
  to   { transform: scale(1.05, 1.07) skewX(-2.5deg); }
}
.fire-glow {
  transform-box: fill-box;
  transform-origin: 50% 80%;
  animation: glow-pulse 3.4s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
  from { opacity: 0.75; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1.04); }
}
.ember { animation: ember-rise 3.2s ease-out infinite; opacity: 0; }
.ember.e2 { animation-delay: 1.1s; }
.ember.e3 { animation-delay: 2.2s; }
@keyframes ember-rise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.85; }
  70%  { opacity: 0.4; }
  100% { transform: translateY(-16px); opacity: 0; }
}

/* closing-scene drip: short fall from spout mouth ending at the cup rim (never past it),
   with a small ripple inside the cup timed to each landing */
.cup-drip { animation: cup-drip-fall 2.6s cubic-bezier(0.5, 0, 0.9, 0.4) infinite; opacity: 0; }
@keyframes cup-drip-fall {
  0%   { transform: translateY(-6px); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: translateY(6px); opacity: 1; }
  88%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(11px); opacity: 0; }
}
.cup-ripple {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: cup-ripple 2.6s ease-out infinite;
}
@keyframes cup-ripple {
  0%, 68% { opacity: 0; transform: scale(0.4); }
  80%     { opacity: 0.9; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim .hero-copy > *,
  .hero-anim .scene .layer,
  .hero-anim .hero-drop { animation: none; opacity: 1; transform: none; }
  .steam-puff, .drip, .cup-drip, .cup-ripple, .fl, .fire-glow, .ember { animation: none; }
  .drip, .cup-drip { opacity: 1; }
  .cup-ripple { opacity: 0; }
  .ember { opacity: 0.6; }
}

/* floating live status card — floats in the empty cream sky top-right,
   top-aligned with the copy block, right edge on the .wrap content line */
.live-card {
  position: absolute;
  z-index: 20;
  right: max(24px, calc((100% - (var(--max-width) + 80px)) / 2 + 24px));
  top: max(12vh, 120px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(26, 52, 88, 0.18);
  padding: 20px 24px;
  font-family: var(--font-mono);
  /* 320px used to be enough, but the grid's shrink-to-fit sizing doesn't grow
     for the QA Automation cell's auto column, so it wrapped instead of
     widening -- 424px is the measured floor for that string to stay on one
     line at its aligned position (see .lc-stats-secondary below). */
  min-width: 424px;
  text-align: left;
}
.live-card .lc-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--copper-a11y);
  margin-bottom: 10px;
}
.live-card .lc-metric {
  font-size: 22px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}
.live-card .lc-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
}
.live-card .lc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--go);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(58, 138, 92, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(58, 138, 92, 0); }
}
/* both stat rows share the same 3-column grid so row-2 columns line up
   under row-1's (QA Automation starts exactly where Fields does) */
.live-card .lc-stats {
  display: grid;
  /* cols 1-2 are fixed so the two separate row-grids produce identical tracks —
     column 3 (Fields / QA Automation) starts at the same x in both */
  grid-template-columns: 84px 72px auto;
  justify-content: start;
  column-gap: 28px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 52, 88, 0.1);
}
.live-card .lc-stat {
  display: flex;
  flex-direction: column;
}
.live-card .lc-stat-value {
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.2;
}
.live-card .lc-stat-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}
/* second stats row shares the first row's top border instead of adding its own;
   Code Test Coverage spans columns 1-2 same as before. The Objects/Fields value
   spans stretch to fill their whole grid column (flex-item cross-axis stretch),
   so the VISIBLE digits sit narrower than the column -- "82" renders from
   x=136 to ~157.6, "1107" from x=236. QA Automation's left edge is pulled to
   x=~197, the midpoint between those two rendered glyph edges (not the raw
   column boundaries), so it reads as centered in the actual whitespace.
   Holds regardless of digit values since the font is monospace -- would need
   re-tuning only if objectCount/fieldCount changes digit COUNT (e.g. 2-digit
   Objects going to 3 digits). */
.live-card .lc-stats-secondary {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}
.live-card .lc-stats-secondary .lc-stat:first-child { grid-column: 1 / 3; }
.live-card .lc-stats-secondary .lc-stat:last-child { margin-left: -39px; }
/* QA automation pending state: copper, with the little robot;
   line-height matches the 18px stat values (18 × 1.2) so both rows' labels sit level */
.live-card .lc-qa-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 21.6px;
  color: var(--copper-deep);
}
.live-card .lc-qa-icon { width: 15px; height: 15px; flex: none; }
.live-card .lc-updated {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(26, 52, 88, 0.1);
}
@media (prefers-reduced-motion: reduce) { .live-card .lc-dot { animation: none; } }

/* below 900px the left-hero composition can't hold (copy and still collide):
   fall back to the centered stack — copy, then card, then scene */
@media (max-width: 900px) {
  .hero-copy {
    text-align: center;
    align-items: center;
    padding-top: max(11vh, 104px);
  }
  .hero-copy .sub { margin: 0 auto; }
  .hero-ctas { justify-content: center; }
  .scene { margin-top: 32px; order: 3; }
  .live-card {
    position: static;
    order: 2;
    margin: 28px auto 0;
    /* WCAG 1.4.10: min-width 320 + padding overflows a 320px viewport and
       overflow-x: clip silently cuts the right edge off */
    min-width: 0;
    width: min(320px, calc(100vw - 32px));
  }
}
/* tighten the fixed stat tracks so the card's grid fits a 320px viewport */
@media (max-width: 380px) {
  .live-card .lc-stats { grid-template-columns: 72px 60px auto; column-gap: 16px; }
}

/* --- proof band (navy, scroll-pinned) --------------------------------- */

.proof {
  background: var(--navy);
  position: relative;
}
.proof-track { /* height set by JS on desktop for the pinned scroll */ }
.proof-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0;
}
/* .wrap's auto side margins stop it stretching as a flex item, so it shrink-wraps
   to its widest text line and collapses the stage vignettes — force full width
   (max-width still caps it at 1160, auto margins still center it) */
.proof-pin .wrap { width: 100%; }
.proof h2 {
  color: var(--cream);
  font-size: clamp(30px, 4vw, 40px);
  margin: 14px 0 8px;
}
.proof .proof-intro { color: var(--navy-mist); max-width: 58ch; }

.proof-stage-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 36px; /* step list + active panel read as one unit */
  margin-top: 40px;
  align-items: start;
}

.stage-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.stage-list button {
  display: flex;
  gap: 14px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid rgba(185, 203, 222, 0.25);
  padding: 12px 0 12px 18px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--navy-mist);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.stage-list .stage-num {
  font-family: var(--font-mono);
  font-size: 12px;
  /* full-strength copper-light: the old 0.7 opacity dimmed it to 3.4:1 on navy */
  color: var(--copper-light);
}
.stage-list li.active button {
  color: var(--cream);
  border-left-color: var(--copper-light);
}

.stage-panels { position: relative; min-height: 480px; min-width: 0; }
.stage-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
}
.stage-panel.active { opacity: 1; transform: none; pointer-events: auto; }

.stage-desc h3 { color: var(--cream); font-size: 26px; margin-bottom: 10px; }
.stage-desc p { color: var(--navy-mist); font-size: 16px; }

/* product visual vignette — replace with real screenshots before launch */
.stage-visual {
  grid-row: 1 / span 2;
  grid-column: 1;
  min-width: 0;
  background: var(--navy-2);
  border: 1px solid rgba(185, 203, 222, 0.18);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.4);
}
.stage-panel { grid-template-columns: 1fr 300px; grid-template-rows: auto auto; }
.stage-meta { grid-column: 2; display: flex; flex-direction: column; gap: 30px; }

.vignette {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.vignette .v-bar {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* the two labels must never run together when the column is tight;
     wrap to a second line instead of colliding or clipping */
  flex-wrap: wrap;
  gap: 2px 14px;
}
.vignette .v-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.v-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #E8E2D4;
  border-radius: 10px;
  padding: 8px 12px;
  background: #FDFBF6;
  min-width: 0;
}
.v-row .v-name {
  color: var(--navy);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.v-tag.ok   { background: rgba(58, 138, 92, 0.14); color: #2E6B45; }
.v-tag.cop  { background: rgba(176, 111, 46, 0.14); color: var(--copper-deep); }
.v-tag.navy { background: rgba(26, 52, 88, 0.1); color: var(--navy); }
.v-note { font-size: 11px; color: var(--ink-soft); }

/* time distilled metric */
.time-distilled .td-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 10px;
}
.time-distilled .td-before {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--navy-mist);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--copper-light);
}
.time-distilled .td-after {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(44px, 5vw, 68px);
  color: #fff;
  line-height: 1.05;
  margin-top: 4px;
}
.time-distilled .td-after .td-unit { font-size: 0.42em; color: var(--navy-mist); margin-left: 6px; }

.proof-progress {
  display: none;
}

/* proof band mobile fallback: vertical stepper */
@media (max-width: 900px) {
  .proof-track { height: auto !important; }
  .proof-pin { position: static; min-height: 0; }
  .proof-stage-layout { grid-template-columns: 1fr; gap: 24px; }
  .stage-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
  }
  .stage-list button {
    border-left: 0;
    border-bottom: 2px solid rgba(185, 203, 222, 0.25);
    padding: 8px 12px;
    white-space: nowrap;
  }
  .stage-list li.active button { border-bottom-color: var(--copper-light); }
  .stage-panels { min-height: 0; }
  .stage-panel {
    position: static;
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .stage-panel.active { display: grid; }
  .stage-visual { grid-row: auto; grid-column: 1; }
  .stage-meta { grid-column: 1; }
}

/* --- demo teaser -------------------------------------------------------- */

/* demo-teaser and hood share the cream background: split one pad unit across the border
   between them instead of stacking two full ones */
.demo-teaser { padding: var(--section-pad) 0 calc(var(--section-pad) / 2); }
.demo-teaser .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.demo-teaser h2 { font-size: clamp(30px, 4vw, 40px); }
.demo-frame {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin-top: 26px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(26, 52, 88, 0.22);
  border: 1px solid #E8E2D4;
  background: #fff;
}
.demo-frame iframe {
  width: 100%;
  height: 560px;
  border: 0;
  display: block;
  pointer-events: none; /* teaser only — full interaction on /demo */
}
.demo-frame .demo-shield {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 34px;
  background: linear-gradient(to bottom, rgba(250, 246, 238, 0) 55%, rgba(250, 246, 238, 0.92));
  text-decoration: none;
}

/* --- under the hood ----------------------------------------------------- */

.hood { padding: calc(var(--section-pad) / 2) 0 var(--section-pad); background: var(--cream); border-top: 1px solid #EEE6D6; }
/* heading block is a centered composition above the card row (punch list #3);
   max-width: none beats the global p { max-width: 62ch }, which otherwise caps
   the flex container and makes "centered" mean centered-in-a-left-aligned-box */
.hood .wrap > .eyebrow { display: flex; justify-content: center; max-width: none; }
.hood h2 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 14px auto 40px;
  text-align: center;
  /* single line whenever the viewport allows; balanced two-liner when it can't */
  max-width: none;
  text-wrap: balance;
}
.hood-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.hood-col {
  background: #fff;
  border: 1px solid #EEE6D6;
  border-radius: var(--radius);
  padding: 30px 28px;
}
.hood-col h3 { font-size: 22px; margin-bottom: 12px; }
.hood-col p { font-size: 15px; margin-bottom: 14px; }
.hood-col .mono-list {
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.hood-col .mono-list li {
  border-left: 2px solid var(--copper-light);
  padding-left: 12px;
}
.hood-col a { font-size: 14px; }
@media (max-width: 900px) { .hood-cols { grid-template-columns: 1fr; } }

/* --- the crew (replaced the founder pull quote, 2026-07-15) -------------- */

.crew {
  padding: calc(var(--section-pad) / 2) 0;
  background: var(--cream-deep);
  text-align: center;
}
.crew .wrap > .eyebrow { max-width: none; }
.crew h2 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 14px auto 14px;
  max-width: none;
  text-wrap: balance;
}
.crew-sub {
  margin: 0 auto 44px;
  font-size: 16px;
}
.crew-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.crew-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
/* card chrome (white ground, rounded corners, feathered edge) is baked into the
   RGBA card PNGs — the container only sets layout width */
.crew-card {
  width: 200px;
}
.crew-card img { width: 100%; height: auto; display: block; }
.crew-card--nudge-down { position: relative; top: 5px; }
.crew-card--nudge-up { position: relative; top: -5px; }
@media (max-width: 620px) { .crew-card { width: min(258px, 100%); } }

/* --- closing CTA + footer ------------------------------------------------ */

.closing {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.closing .closing-inner {
  position: relative;
  z-index: 5;
  padding: calc(var(--section-pad) / 2) 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.closing h2 {
  color: var(--cream);
  font-size: clamp(38px, 5.5vw, 64px);
}
.closing p { color: var(--navy-mist); }
.closing .hero-ctas { margin-top: 10px; justify-content: center; }
/* pull the dusk scene's empty sky up under the CTA row — the buttons sit in
   .closing-inner (z-index 5) so they stay above the transparent sky */
.closing .dusk-scene { line-height: 0; opacity: 0.9; margin-top: max(-56px, -3.5vw); }
.closing .dusk-scene svg { width: 100%; height: auto; }

.site-footer {
  background: var(--navy);
  border-top: 1px solid rgba(185, 203, 222, 0.15);
  padding: 40px 0;
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer .lockup img { height: 38px; width: auto; }
.site-footer nav { display: flex; gap: 26px; }
.site-footer a {
  color: var(--navy-mist);
  font-size: 14px;
  text-decoration: none;
}
.site-footer a:hover { color: var(--cream); }
.site-footer .copyright { font-size: 13px; color: rgba(185, 203, 222, 0.85); }

/* --- section rhythm ------------------------------------------------------ */

section { position: relative; }