/* ==========================================================================
   Forma Consulting - elevated landing (self-contained)
   Palette locked: Navy #0E2A47 / Off White #F4F1EC / White / Gold #C9A96E /
   Slate Teal #47A89A. Fraunces = human voice. Archivo = working voice.
   ========================================================================== */

/* ---------- Fonts ----------
   Fraunces + Archivo load via the Google Fonts <link> in each page head. */

/* ---------- Tokens ---------- */
:root {
  --navy: #0E2A47;
  --navy-deep: #0A2038;
  --navy-abyss: #071624;
  --navy-raise: #143352;
  --offwhite: #F4F1EC;
  --white: #FFFFFF;
  --gold: #C9A96E;
  --gold-press: #B8975C;
  --teal: #47A89A;
  --hairline-light: rgba(14, 42, 71, 0.14);
  --hairline-dark: rgba(244, 241, 236, 0.14);
  --ink: var(--navy);
  --ink-soft: rgba(14, 42, 71, 0.9);
  --paper-ink: rgba(244, 241, 236, 0.95);
  --paper-dim: rgba(244, 241, 236, 0.82);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
  --shell: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--navy); }

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

[id] { scroll-margin-top: 84px; }

.shell { max-width: var(--shell); margin: 0 auto; padding-left: clamp(22px, 5vw, 64px); padding-right: clamp(22px, 5vw, 64px); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: var(--navy); font-weight: 700;
  padding: 10px 18px;
}
.skip-link:focus { left: 0; }

/* ---------- Film grain (whole page, barely-there) ---------- */
body::after {
  content: ""; position: fixed; inset: -60px; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
}

/* ---------- Type voices ---------- */
h1, h2, h3 { line-height: 1.08; }
h1, .sec-title, .closer-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.012em; }
/* Accents read straight bold everywhere: one display voice, no italic asides. */
h2 em { font-style: normal; font-weight: 800; }

.sec-title { font-size: clamp(2rem, 3.8vw, 3.1rem); max-width: 21ch; }
.sec-sub { max-width: 52ch; color: var(--ink-soft); margin-top: 14px; }
.sec-head { margin-bottom: clamp(52px, 7vw, 96px); }
.sec-head-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.sec-aside { color: var(--ink-soft); font-size: 1rem; max-width: 38ch; justify-self: end; padding-bottom: 6px; }

/* Section seal: the Forma kicker lockup. One device, everywhere.
   A gold square set on point (the journey's station mark, adopted site-wide),
   a spaced label, and a hairline tail that draws when the section arrives. */
.slab {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 22px;
}
.slab-sq { display: none; }
.slab::after {
  content: ""; width: 34px; height: 1px; flex: none;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.7), rgba(201, 169, 110, 0));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.8s var(--ease) 0.4s;
}
.slab.rv-in .slab-sq::after, .rv-in .slab-sq::after, html.no-js .slab-sq::after { transform: scale(1); }
.slab.rv-in::after, .rv-in .slab::after, html.no-js .slab::after { transform: scaleX(1); }
.slab-dark { color: var(--paper-dim); }

/* ---------- Buttons + links ---------- */
/* The primary action: one clean gold plate. Confident type, a quiet inner
   bevel for tactility, a crisp darken on hover. The button is the only
   soft-cornered object on the site: everything else is read, this is pressed. */
.btn-gold {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem; line-height: 1;
  letter-spacing: 0.015em; white-space: nowrap;
  color: var(--navy);
  background-color: var(--gold);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%, rgba(7, 22, 36, 0.07));
  padding: 16px 30px; border: 0; border-radius: 7px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px -10px rgba(7, 22, 36, 0.5);
  transition: background-color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
  will-change: transform;
}
.btn-gold:hover, .btn-gold:focus-visible {
  background-color: var(--gold-press);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 30px -10px rgba(7, 22, 36, 0.55);
}
.btn-gold:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 14px -8px rgba(7, 22, 36, 0.5); }
.btn-nav { padding: 12px 22px; font-size: 0.9rem; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px -8px rgba(7, 22, 36, 0.4); }
.btn-lg { padding: 19px 38px; font-size: 1.05rem; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 14px 32px -12px rgba(7, 22, 36, 0.55); }

.link-quiet {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-weight: 600; font-size: 0.97rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left bottom;
  padding-bottom: 3px;
  transition: background-size 0.35s var(--ease);
}
.link-quiet:hover { background-size: 100% 1px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; color: var(--navy);
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.link-arrow::after { content: "\2192"; font-weight: 400; transition: transform 0.25s var(--ease); }
.link-arrow:hover { color: var(--teal); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(7, 22, 36, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(244, 241, 236, 0.08);
}
/* Reading progress: a gold hairline along the nav's bottom edge tracks how
   far down the story you are. State, not decoration, so it stays under
   reduced motion; it only appears once the page has actually moved. */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.75), var(--gold));
  transform: scaleX(var(--sp, 0)); transform-origin: left center;
  opacity: 0; transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.nav.is-scrolled::after { opacity: 1; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.15rem; color: var(--offwhite); letter-spacing: 0.01em; }
.nav-links { display: flex; gap: clamp(20px, 3vw, 42px); }
.nav-links a {
  font-size: 0.93rem; font-weight: 500; color: var(--paper-ink); padding: 6px 0;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left calc(100% - 2px);
  transition: color 0.25s, background-size 0.35s var(--ease);
}
.nav-links a:hover { color: var(--white); background-size: 100% 1px; }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; }

/* Full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 95; background: var(--navy-abyss);
  display: flex; flex-direction: column; justify-content: center; gap: 40px;
  padding: 100px clamp(24px, 8vw, 64px) 48px;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 9vw, 3.2rem); color: var(--offwhite); line-height: 1.35;
  transform: translateY(24px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), color 0.25s;
}
.menu nav a:hover { color: var(--gold); }
.menu.is-open nav a { transform: none; opacity: 1; }
.menu.is-open nav a:nth-child(1) { transition-delay: 0.06s; }
.menu.is-open nav a:nth-child(2) { transition-delay: 0.12s; }
.menu.is-open nav a:nth-child(3) { transition-delay: 0.18s; }
.menu.is-open nav a:nth-child(4) { transition-delay: 0.24s; }
.menu.is-open nav a:nth-child(5) { transition-delay: 0.3s; }
.menu.is-open nav a:nth-child(6) { transition-delay: 0.36s; }
.menu-foot { color: var(--paper-dim); font-size: 0.85rem; letter-spacing: 0.06em; }

/* ==========================================================================
   HERO - the living operations system
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--navy);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* Atmosphere: pooled depth in the same navy family, plus vignette. Not a gradient wash. */
.hero-atmos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-atmos::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 90% at 82% 8%, rgba(7, 22, 36, 0) 40%, rgba(7, 22, 36, 0.55) 100%),
    radial-gradient(70% 60% at 18% 78%, rgba(20, 51, 82, 0.4) 0%, rgba(20, 51, 82, 0) 60%),
    radial-gradient(46% 40% at 74% 62%, rgba(71, 168, 154, 0.07) 0%, rgba(71, 168, 154, 0) 65%);
}
.hero-atmos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 22, 36, 0.5) 0%, rgba(7, 22, 36, 0) 22%, rgba(7, 22, 36, 0) 72%, rgba(7, 22, 36, 0.6) 100%);
}

.hero-inner { position: relative; z-index: 3; width: 100%; padding-top: 108px; padding-bottom: 96px; }
.hero-copy { max-width: 780px; }

.hero-kicker {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 28px;
}
html.js .hero-kicker { opacity: 0; transition: opacity 0.9s var(--ease) 0.35s; }
html.js.is-live .hero-kicker { opacity: 1; }

.hero-title {
  font-size: clamp(2.9rem, 8.2vw, 6.4rem);
  color: var(--offwhite);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin-bottom: 34px;
}
.ht-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ht-word { display: inline-block; position: relative; }
html.js .ht-word {
  transform: translateY(112%) rotate(1.2deg); transform-origin: left bottom;
  transition: transform 1.05s var(--ease-slow) var(--hd, 0.55s);
}
html.js.is-live .ht-word { transform: none; }

.hero-sub { max-width: 54ch; color: var(--paper-ink); font-size: clamp(1.02rem, 1.35vw, 1.16rem); margin-bottom: 40px; }
html.js .hero-sub { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease) 1.15s, transform 0.9s var(--ease) 1.15s; }
html.js.is-live .hero-sub { opacity: 1; transform: none; }

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
html.js .hero-cta { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease) 1.35s, transform 0.9s var(--ease) 1.35s; }
html.js.is-live .hero-cta { opacity: 1; transform: none; }
.hero-cta .link-quiet { color: var(--paper-ink); }
.hero-cta .link-quiet:hover { color: var(--white); }

.hero-note {
  position: absolute; bottom: 30px; left: 0; right: 0; z-index: 3;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-dim);
}
html.js .hero-note { opacity: 0; transition: opacity 1.2s var(--ease) 2.2s; }
html.js.is-live .hero-note { opacity: 1; }

/* ==========================================================================
   CREDENTIALS strip
   ========================================================================== */
.creds { background: var(--offwhite); border-bottom: 1px solid var(--hairline-light); }
.creds-inner {
  display: grid; grid-template-columns: auto auto; justify-content: space-between;
  gap: 26px clamp(24px, 6vw, 96px); align-items: start;
  padding-top: 34px; padding-bottom: 34px;
}
.creds-col { min-width: 0; }
.creds-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.creds-list { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.94rem; font-weight: 600; }
.creds-list li { display: flex; align-items: center; gap: 18px; }
.creds-list li + li::before { content: ""; width: 1px; height: 14px; background: var(--hairline-light); flex: none; }
.creds-clients { margin-left: auto; }

/* ==========================================================================
   THE CREW, ON ONE LEAD - compact three-lane showcase.
   Replaces the old 480vh pinned single-agent journey: one lead moves through
   Inbound Closer, Follow-Up and Reporting, each lane sharing the same
   "hybrid" demo card (warm paper wraps a dark ink instrument panel), so the
   three agents read as one crew, not one hero agent buried in a scroll-jack.
   ========================================================================== */
.crewrun {
  position: relative;
  padding: clamp(90px, 11vw, 150px) 0 clamp(80px, 9vw, 130px);
  background:
    radial-gradient(80% 60% at 78% 0%, rgba(20, 51, 82, 0.5) 0%, rgba(20, 51, 82, 0) 60%),
    radial-gradient(90% 80% at 15% 100%, rgba(201, 169, 110, 0.08) 0%, rgba(201, 169, 110, 0) 55%),
    var(--navy-deep);
}
.cr-head { max-width: 720px; margin-bottom: clamp(48px, 6vw, 76px); }
.cr-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.012em;
  color: var(--offwhite); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1;
  margin: 12px 0 16px; max-width: 18ch;
}
.cr-sub { max-width: 60ch; color: var(--paper-ink); font-size: clamp(1rem, 1.2vw, 1.08rem); }
.cr-clockline {
  display: inline-block; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--hairline-dark);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}

.cr-lanes { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; align-items: start; gap: 0; }
.cr-lane { min-width: 0; display: flex; flex-direction: column; }
.cr-lane-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cr-lane-mascot {
  flex: none; width: 42px; height: 44px; display: grid; place-items: center;
  background: rgba(244, 241, 236, 0.06); border-radius: 12px;
}
.cr-lane-mascot .mascot { width: 26px; height: 27px; }
.cr-lane-kind { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.cr-lane-job { margin-top: 3px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--offwhite); line-height: 1.25; }
.cr-lane-note { margin-top: 14px; font-size: 0.86rem; line-height: 1.55; color: var(--paper-dim); max-width: 34ch; }

.cr-handoff {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  padding-top: 78px;
}
.cr-handoff-arrow { color: var(--gold); font-size: 1.15rem; line-height: 1; }
.cr-handoff-label {
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-dim); white-space: nowrap;
}

/* ---- Hybrid demo card: warm paper wraps a dark ink instrument panel ---- */
.hy-card {
  position: relative; background: var(--offwhite); border-radius: 26px;
  padding: 18px;
  box-shadow: 0 30px 70px -30px rgba(4, 12, 22, 0.55), 0 8px 24px -14px rgba(201, 169, 110, 0.12);
}
.hy-card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 62%; height: 44%; border-radius: 26px 0 0 0;
  background: radial-gradient(ellipse at 18% 14%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%);
  opacity: 0.55; pointer-events: none;
}
.hy-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 10px 12px; }
.hy-kicker { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.hy-clock { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.hy-lead { position: relative; padding: 0 10px 18px; }
.hy-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.hy-name { margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1.8vw, 1.5rem); color: var(--navy); letter-spacing: -0.01em; }
.hy-sub { margin-top: 3px; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }
.hy-quote {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--hairline-light);
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 0.98rem; line-height: 1.5; color: var(--ink);
}
.hy-quote::before { content: "\201C"; }
.hy-quote::after { content: "\201D"; }

.hy-thread {
  position: relative; margin: 0 10px 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-light);
  font-size: 0.85rem; color: var(--ink-soft);
}

.hy-panel {
  position: relative; overflow: hidden; border-radius: 18px; padding: 20px 20px 18px;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(201, 169, 110, 0.1), rgba(201, 169, 110, 0) 60%),
    linear-gradient(175deg, var(--navy-raise) 0%, var(--navy) 58%, var(--navy-abyss) 100%);
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.07), inset 0 1px 12px rgba(0, 0, 0, 0.25);
}
.hy-panel-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 14px; }

.hy-log { display: flex; flex-direction: column; gap: 11px; }
.hy-row { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); }
.hy-row-top { display: flex; align-items: baseline; gap: 10px; }
.hy-t { color: var(--paper-dim); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.hy-s { flex: 1; min-width: 0; color: var(--paper-ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; }
.hy-m { color: #7EC2B4; font-size: 0.7rem; font-weight: 500; }
.hy-d { font-size: 0.72rem; color: var(--paper-dim); }

.hy-payoff {
  margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(244, 241, 236, 0.12);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.hy-captured { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.16rem; color: var(--offwhite); }
.hy-stat { display: flex; align-items: baseline; gap: 5px; font-family: var(--font-mono); }
.hy-stat b { font-size: 1.5rem; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.hy-stat i { font-style: normal; font-size: 0.72rem; color: var(--paper-dim); }

.cr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: clamp(40px, 5vw, 60px); }
.cr-cta .link-quiet { color: var(--paper-ink); }
.cr-cta .link-quiet:hover { color: var(--white); }

/* Each lane's log rows and payoff arrive in sequence once the lane scrolls
   into view, echoing the site's existing reveal rhythm (see .anno-row,
   .wk-row) without any bespoke scroll-jack JS. */
html.js .cr-lane .hy-row { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
html.js .cr-lane.rv-in .hy-row { opacity: 1; transform: none; }
html.js .cr-lane.rv-in .hy-row:nth-child(1) { transition-delay: 0.15s; }
html.js .cr-lane.rv-in .hy-row:nth-child(2) { transition-delay: 0.3s; }
html.js .cr-lane.rv-in .hy-row:nth-child(3) { transition-delay: 0.45s; }
html.js .cr-lane.rv-in .hy-row:nth-child(4) { transition-delay: 0.6s; }
html.js .cr-lane .hy-payoff { opacity: 0; transition: opacity 0.5s var(--ease) 0.75s; }
html.js .cr-lane.rv-in .hy-payoff { opacity: 1; }
.j-stamp {
  display: inline-block; padding: 8px 16px;
  border: 2px solid var(--gold); color: var(--gold);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.26em; text-transform: uppercase;
  transform: rotate(-3deg); background: rgba(7, 22, 36, 0.25);
}
@keyframes stamp-in {
  0% { transform: rotate(-3deg) scale(1.9); opacity: 0; }
  60% { transform: rotate(-3deg) scale(0.96); opacity: 1; }
  100% { transform: rotate(-3deg) scale(1); opacity: 1; }
}

/* ==========================================================================
   SCORE TEASER - the ops analysis, previewed
   ========================================================================== */
.scorepeek {
  background:
    radial-gradient(55% 70% at 80% 42%, rgba(20, 51, 82, 0.55) 0%, rgba(20, 51, 82, 0) 65%),
    var(--navy);
  color: var(--paper-ink);
  padding: clamp(96px, 12vw, 168px) 0;
}
.scorepeek-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.scorepeek .sec-title { color: var(--offwhite); }
.scorepeek-sub { margin-top: 22px; max-width: 50ch; }
.scorepeek-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.scorepeek-note { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }

.scorepeek-gauge { justify-self: center; text-align: center; --d: 0.15s; }
.sp-ring { position: relative; width: clamp(180px, 16vw, 220px); margin: 0 auto; }
.sp-ring-svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
/* dial ticks: the gauge reads as an instrument, not a donut chart */
.sp-ring-ticks { fill: none; stroke: rgba(244, 241, 236, 0.16); stroke-width: 3.5; stroke-dasharray: 0.9 8.106; }
.sp-ring-head { fill: var(--white); }
html.js .sp-ring-head { opacity: 0; transition: opacity 0.5s var(--ease) 1.75s; }
html.js .rv-in .sp-ring-head { opacity: 1; }
.sp-ring-track { fill: none; stroke: rgba(244, 241, 236, 0.12); stroke-width: 7; }
.sp-ring-fill { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 119.4; }
html.js .sp-ring-fill { stroke-dashoffset: 314.16; transition: stroke-dashoffset 1.5s var(--ease) 0.35s; }
html.js .rv-in .sp-ring-fill { stroke-dashoffset: 119.4; }
.sp-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
.sp-ring-num b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 3.4vw, 3.1rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.sp-ring-num span { font-size: 0.85rem; color: var(--paper-dim); transform: translateY(0.55em); }
.sp-ring-label { margin-top: 18px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.sp-ring-band { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 10px; }
.sp-ring-cap { margin-top: 14px; font-size: 0.8rem; color: var(--paper-dim); }

/* ==========================================================================
   THE CREW - editorial roster, no boxes
   ========================================================================== */
.crew { background: var(--offwhite); padding: clamp(104px, 13vw, 184px) 0; }
.crew-row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 56px);
  padding: clamp(44px, 5.5vw, 72px) 0;
  border-top: 1px solid var(--hairline-light);
  align-items: start;
  transition: border-color 0.35s var(--ease);
}
.crew-row:hover { border-top-color: var(--gold); }
.crew-kind { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; transition: color 0.35s; }
.crew-row:hover .crew-kind { color: var(--gold-press); }
.crew-mascot { display: block; margin-bottom: 18px; }
.crew-mascot .mascot { width: 56px; height: 58px; display: block; transition: transform 0.45s var(--ease); }
.crew-row:hover .crew-mascot .mascot { transform: translateY(-4px) rotate(-5deg); }
.crew-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.06; }
.crew-name-sm { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: 10px; }
.crew-copy p { color: var(--ink-soft); max-width: 44ch; }
.crew-copy .link-arrow { margin-top: 16px; }

/* Vignettes: quiet editorial ledgers, not dashboards. All three share one
   frame: a small-caps head under a hairline, one typographic device each
   (the closer's step log, the cadence's day marks, the reporter's spark),
   and a single measured line to close. One instrument family, three reads. */
.vg { justify-self: end; width: 100%; max-width: 330px; padding-top: 2px; }

.vg-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline-light);
}
.vg-head::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border: 1px solid var(--gold); transform: rotate(45deg);
}
.vg-tally {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--hairline-light);
  font-size: 0.92rem; font-weight: 600; line-height: 1.5; color: var(--ink);
}
html.js .vg-tally { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease) 1.15s, transform 0.6s var(--ease) 1.15s; }
html.js .rv-in .vg-tally { opacity: 1; transform: none; }

.vg-closer .vg-line {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 0.9rem; color: var(--ink-soft);
  padding: 12px 0; border-bottom: 1px solid var(--hairline-light);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.vg-closer .vg-line:last-of-type { border-bottom: 0; }
.rv-in .vg-closer .vg-line:nth-child(2) { transition-delay: 0.25s; }
.rv-in .vg-closer .vg-line:nth-child(3) { transition-delay: 0.55s; }
.rv-in .vg-closer .vg-line:nth-child(4) { transition-delay: 0.85s; }
.rv-in .vg-closer .vg-line { opacity: 1; transform: none; }
.vg-step {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal); flex: none; min-width: 76px;
}

.vg-spark { width: 100%; height: auto; display: block; }
.vg-reporter .vg-spark { margin-top: 20px; }
.vg-spark-line { stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.js .vg-spark-line { stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1.4s var(--ease) 0.3s; }
html.js .rv-in .vg-spark-line { stroke-dashoffset: 0; }
.vg-spark-peak { fill: var(--gold); }
html.js .vg-spark-peak { opacity: 0; transform: scale(0.3); transform-origin: center; transform-box: fill-box; transition: opacity 0.4s var(--ease) 1.5s, transform 0.4s var(--ease) 1.5s; }
html.js .rv-in .vg-spark-peak { opacity: 1; transform: scale(1); }

/* The cadence: day marks alone on one thin connector, nothing decorating them */
.vg-seq { border-left: 1px solid var(--hairline-light); padding-left: 20px; margin-top: 10px; }
.vg-seq .vg-day {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 0.9rem; color: var(--ink-soft); padding: 8px 0;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.rv-in .vg-seq .vg-day:nth-child(1) { transition-delay: 0.25s; }
.rv-in .vg-seq .vg-day:nth-child(2) { transition-delay: 0.5s; }
.rv-in .vg-seq .vg-day:nth-child(3) { transition-delay: 0.75s; }
.rv-in .vg-seq .vg-day:nth-child(4) { transition-delay: 1s; }
.rv-in .vg-seq .vg-day { opacity: 1; transform: none; }
.vg-day b { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); min-width: 56px; }
.vg-day-you { color: var(--ink); font-weight: 600; }

/* Beyond-the-three: a navy editorial spread, not a text slab. The claim and
   its actions hold the left rail; the argument reads down the right. */
.crew-premium {
  position: relative;
  margin-top: 8px; padding: clamp(36px, 4.5vw, 56px) clamp(30px, 4vw, 56px);
  background: var(--navy); color: var(--paper-ink);
  border-radius: 26px;
  box-shadow: 0 40px 84px -34px rgba(4, 12, 22, 0.5);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 26px clamp(36px, 5vw, 84px); align-items: start;
}
/* soft corner glow, replacing the flat gold tick every live panel used to carry */
.crew-premium::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 0;
  width: 220px; height: 220px; border-radius: 26px 0 0 0;
  background: radial-gradient(circle at 0 0, rgba(201, 169, 110, 0.14), transparent 70%);
  pointer-events: none;
}
.crew-premium-head, .crew-premium-body, .crew-premium-links { position: relative; z-index: 1; }
.crew-premium .crew-kind { color: var(--gold); }
.crew-premium .crew-name-sm { color: var(--offwhite); max-width: 16ch; }
.crew-premium-head { grid-column: 1; grid-row: 1; }
.crew-premium-body { grid-column: 2; grid-row: 1 / span 2; }
.crew-premium-body p { max-width: 56ch; }
.crew-premium-body p + p { margin-top: 14px; }
.crew-premium .link-arrow { color: var(--offwhite); }
.crew-premium .link-arrow:hover { color: var(--gold); }
.crew-premium-links {
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}

/* ==========================================================================
   FOUNDERS - navy band
   ========================================================================== */
.founders { background: var(--navy); color: var(--paper-ink); padding: clamp(108px, 13vw, 190px) 0 clamp(76px, 9vw, 128px); position: relative; overflow: hidden; }
.founders::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 85% 15%, rgba(20, 51, 82, 0.55) 0%, rgba(20, 51, 82, 0) 60%);
}
.founders-inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.founders .sec-title { color: var(--offwhite); }
.founders-photos { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(16px, 1.8vw, 24px); max-width: 420px; justify-self: center; }
.founders-photo { position: relative; flex: 1 1 0; min-width: 0; max-width: 196px; margin: 0; }
/* a quiet editorial offset: two people, not a grid */
.founders-photo:nth-child(2) { transform: translateY(20px); }
.founders-photo-frame {
  position: relative; padding: 6px; border-radius: 14px;
  border: 1px solid rgba(244, 241, 236, 0.16);
  background: linear-gradient(160deg, rgba(244, 241, 236, 0.06), rgba(244, 241, 236, 0.015));
  box-shadow: 0 24px 48px -28px rgba(7, 22, 36, 0.85);
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.founders-photo-frame::after {
  content: ""; position: absolute; inset: 6px; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.08);
  pointer-events: none;
}
.founders-photo:hover .founders-photo-frame {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.38);
  box-shadow: 0 30px 56px -28px rgba(7, 22, 36, 0.9);
}
.founders-photo img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: center 22%; border-radius: 8px; display: block; filter: grayscale(0.1) saturate(0.82) contrast(1.06) brightness(1.02); }
.founders-photo figcaption { margin-top: 12px; font-size: 0.8rem; color: var(--paper-dim); letter-spacing: 0.05em; }
.founders-photo figcaption b { color: var(--offwhite); font-weight: 700; margin-right: 8px; display: block; margin-bottom: 2px; }
/* one aside in the founders' own voice, under the portraits */
.founders-note {
  flex: 1 1 100%; margin-top: 30px;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1rem; line-height: 1.5; color: var(--paper-dim);
}
.founders-text p { max-width: 56ch; }
.founders-text .sec-title { margin-bottom: 26px; }
.founders-text p + p { margin-top: 18px; }
.founders-quote { margin: 34px 0; }
.founders-quote p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--offwhite);
  max-width: 24ch;
}
.founders-quote p::before { content: "\201C"; color: var(--gold); margin-right: 2px; }
.founders-quote p::after { content: "\201D"; color: var(--gold); margin-left: 2px; }

/* ==========================================================================
   PROCESS - the route, restated. Five phases as five stations: a gold pulse
   travels the top rule left to right, igniting each phase's diamond as it
   passes - the journey's station language, applied to the engagement itself.
   ========================================================================== */
.process { background: var(--offwhite); padding: clamp(56px, 7vw, 84px) 0 clamp(104px, 13vw, 184px); }

.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2.5vw, 36px); }
.phases-more { margin-top: clamp(28px, 3.4vw, 44px); }
.phase { position: relative; padding-top: 22px; border-top: 1px solid var(--hairline-light); transition: border-color 0.35s var(--ease); }
.phase:nth-child(1) { --st: 0; }
.phase:nth-child(2) { --st: 1; }
.phase:nth-child(3) { --st: 2; }
.phase:nth-child(4) { --st: 3; }
.phase:nth-child(5) { --st: 4; }
.phase:hover { border-top-color: var(--gold); }
/* the station mark */
.phase::before {
  content: ""; position: absolute; top: -5px; left: 0;
  width: 9px; height: 9px;
  background: var(--offwhite); border: 1px solid var(--gold);
  transform: rotate(45deg);
  transition: background 0.4s var(--ease) calc(var(--st) * 0.34s + 0.5s);
}
.phase.rv-in::before, html.no-js .phase::before { background: var(--gold); }
/* the pulse: draws across this segment, hands off to the next, fades */
.phase::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.55), var(--gold));
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  pointer-events: none;
}
html.js .phase.rv-in::after { animation: phase-pulse 1.05s linear calc(var(--st) * 0.34s + 0.3s) forwards; }
@keyframes phase-pulse {
  0% { transform: scaleX(0); opacity: 1; }
  38% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.phase-day { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; transition: color 0.35s; }
.phase:hover .phase-day { color: var(--gold-press); }
.phase h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: 10px; }
.phase p:not(.phase-day) { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--offwhite); padding: clamp(104px, 13vw, 184px) 0; border-top: 1px solid var(--hairline-light); }
.faq-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: 110px; }
/* the open seat under the sticky head: the question we can't pre-answer */
.faq-ask { margin-top: clamp(30px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--hairline-light); }
.faq-ask-line { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy); margin-bottom: 12px; }
/* Mobile: the open question reads after the list, not before it (see faq-ask-mobile in index.html) */
.faq-ask-mobile { display: none; }

.acc { border-bottom: 1px solid var(--hairline-light); }
.acc:first-child { border-top: 1px solid var(--hairline-light); }
.acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 1.06rem; font-weight: 600; color: var(--ink);
  padding: 26px 4px; transition: color 0.2s;
}
.acc-btn:hover { color: var(--gold-press); }
.acc-mark { position: relative; width: 14px; height: 14px; flex: none; }
.acc-mark::before, .acc-mark::after {
  content: ""; position: absolute; background: var(--navy); transition: transform 0.35s var(--ease), background 0.2s;
}
.acc-mark::before { left: 0; right: 0; top: 6px; height: 2px; }
.acc-mark::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.acc-btn[aria-expanded="true"] .acc-mark::after { transform: scaleY(0); }
.acc-btn[aria-expanded="true"] .acc-mark::before { background: var(--gold); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-body { overflow: hidden; }
.acc-body p {
  padding: 0 4px 24px; color: var(--ink-soft); max-width: 60ch;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease) 0.1s, transform 0.4s var(--ease) 0.1s;
}
.acc-panel.open .acc-body p { opacity: 1; transform: none; }
html.no-js .acc-panel { grid-template-rows: 1fr; }
html.no-js .acc-body p { opacity: 1; transform: none; }

/* ==========================================================================
   MASCOT BLINK - the cell-agent idles alive everywhere it appears
   ========================================================================== */
.mascot-eyes { transform-origin: 32px 30px; animation: blink 4.6s infinite; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5% { transform: scaleY(0.12); }
}

/* ==========================================================================
   OUR WORK - the record.
   Real engagements, editorial spreads, and in each one the art IS the
   engagement. Bibikinis: disorder converging, five scattered sources
   pulled into the command-center dossier.
   ========================================================================== */
.work { background: var(--offwhite); padding: 0 0 clamp(56px, 7vw, 90px); }
.work .sec-head { margin-bottom: clamp(56px, 7vw, 100px); }

.wk-flag {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
/* The second spread mirrors the first: art left, copy right */
.wk-flag-rev {
  margin-top: clamp(72px, 9vw, 116px);
  padding-top: clamp(52px, 6.5vw, 84px);
  border-top: 1px solid var(--hairline-light);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}
.wk-flag-rev .wk-copy { grid-column: 2; grid-row: 1; }

.wk-index { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
/* Straight verdict mark, matching the site-wide .stamp treatment */
.wk-stamp {
  background: rgba(201, 169, 110, 0.16); color: var(--gold-press);
  font-size: 0.68rem; letter-spacing: 0.12em; padding: 4px 10px;
  border: none; border-radius: 999px; transform: none;
}
.wk-stamp-build { background: rgba(201, 169, 110, 0.18); color: var(--gold-press); }
/* Outranks the .j-stamp mobile re-tilt: the work stamps stay straight everywhere */
.j-stamp.wk-stamp { transform: none; }

/* In-build teaser: copy on the left, the build's scope keyed on the right */
.wk-flag.wk-solo {
  margin-top: clamp(72px, 9vw, 116px);
  padding-top: clamp(52px, 6.5vw, 84px);
  border-top: 1px solid var(--hairline-light);
}
.wk-solo .wk-copy { max-width: 680px; }
.wk-scope {
  justify-self: end; align-self: center; width: min(100%, 440px);
  border-top: 2px solid var(--ink);
  padding: 16px 0 0;
}
.wk-scope-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px;
}
.wk-scope-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: baseline;
  padding: 12px 0 14px; border-bottom: 1px solid var(--hairline-light);
}
.wk-scope-row:last-child { border-bottom: 0; }
.wk-scope-row span { font-size: 0.9rem; color: var(--ink-soft); }
.wk-scope-row b { font-size: 0.92rem; font-weight: 700; color: var(--navy); text-align: right; }
.wk-logo-chip {
  display: inline-block; width: 58px; height: 58px; flex: none;
  border-radius: 13px; overflow: hidden; border: 1px solid var(--hairline-light);
}
.wk-logo-chip img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--white); padding: 6px; }

.wk-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.04; color: var(--navy); }
.wk-name-sm { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.wk-meta { margin-top: 4px; font-size: 0.95rem; color: var(--ink-soft); }
.wk-pull { margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.25; color: var(--navy); }
.wk-body { margin-top: 12px; font-size: 0.99rem; color: var(--ink-soft); max-width: 50ch; }
.wk-body + .wk-body { margin-top: 14px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; max-width: 440px; }
.wk-fact { border-top: 1px solid var(--hairline-light); padding-top: 13px; }
.wk-fact dd { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--navy); }
.wk-fact dt { margin-top: 4px; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); max-width: 18ch; }

.wk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 30px; }
.wk-tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal);
}
.wk-tag + .wk-tag::before {
  content: "\00B7"; margin-right: 12px;
  color: rgba(71, 168, 154, 0.55); letter-spacing: 0;
}
.wk-foot .link-arrow { margin-left: 10px; }

/* ---- The consolidation diorama ---- */
.wk-diorama { position: relative; margin: 0; width: 100%; max-width: 560px; justify-self: end; }

.wk-scatter { position: relative; height: clamp(178px, 24vw, 250px); z-index: 2; }
.wk-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wk-path { fill: none; stroke: rgba(14, 42, 71, 0.16); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
html.js .wk-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.75s var(--ease); }
html.js .wk-path:nth-of-type(2) { transition-delay: 0.08s; }
html.js .wk-path:nth-of-type(3) { transition-delay: 0.16s; }
html.js .wk-path:nth-of-type(4) { transition-delay: 0.24s; }
html.js .wk-path:nth-of-type(5) { transition-delay: 0.32s; }
html.js .is-run .wk-path, html.no-js .wk-path { stroke-dashoffset: 0; }

.wk-chip {
  position: absolute; left: var(--cx); top: var(--cy);
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border-radius: 999px;
  box-shadow: 0 14px 30px -16px rgba(14, 42, 71, 0.38);
  padding: 8px 14px; white-space: nowrap;
  font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.2;
  transform: rotate(var(--cr));
  transition: transform 0.65s var(--ease) calc(0.3s + var(--i) * 0.15s),
              opacity 0.65s var(--ease) calc(0.3s + var(--i) * 0.15s),
              box-shadow 0.65s var(--ease) calc(0.3s + var(--i) * 0.15s);
}
.wk-chip::after {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--teal); transform: rotate(45deg) scale(0);
  transition: transform 0.45s var(--ease) calc(0.55s + var(--i) * 0.15s);
}
.is-run .wk-chip, html.no-js .wk-chip {
  transform: rotate(0deg) translateY(3px); opacity: 0.52;
  box-shadow: 0 14px 30px -16px rgba(71, 168, 154, 0.3);
}
.is-run .wk-chip::after, html.no-js .wk-chip::after { transform: rotate(45deg) scale(1); }

.wk-spark {
  position: absolute; z-index: 3; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--gold); transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(201, 169, 110, 0.85), 0 0 34px rgba(201, 169, 110, 0.4);
  opacity: 0;
}

/* The dark panel's header/footer chrome (also reused nowhere else now that
   the old flagship j-panel is gone, but kept generic since .wk-panel is
   itself a reusable "what we built" instrument-screen component). */
.jp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline-dark);
}
.jp-title { font-weight: 700; font-size: 0.97rem; color: var(--offwhite); }
.jp-chip {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.jp-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--hairline-dark);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-dim);
}
.jp-dot { width: 12px; height: 2px; border-radius: 2px; background: var(--teal); flex: none; }

/* Hybrid demo-card treatment: warm paper wraps the dark ink panel, same
   language as the crew showcase's capture card, so "what we built" reads
   as one system with the rest of the site's demo surfaces. */
.wk-panelwrap {
  position: relative; background: var(--offwhite); border-radius: 28px; padding: 16px;
  box-shadow: 0 30px 64px -30px rgba(4, 12, 22, 0.4), 0 8px 22px -14px rgba(201, 169, 110, 0.12);
}
.wk-panelwrap::after {
  content: ""; position: absolute; left: 0; top: 0; width: 58%; height: 40%; border-radius: 28px 0 0 0;
  background: radial-gradient(ellipse at 18% 14%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%);
  opacity: 0.5; pointer-events: none;
}
.wk-mascot {
  position: absolute; top: -30px; right: 32px; z-index: 1;
  width: 46px; height: 47px;
}
.wk-panel {
  position: relative; z-index: 2;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(201, 169, 110, 0.1), rgba(201, 169, 110, 0) 60%),
    linear-gradient(175deg, var(--navy-raise) 0%, var(--navy) 58%, var(--navy-abyss) 100%);
  border-radius: 18px;
  padding: 22px 24px 16px;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 236, 0.08), inset 0 1px 12px rgba(0, 0, 0, 0.25);
}

.wk-rows { margin: 4px 0 2px; }
.wk-row {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--hairline-dark);
}
.wk-row dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); }
.wk-row dd { font-size: 0.94rem; font-weight: 500; color: var(--offwhite); }
.wk-row i {
  align-self: center; width: 8px; height: 8px; flex: none;
  background: var(--teal); transform: rotate(45deg);
}
.wk-row-gold dt { color: var(--gold); }
.wk-row-gold i { background: var(--gold); }
html.js .wk-row { opacity: 0; transform: translateY(10px); transition: opacity 0.55s var(--ease) calc(0.45s + var(--i) * 0.18s), transform 0.55s var(--ease) calc(0.45s + var(--i) * 0.18s); }
html.js .wk-row i { transform: rotate(45deg) scale(0); transition: transform 0.4s var(--ease) calc(0.7s + var(--i) * 0.18s); }
html.js .is-run .wk-row { opacity: 1; transform: none; }
html.js .is-run .wk-row i { transform: rotate(45deg) scale(1); }

.wk-cap { margin-top: 46px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- The intake board (currently unused; kept for reuse) ----
   Five ordered payment rails drop into one manifold, and the manifold feeds
   a morning briefing. Money keeps moving down the rails after the draw
   (a quiet dash-flow), because deposits do. */
.tk-board { position: relative; margin: 0; width: 100%; max-width: 560px; justify-self: start; grid-column: 1; grid-row: 1; }
.tk-board .wk-mascot { right: 20%; }

.tk-tabs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); }
.tk-tab {
  justify-self: center;
  background: var(--white); border: 1px solid var(--hairline-light);
  box-shadow: 0 10px 22px -14px rgba(14, 42, 71, 0.4);
  padding: 7px 11px; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; color: var(--ink); line-height: 1.2;
}
html.js .tk-tab {
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.55s var(--ease) calc(var(--i) * 0.09s), transform 0.55s var(--ease) calc(var(--i) * 0.09s);
}
html.js .is-run .tk-tab { opacity: 1; transform: none; }

.tk-railbed { height: clamp(60px, 8.5vw, 92px); margin-top: 4px; }
.tk-rails { width: 100%; height: 100%; display: block; overflow: visible; }
.tk-rail { fill: none; stroke: rgba(14, 42, 71, 0.26); stroke-width: 1.5; }
html.js .tk-rail {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s var(--ease) calc(0.22s + var(--i, 0) * 0.09s);
}
html.js .tk-bus { transition-delay: 0.7s; }
html.js .tk-drop { transition-delay: 0.92s; }
html.js .is-run .tk-rail, html.no-js .tk-rail { stroke-dashoffset: 0; }

.tk-flow {
  fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 4 14; opacity: 0;
  transition: opacity 0.7s var(--ease) 1.2s;
}
.tk-flow-drop { stroke: var(--gold); }
.is-run .tk-flow, html.no-js .tk-flow {
  opacity: 0.55;
  animation: tk-flow 2.3s linear infinite;
  animation-delay: calc(1.2s + var(--i, 2) * 0.31s);
}
@keyframes tk-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -18; } }

/* the one-month find: the callout the whole spread earns */
.tk-find {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 14px; padding: 12px 16px;
  border: 1px solid rgba(201, 169, 110, 0.45);
  background: rgba(201, 169, 110, 0.08);
}
.tk-find b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.1;
  color: var(--gold); flex: none; font-variant-numeric: tabular-nums;
}
.tk-find span { font-size: 0.84rem; line-height: 1.55; color: var(--paper-ink); }
html.js .tk-find { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease) 1.3s, transform 0.6s var(--ease) 1.3s; }
html.js .is-run .tk-find { opacity: 1; transform: none; }

/* ---- The time ledger: currently unused, kept for reuse ---- */
.tk-ledger {
  grid-column: 1 / -1;
  margin-top: clamp(44px, 5.5vw, 68px); padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--hairline-light);
}
.tk-ledger-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 14px;
}
.tk-cut {
  display: grid; grid-template-columns: clamp(150px, 22vw, 230px) minmax(0, 1fr) 128px;
  gap: 20px; align-items: center; padding: 11px 0;
  border-bottom: 1px solid var(--hairline-light);
}
.tk-cut:last-child { border-bottom: 0; }
.tk-cut-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.tk-cut i { position: relative; display: block; height: 3px; background: rgba(14, 42, 71, 0.1); }
.tk-cut i::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%); background: var(--teal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--ease) calc(0.35s + var(--i, 0) * 0.14s);
}
.rv-in .tk-cut i::after, html.no-js .tk-cut i::after { transform: scaleX(1); }
.tk-cut b {
  justify-self: end; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.tk-wired { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 0.85rem; color: var(--ink-soft); }
.tk-wired::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: var(--gold); flex: none; }

/* ---- The house rule + the open seat ---- */
.wk-close {
  margin-top: clamp(48px, 6vw, 76px); padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--hairline-light);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px clamp(32px, 5vw, 88px); align-items: center;
}
.wk-rule { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--ink-soft); max-width: 52ch; }
.wk-rule::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: var(--gold); flex: none; margin-top: 0.66em; }
.wk-yours { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.wk-yours-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; color: var(--navy); }

/* ==========================================================================
   CLOSER + FOOTER
   ========================================================================== */
.closer {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(20, 51, 82, 0.5) 0%, rgba(20, 51, 82, 0) 60%),
    var(--navy);
  color: var(--paper-ink);
  padding-top: clamp(120px, 14vw, 200px);
}
/* The river returns: every stream on the site ends at this button */
.closer-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.closer-inner, .closer .footer { position: relative; }
.closer-inner { text-align: center; max-width: 860px; margin: 0 auto; padding-bottom: clamp(104px, 12vw, 170px); }
.closer-mascot { display: inline-block; margin-bottom: 30px; }
.closer-mascot .mascot { width: 52px; height: 54px; display: block; margin: 0 auto; }
.closer-title { font-size: clamp(2.4rem, 5.5vw, 4.2rem); color: var(--offwhite); max-width: 16ch; margin: 0 auto 24px; }
.closer-sub { max-width: 46ch; margin: 0 auto 42px; font-size: 1.1rem; }
.closer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; }
.closer-cta .link-quiet { color: var(--paper-ink); }
.closer-cta .link-quiet:hover { color: var(--white); }

.footer { border-top: 1px solid var(--hairline-dark); }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.62fr) minmax(0, 0.62fr) minmax(0, 1fr);
  gap: 44px clamp(32px, 5vw, 88px);
  padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(44px, 5vw, 64px);
  align-items: start;
}
.footer-slogan {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.35;
  color: var(--offwhite); margin-top: 22px; max-width: 20ch;
}
.footer-slogan em { font-style: inherit; color: var(--gold); }
.footer-line { margin-top: 14px; font-size: 0.9rem; color: var(--paper-dim); line-height: 1.7; max-width: 36ch; }
.footer-col-label {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244, 241, 236, 0.72); margin-bottom: 14px;
}
.footer-col-links a {
  display: block; width: fit-content;
  padding: 4px 0; font-size: 0.93rem; color: var(--paper-dim);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left calc(100% - 3px);
  transition: color 0.2s, background-size 0.35s var(--ease);
}
.footer-col-links a:hover { color: var(--offwhite); background-size: 100% 1px; }
.footer-mail {
  display: inline-block; font-size: 0.95rem; font-weight: 600; color: var(--paper-ink);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left calc(100% - 1px);
  transition: color 0.2s, background-size 0.35s var(--ease);
}
.footer-mail:hover { color: var(--offwhite); background-size: 100% 1px; }
.footer-place { margin-top: 10px; font-size: 0.88rem; color: var(--paper-dim); }
.footer-social { display: flex; gap: 12px; margin-top: 24px; }
.footer-social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--hairline-dark); color: var(--paper-dim);
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
}
.footer-social a:hover, .footer-social a:focus-visible { color: var(--navy); background: var(--gold); border-color: var(--gold); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  border-top: 1px solid var(--hairline-dark);
  padding-top: 24px; padding-bottom: 44px;
  font-size: 0.8rem; color: rgba(244, 241, 236, 0.72);
}
.footer-top-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-dim); transition: color 0.2s;
}
.footer-top-link::after { content: "\2191"; transition: transform 0.25s var(--ease); }
.footer-top-link:hover { color: var(--offwhite); }
.footer-top-link:hover::after { transform: translateY(-3px); }

/* ==========================================================================
   Reveal system
   ========================================================================== */
html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.95s var(--ease-slow) var(--d, 0s), transform 0.95s var(--ease-slow) var(--d, 0s); }
html.js .rv-in { opacity: 1; transform: none; }

/* Staggered container: the wrapper holds its ground, the children arrive in
   sequence, so grouped content (stats, questions) never pops in as one slab */
html.js .rvs > * { opacity: 0; transform: translateY(20px); transition: opacity 0.85s var(--ease-slow), transform 0.85s var(--ease-slow); }
html.js .rvs.rv-in > * { opacity: 1; transform: none; }
html.js .rvs.rv-in > *:nth-child(2) { transition-delay: 0.09s; }
html.js .rvs.rv-in > *:nth-child(3) { transition-delay: 0.18s; }
html.js .rvs.rv-in > *:nth-child(4) { transition-delay: 0.27s; }
html.js .rvs.rv-in > *:nth-child(5) { transition-delay: 0.36s; }
html.js .rvs.rv-in > *:nth-child(6) { transition-delay: 0.45s; }
html.js .rvs.rv-in > *:nth-child(7) { transition-delay: 0.54s; }
html.js .rvs.rv-in > *:nth-child(8) { transition-delay: 0.63s; }

/* ==========================================================================
   Small screens + stacked journey fallback
   ========================================================================== */
@media (max-width: 1080px) {
  .crew-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .vg { grid-column: 2; justify-self: start; max-width: 340px; }
  .sec-head-split { grid-template-columns: 1fr; align-items: start; }
  .sec-aside { justify-self: start; }
}

@media (max-width: 899px) {
  /* Nav goes near-opaque: the 0.82 glass let dark hero sections' light
     headlines ghost through the bar at the top of the viewport on mobile */
  .nav.is-scrolled { background: rgba(7, 22, 36, 0.97); }
  /* The crew: lanes stack, handoffs become horizontal connectors */
  .cr-lanes { grid-template-columns: 1fr; }
  .cr-handoff { flex-direction: row; align-items: center; padding: 16px 4px; gap: 12px; }
  .cr-handoff-arrow { transform: rotate(90deg); }
  .cr-handoff-label { writing-mode: horizontal-tb; transform: none; }
  .cr-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
}

@media (max-width: 980px) {
  .wk-flag { grid-template-columns: 1fr; gap: 52px; }
  .wk-flag.wk-solo { gap: 36px; }
  .wk-scope { justify-self: start; }
  .wk-diorama { justify-self: start; }
  .wk-flag-rev .wk-copy { grid-column: auto; grid-row: auto; }
  .tk-board { grid-column: auto; grid-row: auto; }
  .tk-ledger { grid-column: auto; margin-top: 6px; }
  .wk-close { grid-template-columns: 1fr; }
  .wk-yours { justify-self: start; align-items: flex-start; text-align: left; }
}

@media (max-width: 860px) {
  .crew-premium { grid-template-columns: 1fr; gap: 20px; }
  .crew-premium-head, .crew-premium-body, .crew-premium-links { grid-column: 1; grid-row: auto; }
  .crew-premium-links { margin-top: 4px; }
  .scorepeek-inner { grid-template-columns: 1fr; }
  .scorepeek-gauge { justify-self: start; text-align: left; }
  .sp-ring { margin: 0; }
  .founders-inner { grid-template-columns: 1fr; }
  .founders-photos { max-width: 348px; justify-self: start; }
  .phases { grid-template-columns: 1fr 1fr; gap: 28px; }
  .faq-inner { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .faq-head .faq-ask { display: none; }
  .faq-ask-mobile { display: block; border-top: 0; padding-top: 0; margin-top: 36px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
}

/* Nav collapses a step earlier than the rest: four links need the room */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 8px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--offwhite); transition: transform 0.35s var(--ease), opacity 0.3s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
}

@media (max-width: 760px) {
  .hero-inner { padding-top: 120px; padding-bottom: 110px; }
  .hero-title { font-size: clamp(2.7rem, 13vw, 3.6rem); }
  .hero-note { font-size: 0.66rem; letter-spacing: 0.14em; }

  .creds-inner { grid-template-columns: 1fr; gap: 22px; }
  .creds-clients { margin-left: 0; }
  /* wrapped rows would strand a leading divider; spacing alone reads clean */
  .creds-list li + li::before { display: none; }

  .crew-row { grid-template-columns: 1fr; gap: 18px; }
  .vg { grid-column: auto; }

  .wk-chip { font-size: 0.72rem; padding: 6px 10px; gap: 7px; }
  .wk-panel { padding: 18px 18px 14px; }
  .wk-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; }
  .wk-row dd { font-size: 0.87rem; }
  .wk-cap { margin-top: 40px; letter-spacing: 0.06em; }
  .wk-mascot { right: 22px; }
  .wk-facts { gap: 18px; }

  .tk-tab { font-size: 0.64rem; padding: 5px 6px; }
  .tk-find { flex-direction: column; gap: 4px; padding: 12px 14px; }
  .tk-cut { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 10px 0 14px; }
  .tk-cut-name { grid-row: 1; grid-column: 1; }
  .tk-cut i { grid-row: 2; grid-column: 1 / -1; }
  .tk-cut b { grid-row: 1; grid-column: 2; }

  .phases { grid-template-columns: 1fr; }
  .closer-cta { gap: 20px; }
}

/* Phone: inside the journey panels nothing sits side by side. Every row
   stacks, labels and badges take their own line, rows get taller. */
@media (max-width: 600px) {
  /* Card header: chip drops under the title instead of wrapping beside it */
  .jp-head { flex-direction: column; align-items: flex-start; gap: 7px; padding-bottom: 15px; }

  /* Form record: label sits above its value */
  .jp-row { grid-template-columns: 1fr; gap: 5px; padding: 12px 0 13px; }

  /* The agent's read: value, then the label on its own line, then the bar */
  .jp-crit-row { grid-template-columns: 1fr; gap: 7px; padding: 13px 0 15px; }

  /* Activity log: time and badge share the top line, text takes full width */
  .jp-log li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px; align-items: center; padding: 13px 0 15px;
  }
  .jp-t { grid-row: 1; grid-column: 1; min-width: 0; }
  .jp-log .jp-ok, .jp-log .jp-live { grid-row: 1; grid-column: 2; }
  .jp-what { grid-row: 2; grid-column: 1 / -1; }

  /* Crew roster: badge drops below the description, text gets the width */
  .jp-crew li {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px; row-gap: 9px; align-items: center; padding: 16px 0 18px;
  }
  .jp-crew .jp-ok, .jp-crew .jp-live { grid-column: 2; justify-self: start; }

  /* Work panels: label sits above its value, diamond keeps the right edge */
  .wk-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0 13px; }
  .wk-row dt { grid-column: 1; grid-row: 1; }
  .wk-row dd { grid-column: 1; grid-row: 2; }
  .wk-row i { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  /* Scope card: label above the value, value keeps full width */
  .wk-scope-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0 14px; }
  .wk-scope-row b { text-align: left; }
}

/* ==========================================================================
   Reduced motion: complete, still composition
   ========================================================================== */
@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; }

  html.js .rv, html.js .rvs > *, html.js .hero-kicker, html.js .hero-sub, html.js .hero-cta, html.js .hero-note { opacity: 1; transform: none; }
  .slab-sq::after { transform: scale(1) !important; }
  .slab::after { transform: scaleX(1) !important; }
  html.js .ht-word { transform: none; }
  html.js .vg-spark-line { stroke-dashoffset: 0; }
  html.js .vg-spark-peak { opacity: 1; transform: none; }
  .vg-closer .vg-line, .vg-seq .vg-day, html.js .vg-tally { opacity: 1; transform: none; }
  html.js .sp-ring-fill { stroke-dashoffset: 119.4; }
  .crew-row:hover .crew-mascot .mascot { transform: none; }

  .mascot-eyes { animation: none; }

  /* Our work: both engagements render complete and settled */
  html.js .wk-path { stroke-dashoffset: 0; transition: none; }
  .wk-chip { transform: rotate(0deg) translateY(3px); opacity: 0.52; box-shadow: 0 14px 30px -16px rgba(71, 168, 154, 0.3); transition: none; }
  .wk-chip::after { transform: rotate(45deg) scale(1); transition: none; }
  html.js .wk-row { opacity: 1; transform: none; transition: none; }
  html.js .wk-row i { transform: rotate(45deg) scale(1); transition: none; }
  .wk-spark { display: none; }
  html.js .tk-tab { opacity: 1; transform: none; transition: none; }
  html.js .tk-rail { stroke-dashoffset: 0; transition: none; }
  .tk-flow { opacity: 0.45 !important; animation: none !important; transition: none; }
  html.js .tk-find { opacity: 1; transform: none; transition: none; }
  .tk-cut i::after { transform: scaleX(1) !important; transition: none; }
}

/* ==========================================================================
   Editorial index (approved de-box treatment, 2026-07)
   A numbered vertical list: gold Fraunces numerals, Fraunces item names,
   Archivo sublines. Rows split by hairlines under a 2px ink rule.
   No borders, no background boxes, no chips.
   ========================================================================== */
.edx { list-style: none; margin: 0; padding: 0; }
.edx-lab {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(14, 42, 71, 0.55); padding-bottom: 10px;
  border-bottom: 2px solid var(--ink); margin: 0;
}
.edx-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--hairline-light);
}
.edx-row:last-child { border-bottom: 0; }
.edx-n {
  font-family: var(--font-display); font-weight: 500; font-size: 1.375rem;
  color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.edx-name { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.3px; line-height: 1.2; color: var(--ink); }
.edx-sub { font-family: var(--font-body); font-size: 0.845rem; font-weight: 500; color: rgba(14, 42, 71, 0.62); margin-top: 3px; line-height: 1.5; }
/* Dark (navy) variant: gold numerals hold, text goes paper */
.edx-dark .edx-lab { color: var(--paper-dim); border-bottom-color: var(--offwhite); }
.edx-dark .edx-row { border-bottom-color: var(--hairline-dark); }
.edx-dark .edx-name { color: var(--offwhite); }
.edx-dark .edx-sub { color: var(--paper-dim); }


/* ---- Compact work teaser (homepage), replaces the expanded case-study dioramas ---- */
.wk-head { max-width: 640px; margin-bottom: clamp(30px, 4vw, 46px); }
.wk-head .sec-title { margin-top: 12px; }
.wk-sub { margin-top: 14px; color: rgba(14, 42, 71, 0.68); font-size: 1.02rem; line-height: 1.6; }
.wk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.wk-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--hairline-light);
  border-radius: 18px; padding: clamp(22px, 2.4vw, 28px); text-decoration: none; color: inherit;
  box-shadow: 0 18px 40px -30px rgba(14, 42, 71, 0.28);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.wk-card:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -28px rgba(14, 42, 71, 0.42); border-color: rgba(14, 42, 71, 0.24); }
.wk-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.wk-card-logo { width: 52px; height: 52px; border-radius: 13px; background: var(--offwhite);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.wk-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.wk-card-name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--navy); line-height: 1.1; }
.wk-card-meta { margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(14, 42, 71, 0.55); text-transform: uppercase; }
.wk-card-pull { margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; line-height: 1.3; color: var(--navy); flex: 1 1 auto; }
.wk-card-link { margin-top: 22px; font-size: 0.9rem; font-weight: 700; color: var(--gold-press); display: inline-flex; align-items: center; gap: 7px; }
.wk-card-link::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.wk-card:hover .wk-card-link::after { transform: translateX(4px); }
.wk-all { margin-top: clamp(26px, 3vw, 36px); }
@media (max-width: 820px) { .wk-cards { grid-template-columns: 1fr; } }