/* ═══════════════════════════════════════════════
   DESIGN SYSTEM
═══════════════════════════════════════════════ */
:root {
  --ink:       #0E1117;
  --ink-soft:  #2A2D35;
  --slate:     #4A5060;
  --mist:      #8A909E;
  --border:    #D8DAE0;
  --surface:   #F4F3EF;
  --cream:     #FAF9F6;
  --white:     #FFFFFF;
  --gold:      #9B7B3F;
  --gold-lt:   #C4A45E;
  --gold-pale: #F5EDD8;
  /* Deeper, higher-contrast gold used ONLY for meaningful sentence-level
     gold copy on light/white backgrounds (Result statements, gold quote
     sentences, gold taglines, attribution lines) -- readability pass.
     Decorative gold (buttons, borders, icons, dividers, eyebrow labels)
     intentionally keeps using --gold/--gold-lt and is untouched by this
     token. Correction pass: darkened further (from #8C6A35, 4.97:1 on
     white, to 6.3:1) -- combined with the heavier italic weight now
     loaded for this treatment (see build_common.py's Google Fonts
     <link>), addresses the "too faint/thin" visual QA finding. */
  --gold-deep: #7A5A28;
  --teal:      #1C4E5C;
  --teal-lt:   #2A7A8C;

  /* Text-on-dark contrast tiers (readability pass, level 2) -- reused
     everywhere supporting/muted copy sits on a dark (--ink) background,
     so the treatment stays consistent site-wide. Headlines/primary
     elements stay on --white / --gold-lt and are untouched by these.
     --dark-body   : primary body copy         (~90-95% visual brightness)
     --dark-card   : card/subsection descriptions (~85-90%)
     --dark-muted  : secondary/supporting copy (~75-85%)
     --dark-faint  : footer fine print / legal (lowest tier, unchanged rank) */
  --dark-body:  rgba(255,255,255,0.94);
  --dark-card:  rgba(255,255,255,0.88);
  --dark-muted: rgba(255,255,255,0.80);
  --dark-faint: rgba(255,255,255,0.58);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

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

html { scroll-behavior: auto; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.container--narrow { max-width: 800px; margin: 0 auto; padding: 0 40px; }
.container--wide { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

.section { padding: 100px 0; }
.section--lg { padding: 140px 0; }
.section--sm { padding: 60px 0; }

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 16px;
}

.display-1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.display-3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.headline {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 400;
  line-height: 1.3;
}

.body-lg { font-size: 18px; line-height: 1.75; color: var(--slate); font-weight: 300; }
.body { font-size: 16px; line-height: 1.75; color: var(--slate); }
.body-sm { font-size: 14px; line-height: 1.65; color: var(--mist); }

.text-gold { color: var(--gold); }
.text-teal { color: var(--teal); }
.text-mist { color: var(--mist); }
.text-white { color: var(--white); }

.italic { font-style: italic; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}

.btn--primary {
  background: var(--ink);
  color: var(--white);
}
.btn--primary:hover { background: var(--teal); }

.btn--gold {
  background: var(--gold);
  /* Dark text on gold: white-on-gold failed WCAG AA (2026-08-27 audit). */
  color: var(--ink, #1a2238);
  font-weight: 600;
}
.btn--gold:hover { background: var(--gold-lt); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--white); }

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.4);
}
.btn--outline-white:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

.btn--outline-gold {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--gold);
}
.btn--outline-gold:hover { background: rgba(155,123,63,0.14); border-color: var(--gold-lt); }

/* Mobile-only hero phone CTA: the primary nav phone number
   (.nav__phone) is hidden once the compact/hamburger nav activates
   below 1250px (see nav responsive rules), so on mobile this hero
   button is the visitor's visible way to call directly. Hidden on
   full desktop nav, where the existing nav phone number already
   covers this. Reuses the same 1250px breakpoint as the nav so the
   two stay in sync. */
.hero__mobile-phone-cta { display: none; }
@media (max-width: 1250px) {
  .hero__mobile-phone-cta { display: inline-flex; }
}

/* Scoped mobile-overflow fix (this one button only): "Explore the Business
   Whisperer Method ->" is long enough that its nowrap label (from the shared
   .btn rule, left untouched) exceeds the viewport at very narrow widths even
   though its row already wraps. Below 480px only, let this specific button's
   own label wrap onto a second line instead of overflowing horizontally.
   Desktop/tablet appearance is unaffected -- this rule doesn't apply there. */
@media (max-width: 480px) {
  .btn--explore-method {
    white-space: normal;
    text-align: center;
  }
}

/* Scoped mobile-overflow fix: on the Leadership service page only, the
   "Failed Hires" symptom card carries a nowrap .bw-signature badge (left
   untouched -- same component used site-wide) whose intrinsic content width
   can force its 1fr grid column wider than an even 50/50 split, pushing the
   row past the viewport edge. min-width:0 lets the grid track shrink to its
   assigned share regardless of content, which is the standard fix for this
   exact CSS Grid sizing behavior. Card padding/border/copy are unchanged. */
@media (max-width: 480px) {
  .symptom-card {
    min-width: 0;
  }
}

.btn-arrow::after {
  content: '→';
  font-size: 16px;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn-arrow::after,
.btn-arrow:hover::after { transform: translateX(4px); }

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216,218,224,0.4);
  transition: all 0.3s var(--ease);
}

.nav.scrolled {
  background: rgba(250, 249, 246, 0.98);
  border-bottom-color: var(--border);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Jerry-approved: logo made more visually present. Nav bar height is a
   fixed 72px, so 58px still leaves 7px of breathing room top/bottom (was
   11px at 50px) -- comfortable, no collision with nav content at any
   width. max-width raised proportionally to the image's own aspect ratio
   so it's never the constraint. No inline sizing reintroduced; nav link
   size/weight/breakpoint logic is untouched. */
.nav__logo img {
  height: 58px;
  width: auto;
  max-height: 58px;
  max-width: 220px;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .nav__logo img {
    height: 46px;
    max-height: 46px;
    max-width: 185px;
  }
}

@media (max-width: 480px) {
  .nav__logo img {
    height: 40px;
    max-height: 40px;
    max-width: 160px;
  }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}

.nav__links a {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--ink); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__phone {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--slate);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.nav__phone:hover { color: var(--gold); }

.nav__cta {
  padding: 9px 20px;
  font-size: 13px;
}

.nav__mobile-toggle { display: none; }

@media (max-width: 1250px) {
  .nav { padding: 0 20px; }
  .nav__phone { display: none; }
  .nav__mobile-toggle {
    display: block;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
  }
  .nav__links {
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease);
  }
  .nav__links.is-open { max-height: 420px; }
  .nav__links li { width: 100%; }
  .nav__links a {
    display: block;
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(216,218,224,0.5);
    font-size: 15px;
  }
}

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.hero__left {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 80px 100px 80px;
  position: relative;
}

.hero__left::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(155,123,63,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(28,78,92,0.2) 0%, transparent 50%);
  pointer-events: none;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 32px;
}

.hero__headline em {
  font-style: italic;
  color: var(--gold-lt);
}

.hero__sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dark-body);
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 48px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.hero__trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--dark-muted);
  letter-spacing: 0.03em;
}

.hero__trust-dot {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.hero__right {
  position: relative;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  align-self: start;
  height: 100vh;
}

.hero__photo-area {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  aspect-ratio: 7 / 8;
  max-height: 100%;
  overflow: hidden;
}

.hero__photo-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Desktop/full hero layout only (.hero__right is hidden entirely at
   max-width:900px — see Responsive section below). Shifts the photo
   down below the fixed nav so Jerry's hairline clears it with a
   comfortable margin at every width; framing (aspect-ratio, crop,
   object-position) is unchanged from the original design. */
@media (min-width: 901px) {
  .hero__photo-area {
    top: 60px;
    max-height: calc(100% - 60px);
  }

  /* Jerry-approved recomposition: make Jerry substantially more prominent
     without touching the approved nav-clearance geometry above. object-fit:
     cover on this portrait-shaped box already scales the (landscape) source
     purely by height with zero vertical crop -- see the box's own top/
     max-height rules. Scaling the already-cover-fitted image with a
     transform, anchored at its top-center, enlarges it further while
     leaving the TOP edge (and therefore the hairline clearance solved
     above) completely unmoved -- the extra size is cropped away by this
     box's overflow:hidden, symmetrically off the left/right and bottom
     only. This is why this rule is safe to change independently of the
     clearance math: it cannot move Jerry's head relative to the nav.

     Mac-display review: 1.32 was cropping away too much of the torso/tie
     on initial load. Reduced to 1.12 -- still noticeably more prominent
     than the un-scaled (1.0) framing, but reveals meaningfully more of
     the torso/tie while the head keeps comfortable headroom below the
     nav. Verified visually, not just computed, at 1440 and Jerry's
     Mac-scaled widths. */
  .hero__photo-area img {
    transform: scale(1.12);
    transform-origin: 50% 0%;
  }
}

.hero__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0.3;
}

.hero__photo-placeholder svg {
  width: 80px;
  height: 80px;
  fill: var(--white);
}

.hero__photo-placeholder span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--white);
  text-transform: uppercase;
}

/* Mac-display review: the .hero__card overlay (previously absolutely
   positioned over the bottom-right of the photo) has been removed from
   the homepage hero markup -- it was dominating the opening viewport
   instead of Jerry's photo/headline. The same four stat figures now
   live in the new in-flow .hero-metrics section directly below the
   hero (see that block, further down this file). The bare
   .hero__card-name/-title/.hero__stats/.hero__stat-value/.hero__stat-label
   rules below remain in use standalone by the About Jerry page. */
.hero__card-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}

.hero__card-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.hero__stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

.hero__stat-label {
  font-size: 11px;
  color: var(--mist);
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════
   HERO METRICS — Mac-display review: replaces the old .hero__card
   overlay. Sits in normal document flow directly below the hero, so
   the opening viewport is photo + headline only, with the four proof
   points revealed on scroll. Reuses the same figures/labels, and the
   same 24px/12px value/label sizing established for the card in the
   v25 correction pass, just in a full-width horizontal layout instead
   of a floating card. Dark background keeps it visually attached to
   the hero above it.
═══════════════════════════════════════════════ */
.hero-metrics {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 32px 0;
}

.hero-metrics__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.hero-metrics__id {
  flex-shrink: 0;
  padding-right: 48px;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.hero-metrics__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4px;
}

.hero-metrics__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

.hero-metrics__stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 16px 40px;
  flex: 1;
}

.hero-metrics__stat-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--white);
  line-height: 1;
  margin-bottom: 3px;
}

.hero-metrics__stat-label {
  font-size: 12px;
  color: var(--dark-muted);
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .hero-metrics__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-metrics__id {
    width: 100%;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 20px;
  }
  .hero-metrics__stats { grid-template-columns: repeat(2, 1fr); width: 100%; gap: 20px 24px; }
}

/* ═══════════════════════════════════════════════
   MARQUEE STRIP
═══════════════════════════════════════════════ */
.marquee-strip {
  background: var(--gold);
  padding: 14px 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 48px;
  animation: marquee 30s linear infinite;
  width: max-content;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.marquee-dot {
  width: 3px;
  height: 3px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════
   RESULTS BAR
═══════════════════════════════════════════════ */
.results-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 60px 0;
}

.results-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.results-bar__item {
  text-align: center;
  padding: 20px 24px;
  border-right: 1px solid var(--border);
  position: relative;
}

.results-bar__item:last-child { border-right: none; }

.results-bar__value {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.results-bar__value sup {
  font-size: 24px;
  vertical-align: super;
}

.results-bar__label {
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.03em;
}

.results-bar__source {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════
   POSITIONING SECTION
═══════════════════════════════════════════════ */
.positioning {
  background: var(--cream);
  padding: 120px 0;
}

.positioning__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}

.positioning__left { position: sticky; top: 100px; }

.positioning__pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pillar {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  cursor: default;
  transition: all 0.3s var(--ease);
}

.pillar:first-child { border-top: 1px solid var(--border); }

.pillar:hover { padding-left: 16px; }

.pillar__number {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--mist);
  margin-bottom: 8px;
}

.pillar__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 10px;
  transition: color 0.3s;
}

.pillar:hover .pillar__title { color: var(--gold); }

.pillar__desc {
  font-size: 14px;
  color: var(--mist);
  line-height: 1.65;
  max-width: 380px;
}

/* ═══════════════════════════════════════════════
   PROBLEM SECTION
═══════════════════════════════════════════════ */
.problem {
  background: var(--ink);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.problem::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,123,63,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.problem__header {
  max-width: 680px;
  margin-bottom: 80px;
}

.problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
}

.problem__card {
  background: rgba(14,17,23,0.8);
  padding: 48px 40px;
  transition: background 0.3s var(--ease);
  position: relative;
}

.problem__card:hover { background: rgba(28,78,92,0.3); }

.problem__card-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 24px;
}

.problem__card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.25;
}

.problem__card-desc {
  font-size: 14px;
  color: var(--dark-card);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   THE METHOD
═══════════════════════════════════════════════ */
.method {
  background: var(--surface);
  padding: 120px 0;
}

.method__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  /* Mac-display review: was align-items:end. With the BW signature moved
     out of the left column (now centered under the CTA row below), the
     left column is shorter than before -- start-aligning both columns
     keeps "Jerry Sees What Others Miss..." lined up with the top of the
     right-hand paragraph instead of sitting lower than it. Sole usage
     of .method__top sitewide is this homepage Diagnosis section. */
  align-items: start;
  margin-bottom: 80px;
}

.method__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
}

.method__step {
  padding: 40px 32px;
  border-right: 1px solid var(--border);
  position: relative;
  transition: background 0.3s var(--ease);
}

.method__step:last-child { border-right: none; }
.method__step:hover { background: var(--gold-pale); }

.method__step-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 300;
  color: var(--border);
  line-height: 1;
  margin-bottom: 20px;
  transition: color 0.3s;
}

.method__step:hover .method__step-num { color: var(--gold-lt); }

.method__step-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
}

.method__step-desc {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════ */
.services {
  background: var(--white);
  padding: 120px 0;
}

.services__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
}

.service-card {
  padding: 48px 40px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s var(--ease);
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}

.service-card:hover { background: var(--cream); }
.service-card:hover::before { transform: scaleX(1); }

.service-card:nth-child(3n) { border-right: none; }

.service-card__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  font-size: 18px;
  color: var(--gold);
  transition: all 0.3s var(--ease);
}

.service-card:hover .service-card__icon {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold-lt);
}

.service-card__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 10px;
}

.service-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.25;
}

/* Shared gold italic serif "highlight" typography system -- the ONE
   consistent treatment for every Result/outcome/attribution-style gold
   text element sitewide: service Result statements (.service-card__result),
   MicroFlow's highlighted supporting line (.service-card__tagline),
   Results-page client attribution (.result-card__attr), and testimonial
   attribution (.testi-card__role). Defined once here so all four move
   together instead of being patched card-by-card; each selector below
   only adds the font-size/spacing its own layout needs on top of this
   shared block. font-weight 600 pairs with the Cormorant Garamond italic
   600 face now loaded in build_common.py's Google Fonts <link> --
   correction pass: the previous 400/500 weight was silently rendering as
   the thin default italic face (no 500/600 italic weight had actually
   been loaded), which is why the treatment read as faint despite the
   correct color/style. Natural capitalization throughout -- no
   letter-spacing, no uppercase -- per visual QA (names/titles should
   read naturally, not like a small tracked label). */
.service-card__result,
.service-card__tagline,
.result-card__attr,
.testi-card__role {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--gold-deep);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

.service-card__result {
  font-size: 17px;
  margin-bottom: 12px;
}

.service-card__desc {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.7;
}

/* Preview cards with image areas */
.services__grid--preview {
  grid-template-columns: repeat(3, 1fr);
}

.service-card--preview {
  padding: 0 0 40px 0;
  display: flex;
  flex-direction: column;
}

.service-card--preview .service-card__label,
.service-card--preview .service-card__title,
.service-card--preview .service-card__desc,
.service-card--preview .service-card__result,
.service-card--preview .service-card__tagline {
  padding: 0 32px;
}

.service-card--preview .service-card__image-area {
  overflow: hidden;
  transition: opacity 0.3s var(--ease);
}

.service-card--preview:hover .service-card__image-area {
  opacity: 0.85;
}

.service-card--preview .btn--outline {
  margin-left: 32px;
}

/* Homepage services final row: MicroFlow (07) + Free Consultation panel,
   broken out of the 3-column .services__grid--preview into their own
   2-column row so each becomes an intentionally wider panel instead of
   an isolated card with empty grid cells beside it. Sits flush beneath
   the 3-col grid (border-top removed) so the whole block reads as one
   continuous bordered composition. No new visual treatment on the cards
   themselves -- same .service-card / .service-card--preview styling,
   just given more width. */
/* Correction pass: the two final-row panels (MicroFlow + Free Consultation)
   originally sat flush against each other (gap:0, matching the shared-
   border-wall look of the 6-card grid above). Visual QA found that too
   cramped once these two became much wider, standalone panels -- added a
   deliberate 24px gutter (the same gap value already used elsewhere for
   real card-to-card breathing room, e.g. .results__grid / .related-links)
   and removed each panel's now-unnecessary inner border-right so the
   gutter reads as clean empty space rather than a stray line down the
   middle. The outer 1px border framing the row is unchanged; neither
   panel's width/padding was reduced to make room for the gap. */
.services__grid--final {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  border: 1px solid var(--border);
  border-top: none;
}

.services__grid--final .service-card:nth-child(1),
.services__grid--final .service-card:nth-child(2n) { border-right: none; }

/* ═══════════════════════════════════════════════
   GUARANTEE SECTION
═══════════════════════════════════════════════ */
.guarantee {
  background: var(--teal);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.guarantee::after {
  content: '2:1';
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 300px;
  font-weight: 300;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.05em;
}

.guarantee__inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: center;
}

.guarantee__badge {
  width: 80px;
  height: 80px;
  border: 2px solid rgba(155,123,63,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 32px;
}

.guarantee__badge-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--gold-lt);
  line-height: 1;
}

.guarantee__badge-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--dark-muted);
}

.guarantee__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 24px;
}

.guarantee__body {
  font-size: 16px;
  color: var(--dark-body);
  line-height: 1.8;
  margin-bottom: 36px;
  font-weight: 300;
}

.guarantee__right {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 40px;
}

.guarantee__quote {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin-bottom: 20px;
}

.guarantee__attribution {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

/* ═══════════════════════════════════════════════
   CASE STUDIES / RESULTS
═══════════════════════════════════════════════ */
.results-section {
  background: var(--cream);
  padding: 120px 0;
}

.results__header {
  margin-bottom: 60px;
}

.results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* Scoped overflow fix: .results__grid is repeat(3, 1fr). Like .symptom-card
   above, a grid item's implicit min-width:auto floors its column at the
   item's min-content size -- here, the longest result-card's quote/attribution
   text. In the ~901-960px band (3-column mode is active but the container
   isn't yet wide enough for all three columns at that min-content floor),
   this forced the grid past the viewport edge, invisibly (body already has
   overflow-x:hidden site-wide, so no scrollbar/visible break appeared, but
   document.documentElement.scrollWidth still exceeded clientWidth). This is
   unrelated to the .marquee-strip/.marquee-track ticker elsewhere on the
   page -- that component's own overflow is intentional and already properly
   clipped by .marquee-strip's overflow:hidden at every width. min-width:0
   lets the column shrink to its assigned 1fr share instead of the text's
   min-content floor; the text simply wraps onto more lines when the column
   is narrower. No effect at widths where 3 columns already fit comfortably. */
.result-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 40px;
  position: relative;
  min-width: 0;
  transition: all 0.3s var(--ease);
}

.result-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(14,17,23,0.08);
}

.result-card__metric {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  /* Second half of the same scoped overflow fix as .result-card above: a few
     metric values (e.g. "$6M→$18M") are a single unbreakable run with no
     normal word-break opportunity, so even after the grid column itself can
     shrink (min-width:0 on .result-card), that one run still doesn't fit at
     ~901-950px and pushed past its own box. overflow-wrap lets it break as a
     last resort only when it doesn't fit; at every width where it already
     fits on one line (all of desktop/tablet/mobile outside that narrow band)
     this has no visible effect at all. */
  overflow-wrap: break-word;
}

.result-card__desc {
  font-size: 13px;
  color: var(--mist);
  margin-bottom: 24px;
  line-height: 1.5;
}

.result-card__quote {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Correction pass: this was mono/uppercase/letter-spaced, which visual QA
   flagged as not matching the approved gold italic serif system used for
   Result statements elsewhere. Shared family/style/weight/color now
   defined once in the .service-card__result / .service-card__tagline /
   .result-card__attr / .testi-card__role block above; only the size
   needed for this specific attribution line lives here. Natural
   capitalization -- names/companies render as written, no forced caps. */
.result-card__attr {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════
   ABOUT STRIP
═══════════════════════════════════════════════ */
.about-strip {
  background: var(--white);
  padding: 120px 0;
}

.about-strip__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 100px;
  align-items: start;
}

.about-strip__photo {
  position: relative;
}

.about-strip__photo-frame {
  aspect-ratio: 3/4;
  background: linear-gradient(145deg, #1a2a3a, #1C4E5C);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* photo now real — overlay removed */

.about-strip__photo-placeholder {
  opacity: 0.2;
  text-align: center;
}

.about-strip__photo-placeholder p {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 12px;
}

.about-strip__accent {
  position: absolute;
  top: 24px; right: -24px;
  width: 48px;
  height: 48px;
  background: var(--gold);
}

.about-strip__cred {
  position: absolute;
  bottom: -24px; right: -24px;
  background: var(--ink);
  padding: 20px 24px;
}

.about-strip__cred-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--gold-lt);
  line-height: 1;
}

.about-strip__cred-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-muted);
  margin-top: 4px;
}

.about-strip__body h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
  margin-top: 28px;
}

.about-strip__creds-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.cred-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cred-item__bar {
  width: 3px;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 4px;
  height: 40px;
}

.cred-item__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.cred-item__detail {
  font-size: 12px;
  color: var(--mist);
}

/* ═══════════════════════════════════════════════
   LEAD MAGNET
═══════════════════════════════════════════════ */
.lead-magnet {
  background: var(--ink);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.lead-magnet::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(155,123,63,0.1) 0%, transparent 60%);
}

.lead-magnet__inner {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 80px;
  align-items: center;
  position: relative;
}

.lead-magnet__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.lead-magnet__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 32px;
}

.lead-magnet__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lead-magnet__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}

.lead-magnet__features li::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  background: var(--gold);
  flex-shrink: 0;
}

.lead-magnet__form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 48px;
}

.lead-magnet__form-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--white);
  margin-bottom: 8px;
}

.lead-magnet__form-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 28px;
}

.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}

.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.form-field input::placeholder { color: rgba(255,255,255,0.25); }

.form-field input:focus, .form-field select:focus {
  border-color: var(--gold);
}

.form-field select {
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}

.form-field select option { background: var(--ink); color: var(--white); }

.form-privacy {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 12px;
  text-align: center;
}

/* ═══════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════ */
.testimonials {
  background: var(--surface);
  padding: 120px 0;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testi-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.testi-card__stars {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 20px;
}

.testi-card__quote {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 24px;
}

.testi-card__footer {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.testi-card__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* Correction pass: this was mono/uppercase/letter-spaced, which visual QA
   flagged as not matching the approved gold italic serif system. Shared
   family/style/weight/color now defined once in the .service-card__result
   / .service-card__tagline / .result-card__attr / .testi-card__role block
   above; only the size/spacing needed for this line lives here. Natural
   capitalization -- role/company render as written, no forced caps.
   .testi-card__name (the name itself, just above) is intentionally left
   as its existing ink/sans/bold treatment -- that's the visual hierarchy
   already in place (bold name, then a supporting gold-italic role line),
   not a typography inconsistency to correct. */
.testi-card__role {
  font-size: 13px;
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════
   THOUGHT LEADERSHIP / BLOG
═══════════════════════════════════════════════ */
.thought-leadership {
  background: var(--white);
  padding: 120px 0;
}

.tl__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}

.tl__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.tl__featured {
  background: var(--white);
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.tl__featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}

.tl__article {
  background: var(--white);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.3s;
}

.tl__article:hover { background: var(--cream); }

.tl__cat {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.tl__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 16px;
}

.tl__article .tl__title {
  font-size: 17px;
  margin-bottom: 12px;
}

.tl__excerpt {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 32px;
}

.tl__read-more {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}

.tl__read-more:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════ */
.cta-section {
  background: var(--cream);
  padding: 120px 0;
  text-align: center;
}

.cta-section__headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.05;
  max-width: 760px;
  margin: 0 auto 24px;
  letter-spacing: -0.02em;
}

.cta-section__sub {
  font-size: 17px;
  color: var(--slate);
  font-weight: 300;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 48px;
}

.cta-section__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-section__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.cta-trust-item {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cta-trust-dot {
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
}

/* ═══════════════════════════════════════════════
   CONSULTATION FORM (v13.1)
═══════════════════════════════════════════════ */
.consult-form {
  max-width: 560px;
  margin: 0 auto 8px;
  text-align: left;
}

.consult-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.consult-form__field {
  margin-bottom: 20px;
}

.consult-form__field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}

.consult-form__field input,
.consult-form__field textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color 0.2s var(--ease);
}

.consult-form__field input:focus,
.consult-form__field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.consult-form__field textarea { resize: vertical; min-height: 96px; }

.consult-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consult-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.consult-form__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mist);
  text-align: center;
  margin-top: 16px;
}

.consult-form__error {
  font-size: 13px;
  color: #B3391F;
  margin-top: 12px;
  text-align: center;
  display: none;
}
.consult-form__error.is-visible { display: block; }

.consult-form__success {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 36px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  text-align: center;
}
.consult-form__success h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}
.consult-form__success p { color: var(--slate); font-size: 15px; line-height: 1.6; }

.consult-form__divider {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 32px 0 20px;
  position: relative;
}

@media (max-width: 640px) {
  .consult-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  padding: 80px 0 40px;
}

.footer__top {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: 60px;
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 4px;
}

.footer__brand-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer__desc {
  font-size: 13px;
  color: var(--dark-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--dark-body);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s;
}

.footer__contact-item:hover { color: var(--gold-lt); }

.footer__contact-icon {
  font-size: 12px;
  color: var(--gold);
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  font-size: 13px;
  color: var(--dark-muted);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.02em;
}

.footer__links a:hover { color: var(--gold-lt); }

.footer__address {
  font-size: 13px;
  color: var(--dark-muted);
  line-height: 1.8;
  font-style: normal;
}

.footer__schema-note {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin-top: 12px;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__copy {
  font-size: 12px;
  color: var(--dark-faint);
  letter-spacing: 0.02em;
}

.footer__legal {
  display: flex;
  gap: 24px;
}

.footer__legal a {
  font-size: 12px;
  color: var(--dark-faint);
  text-decoration: none;
}

.footer__legal a:hover { color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════════
   PAGE SECTIONS PREVIEW
═══════════════════════════════════════════════ */
.page-preview {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 48px;
  margin-bottom: 24px;
}

.page-preview__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.page-preview__url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mist);
  margin-bottom: 20px;
}

.page-preview__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}

.page-preview__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.section-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  background: var(--surface);
  color: var(--slate);
  padding: 4px 12px;
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes fadeUp {
  /* Transform-only: opacity-from-0 delayed hero LCP ~1s (2026-08-27 audit). */
  from { transform: translateY(24px); }
  to { transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.7s var(--ease-out) both;
}

.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.25s; }
.fade-up-3 { animation-delay: 0.4s; }
.fade-up-4 { animation-delay: 0.55s; }

/* ═══════════════════════════════════════════════
   DIVIDER
═══════════════════════════════════════════════ */
.divider-gold {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 20px 0;
}

/* ═══════════════════════════════════════════════
   AI VS HUMAN SECTION
═══════════════════════════════════════════════ */
.ai-vs-human {
  background: var(--ink);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.ai-vs-human::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(28,78,92,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 20%, rgba(155,123,63,0.08) 0%, transparent 50%);
  pointer-events: none;
}

.ai-vs-human__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
  position: relative;
}

.ai-vs-human__pre {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ai-vs-human__pre::before,
.ai-vs-human__pre::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.ai-vs-human__headline {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.ai-vs-human__headline em {
  font-style: italic;
  color: var(--gold-lt);
}

.ai-vs-human__sub {
  font-size: 17px;
  color: var(--dark-body);
  line-height: 1.75;
  font-weight: 300;
}

.ai-vs-human__arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
  margin-bottom: 80px;
}

.ai-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 48px 44px;
  position: relative;
}

.jerry-card {
  background: rgba(28,78,92,0.25);
  border: 1px solid rgba(155,123,63,0.3);
  border-left: 3px solid var(--gold);
  padding: 48px 44px;
  position: relative;
}

/* AI + Jerry complementary conclusion, centered under the two comparison
   boxes. Primary line reads clearly against the dark section; secondary
   tagline reuses the site's italic/gold-lt "supporting statement" treatment
   (the dark-background equivalent of the readability-pass gold used for
   .service-card__tagline on light cards). Kept compact -- no card chrome,
   no extra section padding -- so it doesn't read as a third comparison box. */
.ai-vs-human__conclusion {
  text-align: center;
  max-width: 720px;
  margin: 40px auto 0;
}
.ai-vs-human__conclusion-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 10px;
}
.ai-vs-human__conclusion-tagline {
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  color: var(--gold-lt);
  letter-spacing: 0.01em;
}

.arena-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  position: relative;
}

.arena-vs__circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dark-muted);
  flex-shrink: 0;
}

.arena-vs__line {
  flex: 1;
  width: 1px;
  background: rgba(255,255,255,0.06);
}

.card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  margin-bottom: 28px;
}

.card__badge--ai {
  background: rgba(255,255,255,0.08);
  color: var(--dark-muted);
  border: 1px solid rgba(255,255,255,0.18);
}

.card__badge--jerry {
  background: rgba(155,123,63,0.18);
  color: var(--gold-lt);
  border: 1px solid rgba(155,123,63,0.4);
}

.card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.card__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 8px;
  line-height: 1.2;
}

.ai-card .card__title { color: var(--dark-body); }
.jerry-card .card__title { color: var(--white); }

.card__subtitle {
  font-size: 13px;
  margin-bottom: 36px;
}

.ai-card .card__subtitle { color: var(--dark-card); }
.jerry-card .card__subtitle { color: var(--dark-card); }

.card__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.card__row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: flex-start;
}

.card__row:last-child { border-bottom: none; }

.card__row-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.icon--no {
  background: rgba(255,80,80,0.1);
  color: rgba(255,100,100,0.7);
}

.icon--yes {
  background: rgba(155,123,63,0.15);
  color: var(--gold-lt);
}

.card__row-text {
  flex: 1;
}

.card__row-label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 3px;
}

.ai-card .card__row-label { color: var(--dark-body); }
.jerry-card .card__row-label { color: var(--white); }

.card__row-detail {
  font-size: 12px;
  line-height: 1.55;
}

.ai-card .card__row-detail { color: var(--dark-card); }
.jerry-card .card__row-detail { color: var(--dark-card); }

/* Bottom quote strip */
.ai-vs-human__quote-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
}

.avh-quote {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--gold);
  padding: 32px 36px;
}

.avh-quote__text {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 16px;
}

.avh-quote__attr {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.avh-statement {
  background: rgba(155,123,63,0.08);
  border: 1px solid rgba(155,123,63,0.2);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.avh-statement__text {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 16px;
}

.avh-statement__text strong {
  color: var(--gold-lt);
  font-weight: 400;
}

.avh-statement__cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lt);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s;
}

.avh-statement__cta:hover { gap: 14px; color: var(--gold); }

/* ═══════════════════════════════════════════════
   EXECUTIVE RESOURCE SECTION
═══════════════════════════════════════════════ */
.exec-resource {
  background: var(--ink);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.exec-resource::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(28,78,92,0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(155,123,63,0.07) 0%, transparent 50%);
  pointer-events: none;
}

.exec-resource__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 100px;
  align-items: center;
  position: relative;
}

/* ── PDF mockup ── */
.exec-resource__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.exec-resource__doc-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
}

/* Stacked shadow pages */
.exec-resource__shadow {
  position: absolute;
  border-radius: 1px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.exec-resource__shadow--1 { inset: 8px -8px -8px 8px; }
.exec-resource__shadow--2 { inset: 16px -16px -16px 16px; background: rgba(255,255,255,0.025); }
.exec-resource__shadow--3 { inset: 24px -24px -24px 24px; background: rgba(255,255,255,0.015); border-color: rgba(255,255,255,0.04); }

/* The document itself */
.exec-resource__doc {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(155,123,63,0.25);
  display: flex;
  flex-direction: column;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.5),
    0 2px 8px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.8);
  z-index: 2;
}

.exec-resource__doc-header {
  background: var(--ink);
  padding: 18px 24px;
  border-bottom: 2px solid var(--gold);
}

.exec-resource__doc-logo-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.exec-resource__doc-logo-mark {
  width: 28px;
  height: 28px;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
  letter-spacing: 0;
}

.exec-resource__doc-brand {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  line-height: 1;
}

.exec-resource__doc-domain {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--dark-muted);
  margin-top: 2px;
}

.exec-resource__doc-body {
  padding: 28px 24px 20px;
  flex: 1;
  background: var(--cream);
}

.exec-resource__doc-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.exec-resource__doc-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.exec-resource__doc-rule {
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 10px;
}

.exec-resource__doc-subtitle {
  font-size: 10px;
  color: var(--slate);
  line-height: 1.5;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.exec-resource__doc-chapters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.exec-resource__chapter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--slate);
  padding: 4px 0;
  border-bottom: 1px solid rgba(216,218,224,0.5);
  letter-spacing: 0.01em;
}

.exec-resource__chapter:last-child { border-bottom: none; }

.exec-resource__chapter span {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--gold);
  letter-spacing: 0.1em;
  min-width: 16px;
}

.exec-resource__doc-footer {
  background: var(--ink);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exec-resource__doc-phone {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--dark-muted);
}

.exec-resource__doc-free {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

/* Folded corner */
.exec-resource__fold {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent var(--ink) transparent transparent;
  z-index: 3;
  filter: drop-shadow(-2px 2px 3px rgba(0,0,0,0.3));
}

.exec-resource__doc-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

.exec-resource__trust-dot {
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Right copy ── */
.exec-resource__right { position: relative; }

.exec-resource__headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 52px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.exec-resource__rule {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 24px;
}

.exec-resource__desc {
  font-size: 16px;
  color: var(--dark-body);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 36px;
  max-width: 520px;
}

/* Pillars list */
.exec-resource__pillars {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 44px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.exec-resource__pillars li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: background 0.2s;
}

.exec-resource__pillars li:hover {
  padding-left: 8px;
  transition: padding-left 0.3s ease;
}

.exec-resource__pillar-icon {
  font-size: 14px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  text-align: center;
}

.exec-resource__pillars li > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.exec-resource__pillars strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.01em;
}

.exec-resource__pillars span {
  font-size: 12px;
  color: var(--dark-muted);
  line-height: 1.5;
}

/* CTA block */
.exec-resource__cta-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exec-resource__btn {
  align-self: flex-start;
  padding: 18px 40px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.exec-resource__cta-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

/* Light-background variant: reused on standalone light-section pages
   (e.g. /master-plan/) where the pillar list/CTA note appear outside the
   dark .exec-resource panel context. Same tokens, adjusted for contrast. */
.exec-resource__pillars--onlight { border-top-color: var(--border); }
.exec-resource__pillars--onlight li { border-bottom-color: var(--border); }
.exec-resource__pillars--onlight strong { color: var(--ink); }
.exec-resource__pillars--onlight span { color: var(--slate); }
.exec-resource__cta-note--onlight { color: var(--slate); }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__right { display: none; }
  .hero__left { padding: 120px 32px 80px; }
  .results-bar__inner { grid-template-columns: 2fr 2fr; }
  .positioning__grid, .method__top, .services__header,
  .guarantee__inner, .lead-magnet__inner, .about-strip__grid,
  .tl__header, .footer__top, .exec-resource__inner { grid-template-columns: 1fr; gap: 48px; }
  .problem__grid, .services__grid, .services__grid--final, .method__steps,
  .results__grid, .testimonials__grid { grid-template-columns: 1fr; }
  .ai-vs-human__arena { grid-template-columns: 1fr; }
  .arena-vs { flex-direction: row; padding: 16px 0; }
  .arena-vs__line { flex: 1; width: auto; height: 1px; }
  .ai-vs-human__quote-strip { grid-template-columns: 1fr; }
  .tl__grid { grid-template-columns: 1fr; }
  .strategy-grid { grid-template-columns: 1fr; }
  .service-card:nth-child(3n) { border-right: 1px solid var(--border); }
  .service-card:nth-child(odd) { border-right: 1px solid var(--border); }
  .display-1 { font-size: 44px; }
}

/* ═══════════════════════════════════════════════
   TRADEMARK-MARKETING WORDMARK
   "Business" gold/amber · "Whisperer" white italic reverse
   Used at approved dark-background brand moments only.
═══════════════════════════════════════════════ */
.bw-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.bw-wordmark .bw-business { color: var(--gold-lt); }
.bw-wordmark .bw-whisperer { color: var(--white); font-style: italic; }
.bw-wordmark--dark .bw-business { color: var(--gold); }
.bw-wordmark--dark .bw-whisperer { color: var(--ink); font-style: italic; }

/* ═══════════════════════════════════════════════
   BUSINESS WHISPERER SIGNATURE
   Deliberate, standalone brand-mark component —
   distinct from small uppercase eyebrow/label text.
   "Business" = gold/amber · "Whisperer" = white italic serif.
   On light-background sections, a dark reversed plate
   is used so "Whisperer" renders true white-on-dark.
═══════════════════════════════════════════════ */
.bw-signature {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  line-height: 1;
  white-space: nowrap;
}
.bw-signature .bw-signature__business { color: var(--gold-lt); font-weight: 500; }
.bw-signature .bw-signature__whisperer { color: var(--white); font-style: italic; font-weight: 400; }

.bw-signature--plate {
  background: var(--ink);
  padding: 0.55em 0.95em;
  border-radius: 2px;
}

.bw-signature--lg { font-size: clamp(24px, 2.6vw, 34px); }
.bw-signature--md { font-size: 19px; }
.bw-signature--sm { font-size: 14px; }
.bw-signature--attribution { font-size: 14px; }

/* ═══════════════════════════════════════════════
   MICROFLOW — proprietary system section
   Reuses guarantee/dark-panel visual language so it
   reads as premium IP, distinct from generic service
   cards, without competing with the master brand hero.
═══════════════════════════════════════════════ */
.microflow {
  background: var(--ink);
  color: var(--white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.microflow::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,123,63,0.14) 0%, rgba(155,123,63,0) 70%);
  pointer-events: none;
}
.microflow__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.microflow__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
  border: 1px solid rgba(196,164,94,0.35);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.microflow__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-lt); }
.microflow__headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--white);
}
.microflow__body { color: var(--dark-body); margin-top: 22px; font-size: 17px; line-height: 1.7; }
.microflow__attribution { margin-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-muted); }
.microflow__panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 40px;
}
.microflow__panel-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 16px; }
.microflow__result { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
  .microflow__inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   SECOND-LEVEL PAGE ADDITIONS (v13 restructure)
   Reuses existing design tokens; adds only what
   subpages need (breadcrumbs, page hero, prose).
═══════════════════════════════════════════════ */
.page-hero {
  background: var(--ink);
  padding: 200px 0 100px;
  position: relative;
}
.page-hero .label { color: var(--gold-lt); }
.page-hero__headline { font-family: var(--font-display); font-size: clamp(36px,5vw,64px); font-weight:300; line-height:1.1; color: var(--white); letter-spacing:-0.02em; margin-top:8px; }
.page-hero__sub { font-size:18px; line-height:1.75; color: var(--dark-body); font-weight:300; max-width:720px; margin-top:20px; }
.breadcrumb { font-family: var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--dark-muted); margin-bottom:20px; }
.breadcrumb a { color: var(--dark-body); text-decoration:none; }
.breadcrumb a:hover { color: var(--gold-lt); }
.breadcrumb span.sep { margin: 0 8px; opacity:0.5; }

.prose { max-width: 780px; }
.prose p { font-size:17px; line-height:1.8; color: var(--slate); margin-bottom:20px; }
.prose p:last-child { margin-bottom:0; }
.prose h2 { font-family: var(--font-display); font-size:clamp(24px,3vw,34px); font-weight:400; color:var(--ink); margin:48px 0 16px; }
.prose h2:first-child { margin-top:0; }
.prose blockquote { font-family: var(--font-display); font-style:italic; font-size:19px; color: var(--gold-deep); border-left:2px solid var(--gold-deep); padding-left:24px; margin: 28px 0; }
.prose ul { margin: 0 0 20px 0; padding-left: 22px; }
.prose li { font-size:16px; line-height:1.75; color:var(--slate); margin-bottom:10px; }

.related-links { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:24px; margin-top:16px; }
.related-links a { display:block; padding:24px; border:1px solid var(--border); text-decoration:none; color:var(--ink); background:var(--white); transition: all 0.25s var(--ease); }
.related-links a:hover { border-color: var(--gold); transform: translateY(-2px); }
.related-links__label { font-family: var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:8px; }
.related-links__title { font-family: var(--font-display); font-size:19px; color:var(--ink); }

@media (max-width: 640px) {
  .page-hero { padding: 150px 0 70px; }
}

/* ═══════════════════════════════════════════════
   TEXT-ON-DARK UTILITY CLASSES (readability pass)
   Placed at end of file so they reliably override
   earlier component rules of equal specificity when
   applied as an additional class in markup, for cases
   that previously used a one-off inline color instead
   of a shared class. Ties those cases to the same
   --dark-* tiers used everywhere else on dark sections.
═══════════════════════════════════════════════ */
.text-on-dark { color: var(--dark-body) !important; }
.text-on-dark-muted { color: var(--dark-muted) !important; }
.text-on-dark-faint { color: var(--dark-faint) !important; }
.icon--ai { background: rgba(255,255,255,0.10) !important; color: var(--dark-muted) !important; }

/* Jerry-confirmed brightness fix: this paragraph carries the base .body
   rule (var(--slate), meant for light backgrounds) but sits inside the
   dark .ai-vs-human section -- fully brighten it without touching the
   shared .body rule used correctly elsewhere on light sections. */
.ai-vs-human__closing-note { color: var(--white) !important; }

/* MicroFlow (Service 07) card only: a positioning/tagline statement, not
   an outcome -- deliberately distinct from .service-card__result (the
   gold "Result:" line used on the other services) so it isn't read as a
   Result. Scoped to this one card; does not affect any other card.
   Correction pass: this rule was missing font-family entirely, so despite
   font-style:italic it was rendering in the default sans body font, not
   the serif gold-italic family used everywhere else -- a real sitewide
   inconsistency caught by visual QA. Shared family/style/weight/color now
   defined once in the .service-card__result / .service-card__tagline /
   .result-card__attr / .testi-card__role block above; only the size/
   spacing needed for this line lives here. */
.service-card__tagline {
  font-size: 15px;
  margin-bottom: 12px;
}

/* Homepage "How It Works" white-background lockup (AI Reads Your Data /
   Jerry Reads Your People variant): desktop cap unchanged at 560px via
   this base rule; mobile-only reduction to ~90% of the available content
   width so the rule lines/wordmark keep breathing room from the screen
   edges. Scoped to this single image; no other placement is affected. */
.bw-lockup-light-img { max-width: 560px; }
@media (max-width: 640px) {
  .bw-lockup-light-img { max-width: 90%; }
}

/* Illustrated 4-metric row (35+ / 2:1 / 8,000+ / 60+), used where the
   full data-point group needs the 2:1 guaranteed-return card and the
   approved illustrated assets, rather than the plain hero__stats text
   component. Desktop: one row of 4. Tablet (<=900px, matching the
   site's existing container-padding breakpoint): 2x2. Mobile (<=640px,
   matching the site's existing single-column breakpoint used by
   .results__grid/.testimonials__grid): stacked single column, since at
   2-column phone widths the baked-in label text in these assets becomes
   too small to read comfortably. Images are plain <img> tags scaled
   with width:100%/height:auto so aspect ratio is always preserved. */
.metric-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.metric-cards-row img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .metric-cards-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .metric-cards-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   OUR PROMISE STRIP (homepage 2:1 guarantee, req #9)
   All-new, fully scoped classes -- does NOT reuse or modify
   .guarantee__badge/.guarantee__body etc, which remain exactly
   as they are for the separate "Owner Transformation" section
   further down the page. Dark --teal background: gold-lt/dark-muted/
   dark-body tokens used per the site's established dark-bg convention.
═══════════════════════════════════════════════ */
.our-promise {
  margin-top: 32px;
  background: var(--teal);
  padding: 44px 40px;
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}

/* Correction pass: visual QA found this circle still read as too subtle
   for a major commercial proof point -- the 60%-opacity border and 34px
   text didn't register immediately on a scan of the section. Circle
   enlarged ~32% (112px -> 148px) with a thicker, fully-opaque border;
   "2:1" enlarged and made bolder (34px/600 -> 46px/700) so it's clearly
   the dominant element; "Guaranteed" bumped up in size and brightness
   (10px/--dark-muted -> 12px/--dark-body, the brighter text-on-dark tier)
   so it stays clearly readable next to the now-larger "2:1". Section
   composition (heading, copy, BW mark, overall layout) is unchanged. */
.our-promise__badge {
  width: 148px;
  height: 148px;
  border: 5px solid var(--gold-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
}

.our-promise__badge-text {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  color: var(--gold-lt);
  line-height: 1;
}

.our-promise__badge-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-body);
  margin-top: 6px;
}

.our-promise__center {
  flex: 1;
  min-width: 240px;
}

.our-promise__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lt);
  display: block;
  margin-bottom: 8px;
}

.our-promise__body {
  font-size: 16px;
  color: var(--dark-body);
  line-height: 1.7;
  font-weight: 300;
  max-width: 640px;
  margin: 0;
}

.our-promise__brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.8;
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

.our-promise__brand-icon {
  width: 30px;
  height: auto;
  display: block;
}

.our-promise__brand-text {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .our-promise { padding: 36px 28px; justify-content: center; text-align: center; }
  .our-promise__badge { width: 116px; height: 116px; border-width: 4px; }
  .our-promise__badge-text { font-size: 36px; }
  .our-promise__center { min-width: 100%; order: 2; }
  .our-promise__body { margin: 0 auto; }
  .our-promise__brand { order: 3; border-left: none; padding-left: 0; flex-direction: row; }
}


/* ── Blog (re-chromed 2026-08-27) ─────────────────────────── */
.blog-prose { max-width: 760px; margin: 0 auto; padding: 48px 20px 24px; }
.blog-prose h2 { margin: 40px 0 14px; }
.blog-prose h3 { margin: 28px 0 10px; }
.blog-prose p, .blog-prose li { line-height: 1.75; margin-bottom: 14px; }
.blog-prose ul, .blog-prose ol { padding-left: 24px; margin-bottom: 16px; }
.blog-prose img { max-width: 100%; height: auto; border-radius: 6px; }
.blog-prose table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.blog-prose th, .blog-prose td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; }
.blog-prose blockquote { border-left: 3px solid var(--gold); padding-left: 18px; font-style: italic; margin: 20px 0; }
.blog-meta { color: #6a7280; font-size: .92rem; margin-top: 10px; }
.blog-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 40px 0; }
.blog-card { border: 1px solid #e3e0d8; border-radius: 8px; padding: 26px 24px; background: var(--white, #fff); display: flex; flex-direction: column; }
.blog-card h2 { font-size: 1.25rem; line-height: 1.35; margin-bottom: 10px; }
.blog-card p { color: #4a5160; font-size: .95rem; line-height: 1.6; flex: 1; }
.blog-card .blog-card__date { color: #8a8f98; font-size: .85rem; margin-bottom: 8px; }
.blog-card a.blog-card__link { margin-top: 14px; font-weight: 600; color: var(--ink, #1a2238); text-decoration: none; }
.blog-card a.blog-card__link:hover { color: var(--gold); }
img { max-width: 100%; }