/* =============================================================
   Sari Zack — styles
   Modernised from the locked 2026-09-16 stylesheet.
   Source of truth: src/types/brand.ts. If you change a token,
   change the TS file and re-run `npm run audit`.
   ============================================================= */

/* ------------------------------------------------------------
   Fonts — self-hosted woff2 (no CDN dependency).
   Inter Variable + Fraunces Variable, both subsets Latin.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Inter-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/Fraunces-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Fraunces-Variable.woff2') format('woff2');
}

/* ------------------------------------------------------------
   Design tokens — mirrored from brand.ts.
   Plain CSS custom properties so they work in DevTools and
   can be overridden by component CSS without a build step.
   ------------------------------------------------------------ */
:root {
  --blue: #0173BA;
  --navy: #035AA6;
  /* Dark slate from Sari's brand artboard. Added 2026-09-22 by request:
     menu bar, footer and dark bands. Softer than navy so sand reads warm. */
  --deep: #353B56;
  --deep-soft: #2C3149;
  --gold: #CEA365;
  --gold-deep: #7B613C;
  --gold-light: #E5CDAC;
  /* The sand cream the logo itself uses, straight from the artboard. */
  --sand: #EFDFC6;
  --cream: #F1E4CF;
  --cream-deep: #EAD9BE;
  --ink: #0B2236;
  --ink-soft: #3D4D5C;
  --paper: #FFFFFF;
  --paper-warm: #FBF6EC;
  --on-navy: #EAF2FA;
  --on-navy-soft: rgba(234, 242, 250, 0.82);
  /* Text on --deep. Verified: 8.97:1 (AAA). */
  --on-deep: #F1E7D6;
  --on-deep-soft: rgba(241, 231, 214, 0.80);
  --rule: rgba(11, 34, 54, 0.10);
  --rule-strong: rgba(11, 34, 54, 0.18);
  --rule-deep: rgba(241, 231, 214, 0.18);

  --container: 1180px;
  --gutter: 24px;
  --nav-h: 80px;
  --logo-h: 56px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 34, 54, 0.06), 0 1px 1px rgba(11, 34, 54, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 34, 54, 0.08), 0 2px 4px rgba(11, 34, 54, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(11, 34, 54, 0.18), 0 8px 16px rgba(11, 34, 54, 0.08);

  --font-serif: 'Fraunces Variable', Fraunces, Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: light;
}

/* ------------------------------------------------------------
   Reset — modern, minimal, opinionated.
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 0.4em;
  color: var(--ink);
}

h1 { font-variation-settings: 'opsz' 144, 'SOFT' 30; font-size: clamp(40px, 5.4vw, 72px); }
h2 { font-variation-settings: 'opsz' 72, 'SOFT' 30; font-size: clamp(30px, 3.6vw, 48px); }
h3 { font-variation-settings: 'opsz' 24, 'SOFT' 30; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
h4 { font-size: 18px; line-height: 1.3; }

p, ul, ol, blockquote { margin: 0 0 1em; }
/* Avoids one-word last lines: balanced headings and pull quotes, and a
   "pretty" wrap on body paragraphs. Ignored by older browsers. */
h1, h2, h3, .punch { text-wrap: balance; }
/* Section headings share one measure, wide enough not to leave a hole to
   their right above full-width card grids. Hero h1 and hero lede are not
   part of this. Body paragraphs stay capped for readability. */
section h2 { max-width: 40ch; }
.section p:not(.punch) { max-width: 65ch; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

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

a {
  color: var(--navy);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
a:hover { text-decoration: underline; text-decoration-color: var(--blue); }
a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 48px 0;
}

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

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

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

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(56px, 6vw, 88px) 0;
}
.section--tight { padding: clamp(40px, 4vw, 64px) 0; }
/* Butts a section up to the one above it, so two tight sections in a row
   do not stack their padding into one oversized gap. */
.section--join { padding-top: clamp(24px, 3vw, 32px); }
.section--cream { background: var(--paper-warm); }
.section--warm { background: var(--paper-warm); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--on-navy); }
.section--navy a { color: var(--on-navy); }
.section--navy a:hover { color: #ffffff; }

/* Dark slate bands, from the brand artboard. These share every rule with
   .section--navy below, so each navy selector also lists its deep twin.
   Sand replaces the pale blue-white as the text and heading colour. */
.section--deep { background: var(--deep); color: var(--on-deep); }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--sand); }
.section--deep a { color: var(--on-deep); }
.section--deep a:hover { color: #ffffff; }

/* At Stake as a contained panel rather than a full-bleed band, so it does
   not read as one continuous dark slab with The Flip section right below
   it. Sits on the page's own light background, boxed and rounded instead
   of edge to edge. */
.stake-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--gold);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 56px);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
}
.section--navy .eyebrow { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.section--deep .eyebrow { color: var(--gold); border-bottom-color: var(--gold); }

.prose {
  max-width: 64ch;
  margin: 0 auto;
  color: var(--ink);
}
.section--navy .prose { color: var(--on-navy); }
.section--deep .prose { color: var(--on-deep); }

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--deep);
  border-bottom: 1px solid var(--rule-deep);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}

.nav__brand { display: inline-flex; align-items: center; }
/* The sand logo lockup, keyed to transparency from Sari's dark artboard.
   Only ever used on --deep; it is invisible on light grounds. */
.nav__brand img { height: var(--logo-h); width: auto; } /* unused but typed */

.nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list a {
  color: var(--on-deep);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.16s ease;
}
.nav__list a:hover { color: var(--sand); }
.nav__list a[aria-current='page'] {
  color: var(--sand);
  position: relative;
}
.nav__list a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
}

/* Header CTA. Navy would be 1.58:1 against --deep, so this uses the
   sand/gold pairing instead. Sand on deep is 8.39:1 (AAA). */
.nav .btn--primary,
.nav-wrap .btn--primary {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--deep);
  padding: 14px 26px;
}
.nav .btn--primary:hover,
.nav-wrap .btn--primary:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--deep);
}

.nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--on-deep);
  border-radius: var(--r-sm);
}
.nav__burger:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.nav__burger svg { width: 28px; height: 28px; }

.drawer {
  position: fixed;
  inset: 0;
  background: var(--paper-warm);
  z-index: 60;
  padding: 80px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(-100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
}
.drawer.open { transform: translateY(0); }
.drawer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.drawer__list a {
  display: block;
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.drawer__list a[aria-current='page'] { color: var(--navy); }
.drawer__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}

/* Buttons on dark grounds. The default .btn--primary is navy, which
   disappears on both navy and deep, so inside any dark section it flips
   to a high-contrast surface. Verified ratios: sand-on-deep 8.39:1,
   white-on-deep 10.99:1, navy-on-white 8.6:1. */
.section--navy .btn--primary,
.section--deep .btn--primary,
.close .btn--primary {
  background: #fff;
  color: var(--deep);
  border-color: #fff;
}
.section--navy .btn--primary:hover,
.section--deep .btn--primary:hover,
.close .btn--primary:hover {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--deep);
}

.section--navy .btn--ghost,
.section--deep .btn--ghost,
.close .btn--ghost {
  background: transparent;
  color: var(--on-deep);
  border-color: var(--rule-deep);
}
.section--deep .btn--ghost { color: var(--on-deep); }
.section--navy .btn--ghost { color: var(--on-navy); border-color: rgba(234, 242, 250, 0.5); }
.section--navy .btn--ghost:hover,
.section--deep .btn--ghost:hover,
.close .btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}

/* Gold on dark: the brand's intended dark-section CTA. */
.section--navy .btn--gold,
.section--deep .btn--gold,
.close .btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.section--navy .btn--gold:hover,
.section--deep .btn--gold:hover,
.close .btn--gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* Text CTAs inside dark sections use sand, not the pale blue white. */
.section--deep .text-soft { color: var(--on-deep-soft); }
.section--deep .punch { background: rgba(255, 255, 255, 0.06); border-color: var(--rule-deep); color: var(--sand); }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn--primary:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }

.btn--navy-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--navy-outline:hover { background: var(--navy); color: #fff; }
.section--navy .btn--navy-outline,
.section--deep .btn--navy-outline,
.close .btn--navy-outline {
  color: var(--on-deep);
  border-color: var(--rule-deep);
}
.section--navy .btn--navy-outline {
  color: var(--on-navy);
  border-color: rgba(234, 242, 250, 0.5);
}
.section--navy .btn--navy-outline:hover,
.section--deep .btn--navy-outline:hover,
.close .btn--navy-outline:hover {
  background: #fff;
  color: var(--deep);
  border-color: #fff;
}

.btn--gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

.btn--on-navy {
  background: var(--sand);
  color: var(--deep);
  border-color: var(--sand);
}
.btn--on-navy:hover { background: #fff; border-color: #fff; color: var(--deep); }
/* .section--deep a would otherwise turn this button sand-on-sand. */
.section--deep .btn--on-navy,
.section--navy .btn--on-navy { color: var(--deep); }
.section--deep .btn--on-navy:hover,
.section--navy .btn--on-navy:hover { color: var(--deep); text-decoration: none; }

.btn--sm { padding: 11px 18px; font-size: 14px; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
}
.hero--page {
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper-warm) 100%);
}

/* Photo-driven hero (homepage only). A slow Ken Burns drift on a real,
   faceless, unresolved photo, standing in for the client's own world
   rather than opening on Sari's face. Duotone scrim ties it to the brand
   without the raw photo colour fighting the sand/gold palette. */
.hero--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-deep);
  /* Without the Health Check card, the section is just the copy block.
     A min-height keeps the photo commanding real screen space instead of
     collapsing to whatever height the text happens to need. */
  min-height: min(760px, 82vh);
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg picture {
  display: block;
  position: absolute;
  inset: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  filter: saturate(0.85);
  animation: hero-ken-burns 11s ease-in-out infinite alternate;
}
@keyframes hero-ken-burns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.26) translate(-4.5%, -3%); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* The accent stop is --navy (#035AA6), sampled from the actual logo
     letterform. It previously used --blue (#0173BA), a lighter, more
     cyan tone that doesn't exist anywhere in the real logo file. */
  background: linear-gradient(115deg, rgba(11, 34, 54, 0.92) 0%, rgba(53, 59, 86, 0.88) 45%, rgba(3, 90, 166, 0.45) 100%);
}
/* Wider screens: lighten the right side so the tablet sketch in the
   hero photo shows through. Phones keep the darker gradient above, where
   the text sits over the bright screen. */
@media (min-width: 900px) {
  .hero__scrim {
    background: linear-gradient(115deg, rgba(11, 34, 54, 0.94) 0%, rgba(53, 59, 86, 0.90) 45%, rgba(3, 90, 166, 0.55) 68%, rgba(3, 90, 166, 0.35) 100%);
  }
}
.hero--photo .container {
  position: relative;
  z-index: 2;
}
.hero--photo .hero__grid {
  grid-template-columns: minmax(0, 1fr);
}
.hero--photo .hero__grid .hero__copy {
  max-width: 640px;
}
/* Wide enough on desktop for "The destination is clear." to hold one line;
   the lede keeps its own narrow measure. */
@media (min-width: 900px) {
  .hero--photo .hero__grid .hero__copy { max-width: 1000px; }
  /* Lede runs exactly as wide as the first headline line, so the two line
     up on the right edge. 11.036 is that line's width in font-size units
     (measured); the clamp is the h1's own font size. */
  .hero--photo .hero__lede { max-width: calc(clamp(40px, 5.4vw, 72px) * 11.036); }
}
.hero--photo .eyebrow { color: var(--gold-light); }
.hero--photo h1 { color: var(--on-deep); }
.hero--photo h1,
.hero--photo .hero__lede { text-shadow: 0 1px 12px rgba(11, 34, 54, 0.45); }
.hero--photo h1 em { color: var(--gold); font-style: italic; }
.hero--photo .hero__lede,
.hero--photo .hero__note { color: var(--on-deep-soft); }
.hero--photo .btn--ghost {
  color: var(--on-deep);
  border-color: rgba(241, 231, 214, 0.5);
}
.hero--photo .btn--ghost:hover { border-color: var(--sand); color: var(--sand); }

/* The wave sits at the very bottom edge of the hero, cream side up, so
   the next section reads as rising over the photo rather than a hard cut. */
.hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.hero__wave svg { display: block; width: 100%; height: clamp(28px, 5vw, 64px); }

@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 920px) {
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
}

/* Two-column hero with a photograph: copy left, image right.
   Fills the right-hand void on About, Results and Insights. */
.hero--split .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 880px) {
  .hero--split .container {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
  }
}
/* The hero figure. Images behind this are a mix of 3:4 (working notes)
   and 3:2 (the coffee scene), so the ratio is set to 4:3 and the crop is
   anchored to the top, where the interesting content sits in both. */
.hero__figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hero__copy h1 { margin-bottom: 24px; }
.hero__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
  margin-bottom: 28px;
}
/* About two-thirds of the container: wide enough to sit under a long
   headline without an empty right side, short enough to stay readable. */
.hero__lede--wide { max-width: 72ch; }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------------------------------------------------------------
   Strategy Line (4-step method)
   ------------------------------------------------------------ */
.line {
  position: relative;
}
.line__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.line__head .eyebrow { margin-bottom: 18px; }
.line__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 880px) {
  .line__steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
@media (min-width: 900px) {
  .line__steps--3 { grid-template-columns: repeat(3, 1fr); }
}
.line__step {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 28px 24px;
  border: 1px solid var(--rule);
}
.section--navy .line__step,
.section--deep .line__step {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--rule-deep);
}
.line__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 16px;
}
.line__step h3 { margin-bottom: 8px; }
.line__step p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.section--navy .line__step p { color: var(--on-navy-soft); }
.line__step .line__num { margin-bottom: 14px; }
/* The Line heading is exempt from the 30ch cap, and so is its wrapper, so it
   can sit on one line on desktop. */
.line__head { margin-bottom: 40px; max-width: none; }
.line__head h2 { max-width: none; }
/* Rendered as an h2 for document outline/SEO, but must stay pixel-identical
   to its old <p> look: reset every property the global heading rules
   (h1..h6, h2, the .punch text-wrap group, section h2) would otherwise
   impose, back to the values a plain paragraph had here. */
.hero__note {
  margin: 20px 0 1em;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: normal;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: none;
}
.hero__grid { margin-bottom: 48px; }

/* Problem section: copy left, photograph right. */
.problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .problem__grid { grid-template-columns: 1.25fr 1fr; gap: 64px; }
}
.problem__list {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  max-width: 62ch;
}
.problem__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.problem__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--gold);
}
.problem__figure { margin: 0; }
.problem__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--r-md);
}
.problem__figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* .section--deep's h1-h4 rule turns every heading sand, including inside
   a light .card floating on that background, where sand-on-white fails
   contrast. Cards keep their normal dark heading and body colour. */
.section--deep .card h3 { color: var(--ink); }
.section--deep .card p { color: var(--ink-soft); }

/* The stake-box card sits on the same --paper white as the card itself,
   so without a tint the border alone is too faint to read as a card. */
.stake-box .card { background: var(--paper-warm); }

/* Insights strip: dense link list instead of seven tall cards. */
.insight-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 760px) {
  .insight-strip { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}
@media (min-width: 1040px) {
  .insight-strip { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
}
/* Same gold left accent as who__item and the proof-index cases, one
   consistent family for every dense list on the site instead of three
   near-identical patterns that each look slightly different. */
.insight-strip__item {
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
}
.insight-strip__item a {
  display: block;
  padding: 18px 4px 18px 16px;
  color: var(--ink);
  text-decoration: none;
}
.insight-strip__item a:hover { text-decoration: none; }
/* Eighth cell: the "read all" button, so seven items plus the button fill
   two even rows instead of leaving one item stranded on a third. */
.insight-strip__more {
  border-bottom: 1px solid var(--rule);
  padding: 18px 4px 18px 16px;
  display: flex;
  align-items: center;
}
.insight-strip__item a:hover strong { color: var(--navy); text-decoration: underline; }
.insight-strip__item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 4px;
}
.insight-strip__item span {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ------------------------------------------------------------
   About page
   ------------------------------------------------------------ */
.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
@media (min-width: 860px) {
  .about-story__grid { grid-template-columns: 0.85fr 1.15fr; gap: 64px; }
}
.about-story__grid figure { margin: 0; }
.about-story__grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--r-md);
}
.about-story__grid p { color: var(--ink-soft); }

/* Shared two-column pattern for the About page: text stays left-aligned,
   a stack of items sits beside it rather than running full-width below
   the text, so the left edge reads as one straight line. Used for both
   "What I do" (plain stacked blocks) and "Coaching that produces"
   (white cards). */
.about-produces {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 860px) {
  .about-produces { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
}
.about-produces__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.about-produces__cards h3 { max-width: 22ch; }
.about-produces__cards p { color: var(--ink-soft); }
.about-produces__cards .punch { color: var(--ink); margin-bottom: 12px; }
.about-produces__cards .punch--solid { color: var(--on-deep); }
/* Aligns the first card's top border with the h2 above the eyebrow
   line, rather than with the eyebrow itself, on Sari's request. */
@media (min-width: 860px) {
  .about-produces__cards--align-h2 { margin-top: 38px; }
}
/* "What I do": the right column had no container of its own, so it read
   as two blocks of text floating loose next to the paragraph on the
   left. A plain bordered panel gives it a visible edge without reaching
   for gold, which stays reserved for flagship/premium signalling
   elsewhere on the site. */
.about-produces__cards--boxed {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 40px);
  gap: 24px;
}

/* "The roads I've taken": bold lead-in, then the sentence, one road per
   row, separated by hairlines. */
.about-roads {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.about-roads li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  margin: 0;
}
.about-roads li:first-child { border-top: 1px solid var(--rule); }
.about-roads strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------
   Results page
   ------------------------------------------------------------ */
/* Each case runs heading-left, body-right so the width is used. */
.case--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  border-left: 0;
  border-radius: var(--r-md);
  padding: 36px 40px;
}
@media (min-width: 900px) {
  .case--split { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
}
.case--split .case__eyebrow { display: block; margin-bottom: 12px; }
@media (max-width: 899px) {
  .case--split { padding: 28px 24px; }
}
.case__body p { color: var(--ink-soft); }
.case__body > p:last-of-type { margin-bottom: 0; }
/* The in-body link to the Health Check, added after the two body
   paragraphs: needs its own space before the logo below it, so it is
   exempted from the last-of-type rule above (it's now the last <p>). */
.case__body p.case__cta { margin: 0 0 20px; }
.case__body p.case__cta a { font-weight: 600; }
/* Quote and logo now live in the head column, next to the person who
   said it rather than buried at the end of a long scroll of body text. */
.case__head .case__quote { margin-top: 20px; }
.case__logo {
  display: block;
  margin-top: 18px;
  max-height: 90px;
  max-width: 260px;
  width: auto;
  height: auto;
}
/* Aligns the body column's first line with the h2, not the eyebrow
   above it, matching the same fix used throughout the About page. */
@media (min-width: 900px) {
  .case--split .case__body { margin-top: 33px; }
}
/* Visibly a working note, not client-facing copy: this build isn't
   public yet, so a flagged placeholder here is fine until the real
   quote arrives, but it must never read as a real testimonial. */
.case__quote--pending {
  background: none;
  border: 1px dashed var(--rule-strong);
}
.case__pending-tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.case__quote--pending p { font-style: normal; color: var(--ink-soft); }

/* ------------------------------------------------------------
   Insights page
   ------------------------------------------------------------ */
.insights-list { max-width: 900px; }
.insights-more { text-align: center; }
.insights-hint {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
@media (min-width: 900px) {
  .insights-hint { display: none; }
}
.hero__meta {
  margin-top: 20px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Shared closer with a side CTA
   ------------------------------------------------------------ */
.closer--wide { align-items: start; }
.closer--wide .btn { margin-top: 4px; }

/* ------------------------------------------------------------
   Cards and ladders
   ------------------------------------------------------------ */
.cards-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}@media (min-width: 760px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
}
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 24px;
}
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.offer {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 28px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}
/* Gold, not navy: navy is already the accent on every card's promise
   line and "what you get" label, so it didn't distinguish the flagship
   from the other four. Gold is the site's established "this one is
   different" signal (the numbered circles, the pull-quotes), used only
   here among the five cards so it keeps meaning something. */
.offer--flagship {
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
.offer--flagship .offer__promise { color: var(--gold-deep); }
.offer--flagship .offer__gets-label { color: var(--gold-deep); }
/* The Term line is always the last child. Pushing it to the bottom of the
   flex column, with a hairline above, makes it sit at the same height on
   every card in a row whatever the amount of text above it. */
.offer__main, .offer__detail { display: contents; }
.offer__title { font-size: 24px; margin-bottom: 6px; }
.offer__promise {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--navy);
  margin-bottom: 16px;
}
.offer__for, .offer__gets, .offer__term { font-size: 15px; color: var(--ink-soft); }
.offer__gets { margin: 4px 0 16px; padding-left: 20px; }
.offer__gets li { margin-bottom: 4px; }
.offer__gets-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 20px 0 0;
}
.offer__promise { margin-bottom: 12px; }
.offer__term {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.offer__note { margin: 12px 0 16px; font-size: 15px; }
.offer .btn { align-self: flex-start; }

/* The offerings grid: cards side by side on wide screens. */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  /* Was align-items: start, so cards kept their own natural height and
     the row looked jagged wherever one card carried more text (Fractional
     CSO) than its row-mate (Senior Partnership). Stretch, plus the
     column-flex + margin-top:auto on .offer above, means every card in a
     row matches the tallest one and every button lands on the same line. */
  align-items: stretch;
}
.offer-grid > .reveal, .offer-grid > .offer { display: flex; flex-direction: column; }
.offer-grid > .reveal > .offer { flex: 1; margin-bottom: 0; }
@media (min-width: 760px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The Proving Ground card used to pair with a photo here; removed, it
   was a shorter card next to a much taller image, leaving a large empty
   gap under the card. The other four offerings show as plain cards with
   no photo, so this constrains it to a readable width instead of
   stretching one card across the full container alone. */
/* The Proving Ground stands alone above the four-card grid. Full width,
   with the promise and "for you if" on the left and what you get and the
   term on the right, so it does not sit in a half-empty row. */
.offer-standalone .offer__main,
.offer-standalone .offer__detail { display: block; }
@media (min-width: 900px) {
  .offer-standalone .offer {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    column-gap: 64px;
    padding: 36px 40px;
  }
  .offer-standalone .offer__detail { display: flex; flex-direction: column; }
  .offer-standalone .offer__gets-label { margin-top: 0; }
}
/* A light warm fill, not white, marks this as the entry point without
   touching gold, which stays reserved for the flagship card alone. */
.offer-standalone .offer { background: var(--cream); border-color: var(--rule-strong); }

/* Health Check: the intro across the top (heading left, lead right), then
   the seven practical steps as a grid of cards, with the button as the
   eighth tile so the last row is full. */
.hc__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 900px) {
  .hc__intro { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
}
.hc__intro h2 { margin-bottom: 0; }
.hc__intro .lead { margin-bottom: 14px; }
.hc__steps { gap: 16px; }
@media (min-width: 600px) and (max-width: 879px) {
  .hc__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
  .hc__steps { gap: 20px; }
}
.hc__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}
.closer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 860px) {
  .closer { grid-template-columns: 1.5fr auto; gap: 48px; }
}
.closer h2 { margin-bottom: 14px; }
.closer .btn { white-space: nowrap; }

/* Text left, the In-house card right: this used to stack both full width,
   leaving the intro text at ~52ch and the card at ~460px, both left
   aligned, with the whole right side of a dark section sitting empty.
   Side by side uses that space instead of leaving it as bare navy. */
/* Strategy Showdown: text left, In-house card right, the card lined up
   with the top of the paragraphs. Stacked below 900px. */
.day-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .day-grid {
    grid-template-columns: 1.35fr 1fr;
    grid-template-areas: "head ." "body card";
    column-gap: 64px;
    row-gap: 32px;
    align-items: start;
  }
  .day-head { grid-area: head; }
  .day-body { grid-area: body; }
  .day-card { grid-area: card; }
}
.day-head h2 { margin-bottom: 8px; }
.day-body p { margin: 0 0 14px; }.day-card {
  /* --deep-soft exists specifically for layering on top of --deep, a
     translucent white overlay at low opacity was barely distinguishable
     from the section background, the same issue fixed twice already
     elsewhere on the site today. This section moved from --deep to the
     brighter --navy (matching The Flip on the homepage) so it doesn't
     blend into the footer below it, which stayed --deep; the card fill
     follows, --deep now reads as the contrasting surface on --navy. */
  background: var(--deep);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.day-card h3 { font-size: 20px; margin: 0; }
.day-card p { color: var(--on-navy-soft); font-size: 15px; margin: 0; }
.day-card .btn { align-self: flex-start; margin-top: auto; }
.table-hint {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .table-hint { display: none; }
}

/* A dense, bordered list rather than five boxed cards in a 3-column grid:
   five items in three columns leaves a visible hole in the second row
   (three cards, then two, with an obvious gap where a sixth would sit).
   Same fix already used for the Insights strip elsewhere on this page,
   applied here instead of inventing a second pattern. */
.who__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule-strong);
}
@media (min-width: 680px) {
  .who__list { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
@media (min-width: 1040px) {
  .who__list { grid-template-columns: repeat(3, 1fr); }
}
.who__item {
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 22px 4px 22px 16px;
}
.who__item h3 {
  font-size: 17px;
  font-family: var(--font-sans);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.who__item a {
  color: var(--navy);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.who__item a:hover { text-decoration: underline; }
/* The sixth cell of the five-item grid: the summary line and the button,
   so the last row is not left with an empty slot. */
.who__more {
  border-bottom: 1px solid var(--rule);
  padding: 22px 4px 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.who__more p { margin: 0; font-size: 15px; }

/* A thin rule instead of a new colour: Proof and Ways to Work Together
   are both quiet, browsing moments (not emotional beats like the hero or
   At Stake), so they get a boundary line, not a whole new section colour
   competing for attention. */
/* The Home Insights heading is only about 10px too long for one line at the
   full container width, which balanced wrapping turned into two short
   lines. A touch of tightening lets it hold one line on desktop. */
#insights h2 { letter-spacing: -0.02em; }
/* Its one-line intro runs the same width as the heading above it. */
#insights .lead { max-width: none; }

/* Proof teaser: the two named case studies, not one generic sentence.
   Same gold left-edge accent as the who__list rows and the punch quotes,
   one visual family instead of three unrelated treatments on one page. */
.proof-index {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 680px) {
  .proof-index { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (min-width: 980px) {
  .proof-index { grid-template-columns: repeat(3, 1fr); }
}
.proof-index__item {
  display: block;
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 20px;
  text-decoration: none;
  color: inherit;
}
/* Fixed-height white box, not just the bare image: keeps both logos'
   headlines aligned regardless of each logo's own aspect ratio, and
   gives the Precision Basketball file (opaque white background, no
   transparent PNG available yet) a deliberate frame instead of an
   unexplained white rectangle. */
.proof-index__logo-wrap {
  display: flex;
  align-items: center;
  height: 52px;
  width: fit-content;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.proof-index__logo {
  display: block;
  max-height: 32px;
  max-width: 150px;
  width: auto;
  height: auto;
}
.proof-index__item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.proof-index__item:hover strong { color: var(--navy); text-decoration: underline; }
.proof-index__meta {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Table
   ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 760px;
}
.cmp th, .cmp td {
  text-align: left;
  padding: 14px 18px;
  font-size: 15px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.cmp thead th {
  background: var(--cream);
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
}
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp th[scope='row'] { font-weight: 600; color: var(--ink); }
.cmp td { color: var(--ink-soft); }

/* ------------------------------------------------------------
   Insights — collapsible posts
   ------------------------------------------------------------ */
.insight {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  overflow: hidden;
}
.insight > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* The summary wraps three stacked lines (meta, title, teaser) in a span.
   Without this they run together as one long ragged line. */
.insight > summary > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.insight__meta {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.insight__title { font-size: 20px; line-height: 1.25; }
.insight__teaser {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.insight > summary::-webkit-details-marker { display: none; }
.insight > summary::after {
  content: '+';
  font-family: var(--font-sans);
  font-size: 24px;
  color: var(--gold-deep);
  transition: transform 0.18s ease;
}
.insight[open] > summary::after { content: '−'; }
.insight > summary:hover { background: var(--paper-warm); }
.insight__body { padding: 0 24px 24px; color: var(--ink-soft); }
.insight__body p { margin: 0 0 12px; }
/* The Health Check link appended after each article's locked body text:
   sits close under the last paragraph, no trailing gap before the
   container's own bottom padding. */
.insight__body p.insight__cta { margin: 0; }
.insight__body p.insight__cta a { font-weight: 600; }

/* Layout hooks. These carry no styling of their own but are referenced by
   markup, so they are declared here to keep the class inventory closed. */
.about-story,
.cal-embed { display: block; }
.insight__meta {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-deep);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   Case studies (Results)
   ------------------------------------------------------------ */
.case {
  background: var(--paper);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 28px;
  margin-bottom: 24px;
}
.case__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.case h2 { margin-bottom: 12px; }
.case p { color: var(--ink-soft); }
.case__quote {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: var(--r-sm);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}
.case__quote-attr {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.case__quote-attr a { color: var(--navy); }

.scene-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 880px) {
  .scene-split { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.scene-split img {
  border-radius: var(--r-md);
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   Closing CTA (navy)
   ------------------------------------------------------------ */
/* Two distinct asks, primary CTA and the newsletter fallback, were
   stacked in a single full-width column (hardcoded 1fr in the markup),
   running together with no separation. Proper two columns above mobile,
   and the signup gets its own contained panel so it reads as a second,
   deliberate thing rather than more paragraphs after the first. */
.close__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 880px) {
  .close__grid { grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
}
/* A translucent white overlay on the deep background had the same
   "barely different from the section" problem as the Flip section's
   before-card did: solid sand, not a tint, so it actually reads as a
   separate box. Text and the form flip to dark-on-light to match. */
.close__signup {
  background: var(--sand);
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-lg);
  padding: 28px;
}
.close__signup h3 { margin-bottom: 10px; color: var(--deep); }
/* Specificity, not just source order: .close p / .close .text-soft
   (defined further down for the dark side of this section) tie on
   specificity with a plain .close__signup p, and being later in the
   file they were winning and silently keeping the text sand-on-sand.
   The extra .close qualifier here outranks them regardless of order. */
.close .close__signup p { color: var(--ink-soft); }
.close .close__signup .text-soft { color: var(--ink-soft); }
/* The button label is long enough to overflow the card beside the input,
   so the field and button always stack here. */
.close__signup .signup { max-width: none; }
.close__signup .signup input {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
/* Contact's card is already white, so its fields stay the slightly
   warmer off-white they always were, rather than matching it exactly.
   Written as .signup.signup--light (two classes) to match .close__signup
   .signup's specificity, so it isn't silently lost to source order
   against the plain .signup rules defined further down this file. */
.signup.signup--light input {
  background: var(--paper-warm);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.close__signup .signup input::placeholder,
.signup.signup--light input::placeholder { color: var(--ink-soft); }
.close__signup .signup input:focus-visible,
.signup.signup--light input:focus-visible { outline-color: var(--navy); }
.close__signup a { color: var(--navy); }
.close__signup a:hover { color: var(--blue); }

/* Navy, not deep: the footer directly below is --deep, and the two were
   reading as one continuous dark block with no visual break. Navy gives
   the closing CTA its own moment before the quieter footer. */
.close {
  background: var(--navy);
  color: var(--on-deep);
  padding: clamp(64px, 8vw, 112px) 0;
}
.close h2 { color: var(--sand); margin-bottom: 16px; }
/* The closing band is --navy, not --deep, so its text uses the navy text
   tokens: --on-deep-soft on this blue measured 4.2:1, just under AA. */
.close p { color: var(--on-navy); margin-bottom: 24px; }
.close__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.close .eyebrow { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.close .text-soft { color: var(--on-navy); }

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
.signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
}
/* First name + email sit side by side once there's room; the button
   always sits on its own line below, so it never has to squeeze two
   fields plus itself into one row. */
.signup__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 520px) {
  .signup__fields { flex-direction: row; }
}
.signup input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 14px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(234, 242, 250, 0.3);
  background: rgba(255,255,255,0.08);
  color: var(--on-navy);
}
.signup input::placeholder { color: var(--on-navy-soft); }
.signup input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.signup button { white-space: normal; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer {
  background: var(--deep);
  color: var(--on-deep);
  padding: 64px 0 32px;
  border-top: 1px solid var(--rule-deep);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 40px; }
}
.footer__brand img {
  height: auto;
  width: 168px;
  max-width: 100%;
  margin-bottom: 16px;
}
.footer h4 {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 14px;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer ul a {
  color: var(--on-deep);
  font-size: 15px;
  text-decoration: none;
}
.footer ul a:hover { color: var(--sand); }
.footer__contact-line { font-size: 14px; color: var(--on-deep-soft); margin: 4px 0; }
.footer__contact-line a { color: var(--on-deep); }
.footer__legal {
  border-top: 1px solid var(--rule-deep);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--on-deep-soft);
}
.footer__legal a { color: var(--on-deep-soft); display: inline-block; padding: 12px 6px; }
.footer__legal a:hover { color: var(--sand); }

/* ------------------------------------------------------------
   Lead paragraph (intro text under a heading).
   ------------------------------------------------------------ */
p.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.section--navy p.lead,
.section--deep p.lead { color: var(--on-navy); }

/* ------------------------------------------------------------
   Sticky mobile CTA
   ------------------------------------------------------------ */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 12px 16px;
  box-shadow: 0 -4px 12px rgba(11, 34, 54, 0.06);
}
.sticky-cta a { width: 100%; }
@media (max-width: 900px) {
  .sticky-cta { display: block; }
  body { padding-bottom: 76px; }
}

/* ------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Responsive nav collapse
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .nav__list, .nav .btn--primary { display: none; }
  .nav__burger { display: inline-flex; }
}

/* ------------------------------------------------------------
   Privacy / Terms prose
   ------------------------------------------------------------ */
.legal h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  margin-top: 32px;
  color: var(--ink);
}
.legal h2:first-of-type { margin-top: 0; }
/* Legal headings are small and sit inside a narrow column already. */
.legal h2 { max-width: none; }
/* Legal pages have no lede, so the hero is tight and the text column lines
   up with the heading's left edge instead of floating in the centre. */
.hero--legal { padding-bottom: 24px; }
.hero--legal + .legal { padding-top: 40px; }
/* This div is both .container and .prose at once (not nested), so the
   base .prose { max-width: 64ch } was narrowing it well below the site's
   normal 1180px page width, leaving a large empty gap on the right.
   Use the full container width instead, same as every other page. */
.legal > .prose { max-width: var(--container); }
/* The site-wide .section p cap (line 128) keeps body paragraphs at a
   comfortable 65ch reading width, but on the legal pages' long-form
   text it left the same large gap on the right as the .prose fix above,
   now that the column itself is full width. Legal paragraphs can run
   wider since headings here already do (.legal h2 above). */
.section.legal p { max-width: none; }
.legal p, .legal li { color: var(--ink); }

/* ------------------------------------------------------------
   Punch quote (cream section)
   ------------------------------------------------------------ */
.punch {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  padding: 32px;
  background: var(--cream);
  border-radius: var(--r-md);
  max-width: 720px;
  margin: 0 auto;
}
/* Inside a section that is already cream or warm, the default cream block
   disappears. These variants keep the quote as a mark without a slab. */
.punch--bare {
  padding: 0;
  background: none;
  border-left: 3px solid var(--gold);
  border-radius: 0;
  padding-left: 24px;
  max-width: 34ch;
  margin: 0;
}
/* Sari asked for the nav bar's dark slate instead of near-black ink here,
   for the one statement he wants read as a deliberate, considered claim. */
.punch--deep { color: var(--deep); }
/* The pull quote under the four steps runs wider on desktop, two to three
   lines rather than four. */
@media (min-width: 900px) {
  .line .punch--bare { max-width: 60ch; }
}
/* A solid-fill variant for the one line on the page Sari wants to read
   as the headline claim, not a supporting aside. Navy, not gold: gold
   stays reserved for flagship/premium signalling elsewhere. */
.punch--solid {
  background: var(--deep);
  color: var(--on-deep);
  border: none;
  border-radius: var(--r-lg);
  padding: 28px 32px;
  max-width: none;
  margin: 0;
}
.problem .punch, .section--warm .punch {
  background: var(--paper);
  border: 1px solid var(--rule);
  max-width: none;
}
.problem .punch--solid, .section--warm .punch--solid {
  background: var(--deep);
  border: none;
}

/* ------------------------------------------------------------
   Helpers
   ------------------------------------------------------------ */
.mb-0 { margin-bottom: 0; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 48px; }
.flex-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-soft { color: var(--ink-soft); }
.section--navy .text-soft { color: var(--on-navy-soft); }

/* Contact: "Prefer to write first?" beside the details card. Both sit on
   --deep, so the card is built from light text on a slightly lifted panel
   rather than reusing .card, whose dark text is for white cards. */
.contact-write {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .contact-write { grid-template-columns: 1.1fr 0.9fr; gap: 72px; }
}
.contact-card {
  background: var(--deep-soft);
  border: 1px solid var(--rule-deep);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.5vw, 36px);
  color: var(--on-deep);
}
.contact-card h3 { color: var(--sand); margin-bottom: 14px; }
.contact-card__who { margin: 0 0 20px; color: var(--on-deep-soft); }
.contact-card__who strong {
  display: block;
  color: var(--on-deep);
  font-size: 18px;
  font-weight: 600;
}
.contact-card__rows {
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid var(--rule-deep);
  border-bottom: 1px solid var(--rule-deep);
}
.contact-card__rows > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 10px 0;
  align-items: baseline;
}
@media (max-width: 480px) {
  .contact-card__rows > div { grid-template-columns: 1fr; gap: 2px; }
}
.contact-card__rows dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-card__rows dd { margin: 0; overflow-wrap: anywhere; }
.contact-card__rows a { color: var(--on-deep); display: inline-block; padding: 6px 0; }
.contact-card__rows a:hover { color: var(--sand); }
.contact-card__legal {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--on-deep-soft);
}