/* ============================================================================
   LANDSEED SITE — page-level styles. Extends colors_and_type.css + landseed.css.
   ========================================================================== */

/* ----- Base ----- */
/* scroll-behavior is defined in colors_and_type.css to keep it with type/layout base */
html, body { overflow-x: hidden; }
body { margin: 0; }

/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,190,90,0.18); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,190,90,0.30); }

/* ============================================================================
   Top nav — sticky w/ pill CTA & active state
   ========================================================================== */
.site-nav {
  position: sticky; top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand links actions";
  align-items: center; gap: 32px;
  padding: 14px 32px; min-height: 64px;
  background: rgba(7,15,7,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  z-index: 50;
}
.site-nav .brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; border: none;
  grid-area: brand; justify-self: start;
}
.site-nav .brand img { height: 26px; width: auto; display: block; }
.site-nav .links { display: flex; align-items: center; gap: 24px; grid-area: links; justify-self: center; }
.site-nav .nav-actions {
  grid-area: actions; justify-self: end;
  display: flex; align-items: center; gap: 22px;
}
.site-nav .nav-actions .nav-link {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-dim);
  text-decoration: none; border: none;
  transition: color 200ms ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.site-nav .nav-actions .nav-link:hover { color: var(--text); }
.site-nav .nav-actions .nav-link .nav-icon {
  display: block; flex-shrink: 0;
  opacity: 0.70;
  transition: opacity 220ms ease, transform 220ms ease;
}
.site-nav .nav-actions .nav-link:hover .nav-icon { opacity: 1; transform: translate(1px, -1px); }
.site-nav .nav-toggle-cb { display: none; }
.site-nav .nav-toggle { display: none; }
.site-nav .links a {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-dim);
  text-decoration: none; border: none;
  transition: color 200ms ease;
  position: relative; padding: 6px 2px;
  display: inline-flex; align-items: center; gap: 6px;
}
.site-nav .links a::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: calc(100% + 2px);
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.site-nav .links a:hover { color: var(--text); }
.site-nav .links a:hover::after { transform: scaleX(1); }
.site-nav .links a.active { color: var(--text); }
.site-nav .links a.active::after { transform: scaleX(1); }
.site-nav .links a .nav-icon {
  display: block;
  flex-shrink: 0;
  opacity: 0.70;
  transition: opacity 220ms ease, transform 220ms ease;
}
.site-nav .links a:hover .nav-icon { opacity: 1; }
.site-nav .links a:hover .nav-icon-ext { transform: translate(1px, -1px); }
.site-nav .links a:hover .nav-icon-play { transform: scale(1.08); }
.site-nav .pill,
.site-nav .pill:link,
.site-nav .pill:visited {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 32px; padding: 0 22px;
  background: var(--accent);
  color: #FFFFFF !important;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0; line-height: 1;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent);
  text-decoration: none; white-space: nowrap;
  position: relative; overflow: hidden;
  transition: background 220ms ease, border-color 220ms ease, transform 160ms ease, box-shadow 220ms ease;
}
.site-nav .pill:hover,
.site-nav .pill:focus {
  background: #00d066;
  border-color: #00d066;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(0,190,90,0.40);
}
.site-nav .pill .pill-arrow {
  display: block; flex-shrink: 0;
  transition: transform 200ms ease;
}
.site-nav .pill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 60%);
  opacity: 0; transition: opacity 220ms ease;
  pointer-events: none;
}
.site-nav .pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  opacity: 0; transition: opacity 220ms ease;
  pointer-events: none;
}
.site-nav .pill:hover {
  background: #00d066;
  border-color: #00d066;
  box-shadow: 0 0 20px rgba(0,190,90,0.40);
}
.site-nav .pill::before,
.site-nav .pill::after { display: none; }
.site-nav .pill:hover::before,
.site-nav .pill:hover::after { opacity: 1; }
.site-nav .pill:active { transform: translateY(1px); }
.site-nav .pill > * { position: relative; z-index: 1; }
.site-nav .pill:hover .pill-arrow { transform: translateX(2px); }

/* ── Back-to-home link ─────────────────────────────── */
.back-home {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-dim); text-decoration: none;
  border: none;
  transition: color 200ms ease;
}
.back-home .back-arrow {
  display: block; flex-shrink: 0;
  opacity: 0.70;
  transition: transform 220ms ease, opacity 220ms ease;
}
.back-home:hover { color: var(--text); }
.back-home:hover .back-arrow { opacity: 1; transform: translateX(-2px); }

.page-top-bar {
  max-width: 1200px; margin: 0 auto;
  padding: 28px 32px 0;
}
.back-home-row {
  display: flex; justify-content: center;
  padding: 56px 32px 88px;
}
@media (max-width: 760px) {
  .page-top-bar { padding: 20px 24px 0; }
  .back-home-row { padding: 40px 24px 64px; }
}

/* ── Mobile hamburger nav (≤760px) ─────────────────── */
@media (max-width: 760px) {
  .site-nav {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand   toggle"
      "links   links"
      "actions actions";
    gap: 0;
    padding: 12px 24px;
  }
  .site-nav .nav-toggle {
    grid-area: toggle;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: var(--text-dim); cursor: pointer;
    margin-right: -8px;
    transition: color 200ms ease;
  }
  .site-nav .nav-toggle:hover { color: var(--text); }
  .site-nav .nav-toggle svg line {
    transform-origin: center;
    transition: transform 320ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
  }

  /* Dropdown panels stay rendered as flex columns at all times so opening
     and closing can animate. Collapsed state is max-height 0 + opacity 0 +
     pointer-events none; the open state below toggles those plus the
     panel's margin/padding/border. Forcing `justify-self: stretch` undoes
     the desktop `.links { justify-self: center }` and `.nav-actions
     { justify-self: end }` rules that would otherwise shrink-wrap the
     panels and shove them to the right edge. */
  .site-nav .links,
  .site-nav .nav-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
    gap: 0;
    margin: 0 -24px;
    padding: 0 24px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    border-top: 1px solid transparent;
    transition:
      max-height 420ms cubic-bezier(.4,0,.2,1),
      opacity 240ms ease,
      margin 420ms cubic-bezier(.4,0,.2,1),
      padding 420ms cubic-bezier(.4,0,.2,1),
      border-top-color 240ms ease;
  }

  /* Item base state — styled identically whether the menu is open or
     closed (no layout jitter on transition). Items start slightly raised
     + transparent; the open state slides them down into place with a
     staggered cascade. */
  .site-nav .links a,
  .site-nav .nav-actions .nav-link {
    width: 100%;
    padding: 18px 4px;
    font-size: 17px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--line-soft);
    justify-content: center;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 320ms ease,
                transform 360ms cubic-bezier(.4,0,.2,1),
                color 200ms ease;
  }
  /* Walkthrough is the last child of .links, but the menu continues into
     .nav-actions (Dashboard) directly below — keep its border so the row
     divider between Walkthrough and Dashboard reads as one continuous
     list, not a gap. */
  .site-nav .links a.active { color: var(--text); font-weight: 600; }
  .site-nav .links a::after { display: none; }
  /* Center the WORD, not the (word + icon) group — icon stays visible after
     the text but doesn't push the text off-center. */
  .site-nav .links a > svg.nav-icon,
  .site-nav .nav-actions .nav-link > svg.nav-icon {
    margin-right: -17px;
  }
  .site-nav .nav-actions .pill {
    align-self: center;
    margin: 20px 0 4px;
    height: 46px;
    font-size: 14px;
    width: 100%;
    max-width: 240px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 320ms ease,
                transform 360ms cubic-bezier(.4,0,.2,1),
                background 160ms ease;
  }

  /* Open state — flip the panels open. max-height caps are generous
     ceilings (real content is well under) so the transition timing is
     dominated by easing, not over-shooting empty space. */
  .site-nav .nav-toggle-cb:checked ~ .links {
    max-height: 320px;
    opacity: 1;
    pointer-events: auto;
    margin: 12px -24px 0;
    padding: 4px 24px 0;
    border-top-color: var(--line-soft);
  }
  .site-nav .nav-toggle-cb:checked ~ .nav-actions {
    max-height: 260px;
    opacity: 1;
    pointer-events: auto;
    padding: 0 24px 16px;
  }

  /* Staggered child cascade. The first few links wait ~140ms (so the panel
     has begun opening), then each subsequent item lands 60ms after the
     previous. Same cubic-bezier as the hamburger → X morph for a
     consistent motion character. */
  .site-nav .nav-toggle-cb:checked ~ .links a,
  .site-nav .nav-toggle-cb:checked ~ .nav-actions > * {
    opacity: 1;
    transform: translateY(0);
  }
  .site-nav .nav-toggle-cb:checked ~ .links a:nth-child(1) { transition-delay: 140ms, 140ms, 0ms; }
  .site-nav .nav-toggle-cb:checked ~ .links a:nth-child(2) { transition-delay: 200ms, 200ms, 0ms; }
  .site-nav .nav-toggle-cb:checked ~ .links a:nth-child(3) { transition-delay: 260ms, 260ms, 0ms; }
  .site-nav .nav-toggle-cb:checked ~ .nav-actions > *:nth-child(1) { transition-delay: 320ms, 320ms, 0ms; }
  .site-nav .nav-toggle-cb:checked ~ .nav-actions > *:nth-child(2) { transition-delay: 380ms, 380ms, 0ms; }

  /* hamburger → X */
  .site-nav .nav-toggle-cb:checked ~ .nav-toggle svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .site-nav .nav-toggle-cb:checked ~ .nav-toggle svg line:nth-child(2) {
    opacity: 0;
  }
  .site-nav .nav-toggle-cb:checked ~ .nav-toggle svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Respect users who've asked for reduced motion — drop the slide +
     stagger; show/hide stays opacity-only and instant on the panel. */
  @media (prefers-reduced-motion: reduce) {
    .site-nav .links,
    .site-nav .nav-actions,
    .site-nav .links a,
    .site-nav .nav-actions .nav-link,
    .site-nav .nav-actions .pill,
    .site-nav .nav-toggle svg line {
      transition-duration: 0ms;
    }
    .site-nav .links a,
    .site-nav .nav-actions .nav-link,
    .site-nav .nav-actions .pill {
      transform: none;
    }
  }
}

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; border-radius: 999px;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  background: transparent; color: var(--text);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--bg); }
.btn.primary:hover { background: #00d066; }
.btn.secondary { border-color: rgba(240,240,234,0.18); color: var(--text); }
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn.ghost { color: var(--text-dim); padding: 0 16px; }
.btn.ghost:hover { color: var(--text); }
.btn .arrow { font-family: var(--font-mono); font-weight: 500; }

/* ============================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--bg-deep); }
.site-footer .gbar {
  height: 2px; width: 100%;
  background: linear-gradient(90deg,#E682E6 0%,#E682E6 20%,#00BE5A 20%,#00BE5A 40%,#32C8FF 40%,#32C8FF 60%,#FFC800 60%,#FFC800 80%,#1482FF 80%,#1482FF 100%);
}
.site-footer .inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px 24px;
  display: flex; flex-direction: column; gap: 40px; }
.site-footer .cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  gap: 48px;
}
.site-footer .cta-link {
  color: var(--accent) !important;
}
.site-footer .col-title {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-mute); margin-bottom: 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer ul a {
  font-family: var(--font-sans); font-size: 13px; color: var(--text-dim);
  text-decoration: none; border: none; letter-spacing: -0.01em;
  transition: color 160ms ease;
}
.site-footer ul a:hover { color: var(--text); }
.site-footer .contact-row { display: flex; flex-direction: column; gap: 14px; }
.site-footer .contact-row .label {
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-mute);
  margin-bottom: 2px;
}
.site-footer .contact-row .v { font-size: 13px; color: var(--text); letter-spacing: -0.01em; }
@keyframes pulseDot {
  0%,100% { opacity: 1; box-shadow: 0 0 8px var(--accent); }
  50% { opacity: 0.55; box-shadow: 0 0 4px var(--accent); }
}
.site-footer .signature {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-mute);
  padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.site-footer .signature > :last-child { text-align: right; }
.site-footer .signature .dots { display: inline-flex; gap: 28px; align-items: center; justify-self: center; }
.site-footer .signature .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }

/* ============================================================================
   Section / type helpers
   ========================================================================== */
.section { padding: 120px 32px; }
.section.tight { padding: 96px 32px; }
.section.band { background: var(--bg-forest); }
.section.deep { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); }
.container { max-width: 1200px; margin: 0 auto; }
.container.text { max-width: 900px; }
.container.prose { max-width: 680px; }

.eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.eyebrow .num {
  font-family: var(--font-sans); font-weight: 700; color: var(--text-mute);
  letter-spacing: 0.14em;
}
.eyebrow .sep { width: 28px; height: 1px; background: rgba(0,190,90,0.4); display: inline-block; }
.eyebrow.muted { color: var(--text-mute); }
.eyebrow.muted .sep { background: rgba(240,240,234,0.18); }

.section-title {
  font-family: var(--font-sans); font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 700; color: var(--text);
  letter-spacing: -0.04em; line-height: 1.02;
  margin: 0 0 22px;
  /* Balance line lengths so titles like "Initial deployments across four
     continents" don't orphan a single word on the last line — supported
     in modern browsers, gracefully ignored elsewhere. */
  text-wrap: balance;
}
.section-title .accent { color: var(--accent); }
.section-title .dim { color: var(--text-dim); }
.section-desc {
  font-size: 18px; color: var(--text-dim); line-height: 1.65;
  max-width: 680px; letter-spacing: -0.01em; margin: 0;
}
.section-desc.lead { font-size: 22px; color: var(--text); line-height: 1.55; }

/* ============================================================================
   Page-level gradient bar (animated wipe)
   ========================================================================== */
.gbar {
  height: 2px; width: 100%;
  background: linear-gradient(90deg,#E682E6 0%,#E682E6 20%,#00BE5A 20%,#00BE5A 40%,#32C8FF 40%,#32C8FF 60%,#FFC800 60%,#FFC800 80%,#1482FF 80%,#1482FF 100%);
}
.gbar.thick { height: 4px; }
.gbar.vertical {
  width: 2px; height: 100%;
  background: linear-gradient(180deg,#E682E6 0%,#E682E6 20%,#00BE5A 20%,#00BE5A 40%,#32C8FF 40%,#32C8FF 60%,#FFC800 60%,#FFC800 80%,#1482FF 80%,#1482FF 100%);
}

/* ============================================================================
   Reveal motion (IntersectionObserver triggers .visible)
   ========================================================================== */
/* Reveals are armed only when JS is available (html.js set by an inline head
   script). Without JS — or if chrome.js fails to load — content stays visible. */
.js .r { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.16,1,.3,1), transform 900ms cubic-bezier(.16,1,.3,1); }
.r.visible { opacity: 1; transform: translateY(0); }
.r.r-fade { transform: none; }
.r.r-fade.visible { transform: none; }
.r.r-left { transform: translateX(-28px); }
.r.r-left.visible { transform: translateX(0); }
.r.delay-1 { transition-delay: 100ms; }
.r.delay-2 { transition-delay: 200ms; }
.r.delay-3 { transition-delay: 300ms; }
.r.delay-4 { transition-delay: 400ms; }
.r.delay-5 { transition-delay: 500ms; }
.r.delay-6 { transition-delay: 600ms; }

/* ============================================================================
   Gradient progress bar (sticky on /about under nav)
   ========================================================================== */
.scroll-progress {
  position: fixed; top: 56px; left: 0; right: 0; height: 2px;
  background: rgba(240,240,234,0.04); z-index: 49; pointer-events: none;
}
.scroll-progress .fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg,#E682E6 0%,#E682E6 20%,#00BE5A 20%,#00BE5A 40%,#32C8FF 40%,#32C8FF 60%,#FFC800 60%,#FFC800 80%,#1482FF 80%,#1482FF 100%);
  transform-origin: left;
}

/* ============================================================================
   Cards — three-act spine and editorial blocks
   ========================================================================== */
.spine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 56px; }
.spine-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px;
  background: rgba(45,90,39,0.06);
  border: 1px solid rgba(45,90,39,0.20);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}
.spine-card:hover { border-color: var(--accent); background: rgba(45,90,39,0.12); transform: translateY(-2px); }
.spine-card .num {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px; 
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
}
.spine-card h3 {
  font-family: var(--font-sans); font-size: 28px; font-weight: 700;
  color: var(--text); letter-spacing: -0.035em; line-height: 1.05; margin: 0;
}
.spine-card p { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.spine-card .more {
  margin-top: 6px;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
}

/* ============================================================================
   Stat row
   ========================================================================== */
.stats-row { display: flex; flex-wrap: wrap; gap: 56px; justify-content: center; }
.stat { text-align: center; min-width: 120px; }
.stat .num {
  font-family: var(--font-sans); font-feature-settings: "tnum" on;
  font-size: clamp(48px, 6vw, 72px); font-weight: 800;
  color: var(--text); letter-spacing: -0.05em; line-height: 1;
}
.stat .num.accent { color: var(--accent); }
.stat .label {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute);
  margin-top: 12px;
}

/* ============================================================================
   Cite line — pull-quote with source under it
   ========================================================================== */
.cite-quote {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 32px); font-weight: 500;
  color: var(--text); letter-spacing: -0.03em; line-height: 1.3;
  max-width: 820px; margin: 0;
}
.cite-quote .accent { color: var(--accent); }
.cite-source {
  margin-top: 16px;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute);
}

/* ============================================================================
   Triad — Earth produces / Landseed measures / The market values
   ========================================================================== */
.triad {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
}
.triad .line {
  font-family: var(--font-sans);
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 400; color: var(--text);
  letter-spacing: -0.035em; line-height: 1.05;
}
.triad .line.bold { font-weight: 700; }
.triad .mini-gbar {
  width: clamp(160px, 26vw, 280px); height: 2px;
  margin: 6px auto;
  background: linear-gradient(90deg,#E682E6 0%,#E682E6 20%,#00BE5A 20%,#00BE5A 40%,#32C8FF 40%,#32C8FF 60%,#FFC800 60%,#FFC800 80%,#1482FF 80%,#1482FF 100%);
}

/* ============================================================================
   Mono micro-meta lines (for hero corners, footer signature, etc.)
   ========================================================================== */
.micro {
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-mute);
}
.micro .v {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  text-transform: none; letter-spacing: -0.01em; color: var(--text-dim);
  display: block; margin-top: 2px;
}

/* ============================================================================
   Phase timeline
   ========================================================================== */
.phase-list { display: flex; flex-direction: column; gap: 48px; margin-top: 56px; }
.phase {
  display: grid; grid-template-columns: 100px 1fr; gap: 32px;
  padding-bottom: 48px; border-bottom: 1px solid var(--line-soft);
}
.phase:last-child { border-bottom: none; }
.phase .num {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px; 
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
  padding-top: 6px;
}
.phase h3 {
  font-family: var(--font-sans); font-size: clamp(32px, 4vw, 44px);
  font-weight: 700; color: var(--text); letter-spacing: -0.04em;
  line-height: 1.02; margin: 0 0 12px;
}
.phase .body { font-size: 17px; color: var(--text-dim); line-height: 1.65; max-width: 640px; letter-spacing: -0.01em; }
.phase .when {
  margin-top: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-mute);
}

/* ============================================================================
   Reduced motion — honor the OS/browser preference. Disables the flywheel
   spin, globe spin/pulse, hero drift, and reveal transitions; reveals show
   immediately so no content is gated behind motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .r { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   MOBILE OVERRIDES (≤760px)
   Scales section padding from the desktop 120/32 down to a clamp recipe, and
   normalizes side gutters across .section, footer, and the page-scoped
   containers (.pr, .team-*, .ra-wrap) so phones see a single consistent
   horizontal rhythm. Desktop is untouched.
   ========================================================================== */
@media (max-width: 760px) {
  /* Section padding scale */
  .section { padding: clamp(72px, 12vh, 96px) clamp(20px, 5vw, 24px); }
  .section.tight { padding: 64px clamp(20px, 5vw, 24px); }

  /* Manifesto carries its own padding clamp — match the mobile rhythm */
  .section.manifesto { padding: clamp(96px, 14vh, 140px) clamp(20px, 5vw, 24px) clamp(80px, 12vh, 120px); }
  /* Drop the hard <br> in the manifesto title — let the line flow */
  .manifesto-title br { display: none; }

  /* Page-scoped containers — unified mobile gutter */
  .pr { padding: clamp(56px, 9vh, 88px) clamp(20px, 5vw, 24px) clamp(64px, 12vh, 96px); }
  .team-hero { padding: clamp(56px, 8vh, 80px) clamp(20px, 5vw, 24px) 40px; }
  .team-section { padding: 40px clamp(20px, 5vw, 24px); }
  .ra-wrap { padding: 40px clamp(20px, 5vw, 24px) 64px; }

  /* Footer */
  .site-footer .inner { padding: 56px clamp(20px, 5vw, 24px) 20px; }

  /* Section titles + descs tighten on phones — the desktop clamps' vw min
     is too aggressive below 400px, leaving giant headings on tiny columns */
  .section-title { font-size: clamp(28px, 7vw, 40px); }
  .section-desc  { font-size: 16px; }
}

/* ============================================================================
   MOBILE FOOTER POLISH (≤560px)
   The page-scoped footer styles in index/about/team override site.css at
   the same specificity, so we use `body .site-footer` to win. Desktop
   layout is untouched — these rules only fire at the stacked-column state.
   ========================================================================== */
@media (max-width: 560px) {
  /* Tighter rhythm between the brand row and the nav columns */
  body .site-footer .footer-top { gap: 32px; }

  /* Footer nav: 2-column grid instead of 1-stacked so the three small
     groups (Site, Resources, Contact) are more condensed on phones */
  body .site-footer .footer-nav { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }

  /* Phones: center the brand block (logo + tagline + pill) as a column. */
  body .site-footer .footer-brand { text-align: center; }

  /* The horizontal wordmark SVG is ~7.9:1 aspect. At the desktop height
     clamp's 48px floor, natural width is ~379px — wider than narrow
     phones, which pushes the whole footer past the viewport to the right.
     On mobile, drive size by width so the logo fills most of the phone
     and stays centered. */
  body .site-footer .footer-brand img {
    height: auto;
    width: clamp(260px, 86vw, 380px);
    margin: 0 auto 24px;
  }

  /* Tagline reads small below the logo at the default 15px clamp floor — */
  /* bump on phones for legibility */
  body .site-footer .footer-brand .brand-tagline { font-size: 16px; max-width: none; }

  /* "Get in touch" is the footer's primary action — let the pill shrink
     to fit its content so the text + arrow are visually centered with
     even padding on both sides, then center the pill within the column. */
  body .site-footer .footer-brand .btn {
    display: inline-flex;
    width: auto;
    max-width: none;
    height: 48px;
    padding: 0 28px;
    font-size: 15px;
  }

  /* Bottom signature line — 10px uppercase is hard to scan on phones */
  body .site-footer .footer-bottom { font-size: 11px; letter-spacing: 0.14em; gap: 18px; }
  body .site-footer .footer-bottom .dots { gap: 18px; }
  body .site-footer .footer-bottom .dots i { width: 8px; height: 8px; }

  /* Respect the iPhone home-indicator safe area at the bottom edge */
  body .site-footer .inner {
    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
  }
}