/* ============================================================
   Illuminate Financial — shared stylesheet
   Used by every page. One source of truth for brand + layout.

   2026-08-06: re-themed from the "Illuminate Financial Design
   System" built in Claude Design — navy/brass "workpaper" system
   replacing the original navy/gold system. New type (Newsreader +
   IBM Plex Sans + IBM Plex Mono replacing Playfair + Inter), new
   graphic language (ledger-rule hairline grid, brass sign-off
   divider, mono reference numbers, status badges) replacing the
   star-tile pattern, wave dividers, and Playfair oversized numbers.
   Legacy CSS variable names (--navy, --gold, --cream, etc.) are kept
   as the primary interface and simply repointed at the new palette,
   so existing markup and inline styles pick up the new system
   without a full HTML rewrite. See 06_Website/Design_System_Export/
   for the full source (tokens, components, guidelines).
   ============================================================ */

/* 2026-08-12: display font changed off Newsreader per Reese's direct
   call — competitive research across 11 consulting firms (McKinsey,
   BCG, Bain, Deloitte, Accenture, PwC, EY, KPMG, IBM Consulting,
   Oliver Wyman, Bridgepoint Consulting) found 8/11 running sans-serif
   display type; Reese picked Public Sans (the U.S. government's own
   open-source typeface — institutional/compliance register, fits the
   audit positioning) at weight 300, matching how Deloitte/EY/IBM
   Consulting run their own hero type light. Replaces Newsreader
   entirely as --font-display below; IBM Plex Sans/Mono unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- full new token scale (navy/ink family) ---- */
  --ink-900: #0D1424;
  --navy-900: #131C36;
  --navy-800: #182449;
  --navy-700: #243768;
  --navy-600: #374B82;
  --navy-500: #57699B;
  /* 2026-08-09 revision spec: body copy read too small/light at desktop
     widths. Darkened from #5B6172 for stronger WCAG contrast on white/
     paper backgrounds — this is the site's --gray token, used broadly. */
  --slate-600: #454C63;
  /* 2026-08-09 final refinement pass, Section 12.2 (WCAG AA audit):
     --slate-400 (#8A8FA0) measures 2.93:1 on the site's paper/cream
     surfaces — fails the 4.5:1 normal-text minimum. It's still used
     as-is for light-on-navy contexts (passes 4.7:1+) and on truly
     decorative color swatches. --slate-500 is a new, darker token for
     every light-background mono field-label / footnote instance that
     needs to actually pass contrast (4.5–5.3:1 depending on surface). */
  --slate-500: #656B85;
  --slate-400: #8A8FA0;
  --slate-200: #C7CAD4;

  /* ---- full new token scale (brass family — muted "workpaper gold",
     pixel-sampled against the real logo files; true logo gold clusters
     at ~#FEC62F, same value the 8/2 site fix already landed on) ---- */
  --brass-800: #7A5A1E;
  --brass-700: #95701F;
  --brass-600: #C89425;
  --brass-500: #C79A3E;
  --brass-450: #FBC03E;
  --brass-400: #D9AF5E;
  --brass-300: #E8C685;
  --brass-100: #F5E7C8;

  /* ---- paper / neutrals ---- */
  --paper-100: #F7F4EC;
  --paper-050: #FBF9F4;
  --paper-200: #EFE9D8;
  --hairline: #DED5BC;
  --hairline-on-navy: rgba(255,255,255,0.14);

  /* ---- status (audit-finding severity — workpaper tab colors,
     not stoplight red/yellow/green) ---- */
  --status-critical: #8C3B2E;
  --status-critical-bg: #F3E4E0;
  /* 2026-08-09 final refinement pass, Section 12.2: darkened from
     #95701F (3.84:1 on --status-watch-bg, fails 4.5:1) to match
     --brass-800 (5.35:1). */
  --status-watch: #7A5A1E;
  --status-watch-bg: #F5EBD4;
  --status-resolved: #3E6350;
  --status-resolved-bg: #E4EDE7;

  /* ---- legacy variable names — kept as the site's primary interface,
     repointed at the new system. Every existing class and inline
     style in these HTML files references these names. ----
     2026-08-09 revision spec: bright #FBC03E (brass-450) was doing too
     much visual work as the dominant CTA/label fill ("luxury brochure"
     read). --gold now points at the muted workpaper brass (#C89425)
     for full CTA surfaces, labels, and badges; brass-450 is reserved
     for small hot-core glows/hover-edges (used directly via rgba()
     in .logo-icon::before and .cta-banner::before, not through this
     token) per the spec's "reserve #FBC03E for a glow only" rule. */
  --navy: var(--navy-900);
  --navy-deep: var(--ink-900);
  --gold: var(--brass-600);
  /* 2026-08-09 final refinement pass, Section 12.2 (WCAG AA audit):
     brass-700 (#95701F) measures 4.14:1 on the site's paper-100 /
     brass-100 surfaces — fails 4.5:1 for the small mono kicker labels
     that use this token (workpaper card titles, roadmap day labels,
     etc). Repointed to brass-800, which passes at 5.2-6.4:1 across
     every surface this token touches. */
  --gold-bright: var(--brass-800);
  /* 2026-08-09 final refinement pass, Section 2: dedicated hover/focus
     brass token (#D9AF5E) — used only for button/fill hover states,
     where a lighter brass reads correctly against dark button text.
     NOT used for hover text-on-light-background contexts (e.g.
     .audience-breadcrumb:hover), which keep --gold-bright — D9AF5E
     text on white/cream fails WCAG AA contrast (~2.2:1). */
  --gold-hover: var(--brass-400);
  --gold-light: var(--brass-300);
  --cream: var(--paper-100);
  --white: #FFFFFF;
  --ink: #1B2130;
  --gray: var(--slate-600);
  --border: var(--hairline);
  --border-warm: var(--hairline);

  /* ---- type — exactly 3 roles, matching the confirmed current design
     system (2026-08-10 corrective pass) ---- */
  --font-display: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* ---- radii — sharp and small, never bubbly ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ---- shadow — near-flat, hairline borders do the real separating work ---- */
  --shadow-card: 0 1px 2px rgba(13,20,36,0.05), 0 1px 0 rgba(13,20,36,0.04);
  --shadow-raised: 0 4px 16px rgba(13,20,36,0.08), 0 1px 2px rgba(13,20,36,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
}

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

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

.container {
  /* 2026-08-09 revision spec: widen primary content grid to ~1120-1180px */
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- HEADER / NAV (shared across every page) ----------
   2026-08-09 final refinement pass, Section 1 + 4: the header
   previously re-typeset "Illuminate" / "Financial" as HTML/CSS text
   (a brand regression — the logo is artwork, not typography). Now
   renders the real approved logo file (a cropped derivative of
   Wordmark_Gold_Only_Transparent.png — legible on the mandated navy
   header; the full lockup's secondary "FINANCIAL" line + rules are
   dark navy-on-navy and unreadable there, see implementation report
   exception #1). No text-transform/letter-spacing/filter/recolor is
   applied to the logo image itself. Header height/logo width tuned
   to Section 4's exact per-breakpoint thresholds. */
header {
  position: sticky;
  top: 0;
  background: var(--navy-800);
  border-bottom: 1px solid var(--hairline-on-navy);
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: 1160px;
  margin: 0 auto;
}

.logo { display: flex; align-items: center; }
.logo-img { display: block; width: 182px; height: auto; }

nav ul { list-style: none; display: flex; gap: 28px; align-items: center; }
nav a.nav-link { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: #C7CCDE; padding: 4px 0; border-bottom: 2px solid transparent; }
nav a.nav-link:hover { color: var(--white); }
nav a.nav-link[aria-current="page"] { color: var(--white); border-bottom-color: var(--gold); font-weight: 600; }

@media (max-width: 1023px) {
  .nav-inner { padding: 14px 28px; }
  .logo-img { width: 166px; }
  nav ul { gap: 20px; }
}
@media (max-width: 767px) {
  .nav-inner { padding: 13px 24px; }
  .logo-img { width: 152px; }
}
@media (max-width: 360px) {
  .nav-inner { padding: 9px 16px; }
  .logo-img { width: 34px; }
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  padding: 12px 22px;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms cubic-bezier(.2,.7,.3,1), border-color 120ms cubic-bezier(.2,.7,.3,1), color 120ms cubic-bezier(.2,.7,.3,1);
}
/* Focus-visible indicator — Section 12.2: >=2px outline, >=3:1 contrast
   on every interactive element. Navy reads at high contrast on the
   site's light/cream sections (most of the page); dark navy sections
   (header, footer, banners, on-navy cards) swap to bright gold, which
   fails contrast on light backgrounds but is the right pairing here. */
:root { --focus-color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-color); outline-offset: 2px;
}
header, footer, .cta-banner, .section-navy-plain, .pattern-navy,
.page-hero.on-navy, .hero.on-navy, .icp-card.on-navy, .field-card.on-navy,
.results, .about-hero-grid { --focus-color: var(--brass-450); }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-outline { background: transparent; border: 1px solid var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: var(--white); }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0;
}
.menu-toggle span { display: block; width: 100%; height: 2px; background: var(--gold-light); border-radius: 2px; }

.mobile-nav { display: none; flex-direction: column; background: var(--white); border-bottom: 1px solid var(--border); padding: 8px 32px 20px; }
.mobile-nav a.nav-link { padding: 12px 0; border-bottom: 1px solid var(--border); }
.mobile-nav .btn { margin-top: 14px; text-align: center; }
.mobile-nav.open { display: flex; }

/* ---------- ELEMENTS reused everywhere ---------- */
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.11em; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  /* 2026-08-09 final refinement pass, Section 12.2 (WCAG AA audit):
     --gold (#C89425) measured 2.72:1 on white/cream — fails 4.5:1 for
     this 12px label used on every light-background section sitewide.
     --brass-800 passes at 6.35:1 on white / 5.77:1 on cream. */
  color: var(--brass-800); margin-bottom: 14px; display: block;
}
.eyebrow-light { color: var(--gold-light); }

.section-head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.section-head h2 { font-size: 30px; margin-bottom: 14px; }
.section-head p { color: var(--gray); font-size: 17px; line-height: 1.6; }
.section-head.light h2 { color: var(--white); }
.section-head.light p { color: #B9C0D4; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; background: var(--cream); border: 1px solid var(--border-warm); color: var(--navy); padding: 5px 11px; border-radius: var(--radius-pill); }
.tag-light { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: var(--gold-light); }

/* ---------- PLATFORM EXPERIENCE STRIP ----------
   2026-08-09 final refinement pass, Section 10: platform names no
   longer render as generic rounded pills. No official third-party
   marks are licensed for use here, so per the spec's explicit
   fallback ("if an official mark cannot be used, render the platform
   name as plain text without a pill background") this is restrained
   plain text, normalized to a consistent line-height and gap — and
   makes no visual claim of partnership beyond the one verified
   relationship (Navan Partner, credentialed separately on About). */
.platform-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 26px; }
.platform-list span:not(.pl-sep) { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--gray); line-height: 22px; }
.platform-list .pl-sep { color: var(--border); font-size: 12px; }

/* ---------- STATUS BADGE ----------
   Workpaper-tab severity palette — critical / watch / resolved.
   Used inside the Audit Worksheet graphic and available anywhere
   a finding needs a status. */
.badge {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 6px;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge.critical { background: var(--status-critical-bg); color: var(--status-critical); }
.badge.watch { background: var(--status-watch-bg); color: var(--status-watch); }
.badge.resolved { background: var(--status-resolved-bg); color: var(--status-resolved); }
/* 2026-08-11 final-stage audit: workflow status (open/closed) is a
   separate concept from severity (critical/watch/resolved) — a finding
   can be Severity: Critical and Status: Open as two distinct fields.
   Neutral navy chip, not reusing the brass "watch" semantic. */
.badge.open { background: rgba(19,28,54,0.08); color: var(--navy); }

/* ---------- LEDGER-RULE HAIRLINE GRID ----------
   Replaces the old tiled star/spark pattern. A faint grid evoking a
   workpaper page, used on navy and paper section backgrounds. */
.pattern-navy {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(13,20,36,0.5), rgba(13,20,36,0.5)),
    url('images/section-sequence.jpg');
  background-size: cover;
  background-position: center;
}
.pattern-cream {
  background-color: var(--cream);
  background-image: repeating-linear-gradient(0deg, rgba(19,28,54,0.05) 0 1px, transparent 1px 32px);
}

/* ---------- SIGN-OFF DIVIDER ----------
   A brass hairline with a small ring at center — the section-break
   device, replacing the old wave-divider SVG. */
.sign-off-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.sign-off-divider .line { flex: 1; height: 1px; background: var(--border); }
.sign-off-divider.on-navy .line { background: var(--hairline-on-navy); }
.sign-off-divider .ring { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--gold); flex-shrink: 0; }

/* ---------- GEOMETRIC PHOTO MASKS ----------
   Clip any photo into a shape tied to the brand mark instead of a
   plain rectangle. Apply directly to an <img> or a photo container. */
.mask-circle { border-radius: 50%; overflow: hidden; }
.mask-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.mask-hex { clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%); }
.mask-spark { clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); }

.headshot.mask-hex, .headshot.mask-diamond, .headshot.mask-spark {
  border: none;
  background: linear-gradient(135deg, var(--cream), var(--paper-200));
}

/* ---------- DECORATIVE OVERSIZED NUMBERS ----------
   Restrained per the new system — mono, low-opacity, no longer a
   giant Playfair display numeral. */
.decorative-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 140px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.1;
  position: absolute;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}
.decorative-num-wrap { position: relative; overflow: hidden; z-index: 0; }
.decorative-num-wrap .decorative-num { top: -4px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.decorative-num-wrap > .container, .decorative-num-wrap > .stat-row { position: relative; z-index: 1; }

/* ---------- ICON SYSTEM ----------
   Simple single-color line icons on service/domain/audience cards.
   Colors now come from the navy/brass system automatically via the
   variable aliases above. */
.icon-badge {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--border-warm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.icon-badge svg { width: 23px; height: 23px; color: var(--navy); }
.icon-badge.on-navy { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.icon-badge.on-navy svg { color: var(--gold-light); }

.tag-start {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; background: var(--gold); color: var(--navy-deep);
  padding: 3px 9px; border-radius: var(--radius-sm); margin-bottom: 10px;
}

.section-ornament { display: flex; justify-content: center; margin: 32px 0; }
.section-ornament svg { width: 24px; height: 24px; }

/* ---------- STEP TRACK ----------
   The old circled-number track is retired — the new system numbers
   each step with a plain mono numeral (see .approach-item .step-num
   below), so this class is unused but left defined in case a future
   page wants a literal progress track again. */
.step-track { display: flex; align-items: center; gap: 16px; margin: 8px 0 56px; }
.step-track .step-node { flex-shrink: 0; font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--gold-light); }
.step-track .step-line { flex: 1; height: 1px; background: var(--hairline-on-navy); margin: 0 4px; min-width: 24px; }

/* ---------- CARDS ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 28px; box-shadow: var(--shadow-card);
}
.card .num { font-family: var(--font-mono); color: var(--gold-bright); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.card h3 { font-size: 19px; margin-bottom: 12px; }
.card p { color: var(--gray); font-size: 16px; line-height: 1.58; margin-bottom: 16px; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Final Consistency Refinement, 2026-08-11: five-stage lifecycle row
   (Homepage). Same 5 -> 3+2 -> 1 wrap tier already proven on
   .process-card-grid (Findings), scoped here so it doesn't touch the
   existing .cols-4 / .cols-5 (approach-grid) 2-column tablet fallback. */
.card-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1199px) and (min-width: 861px) {
  .card-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .card-grid.cols-5 { grid-template-columns: 1fr; }
}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero { padding: 68px 0 60px; min-height: 380px; background: linear-gradient(180deg, var(--cream) 0%, var(--paper-050) 100%); }
.page-hero .eyebrow { margin-bottom: 10px; }
/* 2026-08-12: hero/display H1s run Public Sans at weight 300 (light) —
   matches Deloitte/EY/IBM Consulting's own hero treatment, per Reese's
   direct call. Smaller H2/H3 headings stay at the base 600 below. */
.page-hero h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.14; max-width: 760px; font-weight: 300; font-style: normal; letter-spacing: -0.01em; }
.page-hero p.lead { font-size: 17.5px; color: var(--gray); max-width: 640px; margin-top: 16px; }

/* background-color only (not the `background` shorthand) — the real
   image/gradient comes from the page-specific .hero-bg-* class below;
   using the shorthand here would reset background-image to none and
   silently hide it, since this 2-class selector outranks the
   1-class .hero-bg-* rule for that property. */
.page-hero.on-navy { background-color: var(--navy); }
.page-hero.on-navy h1 { color: #F4F1E7; text-shadow: 0 2px 18px rgba(13,20,36,0.55); }
.page-hero.on-navy p.lead { color: #C7CCDE; }

/* ---------- HOMEPAGE HERO ----------
   Two-column layout — copy left, SparkBurst graphic right — replacing
   the old centered single-column hero, matching the new system. */
.hero { padding: 88px 0 96px; min-height: 480px; background: linear-gradient(180deg, var(--cream) 0%, var(--paper-050) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
/* 2026-08-09 revision spec: hero H1 approx 52-64px desktop, capped line length */
/* 2026-08-12: Public Sans weight 300 (light) — see PAGE HERO comment above. */
.hero h1 { font-size: clamp(38px,4.4vw,60px); line-height: 1.1; margin: 20px 0 22px; max-width: 640px; font-weight: 300; font-style: normal; letter-spacing: -0.01em; }
.hero p.lead { font-size: 17px; color: var(--gray); max-width: 580px; margin: 0 0 28px; }
.hero-punch { font-size: 19px; font-weight: 600; color: var(--navy); max-width: 560px; margin: 0 0 16px; line-height: 1.4; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .link-secondary { display: inline-flex; align-items: center; padding: 12px 4px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--navy); }
/* Home + Who We Help Final Refinement, 2026-08-11: the prior <br>-based
   break still let the two "lines" wrap further on their own if either
   exceeded the column width — not deterministic. Replaced with two
   .hero-line spans, each forced to its own block with white-space:nowrap
   at >=1360px (the spec's exact acceptance-test breakpoint), so the H1
   is guaranteed exactly two lines there regardless of column width.
   Below 1360px both rules fall away and the spans flow/wrap naturally
   inline, same as plain text. */
.hero h1 .hero-line { display: inline; }
@media (min-width: 1360px) {
  .hero-grid { grid-template-columns: minmax(0, 840px); }
  .hero h1 { max-width: 800px; font-size: 68px; line-height: 1.0; }
  .hero h1 .hero-line { display: block; white-space: nowrap; }
  .hero p.lead { max-width: 590px; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero h1, .hero p.lead, .hero-punch { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
}

/* ---------- WHY US ---------- */
.why { padding: 96px 0; }
.why-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.why h2 { font-size: 30px; margin-bottom: 20px; }
.why p { color: var(--gray); font-size: 17px; line-height: 1.6; }

/* ---------- SERVICES (teaser + full) ---------- */
.services { padding: 96px 0; background: var(--cream); }

/* ---------- MID CTA ---------- */
.mid-cta { padding: 36px 0; background: var(--white); border-bottom: 1px solid var(--border); text-align: center; }
.mid-cta .container { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.mid-cta p { font-size: 15.5px; color: var(--gray); margin: 0; }

/* ---------- APPROACH / HOW IT WORKS ---------- */
.approach { padding: 96px 0; }
.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 12px; }
.approach-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.approach-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.approach-item .step-num { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--gold-light); line-height: 1; margin-bottom: 12px; }
.approach-item h3 { font-size: 19px; margin-bottom: 10px; }
.approach-item p { color: var(--gray); font-size: 15px; line-height: 1.58; }
.approach-item .step-question { display: block; font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--slate-400); margin-bottom: 8px; }
.approach-item.on-navy p, .approach-item .step-question.on-navy { color: #C7CCDE; }
@media (max-width: 1024px) {
  .approach-grid.cols-4, .approach-grid.cols-5, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .approach-grid.cols-4, .approach-grid.cols-5, .card-grid.cols-4 { grid-template-columns: 1fr; }
}

.contrast-table { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: 40px 0; }
.contrast-table .col { padding: 28px; }
.contrast-table .col.them { background: var(--cream); }
.contrast-table .col.us { background: var(--navy); color: var(--white); }
.contrast-table .col h4 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; color: var(--gray); font-weight: 600; }
.contrast-table .col.us h4 { color: var(--gold-light); }
.contrast-table .col ul { list-style: none; }
.contrast-table .col li { font-family: var(--font-body); font-size: 14.5px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.contrast-table .col.us li { border-bottom-color: var(--hairline-on-navy); color: #DADFEC; }
.contrast-table .col li:last-child { border-bottom: none; }

/* ---------- RESULTS ---------- */
.results { padding: 76px 0; background: var(--navy); color: var(--white); }
.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 28px; }
.result-card { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.24); border-radius: var(--radius-lg); padding: 30px; }
.result-card h3 { color: var(--gold-light); font-size: 18px; margin-bottom: 16px; }
.result-card .label { font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; color: var(--gold-light); font-weight: 600; display: block; margin-bottom: 6px; }
.result-card .block { margin-bottom: 18px; }
.result-card .block:last-child { margin-bottom: 0; }
.result-card p { color: #ECEFF7; font-size: 15.5px; line-height: 1.65; }
.results-note { font-family: var(--font-body); font-size: 12.5px; color: var(--slate-400); font-style: italic; text-align: center; max-width: 680px; margin: 40px auto 0; }

/* ---------- CLIENT SPOTLIGHT ---------- */
.spotlight-head { text-align: center; max-width: 640px; margin: 0 auto 12px; }
.spotlight-head p { color: #B9C0D4; font-size: 15.5px; margin-top: 10px; }
.spotlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.spotlight-item { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-lg); padding: 26px 24px; }
.spotlight-item .icon-badge { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.spotlight-item .icon-badge svg { color: var(--gold-light); }
.spotlight-item h4 { color: var(--white); font-size: 16.5px; font-family: var(--font-display); font-weight: 600; margin-bottom: 8px; }
.spotlight-item p { color: #C7CCDE; font-size: 14px; line-height: 1.55; }
.spotlight-close { text-align: center; margin-top: 44px; }
.spotlight-close p { color: #B9C0D4; font-size: 15px; margin-bottom: 18px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; padding-top: 44px; border-top: 1px solid rgba(255,255,255,0.12); text-align: center; }
.stat-row.on-light { border-top-color: var(--border-warm); }
.stat-row .stat-num { font-family: var(--font-display); font-weight: 600; font-size: 32px; color: var(--gold-light); margin-bottom: 6px; }
.stat-row.on-light .stat-num { color: var(--gold-bright); }
.stat-row .stat-label { font-family: var(--font-body); font-size: 13px; color: #B9C0D4; }
.stat-row.on-light .stat-label { color: var(--gray); }
.stat-row.on-light > div { background: var(--white); border: 1px solid var(--border-warm); border-radius: var(--radius-lg); padding: 28px 16px; box-shadow: var(--shadow-card); }

/* ROI band — two grouped columns: quantified-now vs. shows-up-later return */
.roi-band { padding: 96px 0; background: var(--cream); }
.roi-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 44px; }
.roi-column { background: var(--white); border: 1px solid var(--border-warm); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-card); }
.roi-column-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: 22px; }
.roi-column.quantified .roi-column-tag { color: var(--navy); background: rgba(19,28,54,0.07); }
.roi-column.later .roi-column-tag { color: var(--gold-bright); background: var(--brass-100); }
.roi-item { display: flex; gap: 14px; align-items: flex-start; }
.roi-item + .roi-item { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-warm); }
.roi-item .icon-badge { margin-bottom: 0; flex-shrink: 0; width: 40px; height: 40px; }
.roi-item .icon-badge svg { width: 20px; height: 20px; }
.roi-item h4 { font-size: 16px; margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; }
.roi-item p { font-size: 14px; color: var(--gray); line-height: 1.5; }

/* Finding-to-fix cards — illustrative before/after patterns, styled after
   the design system's FindingCard: mono uppercase labels, a hairline
   divider between Before and After instead of a bare arrow. */
.finding-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 44px; }
.finding-card { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; flex: 1 1 300px; max-width: 340px; }
.finding-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); background: rgba(19,28,54,0.07); padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 18px; }
.finding-label { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); margin-bottom: 5px; }
.finding-before { font-size: 14.5px; color: var(--gray); line-height: 1.55; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.finding-arrow { display: flex; justify-content: center; margin: -8px 0 4px; color: var(--gold); }
.finding-arrow svg { width: 16px; height: 16px; }
.finding-after { font-size: 14.5px; color: var(--navy); font-weight: 500; line-height: 1.55; }
.finding-footnote { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--gray); text-align: center; margin-top: 32px; }

/* ---------- ABOUT ---------- */
.about { padding: 96px 0; }
.about-inner { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; max-width: 900px; margin: 0 auto; }
.headshot-wrap { position: relative; }
.headshot {
  width: 240px; height: 240px; background: var(--cream); border: 1px dashed var(--hairline);
  display: flex; align-items: center; justify-content: center; color: var(--gray);
  font-family: var(--font-body); font-size: 13px; text-align: center; padding: 16px;
}
.headshot img { width: 100%; height: 100%; object-fit: cover; }
.about h2 { font-size: 28px; margin-bottom: 14px; }
.about p { color: var(--gray); font-size: 16.5px; line-height: 1.7; margin-bottom: 10px; }

/* ---------- ABOUT HERO — two-column, portrait right (Section 10.1) ----------
   2026-08-11 final-stage audit (supersedes the 08-11 full-bleed-overlay
   pass): "FOUNDER / Reese Ehlinger" baked onto the photo read as a caption
   graphic, not an editorial portrait. Text removed from the image entirely;
   photo is now a plain photographic rectangular crop, name + role set as
   live HTML directly below it. Still no circular/hexagonal mask. */
.about-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.about-hero-portrait-wrap { max-width: 340px; margin-left: auto; }
.about-hero-portrait { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-raised); }
.about-hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.about-hero-caption { margin-top: 14px; text-align: center; }
.about-hero-caption-name { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.about-hero-caption-role { display: block; font-family: var(--font-body); font-size: 13.5px; color: #C7CCDE; }
@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .about-hero-portrait-wrap { max-width: 280px; margin: 0 auto; }
}

/* ---------- FOUNDER PROOF (Home §5.9) ---------- */
.founder-proof { padding: 96px 0; background: var(--paper-100); }
.founder-proof-grid { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; max-width: 940px; margin: 0 auto; }
.founder-proof-photo { width: 220px; height: 220px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline); background: linear-gradient(135deg, var(--paper-200), var(--paper-100)); }
.founder-proof-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 2026-08-11 final-stage audit: the copy column had no max-width, so it
   stretched to fill the remaining ~670px next to the 220px photo — the
   photo read as small only because the text block was oversized relative
   to it. Capped per spec's ~500-560px band instead of enlarging the photo. */
.founder-proof-copy { max-width: 550px; }
.founder-proof h2 { font-size: 26px; margin-bottom: 12px; }
.founder-proof p { color: var(--gray); font-size: 16.5px; line-height: 1.6; margin-bottom: 18px; }
@media (max-width: 700px) {
  .founder-proof-grid { grid-template-columns: 1fr; text-align: center; }
  .founder-proof-photo { margin: 0 auto; }
}
/* 2026-08-10 corrective pass: hover repointed from LinkedIn brand blue
   to the site's brass hover token; icon mark alone stays recognizable. */
/* Rev 2, 2026-08-11: dropped the bright LinkedIn-blue icon square — it
   was the one non-brand color in the page. Plain navy text link with a
   bottom border reads as part of the system instead of a foreign UI
   element. */
.linkedin-link { display: inline-flex; align-items: center; margin-top: 14px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 2px; }
.linkedin-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* ---------- CREDENTIALS ---------- */
/* 2026-08-11 final-stage audit: 96px stacked against the operator-model
   section's own bottom padding read as a 140px+ empty cream gap between
   two short modules. Reduced ~25% to sit inside the 72-88px section-
   padding band while keeping editorial breathing room.
   Rev 2, 2026-08-11: still ~112px combined against the operator-model
   card (40px bottom + 72px top). Trimmed the credentials side further so
   the combined gap lands at ~96px. */
.credentials { padding: 56px 0 72px; background: var(--cream); }
.cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cred-card { display: flex; align-items: center; gap: 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card); }
a.cred-card:hover { border-color: var(--gold); }
.cred-badge { width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-sm); flex-shrink: 0; }
/* 2026-08-11: the Credly badge is a circular medallion with internal
   padding, so cropping it to a square frame (cover) cut off the edges.
   Sized up instead, full circle visible via object-fit: contain. */
.cred-badge-frame { width: 120px; height: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cred-badge-frame img { width: 100%; height: 100%; object-fit: contain; }
.cred-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 15.5px; margin-bottom: 4px; color: var(--navy); }
.cred-card p { color: var(--gray); font-size: 13.5px; margin: 0; }

.tool-expertise { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border-warm); text-align: center; }
.tool-expertise h3 { font-size: 19px; margin-bottom: 10px; }
.tool-expertise p { color: var(--gray); font-size: 14.5px; max-width: 620px; margin: 0 auto 18px; }
.tool-expertise .tag-row { justify-content: center; }

/* ---------- WHO WE HELP ---------- */
.icp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.icp-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 30px; background: var(--white); box-shadow: var(--shadow-card); }
.icp-card h3 { font-size: 21px; margin-bottom: 14px; }
.icp-card p { color: var(--gray); font-size: 16px; line-height: 1.58; margin-bottom: 18px; }
.icp-card ul { padding-left: 18px; margin-bottom: 20px; }
.icp-card li { color: var(--gray); font-size: 15px; margin-bottom: 8px; }
.icp-card .link-arrow { font-weight: 600; color: var(--navy); }
.icp-card.on-navy { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.icp-card.on-navy h3, .icp-card.on-navy .link-arrow { color: var(--white); }
.icp-card.on-navy p { color: #C7CCDE; }

/* Plain solid-navy section — used where a dark register is wanted
   without competing with the dedicated ordered-line sequence image
   (kept exclusively for the How It Works process banner per spec). */
.section-navy-plain { padding: 96px 0; background: var(--navy); }

.audience-section { scroll-margin-top: 96px; padding-top: 88px; padding-bottom: 88px; }
.audience-section + .audience-section { border-top: 1px solid var(--border); }
.audience-breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 18px; }
.audience-breadcrumb:hover { color: var(--gold-bright); }

/* 2026-08-10 corrective pass: pain statements are not testimonials —
   removed quotation-mark glyph and italic testimonial styling.
   Introduced by a small mono "Common Triggers" label (.pain-label). */
.pain-label { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); margin: 22px 0 4px; }
.pain-list { list-style: none; margin: 8px 0 28px; }
.pain-list li {
  font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 13px 0; border-bottom: 1px solid var(--border);
}

/* ---------- CTA BANNER ----------
   2026-08-08 master-assessment revision: the bright full-width gold
   texture read as "luxury brochure" rather than workpaper gold and
   pulled attention away from the proof above it. Replaced with a
   restrained navy field, a brass top rule, and one soft off-center
   glow — CSS-only, no photographic texture. */
.cta-banner {
  position: relative;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--ink-900) 100%);
  padding: 64px 0;
  text-align: center;
  border-top: 2px solid var(--gold);
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -25%; right: 6%;
  width: 440px; height: 440px;
  background: radial-gradient(ellipse at center, rgba(251,192,62,0.16) 0%, rgba(251,192,62,0) 70%);
  pointer-events: none;
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { font-family: var(--font-display); color: #F4F1E7; font-size: 28px; margin-bottom: 12px; }
.cta-banner p { color: #C7CCDE; margin-bottom: 24px; font-size: 16px; }
.cta-banner .btn-gold { background: var(--gold); color: var(--navy-deep); }
.cta-banner .btn-gold:hover { background: var(--gold-hover); }

/* ---------- PROOF STRIP ----------
   Thin high-trust band directly under the homepage hero. Answers
   "why should I believe you" before the visitor reaches the next
   thesis paragraph, per the master assessment's P1 recommendation. */
.proof-strip { background: var(--paper-050); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.proof-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.proof-strip .proof-item { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--navy); white-space: nowrap; }
.proof-strip .proof-sep { color: var(--gold); opacity: 0.7; font-size: 12px; }
@media (max-width: 860px) {
  .proof-strip .container { gap: 8px 14px; }
  .proof-strip .proof-sep { display: none; }
}

/* ---------- CONTROL GAP ARTIFACT (Home — Why Illuminate) ----------
   Three real-looking findings pairing what exists on paper against
   what's actually enforced — replaces a purely text-only section with
   something inspectable, per the master assessment. */
.control-gap-card {
  background-color: var(--paper-100);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-raised);
}
.control-gap-card .cg-title { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 18px; }
.control-gap-card .cg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--ink); }
.control-gap-card .cg-row:last-child { border-bottom: none; }
.control-gap-card .cg-row .cg-arrow { color: var(--gold); margin: 0 3px; }

/* Shared two-column "text + artifact card" layouts (Home Why-Illuminate,
   How It Works Why-the-order-matters). Replaces inline grid-template-
   columns styles, which can't be overridden by a mobile media query
   since inline styles always win over external stylesheet rules. */
.why-grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; text-align: left; }
.order-matters-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; }
@media (max-width: 860px) {
  .why-grid, .order-matters-grid { grid-template-columns: 1fr; }
  .card-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ---------- METHODOLOGY PROOF MODULE (Services, Discovery Methodology
   Alignment, 2026-08-11) ----------
   Compact, card-free three-column proof strip for "Two depths. Six
   lenses. Weighted by what matters." Deliberately not built on .card or
   .approach-item/.step-num — those introduce either card chrome or a
   numbered-sequence read, and Core Baseline / Comprehensive Depth /
   Materiality-Weighted are three parallel attributes, not ordered
   steps or a before/after progression. */
.methodology-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 30px; }
/* Final Consistency Refinement, 2026-08-11: restrained brass top rule
   per column (not vertical separators — one treatment, not both) to
   give the three parallel methodology concepts slightly stronger
   visual hierarchy without introducing card chrome or numbering. */
.methodology-item { border-top: 2px solid var(--gold); padding-top: 14px; }
.methodology-item .mi-kicker { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brass-700); margin-bottom: 13px; }
.methodology-item h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
.methodology-item p { color: var(--gray); font-size: 14px; line-height: 1.55; margin: 0; }
.methodology-lenses { font-size: 14px; color: var(--gray); border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 32px; }
.methodology-lenses strong { color: var(--navy); font-weight: 600; }
@media (max-width: 860px) {
  .methodology-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- FINDINGS PROCESS CARDS (Rev 2, 2026-08-11) ----------
   Replaces the flat five-column Observe/Evidence/Score/Decide/Verify
   text row with five compact editorial cards for the expanded
   Assess/Diagnose/Decide/Implement/Run method. Reuses the existing
   paper/hairline/radius card vocabulary rather than a new UI kit. */
.process-card-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 36px; }
.process-card {
  background: var(--paper-100);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.process-card .pc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.process-card .pc-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-bright); }
.process-card .pc-icon { width: 19px; height: 19px; color: var(--gold); flex-shrink: 0; }
.process-card .pc-icon svg { width: 100%; height: 100%; }
.process-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.process-card p { color: var(--gray); font-size: 14px; line-height: 1.55; margin: 0; }
.process-outcome { font-size: 15px; color: var(--gray); line-height: 1.6; text-align: center; max-width: 700px; margin: 28px auto 0; }
@media (max-width: 1199px) and (min-width: 768px) {
  .process-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .process-card-grid { grid-template-columns: 1fr; }
  .process-card { min-height: 0; }
}

/* ---------- FIELD CARD ----------
   2026-08-09 revision spec: shared live-HTML component for the
   Illustrative Finding (Home §5.4), the detailed Findings-page
   finding (§9.5), and the Future Case Study card (§9.6) — warm paper
   panel, mono labels, thin brass rule, status badge, "Illustrative"
   footnote. Visual reference: Sample Audit Finding — Travel Policy
   Gap.png (rebuilt here as real, selectable, responsive text). */
.field-card {
  background: var(--paper-100);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-raised);
}
.field-card .fc-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 6px; border-bottom: 1px solid var(--hairline); padding-bottom: 14px; margin-bottom: 16px; }
.field-card .fc-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.field-card .fc-row:last-of-type { border-bottom: none; }
.field-card .fc-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-500); padding-top: 2px; }
.field-card .fc-value { font-family: var(--font-body); font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.field-card .fc-value.is-strong { color: var(--navy); font-weight: 600; }
.field-card .fc-footnote { font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--slate-500); margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(19,28,54,0.18); }
.field-card.on-navy { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.field-card.on-navy .fc-title { color: var(--gold-light); border-bottom-color: rgba(255,255,255,0.14); }
.field-card.on-navy .fc-row { border-bottom-color: rgba(255,255,255,0.14); }
.field-card.on-navy .fc-label { color: #9AA2BE; }
.field-card.on-navy .fc-value { color: #ECEFF7; }
.field-card.on-navy .fc-value.is-strong { color: var(--white); }
.field-card.on-navy .fc-footnote { color: #9AA2BE; border-top-color: rgba(255,255,255,0.14); }
@media (max-width: 560px) {
  .field-card .fc-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- REMEDIATION ROADMAP (Who We Serve — PE) ----------
   2026-08-09 final refinement pass, Section 9.3: upgraded from a
   plain white 3-up card to a warm workpaper panel with brass hairline
   dividers, a restrained inset shadow, and an explicit left-to-right
   connector between steps (Day 0 → Day 30 → Day 60-90), matching the
   supplied styling reference (image-gen-1(10)(1).png) while staying
   live HTML/CSS throughout. */
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 32px 0 8px; background: var(--paper-100); border: 1px solid var(--hairline); border-top: 3px solid var(--gold); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-raised); }
.roadmap-step { position: relative; padding: 24px 22px; }
.roadmap-step + .roadmap-step { border-left: 1px solid var(--hairline); }
.roadmap-step + .roadmap-step::before {
  content: '→';
  position: absolute; left: -12px; top: 24px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper-100); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: var(--gold-bright); z-index: 2;
}
.roadmap-step .rm-day { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); display: block; }
.roadmap-step h4 { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.roadmap-step p { font-size: 13.5px; color: var(--gray); line-height: 1.55; }
@media (max-width: 860px) {
  .roadmap { grid-template-columns: 1fr; }
  .roadmap-step + .roadmap-step { border-left: none; border-top: 1px solid var(--hairline); }
  .roadmap-step + .roadmap-step::before { content: '↓'; left: 24px; top: -12px; }
}

/* ---------- CFO DECISION BRIEF (Who We Serve — Mid-Market) ----------
   2026-08-09 final refinement pass, Section 9.3: rebuilt as one
   executive-workpaper panel rather than a generic flex/space-between
   web table — fixed label/value column ratio (label ~27%, value
   ~73%, within the spec's 24-30% / 70-76% range), left-aligned prose
   values, brass top rule + hairline row separators, restrained inset
   shadow. Styling reference: Business Case Summary on Navy Desk(1).png. */
.business-case-card { background: var(--paper-100); border: 1px solid var(--hairline); border-top: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 24px 26px 22px; box-shadow: var(--shadow-raised); }
.business-case-card .bc-title { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.business-case-card .bc-row { display: grid; grid-template-columns: 27% 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.business-case-card .bc-row:last-child { border-bottom: none; }
.business-case-card .bc-row .bc-label { color: var(--slate-500); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.business-case-card .bc-row .bc-value { color: var(--ink); font-weight: 400; text-align: left; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 480px) {
  .business-case-card .bc-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- CONTACT ---------- */
.contact-page { padding: 76px 0; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.contact-grid h2 { font-size: 24px; margin-bottom: 14px; }
.contact-grid p { color: var(--gray); font-size: 15.5px; margin-bottom: 14px; }
.contact-method { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--border); }
.contact-method:first-of-type { border-top: none; }
.contact-method .label { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-bright); font-weight: 600; display: block; margin-bottom: 4px; }
.contact-method a, .contact-method span.value { font-family: var(--font-body); font-size: 15.5px; color: var(--navy); font-weight: 500; }
.calendly-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; background: var(--cream); text-align: center; }
.calendly-box h3 { font-size: 19px; margin-bottom: 10px; }
.calendly-box p { color: var(--gray); font-size: 14.5px; margin-bottom: 20px; }

/* ---------- SCORED CONTROL LEDGER (Findings) ----------
   2026-08-09 final refinement pass, Section 9.2: removed the heavy
   photographic background (a 451KB JPG) in favor of a CSS-only
   ledger-rule hairline pattern — live HTML/CSS throughout, no raster
   dependency. "156/156 scored" was also removed: 156 describes
   assessment scope, not a client completion score (see Section 9.2). */
.control-ledger {
  background-color: var(--navy-800);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 28px);
  border: 1px solid var(--hairline-on-navy);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
  /* 2026-08-11 final-stage audit: ledger read as a small infographic
     floating in the navy section at 680px. Enlarged toward the spec's
     780-860px band so it reads as an inspectable artifact. */
  max-width: 820px;
  margin: 0 auto;
}
.control-ledger .cl-ref { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 22px; }
.control-ledger .cl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 18px; }
.control-ledger .cl-domain { display: flex; flex-direction: column; gap: 3px; }
.control-ledger .cl-domain-label { font-family: var(--font-mono); font-size: 10.5px; color: #C7CCDE; margin-bottom: 4px; }
.control-ledger .cl-ticks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.control-ledger .cl-tick { width: 100%; aspect-ratio: 1; border-radius: 1px; }
/* 2026-08-09 revision spec: fixed semantics to match the approved
   Five-Domain Control Dashboard reference — RED is reserved for a
   required control that is absent/not in place (previously this
   ".critical" state was mistakenly rendered in the brass/watch color,
   which erased the distinction the spec calls intentional). Assessed/
   clean controls now render dark-slate rather than stoplight-green,
   consistent with the "workpaper tab colors, not stoplight" rule
   already documented on .badge above. */
.control-ledger .cl-tick.resolved { background: var(--slate-400); opacity: 0.55; }
.control-ledger .cl-tick.watch { background: var(--gold); opacity: 0.85; }
.control-ledger .cl-tick.critical { background: var(--status-critical); opacity: 0.95; }
.control-ledger .cl-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.control-ledger .cl-foot-line { flex: 1; height: 1px; background: rgba(255,255,255,0.14); min-width: 24px; }
.control-ledger .cl-foot-ring { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--gold); flex-shrink: 0; }
.control-ledger .cl-foot-label { font-family: var(--font-mono); font-size: 10px; color: var(--slate-400); }
.control-ledger .cl-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.control-ledger .cl-legend-item { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: #C7CCDE; }
.control-ledger .cl-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.control-ledger .cl-legend-swatch.resolved { background: var(--slate-400); opacity: 0.55; }
.control-ledger .cl-legend-swatch.watch { background: var(--gold); opacity: 0.85; }
.control-ledger .cl-legend-swatch.critical { background: var(--status-critical); opacity: 0.95; }

/* ---------- AUDIT WORKSHEET (How It Works — Assessment Workpaper) ----------
   2026-08-09 final refinement pass, Section 9.1: the prior version
   used a heavy photographic paper-texture background plus a rotated
   card, which read as a scanned/raster document and created an
   oversized block next to the comparison table. Rebuilt as a flat,
   fully live HTML/CSS card — content-driven height (target <=520px),
   width capped 360-430px, warm workpaper surface, thin brass rule,
   mono field labels, serif title, muted-red status chip via the
   existing .badge vocabulary. Visual reference: Sample Audit Finding
   — Travel Policy Gap.png (styling reference only). */
.audit-worksheet-wrap { width: 100%; max-width: 420px; margin: 0 auto; }
.audit-worksheet {
  background: var(--paper-100);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 24px 24px 20px;
  box-shadow: var(--shadow-raised);
}
.audit-worksheet .aw-kicker { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-bright); margin-bottom: 4px; }
.audit-worksheet .aw-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--navy); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.audit-worksheet .aw-fields { display: flex; flex-direction: column; gap: 10px; }
.audit-worksheet .aw-field { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.audit-worksheet .aw-field:last-of-type { border-bottom: none; padding-bottom: 0; }
.audit-worksheet .aw-field.aw-field-status { align-items: center; }
.audit-worksheet .aw-field-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); padding-top: 2px; }
.audit-worksheet .aw-field-value { font-family: var(--font-body); font-size: 13.5px; color: var(--ink); line-height: 1.48; }
.audit-worksheet .aw-sample-tag { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(19,28,54,0.18); font-family: var(--font-body); font-style: italic; font-size: 11.5px; color: var(--slate-500); }
@media (max-width: 480px) {
  .audit-worksheet .aw-field { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- HOME HERO — dark variant ----------
   Matches .page-hero.on-navy so every page opens on the same dark
   navy register as the header/footer. The actual hero photo/gradient
   now comes from the page-specific .hero-bg-* class (see "RESPONSIVE
   HERO IMAGE DELIVERY" below) so it can swap by viewport — this base
   rule only sets the navy fallback color, and deliberately does NOT
   declare background-image, so it can't out-specificity (2 classes)
   the 1-class .hero-bg-* rules that carry the real image. */
.hero.on-navy { background-color: var(--navy-900); }
.hero.on-navy h1 { color: #F4F1E7; text-shadow: 0 2px 18px rgba(13,20,36,0.55); }
.hero.on-navy .hero-punch { color: #F4F1E7; }
.hero.on-navy p.lead { color: #C7CCDE; }
.hero.on-navy .link-secondary { color: #F4F1E7; border-bottom-color: rgba(255,255,255,0.5); }

/* ---------- FOOTER ----------
   2026-08-09 final refinement pass, Section 6: the stacked NAVIGATE /
   CONTACT sitemap footer (two vertical link columns + a brand block)
   read as a generic template footer and too much navy. Replaced with
   a thin single-row institutional utility bar — logo left, nav
   center, email right — plus a micro copyright row. Desktop total
   height ≈101px (budget 130px); mobile ≈150-160px (budget 185px). */
footer { background: var(--navy-800); color: #C7CCDE; }
.footer-main {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px 28px;
  padding: 24px 32px 16px;
}
.footer-logo-img { display: block; width: 132px; height: auto; }
.footer-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 8px; justify-content: center; }
.footer-nav a { font-family: var(--font-body); font-size: 13px; color: #C7CCDE; line-height: 1.3; }
.footer-nav a:hover { color: var(--white); }
.footer-nav .fn-sep { color: var(--gold); opacity: 0.6; font-size: 12px; }
.footer-email { font-family: var(--font-mono); font-size: 12.5px; color: var(--gold-light); white-space: nowrap; }
.footer-email:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid var(--hairline-on-navy); }
.footer-bottom .container { padding: 7px 32px; }
/* #7C84A0 measured 4.08:1 on the navy-800 footer — fails 4.5:1 at
   this 10.5px size (Section 12.2). #98A0BC passes at 5.83:1. */
.footer-bottom span { display: block; font-size: 10.5px; color: #98A0BC; text-align: center; }
@media (max-width: 1023px) {
  .footer-main { padding: 20px 28px 14px; gap: 12px 20px; }
}
@media (max-width: 767px) {
  .footer-main { flex-direction: column; text-align: center; padding: 18px 20px 12px; gap: 10px; }
  .footer-nav { justify-content: center; }
}

/* ---------- RESPONSIVE HERO IMAGE DELIVERY ----------
   2026-08-09 final refinement pass, Section 12.3: the four approved
   production hero photos (plus Services/Contact) shipped as single
   ~250-310KB JPGs at their full source resolution to every device.
   Replaced with 3-tier WebP derivatives (768w mobile <=180KB, 1280w
   tablet <=300KB, 1920w desktop <=450KB — all generated well under
   target) swapped by viewport via media query, since CSS
   background-image has no native srcset/sizes equivalent; this is
   the media-query-based analog the spec allows ("srcset/sizes or CSS
   image-set()"). Composited with each page's existing gradient
   scrim so the copy column stays readable — visual crop/composition
   is unchanged, only the delivered file size. */
/* Home + Who We Help Final Refinement, 2026-08-11: hero-bg-home's dark
   overlay stops pushed right (45%/72% -> 50%/78%) and slightly darkened
   to stay legible under the wider two-line H1 column, per spec direction
   to strengthen the overlay rather than shrink the headline back down.
   Same asset, no new image. */
.hero-bg-home { background-image: linear-gradient(90deg, rgba(13,20,36,0.7) 0%, rgba(13,20,36,0.34) 50%, rgba(13,20,36,0.1) 78%), url('images/hero-home-v2-768.webp'); background-size: cover; background-position: center; }
.hero-bg-who-we-serve { background-image: linear-gradient(90deg, rgba(13,20,36,0.75) 0%, rgba(13,20,36,0.35) 45%, rgba(13,20,36,0.05) 75%), url('images/hero-who-we-serve-768.webp'); background-size: cover; background-position: center; }
.hero-bg-how-it-works { background-image: linear-gradient(90deg, rgba(13,20,36,0.62) 0%, rgba(13,20,36,0.28) 45%, rgba(13,20,36,0.06) 72%), url('images/hero-how-it-works-768.webp'); background-size: cover; background-position: center; }
.hero-bg-findings { background-image: linear-gradient(90deg, rgba(13,20,36,0.62) 0%, rgba(13,20,36,0.28) 45%, rgba(13,20,36,0.06) 72%), url('images/hero-findings-768.webp'); background-size: cover; background-position: center; }
.hero-bg-services { background-image: linear-gradient(90deg, rgba(13,20,36,0.6) 0%, rgba(13,20,36,0.25) 45%, rgba(13,20,36,0.05) 70%), url('images/hero-services-768.webp'); background-size: cover; background-position: center; }
.hero-bg-contact { background-image: linear-gradient(90deg, rgba(13,20,36,0.6) 0%, rgba(13,20,36,0.25) 45%, rgba(13,20,36,0.05) 70%), url('images/hero-contact-768.webp'); background-size: cover; background-position: center 62%; }
@media (min-width: 768px) {
  .hero-bg-home { background-image: linear-gradient(90deg, rgba(13,20,36,0.7) 0%, rgba(13,20,36,0.34) 50%, rgba(13,20,36,0.1) 78%), url('images/hero-home-v2-1280.webp'); }
  .hero-bg-who-we-serve { background-image: linear-gradient(90deg, rgba(13,20,36,0.75) 0%, rgba(13,20,36,0.35) 45%, rgba(13,20,36,0.05) 75%), url('images/hero-who-we-serve-1280.webp'); }
  .hero-bg-how-it-works { background-image: linear-gradient(90deg, rgba(13,20,36,0.62) 0%, rgba(13,20,36,0.28) 45%, rgba(13,20,36,0.06) 72%), url('images/hero-how-it-works-1280.webp'); }
  .hero-bg-findings { background-image: linear-gradient(90deg, rgba(13,20,36,0.62) 0%, rgba(13,20,36,0.28) 45%, rgba(13,20,36,0.06) 72%), url('images/hero-findings-1280.webp'); }
  .hero-bg-services { background-image: linear-gradient(90deg, rgba(13,20,36,0.6) 0%, rgba(13,20,36,0.25) 45%, rgba(13,20,36,0.05) 70%), url('images/hero-services-1280.webp'); }
  .hero-bg-contact { background-image: linear-gradient(90deg, rgba(13,20,36,0.6) 0%, rgba(13,20,36,0.25) 45%, rgba(13,20,36,0.05) 70%), url('images/hero-contact-1280.webp'); }
}
@media (min-width: 1280px) {
  .hero-bg-home { background-image: linear-gradient(90deg, rgba(13,20,36,0.7) 0%, rgba(13,20,36,0.34) 50%, rgba(13,20,36,0.1) 78%), url('images/hero-home-v2-1920.webp'); }
  .hero-bg-who-we-serve { background-image: linear-gradient(90deg, rgba(13,20,36,0.75) 0%, rgba(13,20,36,0.35) 45%, rgba(13,20,36,0.05) 75%), url('images/hero-who-we-serve-1920.webp'); }
  .hero-bg-how-it-works { background-image: linear-gradient(90deg, rgba(13,20,36,0.62) 0%, rgba(13,20,36,0.28) 45%, rgba(13,20,36,0.06) 72%), url('images/hero-how-it-works-1920.webp'); }
  .hero-bg-findings { background-image: linear-gradient(90deg, rgba(13,20,36,0.62) 0%, rgba(13,20,36,0.28) 45%, rgba(13,20,36,0.06) 72%), url('images/hero-findings-1920.webp'); }
  .hero-bg-services { background-image: linear-gradient(90deg, rgba(13,20,36,0.6) 0%, rgba(13,20,36,0.25) 45%, rgba(13,20,36,0.05) 70%), url('images/hero-services-1920.webp'); }
  .hero-bg-contact { background-image: linear-gradient(90deg, rgba(13,20,36,0.6) 0%, rgba(13,20,36,0.25) 45%, rgba(13,20,36,0.05) 70%), url('images/hero-contact-1920.webp'); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .card-grid, .approach-grid, .results-grid, .icp-grid, .roi-columns, .contrast-table, .contact-grid, .spotlight-grid { grid-template-columns: 1fr; }
  .card-grid.cols-4 { grid-template-columns: 1fr; }
  .founder-proof-grid { grid-template-columns: 1fr; text-align: center; }
  .founder-proof-photo { margin: 0 auto; }
  .finding-grid { flex-direction: column; align-items: center; }
  .finding-card { width: 100%; max-width: 420px; }
  .hero-punch { font-size: 17px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .about-inner { grid-template-columns: 1fr; text-align: center; }
  .about-inner .headshot-wrap { margin: 0 auto; }
  nav ul { display: none; }
  .nav-inner > a.btn { display: none; }
  .menu-toggle { display: flex; }
  .hero h1 { font-size: 40px; line-height: 1.15; }
  .page-hero h1 { font-size: 38px; line-height: 1.16; }
  .decorative-num { font-size: 90px; }
  .step-track { flex-wrap: wrap; }
  .control-ledger .cl-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 38px; line-height: 1.16; }
  .page-hero h1 { font-size: 38px; line-height: 1.18; }
  .stat-row { grid-template-columns: 1fr; }
  .decorative-num { font-size: 64px; }
  .container { padding-left: 18px; padding-right: 18px; }
  .btn { width: 100%; text-align: center; }
  .cred-grid, .tag-row { grid-template-columns: 1fr; }
  .control-ledger .cl-grid { grid-template-columns: repeat(2, 1fr); }
}