/* ============================================================
   THE KEYSTONE — design system
   Token values pulled from the official Brand Book + Brand DNA
   Framework v.2 (Jan 2026). See memory/keystone-brand-truth.md.
   ============================================================ */

/* Brand fonts — local TTFs from the brand package (no Google Fonts) */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('assets/brand/fonts/RobotoCondensed-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('assets/brand/fonts/RobotoCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/brand/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/brand/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/brand/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/brand/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand main tones (Brand Book §03) */
  --ink:       #1D2C40;   /* Marine Blue — main */
  --ink-2:     #283549;   /* slight tint for hover/depth */
  --beige:     #F3E9E1;   /* main */
  --grey:      #EDEDED;   /* main */
  --black:     #000000;   /* main */
  --paper:     #FFFFFF;

  /* Brand accents — use sparingly, never as primary fills */
  --orange:    #FF6B21;
  --orange-2:  #E55A14;   /* darker for hover */
  --orange-soft: color-mix(in srgb, #FF6B21, white 95%);
                            /* very faint peach wash for the entry-flash */
  --lightblue: #BED6E2;

  /* Backward-compat aliases (older selectors still reference --cream) */
  --cream:     var(--beige);
  --cream-2:   #E6D9CB;

  /* Functional */
  --text:    #1A1A1A;
  --muted:   #6B6F76;
  --line:    #E0D6C9;     /* warm off-white, sits over --beige */
  --line-2:  #2A3850;     /* sits over --ink */

  /* Brand-mandated faces: Roboto Condensed (display) + Inter (body) */
  --display: 'Roboto Condensed', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1280px;
  --gutter:    24px;

  --t-fast: 200ms ease;
  --t:      320ms cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Safety net: never surface a horizontal scrollbar from a stray
     pseudo-element or transform. `clip` (vs `hidden`) keeps
     position: sticky working on descendants. Both declared so older
     browsers fall back to `hidden`. */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}
body {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
/* <main id="app"> — force block-flow + full width; no UA-stylesheet
   surprises (e.g., older Safari treating <main> as inline). */
main { display: block; width: 100%; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Typography — Roboto Condensed is already a condensed face;
   tracking stays neutral (or slightly positive for ALL-CAPS) */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 0.5em 0;
}
h1 { font-size: clamp(44px, 5.8vw, 80px); }
h2 { font-size: clamp(36px, 4.6vw, 64px); }
h3 { font-size: clamp(22px, 2.4vw, 32px); }
h4 { font-size: 20px; line-height: 1.2; }
/* Brand register: display headlines run all-caps when set with a
   .display-caps modifier. Tracking opens up slightly for legibility. */
.display-caps { text-transform: uppercase; letter-spacing: 0.005em; }
.eyebrow {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.lede { font-size: 19px; line-height: 1.55; color: #2A2F36; max-width: 64ch; }
small { color: var(--muted); }

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(56px, 7vw, 104px) 0; }
.section-title { max-width: 36ch; }
.divider { height: 1px; background: var(--line); margin: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--t);
  white-space: nowrap;
}
.btn-primary { background: var(--orange); color: white; }
.btn-primary:hover { background: var(--orange-2); }
.btn-dark { background: var(--ink); color: white; }
.btn-dark:hover { background: var(--ink-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: white; }
.btn-ghost-light { background: transparent; color: white; border-color: rgba(255,255,255,0.4); }
.btn-ghost-light:hover { background: white; color: var(--ink); border-color: white; }
/* (.btn-hero-primary removed — hero now uses the standard .btn-primary orange-fill per pdf3) */
/* Brand arrow ↗ — chunky filled glyph that already points up-right;
   no rotation needed. Hover translates it in its own direction. */
.arrow-up { display: inline-block; transition: var(--t); flex-shrink: 0; }
.btn:hover .arrow-up { transform: translate(2px, -2px); }

/* Site header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header.dark { background: var(--ink); border-bottom-color: var(--line-2); }
.site-header.dark a, .site-header.dark .logo { color: white; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
/* Brand-pack official lockup (mark + bespoke wordmark + descriptor).
   Two SVG variants swapped based on theme: navy for the standard
   light header, beige for the transparent home header sitting over
   the dark hero photo. */
.logo {
  display: inline-flex;
  align-items: center;
  height: 38px;
}
.logo .logo-img {
  height: 100%;
  width: auto;
  display: block;
}
.logo .logo-img--light { display: none; }
/* Home over dark hero: show beige, hide navy. */
body.home-active .logo .logo-img--dark  { display: none; }
body.home-active .logo .logo-img--light { display: block; }
/* Past the hero on home: revert to navy on white (matches all other routes). */
body.home-active.is-past-hero .logo .logo-img--dark  { display: block; }
body.home-active.is-past-hero .logo .logo-img--light { display: none; }
/* Footer uses the beige lockup directly (dark navy footer bg). Slightly
   taller than the header lockup, with bottom spacing before the tagline. */
.footer-logo { height: 46px; margin-bottom: 16px; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding: 4px 0;
}
.nav a:hover { opacity: 0.7; }
/* underline marks the active route — but not on the filled CTA pill */
.nav a.active:not(.cta)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--orange);
}
.nav a.cta {
  background: var(--ink); color: white !important;
  padding: 10px 18px;
  border-radius: 999px;
}
.nav a.cta:hover { background: var(--orange); opacity: 1; }
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }

@media (max-width: 880px) {
  .menu-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 18px var(--gutter); border-bottom: 1px solid var(--line); }
  .nav a.cta { border-radius: 0; text-align: center; padding: 18px var(--gutter); }

  /* Mobile dropdown is always white-bg, so override the home transparent
     theme's white text — otherwise the menu items go invisible. */
  body.home-active .site-header .nav.open a:not(.cta) { color: var(--text); }
  body.home-active .site-header .nav.open a.cta {
    background: var(--ink) !important;
    color: white !important;
  }
}

/* ============================================================
   PAGE ROUTING — sections toggle by data-route
   ============================================================ */
[data-route] { display: none; }
[data-route].is-active { display: block; }

/* ============================================================
   HERO (Home) — full-bleed B/W portrait, text overlaid
   ============================================================ */
.hero {
  position: relative;
  min-height: min(96vh, 860px);
  background: var(--ink);
  overflow: hidden;
  /* Extend behind the transparent home header so the photo runs
     edge-to-edge under the nav. We use position-shift (top: -73)
     instead of margin-top: -73 because <body> is a BFC (overflow-x:
     clip/hidden) and a BFC blocks negative margins from collapsing
     out of their parent — leaving a 73px white strip above the photo,
     visible through the transparent home nav. position+top doesn't
     depend on margin-collapsing.

     - top: -73 shifts the hero visually up under the header.
     - margin-bottom: -73 pulls the next section up by the same amount
       so there's no gap below the hero in flow.
     - padding-top: 73 keeps internal content (h1 etc) clear of the
       nav since the visual top is now at y=0. */
  top: -82px;
  margin-bottom: -82px;
  padding-top: 82px;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
/* Parallax inner wrapper — scrolls vertically; img inside still does Ken Burns */
.hero-bg-inner {
  position: absolute; inset: 0;
  will-change: transform;
}
.hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Face on the left, gaze leading into the right-anchored headline. The exact
     crop that keeps the eye clear of "WE" is viewport-ratio dependent; 60%
     validated in a real browser at MacBook ratio (live viewport is wider than
     a raw WxH once browser chrome is subtracted). Mobile keeps its own crop. */
  object-position: 60% 38%;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
}
.callout-bg-inner {
  position: absolute; inset: 0;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    /* darken the right (where text sits) so the headline reads cleanly */
    linear-gradient(265deg, rgba(29,44,64,0.82) 0%, rgba(29,44,64,0.62) 32%, rgba(29,44,64,0.18) 60%, rgba(29,44,64,0.20) 100%),
    linear-gradient(to bottom, rgba(29,44,64,0.20) 0%, transparent 18%, transparent 70%, rgba(29,44,64,0.45) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  /* Text right-anchored, per pdf3 layout: face on left leads the eye into copy on right */
  justify-content: flex-end;
  padding: clamp(80px, 14vh, 160px) clamp(40px, 6vw, 96px) clamp(64px, 10vh, 120px) var(--gutter);
}
.hero-text {
  max-width: 560px;
  color: white;
}
/* Brand arrow ↗ — orange, sits above the H1 as a small punctuation mark per pdf3 */
.hero-arrow {
  display: block;
  color: var(--orange);
  margin-bottom: 22px;
}
.hero-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 28px;
}
.hero-text h1 {
  color: white;
  font-size: clamp(56px, 8.4vw, 120px);
  letter-spacing: 0.005em;     /* ALL-CAPS register, slightly opened */
  font-weight: 700;             /* Bold weight per brand examples */
  line-height: 1.02;
  margin: 0;
  text-transform: uppercase;
}
/* "ENDURES" gets the brand brushstroke underline; preserved as <em>
   for semantic emphasis but rendered upright with a brush behind it. */
.hero-text h1 em {
  font-style: normal;
  font-weight: 700;
  color: white;
  position: relative;
  display: inline-block;
}
.hero-text h1 em::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.18em;
  height: 0.34em;
  background: url('assets/brand/graphic/brushstroke-orange.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}
.hero-meta {
  margin-top: 28px;
  max-width: 44ch;
  color: rgba(255,255,255,0.86);
  font-size: 16px;
  line-height: 1.6;
}
/* Brand star standing in for the em-dash in the hero sentence. The wrapper
   keeps "systems ★ the" on one line so the star never lands alone on a row
   (an inline <img> otherwise offers break opportunities at its edges). */
.star-wrap { white-space: nowrap; }
.star-sep {
  display: inline-block;    /* override the global `img { display: block }` */
  height: 0.7em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.3em;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}
/* (.hero-corner removed — diagnostic pill no longer in hero per pdf3 layout) */

/* Home: header stays sticky and locked in place, but is transparent
   while the hero photo is its backdrop. Crossfades to the standard
   light theme as the hero leaves view. The JS trigger
   (PAST_HERO_BUFFER = 220px in app.js) fires the fade EARLY enough
   that the 480ms transition completes while the header is still
   over the dark hero photo — so there's never a white-on-white
   moment mid-fade.

   Per-element transitions (NOT a single broad rule), because:
   (a) `transition: background` (shorthand) refuses to interpolate
       cleanly when background-image is involved — and `.nav a`
       uses a background linear-gradient for its underline-swipe
       hover. So we transition `background-color` only.
   (b) A broad rule on `.nav a` would also clobber the underline
       transition (`background-size` + `opacity`) defined later
       in the file. Each element type gets only the transitions
       that match the props it actually changes. */
body.home-active .site-header {
  background-color: transparent;
  border-bottom-color: rgba(255,255,255,0.12);
  transition: background-color 480ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-bottom-color 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.home-active .site-header .nav a:not(.cta),
body.home-active .site-header .menu-toggle {
  color: white;
  transition: color 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.home-active .site-header .nav a.cta {
  background-color: white;
  color: var(--ink) !important;
  transition: background-color 480ms cubic-bezier(0.2, 0.7, 0.2, 1),
              color 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.home-active .site-header .nav a.cta:hover {
  background-color: var(--orange);
  color: white !important;
}

/* Past the hero: standard light theme (matches every other route). */
body.home-active.is-past-hero .site-header {
  background-color: var(--paper);
  border-bottom-color: var(--line);
}
body.home-active.is-past-hero .site-header .nav a:not(.cta),
body.home-active.is-past-hero .site-header .menu-toggle {
  color: var(--text);
}
body.home-active.is-past-hero .site-header .nav a.cta {
  background-color: var(--ink);
  color: white !important;
}
body.home-active.is-past-hero .site-header .nav a.cta:hover {
  background-color: var(--orange);
}

@media (max-width: 880px) {
  .hero { min-height: 720px; }
  /* Mobile: face anchored upper-left so the eyes sit above the headline.
     The portrait's face is in the upper-left third of the original image. */
  .hero-bg img { object-position: 28% 18%; }
  .hero-content { justify-content: flex-start; }
  .hero-overlay {
    background:
      linear-gradient(rgba(29,44,64,0.62), rgba(29,44,64,0.62)),
      linear-gradient(to bottom, rgba(29,44,64,0.10) 0%, transparent 18%, transparent 70%, rgba(29,44,64,0.55) 100%);
  }
  .hero-text h1 { font-size: clamp(40px, 9vw, 56px); }
}

/* Asterisk SVG mark (in-text) */
.ast-mark { display: inline-block; vertical-align: middle; }

/* ============================================================
   PROOF STRIP — orange band sitting under the hero
   ============================================================ */
.proof-strip {
  background: var(--orange);
  color: white;
  padding: 28px 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.proof-stat {
  border-left: 1px solid rgba(255,255,255,0.3);
  padding-left: 24px;
}
.proof-stat:first-child { border-left: 0; padding-left: 0; }
.proof-stat .num {
  font-family: var(--display);
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  display: block;
  letter-spacing: -0.025em;
  line-height: 1;
}
.proof-stat .num sup { font-size: 0.45em; vertical-align: super; opacity: 0.7; }
.proof-stat .label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
  display: block;
  line-height: 1.3;
}
@media (max-width: 880px) {
  /* Stack the three stats so each label has room to breathe — no awkward 2+1 wrap */
  .proof-grid { grid-template-columns: 1fr; gap: 22px; }
  .proof-stat { border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.2); }
  .proof-stat:first-child { border-top: 0; padding-top: 0; }
  /* Mobile labels read better on one line — neutralise the desktop <br/> hint */
  .proof-stat .label br { display: none; }
}

/* ============================================================
   TOP 2.5% CALLOUT — landscape with navy overlay card
   ============================================================ */
.callout-25 {
  position: relative;
  background: var(--ink);
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
}
.callout-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.callout-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
  filter: grayscale(0) brightness(0.78) contrast(1.05);
}
.callout-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(14,26,43,0.55) 0%, rgba(14,26,43,0.20) 60%, rgba(14,26,43,0.55) 100%);
}
.callout-25 .container { position: relative; z-index: 1; }
.callout-card {
  background: transparent;
  color: white;
  max-width: 640px;
  padding: 0;
  border-radius: 0;
  border-left: none;
}
/* Headline + leading orange arrow ↗ per pdf2/pdf3 — no card chrome competing with the photo */
.callout-headline {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.callout-arrow {
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 0.25em;
}
.callout-card h2 {
  color: white;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 20px;
}
.callout-card p { color: rgba(255,255,255,0.78); margin: 0; max-width: 50ch; }

/* ============================================================
   SECTION: WHAT WE BUILD
   ============================================================ */
.what-we-build {
  background: var(--paper);
}
.two-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.what-card {
  background: var(--paper);
  border-radius: 6px;
  border: 1px solid var(--line);
  transition: var(--t);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.what-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.what-card .card-photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.15);
}
.what-card .card-body {
  padding: 32px 36px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.what-card h3 { margin-top: 0; }
.what-card .meta {
  display: inline-block;
  background: var(--ink);
  color: white;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  align-self: flex-start;
}
.what-card .arrow-link {
  color: var(--orange); font-weight: 500;
  margin-top: auto; padding-top: 24px;
  display: inline-flex; gap: 6px; align-items: center;
  align-self: flex-start;
}
.what-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.what-card .card-body > p {
  margin-bottom: 24px;
}

@media (max-width: 880px) { .two-cards { grid-template-columns: 1fr; } }

/* ============================================================
   PAIN GRID + ARROWS (Built to Last)
   ============================================================ */
.pain-section { background: var(--cream); }
.pain-grid-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
/* Each pattern is its own card: an index number, an orange edge that draws in
   on hover, and a subtle lift — reads as a considered list, not a spreadsheet. */
.pain-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 128px;
  transition: var(--t);
}
.pain-item:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(29,44,64,0.10);
}
.pain-idx {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.pain-item p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
.pain-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 32px;
}
.pain-visual img {
  max-height: min(640px, 80vh);
  width: auto;
  filter: none;
}
@media (max-width: 880px) {
  .pain-grid-wrap { grid-template-columns: 1fr; gap: 36px; }
  .pain-grid { grid-template-columns: 1fr 1fr; }
  .pain-visual { order: -1; }
}

/* ============================================================
   FAMILIAR (Does this sound familiar?)
   ============================================================ */
.familiar {
  background: var(--ink);
  color: white;
}
.familiar h2, .familiar h3 { color: white; }
.familiar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.familiar-text p { color: rgba(255,255,255,0.78); max-width: 50ch; margin-bottom: 28px; }
.familiar-image {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.familiar-image img { width: 100%; height: 100%; object-fit: cover; }
.familiar-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 880px) { .familiar-grid { grid-template-columns: 1fr; } }

/* ============================================================
   METHODOLOGY
   ============================================================ */
.methodology {
  background: var(--paper);
}
.methodology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.methodology-grid .col h3 { font-size: 26px; }
.methodology-subblock {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 28px;
}
/* Inline "→" text link used to point deeper (e.g. into the About methodology). */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--orange);
  font-weight: 600;
  font-size: 15px;
}
.arrow-link svg { transition: transform var(--t-fast); }
.arrow-link:hover svg { transform: translate(2px, -2px); }
.founder-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: 4px;
}
.founder-card img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  object-position: center 30%;
  border-radius: 2px;
  margin-bottom: 16px;
  filter: grayscale(0.5) sepia(0.06) contrast(1.02);
}
.founder-card .role { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.founder-card .name { font-family: var(--display); font-size: 22px; margin: 6px 0 14px; }
.founder-card p { font-size: 14px; line-height: 1.55; color: #404654; }
@media (max-width: 880px) { .methodology-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FROM LEADERSHIP TO LEGACY (orange stripe)
   ============================================================ */
.legacy-stripe {
  background: var(--orange);
  color: white;
  padding: clamp(48px, 6vw, 72px) 0;
}
.legacy-stripe .container {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.legacy-stripe h2 { color: white; margin: 0; max-width: 12ch; }
.legacy-stripe p { font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.95); margin: 0; max-width: 60ch; }
@media (max-width: 880px) { .legacy-stripe .container { grid-template-columns: 1fr; gap: 24px; } }

/* Five-stage framework teaser inside the (orange) legacy stripe. The whole
   track is one link into the About framework. Endurance = the keystone,
   rendered as a navy block so it reads as the culmination, not just a step. */
.framework-track {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: var(--t);
}
.framework-track:hover {
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.16);
}
.fw-step {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px 22px;
  border-right: 1px solid rgba(255,255,255,0.26);
}
.fw-step:last-of-type { border-right: 0; }
.fw-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}
.fw-name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
}
.fw-sub {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.82);
}
.fw-step.is-key { background: var(--ink); }
.fw-step.is-key .fw-num { color: rgba(255,255,255,0.7); font-style: normal; }
.fw-more {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.26);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.framework-track:hover .fw-more { text-decoration: underline; }
@media (max-width: 560px) {
  .fw-step { flex-basis: 50%; min-width: 0; }
}

/* Staged reveal — the stones build left→right and the keystone (Endurance)
   locks in last, echoing the arch. The track itself only fades (data-reveal
   ="fade"); each step carries the motion, offset by transition-delay. */
.framework-track .fw-step,
.framework-track .fw-more {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.framework-track .fw-step.is-key {
  transform: translateY(16px) scale(0.9);   /* the keystone drops + locks in */
}
.framework-track.is-revealed .fw-step,
.framework-track.is-revealed .fw-more {
  opacity: 1;
  transform: none;
}
.framework-track.is-revealed .fw-step:nth-of-type(1) { transition-delay: 140ms; }
.framework-track.is-revealed .fw-step:nth-of-type(2) { transition-delay: 250ms; }
.framework-track.is-revealed .fw-step:nth-of-type(3) { transition-delay: 360ms; }
.framework-track.is-revealed .fw-step:nth-of-type(4) { transition-delay: 470ms; }
.framework-track.is-revealed .fw-step.is-key         { transition-delay: 640ms; }
.framework-track.is-revealed .fw-more                { transition-delay: 840ms; }

/* ============================================================
   THE KEYSTONE ARCHITECTURE (the arch)
   ============================================================ */
.architecture {
  background: var(--paper);
  padding-top: clamp(72px, 8vw, 112px);
}
.arch-wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}
.arch-svg-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.arch-svg-wrap svg { width: 100%; max-width: 720px; height: auto; }
.arch-caption {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  max-width: 22ch;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin-top: 32px;
  /* Whole-caption scale-in — settles in slowly across the same window
     the words are appearing in (1700ms → ~4100ms), so the block feels
     like it's growing into focus as it speaks. */
  transform: scale(0.96);
  transform-origin: center top;
  transition: transform 2400ms cubic-bezier(0.2, 0.7, 0.2, 1) 1700ms;
  /* aria-label on the <p> exposes the full sentence to screen readers;
     each .word span carries a slice of it visually. */
}
.arch-caption-line { display: block; }
.arch-caption .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter   600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.arch-caption .word-key {
  color: var(--orange);
  /* Brushstroke positioning anchor — same trick as the hero's ENDURES */
  position: relative;
  display: inline-block;
}
.arch-caption .word-key::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  bottom: -0.06em;
  height: 0.32em;
  background: url('assets/brand/graphic/brushstroke-orange.svg') center / 100% 100% no-repeat;
  pointer-events: none;
  /* Wipe-in left-to-right; timed below to draw under 'keystone' as the
     words progress, completing alongside the last word of sentence 2. */
  clip-path: inset(0 100% 0 0);
}
.arch-stages { display: flex; flex-direction: column; gap: 14px; }
.arch-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.arch-stage:last-child { border-bottom: 1px solid var(--line); }
.arch-stage .num {
  font-family: var(--display);
  font-size: 20px;
  color: var(--orange);
  font-weight: 500;
  font-style: italic;
}
.arch-stage h4 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; }
.arch-stage p { margin: 0; color: var(--muted); font-size: 14.5px; }
@media (max-width: 880px) { .arch-wrap { grid-template-columns: 1fr; } }

/* ============================================================
   APPROACH (program rows)
   ============================================================ */
.approach { background: var(--paper); }
.approach-rows { margin-top: 36px; }
.approach-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 24px clamp(20px, 3vw, 36px);
  /* Explicit white background (not transparent) so :hover transitions
     interpolate cleanly to/from orange. Transparent → color sometimes
     refuses to animate. */
  background-color: white;
  color: var(--text);
  border-top: 1px solid var(--line);
  cursor: pointer;
  /* Hover transitions use the standard timing. The entry flash is a
     keyframe animation (below), independent of these transitions. */
  transition: background-color 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
              color 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.approach-rows .approach-row:last-child { border-bottom: 1px solid var(--line); }

/* Hover & persistent active: standard bright brand orange. */
.approach-row:hover, .approach-row.active {
  background-color: var(--orange);
  color: white;
  border-color: var(--orange);
}
.approach-row + .approach-row:hover,
.approach-row + .approach-row.active { border-top-color: var(--orange); }

/* Entry-flash sequence — each row fades up to soft orange, then
   immediately fades back to white. NO hold at peak — peak is a single
   instant (the 50% keyframe). Successive rows are staggered tightly
   so multiple rows are visibly mid-fade simultaneously, but only ONE
   row hits exact peak at any given moment. */
@keyframes approach-flash {
  /* Text + border stay in their resting state — only the background
     washes a faint peach. White text on a 95%-white bg would be
     invisible, so we keep the dark var(--text) throughout. */
  0%   { background-color: white; }
  50%  { background-color: var(--orange-soft); }
  100% { background-color: white; }
}
.approach-row.flash {
  /* 600ms total — 300ms in, 300ms out, no hold. Duration must stay in
     sync with animMs in app.js setupApproachFlash. */
  animation: approach-flash 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.approach-row .label { font-size: 18px; font-weight: 500; font-family: var(--display); }
.approach-row .preview {
  width: 120px; height: 72px; border-radius: 4px;
  background-size: cover; background-position: center;
  filter: grayscale(0.2);
  transition: var(--t);
}
.approach-row .preview.lazy { opacity: 0.55; }
.approach-row:hover .preview,
.approach-row.active .preview,
.approach-row.flash .preview { opacity: 1; filter: none; }
.approach-row .cta-btn {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 500;
}
.approach-row.active .cta-btn,
.approach-row:hover .cta-btn { background: white; color: var(--orange); border-color: white; }
/* No .flash .cta-btn override — the bg pulse is so faint now that the
   pill should keep its resting style (dark text on transparent), which
   stays visible against the near-white peach wash. */
@media (max-width: 880px) {
  .approach-row { grid-template-columns: 1fr auto; }
  .approach-row .preview { display: none; }
}

/* ============================================================
   STATS PANEL
   ============================================================ */
.stats-panel {
  background: var(--ink);
  color: white;
  padding: clamp(72px, 9vw, 120px) 0;
}
.stats-panel .lead {
  max-width: 36ch;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: white;
  letter-spacing: -0.015em;
  margin-bottom: 56px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
/* Behavioral-shift declarations — eyebrow + display headline + description.
   Replaces the legacy .stat numerical block since the brand pushes against
   hyper-specific ROI claims. Same visual rhythm, different content shape. */
.shift-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 16px;
}
.shift-headline {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: white;
  margin: 0 0 14px;
}
.shift-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
  max-width: 28ch;
  margin: 0;
}
@media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ============================================================
   LONG-ARC ENGAGEMENTS
   ============================================================ */
.long-arc { background: var(--paper); }
/* Featured engagement (1+2 layout) */
.arc-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  margin-top: 48px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.arc-feature-image {
  background-size: cover;
  background-position: center;
  filter: grayscale(0.35);
  min-height: 100%;
}
.arc-feature-body {
  padding: clamp(36px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.duration-xl {
  font-family: var(--display);
  font-style: italic;
  color: var(--orange);
  font-size: clamp(44px, 5.6vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 20px;
}
.arc-feature h3 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 34px); }
.arc-feature p { color: #404654; font-size: 16px; line-height: 1.55; max-width: 50ch; margin: 0 0 22px; }

.arc-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.arc-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 32px;
  align-items: start;
}
.duration-md {
  font-family: var(--display);
  font-style: italic;
  color: var(--orange);
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.duration-md small { font-size: 18px; opacity: 0.8; }
.arc-row h4 { margin: 0 0 8px; font-family: var(--display); }
.arc-row p { font-size: 14.5px; color: #404654; line-height: 1.5; margin: 0; }
.arc-row .industry,
.arc-feature .industry {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
@media (max-width: 880px) {
  .arc-feature, .arc-secondary { grid-template-columns: 1fr; }
  .arc-row { grid-template-columns: 1fr; gap: 12px; }
}
.duration-xl small {
  display: block;
  font-size: 0.42em;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 4px;
}

/* Featured-engagements carousel: full-width scroll-snap slides + arrow nav. */
.arc-carousel { margin-top: 48px; }
.arc-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.arc-track::-webkit-scrollbar { display: none; }
.arc-track .arc-feature {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin-top: 0;                 /* override the standalone .arc-feature margin */
}
.arc-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
}
.arc-progress {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 46px;
  text-align: center;
}
.arc-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--t);
}
.arc-arrow:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.arc-arrow:disabled { opacity: 0.32; cursor: default; }

/* ============================================================
   SUCCESS STORIES (testimonials)
   ============================================================ */
.success { background: var(--cream); }
.success-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.test-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
/* Typographic monogram avatar — interim until commissioned headshots arrive */
.test-card .test-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  border-radius: 4px;
  background: var(--beige);
  border: 1px solid var(--line);
  color: var(--orange);
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
/* Legacy class kept in case any old markup still references it */
.test-card .test-photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
}
.test-card blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.01em;
  flex: 1;
}
.test-card .attrib {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.test-card .attrib .name { font-weight: 600; font-size: 15px; }
.test-card .attrib .role { font-size: 13px; color: var(--muted); }
@media (max-width: 880px) { .success-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing {
  background: url('assets/brand/img/window-reflection.jpg') center / cover no-repeat;
  position: relative;
  padding: clamp(96px, 12vw, 160px) 0;
}
.closing::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(14,26,43,0.85), rgba(14,26,43,0.55));
}
.closing .container { position: relative; }
.closing-card {
  background: var(--ink);
  color: white;
  max-width: 560px;
  padding: clamp(36px, 5vw, 56px);
  border-radius: 6px;
}
.closing-card h2 { color: white; margin: 0 0 16px; }
.closing-card p { color: rgba(255,255,255,0.78); margin: 0 0 28px; }
.closing-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.78);
  padding: 64px 0 32px;
}
.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
/* Social brand icon buttons — restrained circle, picks up orange on hover.
   Icons are inline SVGs that inherit currentColor. */
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  color: rgba(255,255,255,0.78);
  transition: background 240ms cubic-bezier(0.2,0.7,0.2,1),
              color 240ms cubic-bezier(0.2,0.7,0.2,1),
              border-color 240ms cubic-bezier(0.2,0.7,0.2,1),
              transform 240ms cubic-bezier(0.2,0.7,0.2,1);
}
.footer-social a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: white;
  transform: translateY(-2px);
}
.footer-social a svg {
  width: 18px;
  height: 18px;
  display: block;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-2);
}
.footer-grid h5 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: white; margin: 0 0 18px; }
.footer-grid a { display: block; padding: 4px 0; font-size: 14px; color: rgba(255,255,255,0.75); }
.footer-grid a:hover { color: white; }
.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line-2);
}
.offices .city { font-weight: 600; color: white; margin-bottom: 4px; font-size: 14px; }
.offices p { margin: 0; font-size: 13px; line-height: 1.5; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 16px;
}
/* Build version — filled in from <meta name="site-version"> by inline script. */
.footer-version {
  opacity: 0.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}
.footer-version:empty { display: none; }
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .offices { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT page
   ============================================================ */
.about-hero {
  background: var(--ink);
  color: white;
  padding: clamp(72px, 10vw, 140px) 0;
}
.about-hero .hero-arrow { color: var(--orange); margin-bottom: 18px; }
.about-hero h1 { color: white; max-width: 18ch; }
.about-hero p { color: rgba(255,255,255,0.78); max-width: 60ch; font-size: 19px; line-height: 1.55; }
.about-pillars {
  background: var(--paper);
}
.about-pillars-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.about-image {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); }
@media (max-width: 880px) { .about-pillars-grid { grid-template-columns: 1fr; } }

.about-belief { background: var(--cream); }
.belief-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 880px) {
  .belief-list { grid-template-columns: 1fr; }
}
.belief-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 4px;
}
.belief-card .num {
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  color: var(--orange);
}
.belief-card h4 { margin: 8px 0 12px; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.partner-card .photo {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  filter: grayscale(0.4);
}
.partner-card .name { font-family: var(--display); font-size: 22px; margin: 16px 0 4px; }
.partner-card .role { color: var(--muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.partner-card p { font-size: 14.5px; color: #404654; }

/* ============================================================
   SOLUTIONS page
   ============================================================ */
.solutions-hero {
  background: var(--cream);
  padding: clamp(72px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
}
.solutions-list { margin-top: 40px; }
.solution {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.solution:nth-child(even) { direction: rtl; }
.solution:nth-child(even) > * { direction: ltr; }
.solution .image {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  filter: grayscale(0.15);
}
.solution .num {
  font-family: var(--display);
  font-style: italic;
  color: var(--orange);
  font-size: 24px;
  letter-spacing: -0.01em;
}
.solution h2 { margin: 6px 0 18px; max-width: 18ch; }
.solution ul { margin: 24px 0 32px; padding: 0; list-style: none; }
.solution ul li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  display: flex; gap: 14px; align-items: baseline;
}
.solution ul li:last-child { border-bottom: 1px solid var(--line); }
.solution ul li::before {
  content: '·';
  color: var(--orange);
  font-size: 28px;
  line-height: 0;
}
@media (max-width: 880px) {
  .solution, .solution:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}

/* ============================================================
   DIAGNOSTIC
   ============================================================ */
.diagnostic-hero {
  background: var(--orange);
  color: white;
  padding: clamp(72px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.diagnostic-hero h1 { color: white; max-width: 16ch; }
.diagnostic-hero p { color: rgba(255,255,255,0.92); max-width: 50ch; font-size: 19px; }
.diagnostic-meta {
  display: flex; gap: 48px; margin-top: 36px; flex-wrap: wrap;
}
.diagnostic-meta div .label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; display: block; margin-bottom: 4px; }
.diagnostic-meta div .val { font-family: var(--display); font-size: 22px; font-weight: 500; }

.diagnostic-app { padding: clamp(48px, 7vw, 96px) 0; background: var(--cream); min-height: 60vh; }
.diag-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(32px, 5vw, 56px);
  max-width: 760px;
  margin: 0 auto;
}
.progress-bar {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 32px;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--orange);
  transition: width 360ms ease;
}
.diag-stage {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 8px;
}
.diag-q {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  line-height: 1.2;
}
.diag-options { display: grid; gap: 10px; }
.diag-option {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 15.5px;
  text-align: left;
  font-family: inherit;
  transition: var(--t);
  display: flex; align-items: center; gap: 12px;
}
.diag-option:hover { border-color: var(--ink); background: var(--paper); }
.diag-option.selected { border-color: var(--orange); background: rgba(242,107,31,0.05); color: var(--ink); }
.diag-option .dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  transition: var(--t);
}
.diag-option.selected .dot { border-color: var(--orange); background: var(--orange); }
.diag-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  align-items: center;
}
.diag-back { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 8px 0; font-family: inherit; }
.diag-back:hover { color: var(--text); }

.diag-form { display: grid; gap: 16px; max-width: 480px; }
.diag-form input, .diag-form textarea, form input, form textarea, form select {
  font-family: inherit;
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--text);
  width: 100%;
}
.diag-form input:focus, form input:focus, form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }

.diag-result-stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.diag-result-stage:last-of-type { border-bottom: 1px solid var(--line); }
.diag-result-stage .stage-num { font-family: var(--display); font-style: italic; color: var(--orange); font-size: 22px; }
.diag-result-stage .stage-name { font-family: var(--display); font-weight: 500; font-size: 18px; }
.diag-result-stage .meter {
  width: 120px;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.diag-result-stage .meter > span { display: block; height: 100%; background: var(--orange); }
.diag-result-stage .score { font-family: var(--display); font-weight: 500; font-size: 22px; min-width: 56px; text-align: right; }

.risk-list, .move-list { margin: 16px 0 0; padding: 0; list-style: none; }
.risk-list li, .move-list li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  display: flex; gap: 12px; align-items: baseline;
}
.risk-list li::before { content: '!'; color: var(--orange); font-family: var(--display); font-style: italic; font-weight: 500; }
.move-list li::before { content: '→'; color: var(--orange); font-weight: 500; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-hero { background: var(--cream); padding: clamp(72px, 10vw, 120px) 0 clamp(48px, 6vw, 80px); }
.contact-hero h1 { max-width: 18ch; }
/* Full-bleed cream band; the grid inside is centered by .container */
.contact-band {
  background: var(--cream);
  padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 10vw, 120px);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
}
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-side { padding-top: 8px; }
.contact-side .item { padding: 18px 0; border-top: 1px solid var(--line); }
.contact-side .item:last-child { border-bottom: 1px solid var(--line); }
.contact-side .item h4 { font-family: var(--display); margin: 0 0 6px; font-size: 18px; }
.contact-side .item p { margin: 0; color: var(--muted); font-size: 14px; }
.success-msg { background: var(--ink); color: white; padding: 24px; border-radius: 4px; }
.success-msg h3 { color: white; margin: 0 0 8px; }
/* Honeypot — parked far off-screen, not display:none (some bots skip hidden fields) */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin-top: 16px; font-size: 14px; color: var(--orange); }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
  form .row { grid-template-columns: 1fr; }
}

/* ============================================================
   Page-level intro patterns (shared)
   ============================================================ */
.page-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.page-intro .eyebrow { margin-bottom: 8px; display: block; }
@media (max-width: 880px) { .page-intro { grid-template-columns: 1fr; } }

/* utility */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.center { text-align: center; }
.muted { color: var(--muted); }
.fade-in { animation: fade 480ms ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   ALIVE — reveal system
   Opt-in via [data-reveal="<type>"]. JS adds .is-revealed when
   the element enters the viewport. Brand register: composed,
   confident, never bouncy. Subtle distances, slow-ish easing.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="rise"]  { transform: translateY(48px) scale(0.985); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   ALIVE — hero brushstroke draws in left-to-right after H1 lands
   ============================================================ */
.hero-text h1 em::after {
  /* Augments the existing background-image rule earlier in this file */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s;
}
.hero-text.is-revealed h1 em::after {
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   ALIVE — hero portrait slow Ken Burns
   ============================================================ */
@keyframes hero-ken-burns {
  0%   { transform: scale(1.00); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1.00); }
}
.hero-bg img {
  animation: hero-ken-burns 20s ease-in-out infinite;
}

/* ============================================================
   ALIVE — arch SVG choreography
   When .arch-svg-wrap enters viewport, the arch assembles:
   1. shadow + pillars rise from below
   2. side voussoirs scale in from springline
   3. KEYSTONE drops into place last (the brand metaphor)
   4. mortar joints stroke in
   ============================================================ */
.arch-svg-wrap svg .arch-pillar,
.arch-svg-wrap svg .arch-voussoir,
.arch-svg-wrap svg .arch-keystone,
.arch-svg-wrap svg .arch-joints,
.arch-svg-wrap svg .arch-shadow,
.arch-svg-wrap svg .arch-ground {
  opacity: 0;
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-box: fill-box;
  transform-origin: center;
}
.arch-svg-wrap svg .arch-pillar  { transform: translateY(40px); }
.arch-svg-wrap svg .arch-voussoir { transform: scale(0.55); }
.arch-svg-wrap svg .arch-keystone { transform: translateY(-48px); }

.arch-svg-wrap.is-revealed svg .arch-pillar,
.arch-svg-wrap.is-revealed svg .arch-voussoir,
.arch-svg-wrap.is-revealed svg .arch-keystone,
.arch-svg-wrap.is-revealed svg .arch-joints,
.arch-svg-wrap.is-revealed svg .arch-shadow,
.arch-svg-wrap.is-revealed svg .arch-ground {
  opacity: 1;
  transform: none;
}
/* Sequence — pillars first, voussoirs from the springline up,
   keystone drops last with a subtle gravity ease */
.arch-svg-wrap.is-revealed svg .arch-shadow         { transition-delay: 0ms;   opacity: 0.10; }
.arch-svg-wrap.is-revealed svg .arch-ground         { transition-delay: 0ms;   opacity: 0.6; }
.arch-svg-wrap.is-revealed svg .arch-pillar         { transition-delay: 80ms;  }
.arch-svg-wrap.is-revealed svg .arch-voussoir.v1,
.arch-svg-wrap.is-revealed svg .arch-voussoir.v5    { transition-delay: 320ms; }
.arch-svg-wrap.is-revealed svg .arch-voussoir.v2,
.arch-svg-wrap.is-revealed svg .arch-voussoir.v4    { transition-delay: 460ms; }
.arch-svg-wrap.is-revealed svg .arch-keystone {
  transition-delay: 760ms;
  transition-duration: 820ms;
  transition-timing-function: cubic-bezier(0.50, 0.00, 0.20, 1.00); /* slight gravity */
}
.arch-svg-wrap.is-revealed svg .arch-joints         { transition-delay: 1320ms; }

/* Caption: word-by-word fade-up + blur-to-focus, starting just AFTER
   the keystone has landed (~1580ms). Reads like the arch is speaking
   the line. ~160ms between words; a 400ms pause between sentences
   (i.e. word #6 is delayed an extra 240ms beyond a steady 160ms cadence)
   to give the second sentence weight. */
.arch-svg-wrap.is-revealed .arch-caption .word {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Sentence 1: "The keystone locks the arch." */
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(1) .word:nth-of-type(1) { transition-delay: 1700ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(1) .word:nth-of-type(2) { transition-delay: 1860ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(1) .word:nth-of-type(3) { transition-delay: 2020ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(1) .word:nth-of-type(4) { transition-delay: 2180ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(1) .word:nth-of-type(5) { transition-delay: 2340ms; }
/* Sentence 2: "Without it, the others fall." — 400ms breath after sentence 1 */
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(2) .word:nth-of-type(1) { transition-delay: 2740ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(2) .word:nth-of-type(2) { transition-delay: 2900ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(2) .word:nth-of-type(3) { transition-delay: 3060ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(2) .word:nth-of-type(4) { transition-delay: 3220ms; }
.arch-svg-wrap.is-revealed .arch-caption-line:nth-of-type(2) .word:nth-of-type(5) { transition-delay: 3380ms; }

/* Whole-caption settle: scale 0.96 → 1.0 over the word-reveal window. */
.arch-svg-wrap.is-revealed .arch-caption { transform: scale(1); }

/* Brushstroke under 'keystone': starts as the word 'keystone' enters
   (~1900ms), draws left-to-right over 1.5s, lands at ~3400ms — right
   as the second sentence resolves. The brushstroke and the final word
   finish together. */
.arch-svg-wrap.is-revealed .arch-caption .word-key::after {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 1900ms;
}

/* (removed) header padding-tighten on scroll — was causing the bar
   to visibly change height as the user scrolled. Header keeps its
   resting size at all times now. */

/* ============================================================
   ALIVE — page-route entry transition
   ============================================================ */
@keyframes route-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Opacity-only — no translateY — so the route never shifts vertically
   during/before the animation. (Earlier translateY(10px) was leaking
   a 10px gap under the sticky header during the 380ms fade in.) */
[data-route].is-active {
  animation: route-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* ============================================================
   ALIVE — link underline that swipes in from left on hover
   ============================================================ */
.site-header .nav a:not(.cta) {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 280ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
}
.site-header .nav a:not(.cta):hover {
  background-size: 100% 2px;
  opacity: 1;
}

/* Reduced-motion: disable the lot, respect user preference */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-revealed,
  .framework-track .fw-step,
  .framework-track .fw-more,
  .hero-text h1 em::after,
  .arch-svg-wrap svg *,
  .arch-caption,
  .arch-caption .word,
  .arch-caption .word-key::after {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .hero-bg img { animation: none !important; }
  [data-route].is-active { animation: none !important; }
  .approach-row.flash { animation: none !important; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .site-header, .site-footer, .closing, .legacy-stripe { display: none; }
}