/* =============================================================
   willbuild — styles.css
   Editorial dark theme. Lotus-inspired: near-black greens,
   electric yellow accents. No gradients.
   ============================================================= */

/* --- Tokens ------------------------------------------------- */
:root {
  /* Brand palette — matches the willbuild lockup. Deep forest green page,
     warm golden yellow accents, cream ink. Greens have a real green hue
     now (not near-black), so the brand mark sits in family. */
  --bg: #0F3326;            /* page bg — deep brand-green from the lockup */
  --bg-warm: #143A2C;       /* alternate sections — slightly lifted */
  --green: #1B4D3C;         /* mid hunter green — used in the inline mark fill */
  --green-deep: #07201A;    /* economics section — deepest, anchored cinematic */
  --yellow: #F2D932;        /* warm golden yellow from the brand mark */
  --ink: #F0EEE5;           /* primary text on dark */
  --ink-soft: rgba(240, 238, 229, 0.62);
  --hairline: rgba(240, 238, 229, 0.10);
  --hairline-strong: rgba(240, 238, 229, 0.22);

  --serif: "Newsreader", "Iowan Old Style", "Apple Garamond", Garamond, Georgia, serif;
  --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --max: 1180px;
  --pad: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

  --nav-h: 72px;
}

/* --- Base --------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection {
  background: var(--yellow);
  color: var(--green-deep);
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--green-deep);
  padding: 12px 18px;
  z-index: 1000;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { inset-inline-start: 16px; top: 16px; }

/* --- Typographic primitives -------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 500;
}

em {
  font-family: var(--serif);
  font-style: italic;
  /* Inherit color by default — amber is reserved for the hero accent word
     and the economics pull-quote (which sets its own colour). */
  color: inherit;
  font-weight: 500;
}

.section__index {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* --- Pill button ------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 320ms var(--ease),
    border-color 320ms var(--ease),
    background-color 320ms var(--ease),
    color 320ms var(--ease),
    box-shadow 320ms var(--ease);
  will-change: transform;
}
.pill__arrow {
  width: 14px; height: 14px;
  transition: transform 320ms var(--ease);
}
.pill:hover {
  transform: translateY(-1px) scale(1.01);
  border-color: var(--yellow);
  color: var(--yellow);
}
.pill:hover .pill__arrow,
.pill:hover .text-link__arrow { transform: translateX(4px); }
.pill:active { transform: translateY(0) scale(0.99); }

/* Primary pill — Lotus-style yellow fill on near-black, dark text. */
.pill--primary {
  background: var(--yellow);
  color: var(--green-deep);
  border-color: var(--yellow);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.pill--primary:hover {
  background: #FFF35A;
  border-color: #FFF35A;
  color: var(--green-deep);
  box-shadow: 0 10px 30px -10px rgba(240, 233, 36, 0.4);
}
.pill--large {
  padding: 18px 32px;
  font-size: 16px;
  /* Defensive margin so the large CTA pill never visually collides
     with siblings (e.g. .start__phone below it in the Start section). */
  margin: 8px 0 24px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 6px;
  transition: color 240ms var(--ease), border-color 240ms var(--ease);
}
.text-link__arrow {
  width: 14px; height: 14px;
  transition: transform 320ms var(--ease);
}
.text-link:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}
.text-link:hover .text-link__arrow { transform: translateX(4px); }

/* --- Custom cursor ----------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  transition: width 220ms var(--ease), height 220ms var(--ease),
              background-color 220ms var(--ease), opacity 220ms var(--ease);
  opacity: 0;
}
.cursor.is-active { opacity: 0.75; }
.cursor.is-hover {
  background: var(--yellow);
  opacity: 0.95;
  width: 16px; height: 16px;
}
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* --- Nav ---------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: transparent;
  transition: background-color 320ms var(--ease), backdrop-filter 320ms var(--ease), border-color 320ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(15, 51, 38, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--hairline);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--sans);
}
.nav__mark { width: 26px; height: 26px; }
/* Mark on dark: the hex polygon picks up the brand green so it's visible
   against the near-black bg, with a cream W cut through it. */
.nav__mark > polygon { fill: var(--yellow); }
.nav__mark-w { stroke: var(--bg); }
.nav__wordmark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
}
.nav__cta { padding: 10px 18px; font-size: 13.5px; }
/* Real-logo lockup, when assets/logo.png is present (replaces the SVG + wordmark). */
.nav__lockup {
  display: block;
  height: 32px;
  width: auto;
  /* Lockup ships on black. When scrolled (over dark page), lighten
     hides the black bg. Over the light hero, lighten breaks because
     white > yellow/cream → so we override to normal in hero state. */
  mix-blend-mode: lighten;
}
.nav:not(.is-scrolled) .nav__lockup {
  /* Over the white hero, the lockup renders with its natural black
     background. Distinctive and readable. When scrolled past hero, the
     base rule above takes over and the black bg blends away. */
  mix-blend-mode: normal;
}
/* CTA pill recoloring over light hero so border/text are readable */
.nav:not(.is-scrolled) .nav__cta {
  color: var(--bg);
  border-color: rgba(15, 51, 38, 0.45);
}
.nav:not(.is-scrolled) .nav__cta:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
@media (max-width: 900px) {
  .nav__lockup { height: 24px; }
}
@media (max-width: 720px) {
  .nav__lockup { height: 20px; }
}

/* --- Sections ---------------------------------------------- */
.section {
  position: relative;
  padding: clamp(96px, 14vh, 160px) 0;
  border-top: 1px solid var(--hairline);
}
/* When a section starts with a full-bleed image band, kill the
   top padding so the image hits the section divider directly. */
.section:has(> .section__image:first-child) {
  padding-top: 0;
}
.section + .section { border-top: 1px solid var(--hairline); }
.section__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.section__inner--center { text-align: center; }

/* --- Section image band -----------------------------------------
   Full-bleed editorial image that sits above a thesis section's
   content (used in Sections 03 Playbook and 04 Edge). The image
   reserves its space via aspect-ratio so the layout doesn't jump
   if the image is loading or missing. If the image fails to load
   the `--missing` class is added by an onerror handler, which
   reveals a labeled placeholder so it's clear which asset goes
   where during development. ---------------------------------------- */
.section__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 clamp(56px, 8vh, 96px);
  overflow: hidden;
  background: rgba(245, 242, 234, 0.05); /* faint cream tint on dark */
}
.section__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Subtle reveal — fades up when loaded */
  opacity: 0;
  transition: opacity 600ms ease;
}
.section__image img[src]:not([src=""]) {
  opacity: 1;
}
/* When onerror fires (image file missing), show a placeholder
   marker so it's clear where the asset belongs. */
.section__image--missing {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(245, 242, 234, 0.04) 0,
      rgba(245, 242, 234, 0.04) 12px,
      rgba(245, 242, 234, 0.08) 12px,
      rgba(245, 242, 234, 0.08) 24px
    );
}
.section__image--missing img { display: none; }
.section__image--missing::after {
  content: 'IMAGE GOES HERE — ' attr(data-image);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, 0.35);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: clamp(40px, 7vh, 72px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}

.section__head--inverse {
  border-bottom-color: rgba(245, 242, 234, 0.18);
}
.section__head--inverse .eyebrow,
.section__head--inverse .section__index {
  color: rgba(245, 242, 234, 0.7);
}

.thesis { background: var(--bg-warm); }
/* Per-section overrides: thesis defaults to bg-warm, alternate sections
   flip to bg. The catch section is the deep cinematic moment. */
.cope { background: var(--bg); }
.whynow { background: var(--bg); }
/* .auto inherits thesis bg-warm — no override */
.catch { background: var(--green-deep); }
.whyus { background: var(--bg); }
/* .liberty inherits thesis bg-warm — no override */
.whatwe { background: var(--bg); }
.steps-section { background: var(--bg-warm); }
.trust { background: var(--bg); }
/* .voice inherits thesis bg-warm — no override */
.start { background: var(--bg); }

/* --- Hero --------------------------------------------------- */
/* --- HERO --- editorial split: photo full-bleed left, copy right ---
   The hero is its own light moment in an otherwise dark site. The Lotus
   photo fills the left ~58% of the viewport edge-to-edge; the copy sits
   on the right against the cream page bg. Locally redefine --ink so
   descendants get dark-on-light without per-element overrides. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;

  /* Light island in the dark site — locally invert ink. */
  background: #F5F2EA;
  --ink: #0F3326;
  --ink-soft: rgba(15, 51, 38, 0.62);
  --hairline: rgba(15, 51, 38, 0.10);
  --hairline-strong: rgba(15, 51, 38, 0.22);
  color: var(--ink);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--hairline);
  z-index: 2;
}

.hero__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
  align-items: stretch;
}

/* Photo: full-bleed in its column, anchored so the car stays centered
   horizontally within its visible area regardless of viewport width. */
.hero__photo {
  position: relative;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #F5F2EA;
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
  /* Subtle floaty motion — gentle, no scale shift so the photo doesn't
     pump in and out. */
  animation: hero-photo-float 7s ease-in-out infinite alternate;
}
@keyframes hero-photo-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

/* Copy column — vertical center, padded gutters. */
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 48px) clamp(32px, 5vw, 80px) clamp(48px, 7vw, 96px);
  max-width: 640px;
}
.hero__copy .eyebrow { margin-bottom: 28px; }

.hero__headline {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
}
.hero__headline em {
  color: var(--ink);
  font-style: italic;
  /* Yellow underline accent instead of yellow text — keeps the headline
     unified and editorial. */
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.18em;
  background-position: 0 88%;
  padding: 0 0.04em;
}

.hero__sub { margin: 0 0 40px; max-width: 44ch; }
.hero__sub p { margin: 0; }

.hero__supporting {
  font-family: var(--sans);
  /* Apple-cut subhead — short, declarative, sits at subhead weight, not
     body text. Scales with the hero headline above it. */
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.hero__tagline {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.4;
  color: var(--ink);
  margin-top: 18px !important;
  letter-spacing: -0.005em;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

/* The old inline-SVG schematic stays in markup as a no-image fallback;
   hidden when the photo is wired up. */
.hero__art { display: none; }

.hero__caption {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 38ch;
}
.caption__rule {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--hairline-strong);
  margin-top: 9px;
  flex-shrink: 0;
}

/* Mobile: stack vertically — photo on top (60vh band), copy below */
@media (max-width: 880px) {
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__photo { min-height: 0; height: 56vh; }
  .hero__copy {
    padding: clamp(40px, 8vw, 64px) var(--pad) clamp(48px, 8vw, 80px);
    max-width: none;
  }
  .hero__headline { font-size: clamp(44px, 9vw, 64px); }
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__scroll-line {
  width: 1px;
  height: 32px;
  background: var(--hairline-strong);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: translateY(-100%);
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* Hero stagger entrance */
[data-hero] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.hero.is-ready [data-hero="1"] { transition-delay: 100ms; opacity: 1; transform: none; }
.hero.is-ready [data-hero="2"] { transition-delay: 220ms; opacity: 1; transform: none; }
.hero.is-ready [data-hero="3"] { transition-delay: 360ms; opacity: 1; transform: none; }
.hero.is-ready [data-hero="4"] { transition-delay: 480ms; opacity: 1; transform: none; }
.hero.is-ready [data-hero="5"] { transition-delay: 240ms; opacity: 1; transform: none; }
.hero.is-ready [data-hero="6"] { transition-delay: 800ms; opacity: 1; transform: none; }

/* --- Section reveal ---------------------------------------- */
[data-reveal] .section__head,
[data-reveal] h2,
[data-reveal] [data-stagger] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
[data-reveal].is-visible .section__head { opacity: 1; transform: none; }
[data-reveal].is-visible h2 { opacity: 1; transform: none; transition-delay: 80ms; }
[data-reveal].is-visible [data-stagger] {
  opacity: 1;
  transform: none;
}

/* --- Thesis ------------------------------------------------- */
.thesis__headline {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(40px, 6vw, 72px);
  max-width: 22ch;
}
.thesis__headline em { font-style: italic; color: var(--yellow); }
.thesis__headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  white-space: pre;
}
.thesis.is-visible .thesis__headline .word { opacity: 1; transform: none; }

.thesis__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 720px;
  margin-left: auto;
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink);
}
.thesis__body p { margin: 0; }
.thesis__body em {
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--serif);
}
.thesis__kicker {
  font-size: clamp(22px, 2vw, 28px);
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  font-style: italic;
}
.thesis__kicker em { /* inherits — green kicker */ }

/* --- The trap / The foundation (thesis variants) ------------ */
/* Both sections reuse .thesis classes for the editorial column treatment.
   .trap stays on bg-warm (inherited from .thesis); .foundation flips to bg
   to alternate. Italic emphasis words pop in yellow as a deliberate signal
   that these are the diagnostic / pivot moments. */
.foundation { background: var(--bg); }
/* Yellow italic emphasis on .thesis__headline em is now defined in the
   thesis block above and applies to thesis, trap, and foundation alike. */

/* Yellow pull-quote variant of the kicker — used in trap/foundation to
   weight the closing line as a thesis statement, not a body line. */
.thesis__kicker--accent {
  color: var(--yellow);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-width: 28ch;
  margin-top: 12px;
}
.thesis__kicker--accent em { color: inherit; font-style: italic; }
/* Subtle scale-up on reveal — feels weightier than body fade. */
[data-reveal] .thesis__kicker--accent {
  transform: translateY(40px) scale(0.985);
}
[data-reveal].is-visible .thesis__kicker--accent {
  transform: none;
}

/* --- Section 03 (cope) — image + copy two-column layout ---- */
.cope__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.cope__art {
  margin: 0;
  position: relative;
}
.cope__shoe {
  display: block;
  width: 100%;
  height: auto;
  /* Photo ships on solid black; lighten lets the page bg show through. */
  mix-blend-mode: lighten;
}
.cope__caption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cope__caption-mark {
  color: var(--yellow);
  flex-shrink: 0;
}
.cope__caption-text {
  font-size: 10.5px;
}
.cope__body {
  display: grid;
  gap: 28px;
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink);
}
.cope__body p { margin: 0; }

/* --- The catch (deep-green moment) -------------------------- */
.catch { color: var(--ink); }

/* --- How hiring works (section 09, four numbered steps) ------- */
.steps__headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 clamp(48px, 7vw, 80px);
  max-width: 14ch;
}
.steps__headline em { font-style: italic; color: var(--yellow); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.steps__item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--hairline);
}
.steps__num {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--yellow);
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
}
.steps__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 10px;
}
.steps__body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* --- Editorial in-body list (used for the salary table in section 05) -- */
.thesis__list {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.thesis__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  align-items: baseline;
}
.thesis__list-role {
  color: var(--ink);
  font-weight: 500;
}
.thesis__list-aside {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.85em;
  margin-left: 4px;
}
.thesis__list-amount {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
/* Terse variant — used for the "we replaced that team with this" list. */
.thesis__list--terse li { padding: 12px 0; }
.thesis__list--terse .thesis__list-amount {
  font-style: italic;
  font-family: var(--serif);
  color: var(--yellow);
  font-size: 1.06em;
}

/* The .how section now uses the .thesis editorial pattern (headline,
   body, accent kicker). Only the bg-color override on .how is needed
   here; the prior process-grid styles have been retired. */

/* --- Start ------------------------------------------------- */
.start {
  text-align: center;
  padding: clamp(120px, 18vh, 200px) 0;
}
.start .eyebrow { margin-bottom: 36px; }

.start__headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 auto 32px;
  max-width: 14ch;
}
.start__headline em { font-style: italic; /* inherits — green */ }

.start__sub {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 auto 48px;
  max-width: 48ch;
}

.start__phone {
  margin: 32px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}
.start__phone-label {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px;
}
.start__phone a {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  transition: border-color 240ms var(--ease), color 240ms var(--ease);
}
.start__phone a:hover { border-color: var(--yellow); color: var(--yellow); }

/* --- Footer ------------------------------------------------- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: 48px 0 64px;
  background: var(--bg);
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  margin: 0;
}
.footer__tag em { /* inherits — green */ }
.footer__meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  body { font-size: 16px; }
  :root { --nav-h: 64px; }

  /* Hero stays 2-column at this width — only stacks below the 720 breakpoint
     (see below) so narrow desktop windows still see the shoe in frame. */
  .hero__scroll { display: none; }

  /* Cope (section 03) image + copy stacks vertically. */
  .cope__columns { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  /* Steps stay vertical anyway — just tighten the number column. */
  .steps__item { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; }

  .section { padding: 88px 0; }
}

@media (max-width: 720px) {
  :root { --pad: 22px; --nav-h: 80px; }

  /* Logo doubled (20 → 40) and nav grown to match. */
  .nav__lockup { height: 40px; }

  .nav__cta span { display: none; }
  .nav__cta { padding: 10px; gap: 0; }
  .nav__cta .pill__arrow { width: 16px; height: 16px; }

  .hero__sub { font-size: 17px; }

  /* Below 720, hero finally stacks: shoe under copy. */
  .hero {
    padding-bottom: 220px;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .hero__art {
    order: 2;
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    overflow: hidden; /* clip the slight horizontal overflow at the viewport edges */
  }
  .hero__copy { order: 1; }

  /* Shoe ~70% larger on mobile. The figure goes full-bleed (no horizontal
     padding) and the shoe itself scales 1.7× from its top-center. The
     floaty animation is suppressed at this size to keep the static scale
     stable; we add hero bottom padding so the larger shoe doesn't crowd
     the next section. */
  .shoe {
    animation: none;
    transform: scale(1.7);
    transform-origin: top center;
  }

  .section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section__index { order: -1; }


  .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* --- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }

  [data-hero],
  [data-reveal] .section__head,
  [data-reveal] h2,
  [data-reveal] [data-stagger],
  .thesis__headline .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__art-frame { animation: none !important; transform: none !important; }
  .shoe { animation: none !important; transform: none !important; }
  .hero__scroll-line::after { animation: none !important; }
  .cursor { display: none !important; }
}


/* =============================================================
   RULE LIST — for breakdowns: verticals, engine pieces, etc.
   Sits right-aligned like .thesis__body, hairlines top & bottom.
   ============================================================= */
.rule-list {
  list-style: none;
  padding: 0;
  margin: clamp(40px, 5vw, 64px) 0 0;
  max-width: 720px;
  margin-left: auto;
  border-top: 1px solid var(--hairline-strong);
}
.rule-list li {
  display: grid;
  grid-template-columns: clamp(140px, 22%, 200px) 1fr;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(22px, 2.8vw, 32px) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.rule-list li:last-child { border-bottom: 1px solid var(--hairline-strong); }
.rule-list__label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.rule-list__body {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink);
}
.rule-list__body em { color: var(--ink-soft); font-style: italic; }

@media (max-width: 720px) {
  .rule-list li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
}

/* Reveal animation for rule-list rows */
[data-reveal] .rule-list li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-visible .rule-list li { opacity: 1; transform: none; }
[data-reveal].is-visible .rule-list li:nth-child(1) { transition-delay: 120ms; }
[data-reveal].is-visible .rule-list li:nth-child(2) { transition-delay: 200ms; }
[data-reveal].is-visible .rule-list li:nth-child(3) { transition-delay: 280ms; }
[data-reveal].is-visible .rule-list li:nth-child(4) { transition-delay: 360ms; }
[data-reveal].is-visible .rule-list li:nth-child(5) { transition-delay: 440ms; }
[data-reveal].is-visible .rule-list li:nth-child(6) { transition-delay: 520ms; }

/* =============================================================
   PRICING
   Two-card grid. Featured card flips to yellow accent block.
   ============================================================= */
.pricing {
  background: var(--bg-warm);
}
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(40px, 5vw, 64px);
}
.price-card {
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--hairline-strong);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.price-card:hover {
  border-color: var(--yellow);
  transform: translateY(-2px);
}
.price-card--featured {
  background: var(--green-deep);
  border-color: var(--yellow);
  position: relative;
}
.price-card--featured::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -1px;
  right: clamp(20px, 3vw, 40px);
  background: var(--yellow);
  color: var(--green-deep);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 6px 12px;
}
.price-card__tier {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.price-card--featured .price-card__tier { color: var(--yellow); }
.price-card__num {
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
}
.price-card--featured .price-card__num { color: var(--yellow); }
.price-card__currency {
  font-size: 0.55em;
  vertical-align: top;
  position: relative;
  top: 0.5em;
  margin-right: 4px;
  opacity: 0.7;
}
.price-card__per {
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  text-transform: none;
}
.price-card__body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

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

/* =============================================================
   VERTICALS
   Three-card grid separated by hairline gutters.
   ============================================================= */
.verticals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--hairline-strong);
  border: 1px solid var(--hairline-strong);
}
.vertical-card {
  padding: clamp(28px, 3.5vw, 48px);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 18px);
  min-height: 280px;
  transition: background 220ms var(--ease);
}
.vertical-card:hover { background: var(--bg-warm); }
.vertical-card--coming {
  background: var(--bg-warm);
}
.vertical-card--coming:hover { background: var(--bg-warm); }
.vertical-card__eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0;
}
.vertical-card--coming .vertical-card__eyebrow { color: var(--ink-soft); }
.vertical-card__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.vertical-card--coming .vertical-card__title {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  color: var(--ink-soft);
}
.vertical-card__body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}
.vertical-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid var(--yellow);
  padding-bottom: 3px;
  transition: gap 220ms var(--ease);
}
.vertical-card__link:hover { gap: 12px; }
.vertical-card__link .pill__arrow { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .verticals__grid { grid-template-columns: 1fr; }
  .vertical-card { min-height: auto; }
}