/* ============================================================
   SOW — AI Product Development
   Design system & global stylesheet
   ============================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --paper:      #F5F7FB;   /* cool off-white — page background    */
  --white:      #FCFDFF;   /* cards, small contrast areas         */
  --mint:       #DCEEDC;   /* very pale mint — subtle UI surfaces */
  --sage:       #6DB36D;   /* soft sage — buttons, borders        */
  --green:      #78A77D;   /* medium muted green — details        */
  --ink:        #111111;   /* near-black — headings, primary text */

  /* Derived shades (kept inside the palette's hue family) */
  --green-deep: #4E7A54;   /* AA-contrast green for links/small text */
  --green-tint: #F1F7F1;   /* mint at low strength, section washes   */
  --ink-2:      #4A4E49;   /* body copy                              */
  --ink-3:      #7C827D;   /* muted labels, captions                 */
  --line:       #E5E9E3;   /* hairline borders                       */
  --line-2:     #D3DCD2;   /* stronger borders                       */

  /* Typography */
  --font-display: "Syne", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Layout — single source of truth for every horizontal edge */
  --container: 1200px;
  --gutter:    clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 9vw, 128px);

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* Shape & motion */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --shadow:    0 1px 2px rgba(17,17,17,0.04), 0 8px 24px rgba(17,17,17,0.05);
  --shadow-lg: 0 2px 4px rgba(17,17,17,0.04), 0 18px 48px rgba(17,17,17,0.09);

  --header-h: 74px;
}

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

html {
  font-size: 18px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sage); color: var(--ink); }

/* ── 3. LAYOUT PRIMITIVES ──────────────────────────────────── */
/* Every horizontal edge on the site resolves through .container,
   so all content shares one left and right alignment axis.      */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--mint  { background: var(--green-tint); }
.section--white { background: var(--white); }
.section--line  { border-top: 1px solid var(--line); }

/* ── 4. TYPOGRAPHY ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--sage);
  flex-shrink: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  font-weight: 700;
  /* Long words ("infrastructure", "industries") must not run past
     the container on narrow screens — body overflow-x:hidden would
     silently clip them rather than wrap. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.h-display { font-size: clamp(1.6rem, 5vw, 3.7rem); font-weight: 800; line-height: 1.05; }
.h-1       { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; }
.h-2       { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.h-3       { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.02em; }
.h-4       { font-size: 1.02rem; letter-spacing: -0.01em; font-weight: 600; }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

p { max-width: 68ch; }
p + p { margin-top: var(--s4); }

.muted   { color: var(--ink-3); }
.accent  { color: var(--green-deep); }
strong   { color: var(--ink); font-weight: 600; }

/* Section heading block — fixed rhythm, reused on every page */
.section-head { max-width: 760px; margin-bottom: var(--s8); }
.section-head p { margin-top: var(--s5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }

/* ── 5. BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 50px;
  padding-inline: var(--s5);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #000; box-shadow: var(--shadow-lg); }

.btn--sage { background: var(--sage); color: var(--ink); }
/* --sage is now stronger than --green, so hover darkens to
   --green-deep; hovering to --green would lighten it instead. */
.btn--sage:hover { background: var(--green-deep); color: var(--white); }

.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--green); background: var(--mint); }

.btn--sm { height: 40px; padding-inline: var(--s4); font-size: 0.82rem; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--green-deep);
  transition: gap 0.25s var(--ease);
}
.link-arrow:hover { gap: var(--s3); }
.link-arrow .arw { transition: transform 0.25s var(--ease); }
.link-arrow:hover .arw { transform: translateX(2px); }

/* ── 6. HEADER ─────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(245, 247, 251, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(245, 247, 251, 0.94);
}

.header .container { display: flex; align-items: center; gap: var(--s6); }

.logo {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  flex-shrink: 0;
}
.logo .dot { color: var(--green); }
.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
  padding-left: var(--s2);
  border-left: 1px solid var(--line-2);
  line-height: 1.3;
}

.nav { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.nav a {
  position: relative;
  font-size: 0.9rem;
  color: var(--ink-2);
  padding-block: var(--s2);
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active { color: var(--ink); font-weight: 500; }
.nav a.is-active::after { transform: scaleX(1); }

.header > .container > .btn { flex-shrink: 0; }
/* The nav carries its own CTA for the mobile panel; on desktop the
   standalone one in the header bar is the only visible copy. */
.nav .btn { display: none; }

/* Manual line breaks in the hero headline are a desktop-only
   typographic choice — below 860px the text wraps on its own. */
.br-lg { display: inline; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* ── 7. HERO + VIDEO LOOP ──────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--mint);
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.1s var(--ease);
  filter: saturate(0.72) contrast(0.94) brightness(1.06);
}
/* The incoming clip fades in ON TOP of the outgoing one, which is
   held fully opaque underneath until the fade completes. Fading
   both at once would let the background bleed through mid-cross. */
.hero-media video.is-active { opacity: 1; z-index: 2; will-change: opacity; }
.hero-media video.is-prev   { opacity: 1; z-index: 1; transition: none; }

/* Warm-white scrim: heavier on the text side, so ink copy stays
   legible no matter which clip is playing. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(245,247,251,0.97) 0%,
      rgba(245,247,251,0.93) 32%,
      rgba(245,247,251,0.70) 58%,
      rgba(245,247,251,0.42) 100%),
    linear-gradient(to top,
      rgba(220,238,220,0.55) 0%,
      rgba(245,247,251,0.00) 46%);
}

.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 1080px; padding-block: clamp(72px, 10vw, 120px); }
.hero h1 { margin-bottom: var(--s4); }

/* Single-line strapline sitting between headline and lede. */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--green-deep);
  max-width: none;
  margin-bottom: var(--s5);
}
.hero .lede { max-width: 54ch; margin-bottom: var(--s7); }
.hero .btn-row { margin-bottom: var(--s8); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-meta span { display: flex; align-items: center; gap: var(--s2); }
.hero-meta span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* Clip indicator — makes the loop read as deliberate */
.video-dots {
  position: absolute;
  z-index: 3;
  bottom: clamp(20px, 4vw, 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(109,179,109,0.5);
  border-radius: 999px;
}
.video-dot {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--sage);
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: width 0.4s var(--ease);
}
.video-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.video-dot.is-active { width: 46px; }
.video-dot.is-active::after {
  transform: scaleX(var(--progress, 0));
  transition: transform 0.2s linear;
}

/* ── 8. STAT BAR ───────────────────────────────────────────── */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.stat { padding: var(--s6) var(--s5); border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat-val {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--s2);
}
.stat-lbl {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ── 9. CARDS & GRIDS ──────────────────────────────────────── */
.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
  height: 100%;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.card:hover {
  border-color: var(--sage);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card--mint { background: var(--mint); border-color: transparent; }
.card--mint:hover { border-color: var(--sage); }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }

.card-icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--mint);
  color: var(--green-deep);
  margin-bottom: var(--s5);
  flex-shrink: 0;
}
.card--mint .card-icon { background: var(--white); }
.card-icon svg { width: 20px; height: 20px; }

.card h3 { margin-bottom: var(--s3); }
.card p  { font-size: 0.9rem; max-width: none; }
.card .chips { margin-top: var(--s5); }
.card .link-arrow { margin-top: auto; padding-top: var(--s5); }

.card-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-bottom: var(--s4);
}

/* Tag chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green-deep);
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip--outline { background: transparent; border-color: var(--line-2); color: var(--ink-3); }

/* ── 10. PHASE / PROCESS LIST ──────────────────────────────── */
.phases { border-top: 1px solid var(--line); }
.phase {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.5fr) 120px;
  gap: var(--s5);
  align-items: start;
  padding: var(--s6) var(--s4);
  margin-inline: calc(var(--s4) * -1);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}
.phase:hover { background: var(--green-tint); }
.phase-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--green);
  padding-top: 5px;
}
.phase-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.phase-desc { font-size: 0.9rem; }
.phase-desc p { max-width: none; }
.phase-deliv { margin-top: var(--s3); }
.phase-time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: right;
  padding-top: 4px;
}

/* ── 11. SPLIT / FEATURE ROWS ──────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.split--start { align-items: start; }
.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mint);
  aspect-ratio: 4 / 3;
  position: relative;
}
.split-media video,
.split-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(1.02);
}

/* Definition list for "problem / gap" blocks */
.deflist { border-top: 1px solid var(--line); }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
}
.deflist dt { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 0.95rem; line-height: 1.35; }
.deflist dd { font-size: 0.9rem; color: var(--ink-2); }

/* ── 12. TABLE ─────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 620px; }
thead th {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: var(--s4) var(--s5);
  background: var(--green-tint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--ink); font-weight: 500; }
tbody tr:hover td { background: var(--green-tint); }

/* ── 13. CASE STUDIES ──────────────────────────────────────── */
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: var(--s8);
  border-bottom: 1px solid var(--line);
}
.case:last-child { border-bottom: none; }
.case--flip .case-media { order: 2; }
.case-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--mint);
  position: relative;
}
.case-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(1.03);
  transition: transform 0.7s var(--ease);
}
.case:hover .case-media video { transform: scale(1.04); }
.case-body h3 { margin-block: var(--s4); }
.case-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.case-stats .stat-val { font-size: 1.6rem; color: var(--green-deep); }

/* ── 14. CTA STRIP ─────────────────────────────────────────── */
.cta {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 7vw, 88px) clamp(28px, 5vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 620px; height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(109,179,109,0.20) 0%, transparent 66%);
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: var(--paper); margin-bottom: var(--s5); }
.cta p {
  color: rgba(245,247,251,0.68);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--s7);
}
.cta .eyebrow { color: var(--sage); justify-content: center; }
.cta .eyebrow::before { background: rgba(109,179,109,0.5); }
.cta .btn-row { justify-content: center; }
.cta .btn--primary { background: var(--paper); color: var(--ink); }
.cta .btn--primary:hover { background: var(--white); }
.cta .btn--ghost { border-color: rgba(245,247,251,0.28); color: var(--paper); }
.cta .btn--ghost:hover { border-color: var(--sage); background: rgba(109,179,109,0.14); }

/* ── 15. FORM ──────────────────────────────────────────────── */
.form { display: grid; gap: var(--s5); }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 13px var(--s4);
  font-size: 0.92rem;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #ADB3AD; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--green-tint);
}
.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C827D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  padding-right: 40px;
}
.form-note { font-size: 0.8rem; color: var(--ink-3); }

/* ── 16. FOOTER ────────────────────────────────────────────── */
.footer {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding-block: var(--s9) var(--s6);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s7);
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--line);
}
.footer-brand .logo { margin-bottom: var(--s4); }
.footer-brand p { font-size: 0.88rem; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}
.footer-col li + li { margin-top: var(--s3); }
.footer-col a { font-size: 0.88rem; color: var(--ink-2); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--green-deep); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s5);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ── 17. PAGE HEADER (inner pages) ─────────────────────────── */
.page-head {
  background: var(--mint);
  padding-block: clamp(56px, 8vw, 104px);
  border-bottom: 1px solid rgba(109,179,109,0.4);
}
.page-head .lede { margin-top: var(--s5); }

/* ── 18. REVEAL ANIMATION ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── 19. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
  .phase { grid-template-columns: 44px minmax(0, 1fr) 110px; }
  .phase-desc { grid-column: 2 / -1; }
}

@media (max-width: 860px) {
  :root { --header-h: 66px; }

  .nav-toggle { display: flex; }
  .header > .container > .btn { display: none; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: var(--s4) var(--gutter) var(--s7);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    /* visibility flips only after the fade-out finishes, and
       immediately on open — otherwise the panel fades in unseen. */
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
                visibility 0s linear 0.25s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
                visibility 0s linear 0s;
  }
  .nav a { padding-block: var(--s4); border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav a::after { display: none; }
  .nav a.btn { display: inline-flex; margin-top: var(--s5); border-bottom: none; }

  .br-lg { display: none; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .split, .case { grid-template-columns: 1fr; gap: var(--s6); }
  .case--flip .case-media { order: 0; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .form-row { grid-template-columns: 1fr; }
  .deflist > div { grid-template-columns: 1fr; gap: var(--s2); }
  .phase { grid-template-columns: 34px minmax(0, 1fr); gap: var(--s4); row-gap: var(--s3); }
  .phase-desc, .phase-time { grid-column: 2 / -1; }
  .phase-time { text-align: left; padding-top: 0; }
  .hero { min-height: auto; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(245,247,251,0.94) 0%,
      rgba(245,247,251,0.88) 55%,
      rgba(245,247,251,0.72) 100%);
  }
}

@media (max-width: 560px) {
  .stat-bar { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ── 20. MOTION PREFERENCES ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── 21. PRINT ─────────────────────────────────────────────── */
@media print {
  .header, .nav-toggle, .video-dots, .hero-media, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}