/*
  WaveX Media — Layout & component styles
  All colour, type, and spacing values come from theme.css tokens — never hardcoded here.
*/

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
}

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

a {
  color: inherit;
}

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

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-7);
  }
}

/* Eyebrow labels */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: var(--text-eyebrow);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}

.eyebrow--hero {
  color: var(--color-hero-accent);
}

.eyebrow--editorial {
  color: var(--color-pine);
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--text-body);
  text-decoration: none;
  padding: var(--space-4) var(--space-6);
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: filter 0.15s ease;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-cta);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  filter: brightness(0.92);
}

/* Block padding bumped from --space-3 to --space-4 (2026-07-22) — this is
   the sticky header's "Book a Call" button, the single most-tapped mobile
   target on the site since it's visible at every scroll position; the
   original padding rendered at ~45px tall, under the 48px thumb-target
   minimum. */
.btn--small {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-caption);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  padding: calc(var(--space-4) - 2px) calc(var(--space-6) - 2px);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-ink);
  color: var(--color-white);
}

/* ============ Icons ============ */
/* Shared base for the inline SVG sprite (see the <symbol> set in index.html).
   Outline style, squared caps/joins to match the sharp geometric brand character.
   Size and stroke colour are set per placement below. */
.icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Tiles (4px radius, matching buttons/cards) wrap standalone "feature" icons —
   Framework step cards and Why bullets. List-marker icons (fit, contrast) sit bare. */

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-navy);
  border-bottom: 1px solid rgba(250, 251, 252, 0.12);
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.15);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.site-header__logo {
  display: inline-flex;
  /* Prevents flexbox from squeezing the logo's width on very narrow real
     phones (below the ~504px floor the headless test tool can reach) while
     its height stays fixed — without this, the logo distorts instead of
     the row simply running tight. Confirmed on a real device 2026-07-22. */
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.site-header__logo:hover,
.site-header__logo:focus-visible {
  opacity: 0.8;
}

/* Two logo images live in the link; only one is ever visible at a time
   (toggled below at 768px) — same pattern as the hamburger/close icon swap.
   The wide inline wordmark is the default, shown whenever there's room. */
.site-header__logo-img--wide {
  height: 36px;
  width: auto;
}

.site-header__logo-img--compact {
  display: none;
}

.site-header__nav {
  display: none;
  gap: var(--space-6);
  /* Push the nav to the right so it groups with the Book a Call button
     (was margin-right:auto, which stranded the links beside the logo).
     Standard convention: logo left, nav links + CTA together on the right. */
  margin-left: auto;
}

@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
  }
}

.site-header__nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white);
  text-decoration: none;
  /* Keep each link on one line — without this, "WHO WE HELP" broke to
     "WHO WE / HELP" (and then "WHO / WE / HELP") as the desktop window
     narrowed toward the 768px hamburger breakpoint. Flagged 2026-07-22. */
  white-space: nowrap;
}

.site-header__nav a:hover {
  color: var(--color-hero-accent);
}

/* Below 768px the row holds 3 items (logo, hamburger toggle, Book a Call).
   The wide wordmark's 8.36:1 aspect ratio makes it too wide to coexist with
   the other two at any real phone width even at a tiny height (would need
   to shrink to ~12px tall to fit, illegible) — so below this breakpoint we
   swap to the stacked wordmark (2.78:1) instead of just shrinking the wide
   one. Measured via getBoundingClientRect: toggle (48px, accessibility-
   sized) + Book a Call (~136px) + 2 gaps + container padding = ~240px fixed
   cost, leaving ~100px for the logo at 36px tall (100/2.78) — comfortably
   legible, and the ~340px total fits real phones (360px+) with ~20px to
   spare. The oldest 320px-class devices remain a few px tight; accepted,
   those are effectively obsolete. The headless screenshot tool used to
   verify this has a hard ~490-509px minimum-viewport clamp that makes true
   phone widths impossible to screenshot directly, so this was sized from
   the component math (measured piece by piece at the tool's floor), not
   eyeballed at the real target width. Confirmed on a real device 2026-07-22
   that the previous (shrink-only) approach distorted the logo. */
@media (max-width: 767px) {
  .site-header__inner {
    gap: var(--space-3);
    padding-inline: var(--space-4);
    justify-content: flex-start;
  }

  /* Logo alone on the left; hamburger + Book a Call grouped on the right.
     A truly centered logo can't coexist with the full-width CTA at phone
     widths — symmetric centering needs a ~428px row (2×136px CTA-width sides
     + 100px logo + gaps/padding), but real phones are 360-410px (measured
     2026-07-22). So we keep the robust left/right split, which only needs
     ~340px and fits every phone. margin-left:auto on the toggle (the first
     right-group item) eats the slack after the logo, pulling the toggle and
     the CTA that follows it into a single group on the right. */
  .site-header__toggle {
    margin-left: auto;
  }

  .site-header__logo-img--wide {
    display: none;
  }

  .site-header__logo-img--compact {
    display: block;
    height: 36px;
    width: auto;
  }
}

/* Mobile menu toggle — hamburger below 768px, where .site-header__nav is
   display:none with no other way to reach the nav links. Book a Call stays
   in the row regardless (primary conversion action, never hidden behind a
   tap); only the two nav links move into the toggled panel. Sized to 48px
   (was 36px, under the thumb-target minimum) — the icon itself stays at
   its original visual size, centered within the larger tap area, so the
   header doesn't look bigger, just easier to actually hit. */
.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
}

@media (min-width: 768px) {
  .site-header__toggle {
    display: none;
  }
}

.site-header__toggle .icon {
  width: 22px;
  height: 22px;
}

.site-header__toggle .icon--close {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .icon--menu {
  display: none;
}

.site-header__toggle[aria-expanded="true"] .icon--close {
  display: block;
}

/* Dropdown panel — anchored to .site-header (already position:sticky, so it's
   a positioning context), collapsed by default via max-height so the open/close
   transition doesn't need JS to know the content's height in advance. */
.site-header__mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  background: var(--color-navy);
  border-bottom: 1px solid rgba(250, 251, 252, 0.12);
  transition: max-height 0.25s ease;
}

.site-header__mobile-nav.is-open {
  max-height: 200px;
}

@media (min-width: 768px) {
  .site-header__mobile-nav {
    display: none;
  }
}

.site-header__mobile-nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(250, 251, 252, 0.12);
}

.site-header__mobile-nav a:first-child {
  border-top: none;
}

.site-header__mobile-nav a:hover {
  color: var(--color-hero-accent);
}

/* ============ Hero ============ */
/* A HARD height (not min-height) is a hard requirement, not a nice-to-have —
   it's the only thing that forces this box to the exact same size on every
   page that reuses it. min-height is a floor: whichever page has more hero
   text still renders taller than a shorter page, and object-fit: cover then
   shows a different crop of the photo — that's what kept causing the
   homepage/Client Wins mismatch. A fixed height with overflow:hidden (set
   above) removes the ambiguity: both pages are always this exact size.
   Measured against the homepage's actual content (its longest hero text)
   at 1024px+ with margin to spare — do not shrink without re-measuring. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
  /* Top/bottom padding split deliberately (not padding-block): padding-top
     controls the eyebrow's vertical anchor below the nav independently of
     padding-bottom/height, which stay untouched — this only moves the text
     block, never the box size or the photo crop (see the hard-height note
     above). Set to var(--space-6) — same token .cw-hero uses for its own
     padding-top — so the eyebrow starts at the same measured position
     (32px below the nav) as the Who We Help / Client Wins heroes, closing
     a cross-page inconsistency flagged 2026-07-17. Confirmed via an
     on-page getBoundingClientRect diagnostic before changing, not eyeballed:
     was 71px (mobile) / 103px (desktop) below nav, vs. 32px on the internal
     pages. Left padding-bottom as-is per direct request, even though this
     leaves more empty space below the text than before — not a mistake. */
  padding-top: var(--space-6);
  padding-bottom: var(--space-9);
  height: 600px;
}

@media (min-width: 1024px) {
  .hero {
    /* padding-top not overridden here — var(--space-6) from the base rule
       applies at every breakpoint, matching .cw-hero's own flat value. */
    padding-bottom: var(--space-10);
    /* Was 730px. Shortened by 150px per user request (too much empty photo
       below the text) — see the object-position comment below for why that
       change had to be paired with a compensating shift, not made alone. */
    height: 580px;
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No object-position override here deliberately — see the @media(1024px)
     block below for why. Default (center center) is the only safe value
     below that breakpoint. */
  filter: url(#duotone-navy);
  z-index: 0;
}

@media (min-width: 1024px) {
  /* This vertical nudge (PowerToys-ruler-measured, see git history for the
     iteration) is only safe once the box is wide enough that object-fit: cover
     has vertical slack to shift within. Below ~965px-wide, this box's aspect
     ratio is close enough to the photo's own (1.5:1) that cover has ~0px of
     vertical overflow to play with — any nonzero object-position shift there
     pushes the image out of its own covering range and exposes .hero's flat
     navy background as a hard-edged bar at the bottom. Confirmed by isolating
     the exact trigger in a throwaway repro (object-position was the only
     variable that reproduced it — width/height/min-* on the img changed nothing).
     Below this breakpoint, default center-center is the only safe crop.

     The offset this produces is 0.5*(box-height - scaled-image-height) + shift.
     scaled-image-height depends only on viewport width here (cover's
     width-driven branch), not on box-height — so shrinking .hero's height by
     Npx moves the visible crop by N/2 px unless compensated by adding N/2 back
     to the shift constant. .hero's height dropped 730->580 (-150) this
     session, so the constant moved -45 -> +30 (+75) to cancel it out and keep
     the nav-bar/ridge framing pixel-identical to what was already approved —
     re-derive this pairing with the same math if height changes again, don't
     just edit one value. */
  .hero__bg {
    object-position: center calc(50% + 30px);
  }
}

/* Darkening gradient, strongest behind the text column (left) — the duotone sets the
   mood, this guarantees the white headline/body text clears WCAG contrast over the photo. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(27, 58, 92, 0.92) 0%,
    rgba(27, 58, 92, 0.72) 40%,
    rgba(27, 58, 92, 0.35) 75%,
    rgba(27, 58, 92, 0.18) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 780px;
}

/* Recognition strip, not a nav bar — regular weight, title case, no
   tracking to speak of, deliberately lighter than .hero__subheadline
   above it. Pulled up closer to the subheadline than .hero__inner's
   default gap (negative margin-top) so it reads as grouped with that
   paragraph rather than evenly spaced like every other hero element;
   the gap below (to the Book a Call button) stays at the normal rhythm.
   Text colour is hero-accent blended toward white for better contrast
   against the photo — still a distinct cooler tone from the subhead's
   near-white, just no longer washed out. Middle-dot separators are
   generated content (not typed into the copy) so they only ever appear
   between items, never orphaned at a line-wrap edge on mobile. */
.hero__niches {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--text-body) + 1px);
  color: color-mix(in srgb, var(--color-hero-accent) 75%, var(--color-white));
  margin: calc(-1 * var(--space-3)) 0 0;
}

.hero__niches span:not(:last-child)::after {
  content: "\00B7";
  margin-left: var(--space-2);
  color: rgba(206, 223, 234, 0.7);
}

.hero__headline {
  font-family: var(--font-headline);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--text-hero-h1-mobile);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .hero__headline {
    font-size: var(--text-hero-h1);
  }
}

.hero__subheadline {
  font-size: var(--text-body-lg-mobile);
  font-weight: 500;
  color: rgba(250, 251, 252, 0.85);
  margin: 0;
  max-width: 62ch;
}

/* Same fix as .system__body strong: bold alone reads heavier, not brighter,
   since it inherits the paragraph's colour. Base opacity dropped from 0.94 to
   0.85 (matching .system__body p) so there's an actual gap for the bolded
   words to jump across to full white — at 0.94 the two were nearly identical. */
.hero__subheadline strong {
  color: var(--color-white);
  font-weight: 700;
}

@media (min-width: 640px) {
  .hero__subheadline {
    font-size: var(--text-body-lg);
  }
}

.hero .btn {
  margin-top: var(--space-2);
}

/* ============ Results / Proof ============ */
/* No desktop padding bump here deliberately (every other content section
   steps up to --space-9 at 1024px+) — this is the densest card-grid
   section on the page, kept a step tighter than roomier editorial
   sections per the homepage spacing pass, 2026-07-17. */
.results {
  background: var(--color-white);
  padding-block: var(--space-8);
}

.results__intro {
  max-width: 68ch;
  margin-bottom: var(--space-7);
}

.results__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .results__heading {
    font-size: var(--text-h2);
  }
}

.results__intro-text {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0;
}

@media (min-width: 640px) {
  .results__intro-text {
    font-size: var(--text-body-lg);
  }
}

.results__grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

@media (min-width: 640px) {
  .results__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .results__grid {
    grid-template-columns: 1fr 1.1fr 1fr;
  }

  /* Summit Adventures is the strongest result — shown first in the page's
     actual code (so it's first on mobile too), moved to the visually
     emphasized center column here on desktop only. */
  .results__item:nth-child(1) { order: 2; }
  .results__item:nth-child(2) { order: 1; }
  .results__item:nth-child(3) { order: 3; }
}

.results__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .results__item--featured .results__card {
    transform: translateY(-14px);
    box-shadow: 0 4px 10px rgba(20, 24, 29, 0.08), 0 16px 32px rgba(20, 24, 29, 0.14);
  }
}

.results__card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04), 0 6px 16px rgba(20, 24, 29, 0.06);
}

/* Left accent bar + warm tint + tighter tracking — reads more assertive
   through structure and density rather than size (keeps the same Bitter
   weight/size that fits the tightest card in 2 lines). Same "flagged"
   device as the Five Steps accent-bar cards elsewhere on this page. */
.results__card-headline-bar {
  margin: 0;
  padding: var(--space-3) var(--space-5) var(--space-3) 20px;
  border-left: 4px solid var(--color-cta);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--text-body-lg-mobile);
  line-height: 1.3;
  letter-spacing: -0.01em;
  min-height: 66px;
  color: var(--color-cta);
  background: color-mix(in srgb, var(--color-cta) 6%, var(--color-paper));
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .results__card-headline-bar {
    font-size: var(--text-body-lg);
    min-height: 70px;
  }
}

/* 4:3 below 640px — at full mobile card width a 1:1 square grows tall
   enough to fill most of one screen per card; square is restored at 640px+
   once the grid goes multi-column and cards (and their photos) are back to
   a narrower share of the page width. 2026-07-22. */
.results__card-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 2px dashed var(--color-border);
  background: repeating-linear-gradient(45deg, rgba(24, 27, 25, 0.04) 0 10px, transparent 10px 20px);
  text-align: center;
}

@media (min-width: 640px) {
  .results__card-photo {
    aspect-ratio: 1 / 1;
  }
}

/* Source photo is a centered headshot-style square; cropping it down to 4:3
   at the default center position cut into the top of his head. Shifted
   toward the top of the frame — balanced against also not cropping too much
   of the shirt logo below. Square view at 640px+ is unaffected (uses the
   full square, no cropping needed there). 2026-07-22. */
@media (max-width: 639px) {
  .results__card-photo--nico img {
    object-position: 50% 15%;
  }

  .results__card-photo--olivia img {
    object-position: 50% 35%;
  }
}

.results__card-photo span {
  display: block;
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-muted-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.results__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.results__card-body {
  padding: var(--space-4) var(--space-6);
}

.results__card-tag {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-muted-ink);
  margin: 0;
}

.results__card-caption {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-lg-mobile);
  color: var(--color-ink);
  margin: 0;
}

@media (min-width: 640px) {
  .results__card-caption {
    font-size: var(--text-body-lg);
  }
}

.results__cta {
  text-align: center;
}

/* ============ The Problem ============ */
.problem {
  background: var(--color-paper);
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .problem {
    padding-block: var(--space-9);
  }
}

.problem__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .problem__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }
}

.problem__text {
  flex: 1 1 auto;
  min-width: 0;
}

.problem__photo-col {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .problem__photo-col {
    flex-direction: column;
    gap: var(--space-4);
    flex: 0 0 240px;
  }
}

.problem__frame {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(24, 27, 25, 0.12);
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04), 0 6px 16px rgba(20, 24, 29, 0.06);
  aspect-ratio: 3 / 4;
}

.problem__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: url(#duotone-paper);
}

.problem__intro {
  max-width: 68ch;
  margin-bottom: var(--space-6);
}

.problem__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .problem__heading {
    font-size: var(--text-h2);
  }
}

.problem__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 65ch;
  margin-bottom: var(--space-7);
}

.problem__body p {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0;
}

@media (min-width: 640px) {
  .problem__body p {
    font-size: var(--text-body-lg);
  }
}

.problem__quote {
  font-family: var(--font-accent);
  font-weight: 500;
  font-style: normal;
  font-size: var(--text-quote-mobile);
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 65ch;
  margin: 0;
  padding-left: var(--space-5);
  border-left: 4px solid var(--color-pine);
}

@media (min-width: 640px) {
  .problem__quote {
    font-size: var(--text-quote);
  }
}

/* ============ Old Way vs New Way ============ */
.old-new {
  background: var(--color-white);
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .old-new {
    padding-block: var(--space-9);
  }
}

.old-new__intro {
  max-width: 68ch;
  margin-bottom: var(--space-7);
}

.old-new__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .old-new__heading {
    font-size: var(--text-h2);
  }
}

.old-new__closing {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: var(--text-quote-mobile);
  line-height: 1.5;
  color: var(--color-ink);
  max-width: 60ch;
  text-align: center;
  /* No top margin here deliberately — .contrast's own margin-bottom
     (var(--space-8), below) already produces this gap via normal
     block-margin flow between adjacent siblings; a duplicate margin-top
     here would only collapse to the same 64px, not stack, but having
     both was fragile (would silently double if .contrast's display
     ever changed away from plain block flow). Homepage spacing pass,
     2026-07-17 cleanup — no visual change. */
  margin: 0 auto;
}

@media (min-width: 640px) {
  .old-new__closing {
    font-size: var(--text-quote);
  }
}

/* Old way vs. New Opportunity — deliberately opposite visual treatment,
   so "avoid this" and "this is the answer" can't be mistaken for each other */
.contrast {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .contrast {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.contrast__old {
  background: var(--color-grey);
  border-radius: 4px;
  padding: var(--space-6);
}

.contrast__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-4);
}

.contrast__label--old {
  color: var(--color-muted-ink);
}

.contrast__label--new {
  color: var(--color-white);
}

.contrast__old-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contrast__old-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-body);
  color: var(--color-muted-ink);
  line-height: 1.5;
}

.contrast__icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 0.15em;
}

.contrast__old-list .contrast__icon {
  color: var(--color-muted-ink);
  opacity: 0.75;
}

.contrast__old-list strong {
  color: var(--color-ink);
  font-weight: 700;
}

.contrast__new {
  background: var(--color-pine);
  border-radius: 4px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contrast__new-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contrast__new-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-body-lg-mobile);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.5;
}

@media (min-width: 640px) {
  .contrast__new-list li {
    font-size: var(--text-body-lg);
  }
}

.contrast__new-list .contrast__icon {
  width: 18px;
  height: 18px;
  color: var(--color-hero-accent);
  margin-top: 0.2em;
}

/* ============ Introducing the Booking Accelerator System ============ */
.system {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .system {
    padding-block: var(--space-9);
  }
}

.system::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -8%;
  width: 55vw;
  height: 55vw;
  max-width: 600px;
  max-height: 600px;
  background-image: url("../assets/logos/wavex-logo-icon-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06;
  pointer-events: none;
}

.system .container {
  position: relative;
  z-index: 1;
}

.system__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.system__intro {
  max-width: 68ch;
  margin-bottom: 0;
}

.system__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-white);
  font-size: var(--text-h2-mobile);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .system__heading {
    font-size: var(--text-h2);
  }
}

.system__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 65ch;
}

.system__body p {
  font-size: var(--text-body-lg-mobile);
  color: rgba(250, 251, 252, 0.85);
  margin: 0;
}

/* Bold text was already bold (the browser's default <strong> weight) but
   inherited the paragraph's 85%-opacity colour, so it never actually read
   brighter — just heavier. Bumping to full white is what makes it pop. */
.system__body strong {
  color: var(--color-white);
  font-weight: 700;
}

@media (min-width: 640px) {
  .system__body p {
    font-size: var(--text-body-lg);
  }
}

.system__loop-wrap {
  width: 100%;
}

/* Desktop/tablet: rectangular button loop — 4 nodes top and bottom, arrows all four sides. */
.loop-rect {
  display: none;
}

@media (min-width: 1024px) {
  .loop-rect {
    display: grid;
    grid-template-columns: minmax(118px, 1fr) 30px minmax(118px, 1fr) 30px minmax(118px, 1fr) 30px minmax(118px, 1fr);
    align-items: stretch;
    row-gap: var(--space-3);
    column-gap: var(--space-2);
    max-width: 840px;
    margin-inline: auto;
  }
}

.loop-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4) var(--space-3);
  background: rgba(250, 251, 252, 0.08);
  border: 1px solid rgba(250, 251, 252, 0.22);
  border-radius: 4px;
}

.loop-node__icon {
  color: var(--color-hero-accent);
  line-height: 0;
}

.loop-node__icon .icon {
  width: 22px;
  height: 22px;
}

.loop-node__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
  color: var(--color-white);
}

.loop-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-hero-accent);
  font-size: 18px;
  line-height: 1;
}

/* Mobile: single-column stack, uniform tiles */
.loop-stack {
  display: block;
}

@media (min-width: 1024px) {
  .loop-stack {
    display: none;
  }
}

.loop-stack__title {
  font-family: var(--font-headline);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-white);
  font-size: var(--text-h3-mobile);
  margin: 0 0 var(--space-5);
}

.loop-stack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.loop-stack__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.loop-stack__tile {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(250, 251, 252, 0.08);
  border: 1px solid rgba(250, 251, 252, 0.22);
  color: var(--color-hero-accent);
}

.loop-stack__tile .icon {
  width: 20px;
  height: 20px;
}

/* Thin connector line between tiles, timeline-style */
.loop-stack__list li:not(:last-child) .loop-stack__tile::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: var(--space-4);
  background: rgba(250, 251, 252, 0.25);
}

.loop-stack__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.loop__caption {
  margin: var(--space-5) 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  color: var(--color-hero-accent);
  text-align: center;
  max-width: 460px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .loop__caption {
    margin-top: var(--space-6);
  }
}

/* ============ The Framework ============ */
/* White, not paper — pairs this section with .system (the Booking
   Accelerator/circular-diagram section) above it as the "mechanism" half
   of the page, echoed via navy numbers/icons below. .why is the paper
   counterpart to this swap, keeping the no-two-adjacent-backgrounds rule
   intact page-wide: navy(system) -> white(framework) -> paper(why). */
/* No desktop padding bump here deliberately, same reasoning as .results
   above it — a dense card list, kept a step tighter than roomier
   editorial sections per the homepage spacing pass, 2026-07-17. */
.framework {
  background: var(--color-white);
  padding-block: var(--space-8);
}

.framework__intro {
  max-width: 68ch;
  margin-bottom: var(--space-7);
}

.framework__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .framework__heading {
    font-size: var(--text-h2);
  }
}

.framework__intro-text {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0;
}

@media (min-width: 640px) {
  .framework__intro-text {
    font-size: var(--text-body-lg);
  }
}

/* Individual cards again (not a shared panel) — reverted after seeing the
   shared-panel version live on the new white section: without a paper
   tint to sit on, one continuous white panel had nothing to visually
   separate it from .framework's own white background. Narrower centered
   column, not full page width, now that rows are shorter (see below) —
   full width read as excessively empty once the row height dropped. */
.steps-panel {
  max-width: 960px;
  margin-inline: auto;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  counter-reset: step;
}

/* Each step is its own white card again, distinguished from .framework's
   white section background by its own border/shadow (same technique the
   Results cards already use on white) plus a navy left-edge accent —
   reads as a card without needing a paper tint anywhere in this section.
   Grid, not flex — number/icon/heading/text rearrange non-linearly
   between breakpoints (icon pairs with the number on mobile but moves to
   the opposite end on desktop; heading pairs with the number on desktop
   but stacks separately on mobile), which named grid areas handle
   without touching DOM order. counter() on ::before still works as a
   grid item; grid-area applies to generated boxes same as real elements. */
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num  icon"
    "head head"
    "text text";
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  align-items: start;
  /* A near-white card was getting lost against this section's own white
     background — a plain neutral border wasn't enough definition. A
     whisper of navy in the fill plus a navy-toned (not neutral-gray)
     border gives real separation while staying "navy and white," no
     paper reintroduced. */
  background: color-mix(in srgb, var(--color-navy) 4%, var(--color-white));
  border: 1px solid rgba(27, 58, 92, 0.22);
  border-left: 3px solid var(--color-navy);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 1px 3px rgba(20, 24, 29, 0.05), 0 12px 28px rgba(20, 24, 29, 0.08);
  padding: var(--space-5) var(--space-6);
}

/* Desktop: number pairs with the heading on one line (left), icon moves
   to the opposite end (far right), paragraph fills the middle — shorter
   per-row than heading-above-paragraph, and gives the icon a reason to
   be on the right instead of leaving that space empty. */
@media (min-width: 768px) {
  .steps li {
    grid-template-columns: auto 17rem 1fr auto;
    grid-template-areas: "num head text icon";
    column-gap: var(--space-5);
    row-gap: 0;
    align-items: center;
  }
}

.steps__icon {
  grid-area: icon;
  justify-self: end;
  align-self: start;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-navy) 8%, var(--color-white));
  color: var(--color-navy);
}

@media (min-width: 768px) {
  .steps__icon {
    align-self: center;
  }
}

.steps__icon .icon {
  width: 22px;
  height: 22px;
}

.steps li::before {
  grid-area: num;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-headline);
  font-weight: 900;
  color: var(--color-navy);
  font-size: var(--text-stat-mobile);
  line-height: 1;
}

@media (min-width: 640px) {
  .steps li::before {
    font-size: var(--text-stat);
  }
}

@media (min-width: 768px) {
  .steps li::before {
    width: 3.4rem;
  }
}

.steps li h4 {
  grid-area: head;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-body);
  margin: 0;
}

.steps li p {
  grid-area: text;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-muted-ink);
  font-size: var(--text-caption);
  line-height: 1.55;
  margin: 0;
  max-width: 62ch;
}

/* ============ Why Operators Choose WaveX ============ */
/* Paper, not white — pairs this section with .problem (the Challenge)
   above it as the "speaks to the operator" half of the page. See the
   comment on .framework for the full page-wide rhythm this swap keeps intact. */
.why {
  background: var(--color-paper);
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .why {
    padding-block: var(--space-9);
  }
}

.why__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .why__layout {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-9);
  }
}

/* margin-top added, homepage spacing pass 2026-07-17 — this gap between
   the heading and photo was 0px at mobile (only the desktop override
   below had a margin-top), which read as an oversight, not a choice. */
.why__photo-col {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .why__photo-col {
    margin-top: var(--space-6);
    margin-bottom: 0;
  }
}

.why__frame {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(24, 27, 25, 0.12);
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04), 0 6px 16px rgba(20, 24, 29, 0.06);
  aspect-ratio: 16 / 9;
}

.why__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: url(#duotone-paper);
}

.why__intro {
  max-width: 68ch;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .why__intro {
    flex: 0 1 500px;
  }
}

.why__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .why__heading {
    font-size: var(--text-h2);
  }
}

/* One shared white card holding all five bullets — pops against this
   section's paper background without individual card padding/borders or
   dividers adding extra height; spacing between items is just the old
   32px gap, same rhythm as the original freestanding-bullets version. */
.why__grid {
  list-style: none;
  margin: 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.03), 0 10px 24px rgba(20, 24, 29, 0.05);
}

@media (min-width: 1024px) {
  .why__grid {
    max-width: 460px;
  }
}

.why__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
}

.why__item-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-pine) 18%, transparent);
  color: var(--color-pine);
}

.why__item-icon .icon {
  width: 22px;
  height: 22px;
}

.why__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.why__item-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--color-ink);
  margin: 0;
}

.why__item-text {
  font-size: var(--text-body);
  color: var(--color-muted-ink);
  line-height: 1.5;
  margin: 0;
}

/* ============ Mid-page CTA band ============ */
.mid-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-pine);
  color: var(--color-white);
  padding-block: var(--space-7);
  text-align: center;
}

.mid-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8%;
  width: 50vw;
  height: 50vw;
  max-width: 560px;
  max-height: 560px;
  transform: translateY(-50%);
  background-image: url("../assets/logos/wavex-logo-icon-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.07;
  pointer-events: none;
}

.mid-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 620px;
  margin-inline: auto;
}

.mid-cta__heading {
  font-family: var(--font-headline);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--text-h2-mobile);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .mid-cta__heading {
    font-size: var(--text-h2);
  }
}

.mid-cta__text {
  font-size: var(--text-body);
  color: rgba(250, 251, 252, 0.85);
  margin: 0;
}

/* ============ Who This Is For ============ */
.fit {
  background: color-mix(in srgb, var(--color-paper) 85%, var(--color-grey) 15%);
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .fit {
    padding-block: var(--space-9);
  }
}

.fit__intro {
  max-width: 680px;
  margin-bottom: var(--space-6);
}

.fit__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .fit__heading {
    font-size: var(--text-h2);
  }
}

.fit__intro-text {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0;
}

@media (min-width: 640px) {
  .fit__intro-text {
    font-size: var(--text-body-lg);
  }
}

.fit__grid {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

@media (min-width: 768px) {
  .fit__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fit__card {
  padding: var(--space-6);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04), 0 6px 16px rgba(20, 24, 29, 0.06);
}

.fit__card--yes {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.fit__card--no {
  background: var(--color-black);
  border: 1px solid rgba(250, 251, 252, 0.12);
}

.fit__card-heading {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--text-h3-mobile);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.fit__card--no .fit__card-heading {
  color: var(--color-white);
}

@media (min-width: 640px) {
  .fit__card-heading {
    font-size: var(--text-h3);
  }
}

.fit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fit__list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-body);
  color: var(--color-muted-ink);
  line-height: 1.5;
}

.fit__card--no .fit__list li {
  color: rgba(250, 251, 252, 0.8);
}

.fit__icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.15em;
}

.fit__list--yes .fit__icon {
  color: var(--color-pine);
}

.fit__list--no .fit__icon {
  color: var(--color-hero-accent);
}

/* ============ Meet the Founder ============ */
.founder {
  background: var(--color-white);
  padding-block: var(--space-8);
}

@media (min-width: 1024px) {
  .founder {
    padding-block: var(--space-9);
  }
}

.founder__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .founder__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-9);
  }
}

.founder__intro {
  max-width: 68ch;
}

@media (min-width: 1024px) {
  .founder__intro {
    flex: 0 1 280px;
  }
}

.founder__photo-col {
  margin-top: var(--space-4);
}

/* 4:3 below 1024px — below that breakpoint .founder__layout is stacked
   (see above) so this frame spans the full column width; at a 4:5 portrait
   ratio that's even taller than the results-card square problem fixed
   above. Full 4:5 portrait is kept once .founder__layout goes row-based at
   1024px+ and this column narrows to 280px. 2026-07-22. */
.founder__frame {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(24, 27, 25, 0.12);
  box-shadow: 0 2px 6px rgba(20, 24, 29, 0.10), 0 12px 28px rgba(20, 24, 29, 0.16);
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .founder__frame {
    aspect-ratio: 4 / 5;
  }
}

.founder__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* At the default center crop, the 4:3 mobile ratio cut into the top of his
   head — shifted up, balanced against keeping the bowl/chopsticks still
   fully in frame at the bottom. Only applies below 1024px, matching the
   4:3 ratio above; the 4:5 portrait at 1024px+ isn't cropped this tightly
   and doesn't need it. 2026-07-22. */
@media (max-width: 1023px) {
  .founder__frame img {
    object-position: 50% 30%;
  }
}

.founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 65ch;
}

.founder__body p {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0;
}

@media (min-width: 640px) {
  .founder__body p {
    font-size: var(--text-body-lg);
  }
}

.founder__testimonial {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.founder__testimonial-label {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-caption);
  color: var(--color-ink);
  margin: 0;
}

.founder__video {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}

.founder__video-frame {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 9 / 16;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(24, 27, 25, 0.12);
}

.founder__video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 48px — the thumb-target minimum (was 44px). */
.founder__video-play.founder__video-play {
  width: 48px;
  height: 48px;
}

.founder__video-play svg {
  width: 17px;
  height: 20px;
}

/* ============ Final CTA + Footer ============ */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 55vw;
  height: 55vw;
  max-width: 600px;
  max-height: 600px;
  background-image: url("../assets/logos/wavex-logo-icon-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
}

/* Was flat --space-9 (96px) at every breakpoint — the only section on the
   page with no mobile/desktop split at all, giving mobile the same
   weight as desktop. Split like every other section instead: still a
   substantial closing statement at desktop, less disproportionate on
   mobile. Homepage spacing pass, 2026-07-17. */
.final-cta {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: var(--space-8);
  border-bottom: 1px solid rgba(250, 251, 252, 0.12);
}

@media (min-width: 1024px) {
  .final-cta {
    padding-block: var(--space-9);
  }
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 620px;
  margin-inline: auto;
}

.final-cta__heading {
  font-family: var(--font-headline);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--text-h2-mobile);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .final-cta__heading {
    font-size: var(--text-h2);
  }
}

.final-cta__text {
  font-size: var(--text-body);
  color: rgba(250, 251, 252, 0.85);
  margin: 0;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer-bottom img {
  height: 32px;
  width: auto;
}

.footer-bottom__tagline {
  font-size: var(--text-caption);
  color: rgba(250, 251, 252, 0.7);
  margin: 0;
}

.footer-bottom__copyright {
  font-size: var(--text-caption);
  color: rgba(250, 251, 252, 0.5);
  margin: 0;
}

/* ============ Client Wins / Case Studies ============ */
.client-wins {
  background: var(--color-paper);
}

/* Page intro — reuses the homepage's hero photo/duotone/scrim, but
   deliberately shorter than the homepage's .hero: a secondary-page masthead
   should get out of the way fast and let the first case study peek into view
   on load (matches Heath Media / Generate Listings, the reference sites this
   was benchmarked against). Height is decoupled from .hero on purpose — see
   docs/client-wins-hero-comparison.html for the comparison this was picked
   from. Crop is independently re-tuned for this shorter box, not compensated
   to match the homepage's — the two heroes now serve different jobs (homepage
   = immersive intro, Client Wins = fast masthead), so byte-identical framing
   isn't the goal, just the same photo/duotone mood. */
/* Tighter top spacing than the homepage's .hero (which uses a larger padding
   tuned for its own 580px box) — inheriting that value left too little room
   for this shorter box's content (eyebrow/headline/subtext/jump-nav) and
   clipped the jump-nav off the bottom via overflow:hidden. Verified by
   screenshot after this change, not assumed. */
.cw-hero {
  height: 400px;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

@media (min-width: 1024px) {
  .cw-hero {
    /* Confirmed via an on-page diagnostic that 480px was rendering correctly
       everywhere — the box just wasn't short enough to guarantee a peek on a
       typical (not-maximized-to-4K) browser window. Cut further so the pine
       header is visible without scrolling on ordinary window sizes. Same
       400px at both breakpoints now (kept simple after 360px left the
       jump-nav too close to the pine boundary — verified by screenshot). */
    height: 400px;
  }

  /* Resets the homepage's +30px desktop shift back to default center — that
     value was tuned for .hero's 580px box and would recrop incorrectly at
     this shorter height if inherited as-is. */
  .cw-hero .hero__bg {
    object-position: center center;
  }
}

.cw-hero .hero__inner {
  max-width: 900px;
  gap: var(--space-4);
}

.cw-hero .cw-jump {
  row-gap: var(--space-1);
}

.cw-intro__heading {
  font-family: var(--font-headline);
  font-weight: 900;
  color: var(--color-white);
  font-size: var(--text-hero-h1-mobile);
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-4);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .cw-intro__heading {
    font-size: var(--text-hero-h1);
  }
}

.cw-intro__text {
  max-width: 68ch;
  font-size: var(--text-body-lg-mobile);
  font-weight: 500;
  color: rgba(250, 251, 252, 0.94);
  margin: 0;
}

/* Jump index — quiet wayfinding for visitors landing via a deep link;
   deliberately not sticky/scrollspy so normal top-to-bottom scrollers
   aren't nudged away from reading the hero case study first. */
.cw-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
}

.cw-jump a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: 0.01em;
  color: var(--color-hero-accent);
  text-decoration: none;
  padding-left: var(--space-4);
  border-left: 1px solid rgba(250, 251, 252, 0.25);
}

.cw-jump a:first-child {
  padding-left: 0;
  border-left: none;
}

.cw-jump a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

@media (min-width: 640px) {
  .cw-intro__text {
    font-size: var(--text-body-lg);
  }
}

/* Full-width coral rule on the page background — a single hero-to-body
   accent, sitting flush against the base of the hero, same device as
   .who-intro's coral seam on Who We Help. Used once, not repeated as a
   divider between case studies — separation between stories comes from
   .case's own spacing and each card's own containment instead. Margin-
   bottom only (not top, to stay flush with the hero) gives the first card
   real paper-background clearance so it reads as an independent module
   rather than sitting attached to the hero/coral line. Deliberately tighter
   than the ~96px gap between later cards — just enough clearance to read
   as independent while keeping the card visible above the fold. */
.section-divider {
  height: 4px;
  background: var(--color-cta);
  margin-bottom: var(--space-6);
}

/* One case study */
.case {
  padding-bottom: var(--space-9);
  scroll-margin-top: var(--space-9);
}

/* Header block — a "mini-hero" per case study, seen one at a time as the
   page scrolls (not side-by-side like the homepage results cards). Stat
   headline is --color-ink (the editorial register's standard heading
   color) rather than pine, per direct request — pine stays on the eyebrow
   only, a sparing accent use. */
.case__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.03), 0 10px 24px rgba(20, 24, 29, 0.05);
}

.case__header {
  background: var(--color-white);
  padding-block: var(--space-8);
  text-align: center;
}

/* Bottom padding trimmed one step on mobile — stacked with .case__story's
   own top padding below, the flat --space-8 (same at every breakpoint)
   read as too much dead space between the subhead and "Background" on a
   phone screen. Desktop unchanged, kept spacious as-is. 2026-07-22. */
@media (max-width: 639px) {
  .case__header {
    padding-bottom: var(--space-7);
  }
}

.case__header .container {
  max-width: 820px;
}

/* Editorial body zone — now white (--color-white), matching .case__header
   and .case__card, not paper. Paper here used to match the page's own
   .client-wins background (#E9EDEA) almost exactly, so on a paper page the
   card's body read as barely-there — same tone as the ground it sat on,
   with only .case__card's 1px border/shadow holding the figure/ground
   separation. White reads as a clearly distinct, self-contained surface
   against the paper page. Header and body are now the same white — the
   header's visual weight comes from its centered layout and large stat
   typography, not from a background shift against the body — so no
   internal seam/divider is added; .case__card's own border+shadow is what
   separates the whole card from the page. */
.case__story {
  background: var(--color-white);
  padding-top: var(--space-7);
}

@media (max-width: 639px) {
  .case__story {
    padding-top: var(--space-6);
  }
}

.case__story > .container {
  padding-bottom: var(--space-7);
}

.case__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  letter-spacing: 0.01em;
  color: var(--color-pine);
  margin: 0 0 var(--space-4);
}

.case__stat-headline {
  font-family: var(--font-headline);
  font-weight: 800;
  color: var(--color-ink);
  font-size: var(--text-stat-mobile);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .case__stat-headline {
    font-size: var(--text-stat);
  }
}

/* Coral on the arrow only, not the surrounding number text — coral text
   fails WCAG contrast against navy (~2.8:1, below even the 3:1 large-text
   minimum), so it's scoped to a small glyph rather than the headline. */
.case__stat-arrow {
  color: var(--color-cta);
}

.case__subhead {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-quote-mobile);
  color: var(--color-muted-ink);
  margin: var(--space-4) 0 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .case__subhead {
    font-size: var(--text-quote);
  }
}

/* Two-column body: content + flexible media rail */
.case__layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .case__layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-8);
    align-items: start;
  }
}

.case__content {
  max-width: 70ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.case__section-title {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-pine);
  font-size: var(--text-h3-mobile);
  margin: 0 0 var(--space-4);
}

@media (min-width: 640px) {
  .case__section-title {
    font-size: var(--text-h3);
  }
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.case__body p {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0;
}

@media (min-width: 640px) {
  .case__body p {
    font-size: var(--text-body-lg);
  }
}

/* Standalone bold emphasis line (e.g. the punchy before-state stat) */
.case__emphasis {
  font-weight: 700;
  color: var(--color-ink);
}

/* Bulleted lists — bold marks the number to land on, plain = supporting detail */
.case__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.case__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  line-height: 1.5;
}

@media (min-width: 640px) {
  .case__list li {
    font-size: var(--text-body-lg);
  }
}

.case__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--color-pine);
  border-radius: 1px;
}

.case__body strong,
.case__list strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* Flexible media rail — full-colour proof imagery/video, stacks and flows */
.case__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 460px;
}

@media (min-width: 1024px) {
  .case__media {
    max-width: none;
  }
}

.case__media-item {
  margin: 0;
}

.case__media-item img,
.case__media-item video {
  display: block;
  width: 100%;
  height: auto;
}

/* Static case photos reuse the same square (800x800) source images as the
   homepage results cards — same fix, same reasoning: square at close to
   full mobile width runs tall. 4:3 below 1024px (this page's own
   single-column breakpoint, see .case__layout); untouched at 1024px+,
   where these sit in a narrow 340px side column and square already reads
   fine there. :not(...) keeps this off the video posters, which have
   their own sizing rule below. 2026-07-22. */
@media (max-width: 1023px) {
  .case__media-item:not(.case__media-item--video) img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* Video testimonial thumbnail — a static poster image with a play button
   overlay. Clicking opens the video in a full lightbox (see below) rather
   than playing inline, so this stays a lightweight <img>, not a <video>. */
.case__media-item--video {
  position: relative;
  display: flex;
  justify-content: center;
}

/* A 9:16 poster at the full 340px column width comes out 604px tall — too
   much vertical space next to a text column in this dense layout. Capping
   height (not width) keeps it portrait-shaped (deliberately, so it still
   reads as phone-shot footage) but brings it back in line with how much
   room the other cards' square photos take up. Specificity note: must beat
   .case__media-item img (0,1,1), so this can't just be a single class.
   Mobile gets a smaller cap than desktop (360px vs 480px) — moderate, not
   shrunk to thumbnail size like the Founder section's video, since the
   testimonial video is primary content on this page, not a supporting
   aside; the click-to-play lightbox is identical either way. 2026-07-22. */
.case__media-item--video img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 360px;
}

@media (min-width: 1024px) {
  .case__media-item--video img {
    max-height: 480px;
  }
}

.case__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 4px 10px rgba(20, 24, 29, 0.24), 0 2px 4px rgba(20, 24, 29, 0.16);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Nudges the triangle right — its own bounding box is visually left-heavy,
   so dead-centering the box reads as slightly off-center to the eye. */
.case__video-play svg {
  margin-left: 3px;
}

.case__video-play:hover,
.case__video-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 6px 16px rgba(20, 24, 29, 0.28), 0 2px 6px rgba(20, 24, 29, 0.18);
}

/* Video lightbox — full-viewport overlay, video capped to a share of the
   viewport itself (not the card column) so it always fits on screen
   regardless of the visitor's window size. Shared markup, sits once at the
   end of <body>; JS in main.js fills in the src/poster per video. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-lightbox[hidden] {
  display: none;
}

.video-lightbox__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: color-mix(in srgb, var(--color-black) 80%, transparent);
  cursor: pointer;
}

.video-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 90vw;
  max-height: 90vh;
}

.video-lightbox__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
}

.video-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-lightbox__close:hover,
.video-lightbox__close:focus-visible {
  transform: scale(1.08);
}

/* No-media modifier — collapse to a single centered reading column */
.case--no-media .case__layout {
  grid-template-columns: minmax(0, 1fr);
}

.case--no-media .case__content {
  margin-inline: auto;
}

/* Full-bleed closing band — the case-study card's last section, one per
   case study. Mirrors the site's .final-cta / .final-cta__inner pattern
   (full-width color band + narrow centered content) so it reads as a
   familiar, strong closing moment rather than a new invented shape. The
   card's own overflow:hidden clips this band's bottom corners to match. */
.case__cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7);
  background: var(--color-pine);
  color: var(--color-white);
  text-align: center;
}

.case__cta-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.case__cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6%;
  width: 22vw;
  height: 22vw;
  max-width: 180px;
  max-height: 180px;
  transform: translateY(-50%);
  background-image: url("../assets/logos/wavex-logo-icon-white.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.07;
  pointer-events: none;
}

.case__cta-heading {
  position: relative;
  z-index: 1;
  font-family: var(--font-headline);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-h3-mobile);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .case__cta-heading {
    font-size: var(--text-h3);
  }
}

.case__cta .btn {
  position: relative;
  z-index: 1;
}

.case__next {
  text-align: center;
  margin: var(--space-5) 0 0;
}

.case__next a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-pine);
  text-decoration: none;
}

.case__next a:hover {
  text-decoration: underline;
}

/* ============ Who We Help ============ */
.who {
  background: var(--color-paper);
}

/* This page's hero supporting paragraph (brief-mandated copy, can't be
   shortened) is much longer than Client Wins' one-line version, so it wraps
   to 2-3 lines and pushes the jump-nav low enough to risk getting clipped
   by .hero's overflow:hidden. Widening the text column buys back a line
   on desktop. */
.who .cw-intro__text {
  max-width: 90ch;
}

/* At 1024px+ this page's content now fits the shared .cw-hero 400px box
   with room to spare, so it matches Client Wins' hero height exactly there
   (2026-07-18 request — the two heroes should read as the same size when
   flipping between pages). Below 1024px, a single fixed height doesn't
   work: the jump-nav's wrap point (1 row vs 2) shifts around a lot across
   360-1023px, so whatever fixed number clears the tightest width (was
   510px, tuned for 640px) leaves a lot of dead space at looser widths
   (e.g. 768-850px only needs ~400-410px) — confirmed by a follow-up
   diagnostic after a user screenshot correctly flagged the excess gap.
   height:auto + min-height:400px lets the box hug whatever the content
   actually needs at each width, with Client Wins' 400px as the floor, so
   it's never taller than necessary and never clips either — no per-width
   tuning required. Trade-off: the hero photo's crop now shifts slightly
   with content height across widths, same as the deferred image-alignment
   work already flagged for later. */
.who .cw-hero {
  height: auto;
  min-height: 400px;
}

@media (min-width: 1024px) {
  .who .cw-hero {
    height: 400px;
  }
}

/* Framing intro — sits directly on the page's paper background (no white
   fill) so the pull-quote reads as part of the page, not a boxed banner;
   the 4px --color-cta border-top is kept as the hero-seam device (same
   role as .case__header's on Client Wins) marking the hero-to-body
   transition. Previously had its own white background — removed 2026-07-21,
   the white band read as an unexplained separate section with no clear job. */
/* Bottom padding trimmed below .who-cat's own top padding (var(--space-4)
   mobile / var(--space-5) desktop) stacks on top of this section's bottom
   padding, so left as-is the gap below the text reads bigger than the gap
   above it. Trimmed so both total 48px (--space-7), matching. */
.who-intro {
  border-top: 4px solid var(--color-cta);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

@media (min-width: 880px) {
  .who-intro {
    padding-bottom: var(--space-5);
  }
}

/* Considered-standalone-line treatment: italic Bitter, no border — distinct
   from .problem__quote's bordered pull-quote device (which signals an
   excerpted line from a larger argument; this is an original framing
   sentence, not an excerpt, so that bordered treatment, tried 2026-07-21,
   was a mismatch, reverted same day). Colour matches .who-bridge__credibility
   (this page's own bottom section) rather than .case__subhead's muted-ink,
   since this sentence closes on a confidence/credibility assertion ("we
   understand your world") — the same job as that pine-coloured line, not
   the plain-descriptive job .case__subhead's grey serves. */
.who-intro p {
  max-width: 65ch;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-quote-mobile);
  color: var(--color-pine);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .who-intro p {
    font-size: var(--text-quote);
  }
}

/* Five category blocks — each an editorial card (white panel, two-column on
   desktop: text + one media area) sitting on the paper body. All five get
   identical treatment so none reads as more prominent than another (the
   brief's "keep all five visually equal" rule); the rhythm comes from
   alternating which side the media sits on (.who-card--flip), not from
   varying weight. .who-cat stays the section wrapper (keeps the jump-nav id
   + scroll anchor); the visible card is .who-card inside it. Spacing between
   cards is deliberately tighter than the old full-section padding so the
   page reads as a composed sequence, not one long document. */
.who-cat {
  padding-block: var(--space-4);
  scroll-margin-top: var(--space-6);
}

@media (min-width: 880px) {
  .who-cat {
    padding-block: var(--space-5);
  }
}

.who-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  /* Restrained lift — not the heavy app-card shadow the brief warns against. */
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.03), 0 10px 24px rgba(20, 24, 29, 0.05);
}

@media (min-width: 880px) {
  .who-card {
    /* Text column a touch wider than the media so the 10-bullet categories
       (Adventure, Cultural) never feel cramped. */
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* Text top-aligned (not centred) so every card's heading starts at the same
   vertical position — a consistent top edge across all five cards regardless
   of bullet count. */
.who-card__text {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (min-width: 880px) {
  .who-card__text {
    padding: var(--space-7);
  }
}

/* Media column holds two stacked 16:9 photo frames, top-aligned to match the
   text so the first frame's top lines up with the heading (shared top edge).
   On mobile the second frame hides, so a phone shows one image per card
   between the text blocks. */
.who-card__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: flex-start;
  padding: var(--space-6);
}

@media (min-width: 880px) {
  .who-card__media {
    /* Top/bottom padding matches .who-card__text's (space-7) so the first
       frame aligns with the heading top; inner edge padding is 0. */
    padding: var(--space-7) var(--space-7) var(--space-7) 0;
  }

  /* On the flipped cards the media sits on the left, so its padding flips too. */
  .who-card--flip .who-card__media {
    padding: var(--space-7) 0 var(--space-7) var(--space-7);
  }
}

/* Each photo is a 16:9 landscape frame matching the homepage's .why__frame
   (the giraffe shot) — same border/radius/soft-shadow, so a pine duotone reads
   as a defined figure on the white card. Empty state = subtle pine tint + the
   photo-placeholder glyph. */
.who-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04), 0 6px 16px rgba(20, 24, 29, 0.06);
  background: color-mix(in srgb, var(--color-pine) 14%, var(--color-white));
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 879px) {
  .who-card__frame--second {
    display: none;
  }
}

/* Future photo: drop <img class="who-card__img"> into a frame as its first
   child; it covers the tint + icon. Pine duotone grade, same as Tier 2. */
.who-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#duotone-paper);
}


/* Alternating (zigzag) layout — media moves to the left on the flipped cards
   (Luxury, Active). Desktop only: on mobile every card stays text-first in
   reading order regardless, since the swap is via `order` inside the ≥880px
   grid and the DOM is always text-then-media. */
@media (min-width: 880px) {
  .who-card--flip .who-card__text {
    order: 2;
  }

  .who-card--flip .who-card__media {
    order: 1;
  }
}

.who-cat__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .who-cat__heading {
    font-size: var(--text-h2);
  }
}

.who-cat__lead {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0 0 var(--space-5);
}

@media (min-width: 640px) {
  .who-cat__lead {
    font-size: var(--text-body-lg);
  }
}

.who-cat__list {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Subtly more readable than the muted body register — a touch more weight and
   contrast (not bold), so the bullet lists scan clearly without turning heavy. */
.who-cat__list li {
  font-size: var(--text-body);
  font-weight: 500;
  color: color-mix(in srgb, var(--color-ink) 65%, var(--color-muted-ink));
}

.who-cat__list li::marker {
  color: var(--color-pine);
}

/* Bridging section — sits on the paper body (the white belongs to the cards
   now), centered on a narrow measure, with a short coral rule above the
   heading echoing the hero's coral seam. One composed beat that reconnects to
   the commercial position before the dark final-CTA. */
/* Top/bottom padding deliberately asymmetric — bottom still separates this
   section from the final CTA below and stays at the original generous
   value; top was double-stacking with .who-cat's own bottom padding above
   it, reading as excess dead space, so only the top is tightened. */
.who-bridge {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  text-align: center;
}

@media (min-width: 1024px) {
  .who-bridge {
    padding-top: var(--space-7);
    padding-bottom: var(--space-9);
  }
}

.who-bridge .container {
  max-width: 640px;
}

.who-bridge__rule {
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto var(--space-5);
  background: var(--color-cta);
}

.who-bridge__heading {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

@media (min-width: 640px) {
  .who-bridge__heading {
    font-size: var(--text-h2);
  }
}

.who-bridge__text {
  font-size: var(--text-body-lg-mobile);
  color: var(--color-muted-ink);
  margin: 0 0 var(--space-4);
}

@media (min-width: 640px) {
  .who-bridge__text {
    font-size: var(--text-body-lg);
  }
}

.who-bridge__credibility {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-quote-mobile);
  color: var(--color-pine);
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .who-bridge__credibility {
    font-size: var(--text-quote);
  }
}