:root {
  color-scheme: light;
  /* Fixed design-system token, not brand-driven — "positive number" green reads the
     same regardless of a firm's accent color, same convention as a finance dashboard. */
  --color-positive: #2fae76;
  /* Fixed alert/warning red — announcement_banner's icon. Same reasoning as
     --color-positive: a semantic signal color, not a brand color. */
  --color-alert: #b91c1c;
  /* Fixed muted-text token (nav links, hero subtext) — a neutral slate that reads
     consistently regardless of a firm's brand accent color. */
  --color-muted: #5b6072;
  /* Fixed metadata token (small captions/labels, e.g. stat labels) — per the
     typography style guide (2026-08-24). */
  --color-metadata: #94a3b8;
  /* --color-accent-text and the --color-highlight family (-tint, -label, -shade)
     are derived from the firm's accent by Layout.tsx (app/lib/color/palette.ts) and
     guaranteed to clear WCAG AA for their pairings — icon strokes, stat figures,
     eyebrow labels, banner fills. Never given a literal fallback here. */
  --color-blob-1: #fde68a;
  --color-blob-2: #a7f3d0;
  --color-blob-3: #bfdbfe;
}

* { box-sizing: border-box; }

body { margin: 0; }

/* No default browser margin on any block element (headings already handled below).
   <p>'s ~1em top/bottom UA-stylesheet margin was the real bug behind spacing that
   "didn't seem to change" even after tightening an explicit gap/margin next to it —
   the hidden default was adding on top of it. Every gap in this stylesheet is now
   deliberate: a flex "gap" or an explicit margin at the point of use, never a
   leftover default. (The two places that genuinely relied on default <p> spacing —
   the footer's stacked lines and text_block's paragraphs — get explicit flex gap
   below so they don't collapse to zero.) */
p, ul, ol, dl, blockquote, figure { margin: 0; }

/* Typography per the style guide (2026-08-24): Plus Jakarta Sans/heading weights
   and tracking below are sitewide defaults; individual sections set their own
   font-size via clamp() for the hero-vs-page-vs-card size ranges it calls for.
   No default bottom margin here (deliberately) — an em-based margin blows up
   disproportionately on a clamp()-sized headline, and its interaction with CSS
   margin-collapse (which inline-block buttons don't participate in, but stacked
   <p>/<div> siblings do) is exactly what made section spacing creep larger with
   each addition. Heading-adjacent spacing is set explicitly per section instead —
   usually via "gap" on a flex column, which never collapses and is easy to audit. */
h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.2;
  margin: 0;
}
h1 { font-weight: 800; letter-spacing: -0.028em; }
h2 { font-weight: 800; letter-spacing: -0.022em; }
/* No margin-bottom here (deliberately, same reasoning as the h1/h2 comment
   above) — a global h3 margin-bottom was silently compounding with several
   card titles' own flex "gap" (approach-card, client-profile-detailed,
   team-card, team-roster-card, stats-highlight's insight card), roughly
   doubling the intended spacing in each case. The two titles that render in
   plain block flow (not a gap-based flex column) and still need their own
   spacing set it explicitly: .client-profile__title, .team-member__name. */
h3 { font-weight: 700; font-size: 1.125rem; }

/* Plus Jakarta Sans covers "headings & UI labels" per the style guide — nav
   labels, buttons, badges, and stat figures all need the explicit override
   below, since only h1/h2/h3 pick up --font-heading automatically. */
.site-nav__link,
.site-header__button,
.main-hero__cta,
.section-badge,
.contact-cta__form button {
  font-family: var(--font-heading);
}

/* Reusable eyebrow/kicker label (e.g. "WHO WE SERVE" in a colored pill), and the
   centered heading that follows it — shared by any section with an optional
   badge/heading pair above its content (client_profiles first, more as needed). */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-badge__dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.section-header { text-align: center; margin-bottom: 2rem; }
.section-header__heading { margin-top: 0.6rem; max-width: 42rem; margin-left: auto; margin-right: auto; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); }

a { color: var(--color-primary); }

/* Base typography lives here, not on the plain "body" selector — the --font-body/
   --color-* custom properties are set via inline style on .site (see Layout.tsx),
   and CSS custom properties only cascade to descendants of where they're defined.
   .site is a child of <body>, so a "body { font-family: var(--font-body) }" rule
   would see --font-body as unset (the whole declaration invalid, falling back to
   the browser's default serif) — h1/h2/h3 worked because they're descendants of
   .site and correctly saw --font-heading; plain body text under .site's own
   font-family rule did not, since body is .site's ancestor, not its descendant. */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.68;
  color: #1a1a1a;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}
.site-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo img { max-height: 4.5rem; max-width: 16rem; width: auto; object-fit: contain; display: block; }
.site-logo--placeholder {
  justify-content: center;
  width: 9rem;
  height: 2.75rem;
  border: 1.5px dashed #c7cad1;
  border-radius: 0.5rem;
  color: #9ca3af;
}
.site-logo__placeholder-icon { width: 1.5rem; height: 1.5rem; }

.site-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.site-nav__link {
  text-decoration: none;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}
.site-nav__link:hover { color: var(--color-primary); }
/* Light highlight-tint pill for the current page — distinct from :hover, which only
   shifts color, so a visitor can't mistake "hovering" for "you are here". */
.site-nav__link--active { background: var(--color-highlight-tint); color: var(--color-highlight); }

.site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.site-header__button {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__button--solid { background: var(--color-accent); color: var(--color-on-accent); }
.site-header__button--solid:hover { opacity: 0.9; }
.site-header__button--outline { background: #fff; color: var(--color-primary); border: 2px solid var(--color-primary); }
.site-header__button--outline:hover { background: var(--color-primary); color: #fff; }

/* Main */
.site-main { flex: 1; }
.section { padding: 3rem 1.5rem; }
.section + .section { border-top: 1px solid #eee; }

/* Main hero */
.main-hero { padding: 3rem 1.5rem; }
.main-hero__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
/* A flex column + gap, not margin-top chained down each child — gap never
   collapses, so this is one number to tune instead of N interacting margins. */
.main-hero__content { flex: 1 1 26rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.main-hero__headline { font-size: clamp(2.375rem, 2rem + 2.5vw, 3.75rem); }
.main-hero__subtext { max-width: 32rem; font-size: 1.1rem; color: var(--color-muted); }

.main-hero__cta {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}
.main-hero__cta:hover { opacity: 0.9; }

.main-hero__proof-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(11rem, 1fr));
  gap: 0.85rem;
  max-width: 28rem;
}

/* .proof-card — shared by main_hero's embedded grid above and the standalone
   stat_cards section below (see ProofCard.tsx). One definition, not two. */
.proof-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.75rem;
  background: #fff;
}
/* Gold circle + navy icon — same badge treatment as stats_highlight's checkmark,
   not a one-off; was previously sized for a raw emoji glyph. */
.proof-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.proof-card__icon-svg { width: 1.15rem; height: 1.15rem; color: var(--color-on-accent); }
/* min-width: 0 overrides the flex-item default of min-width: auto, which would
   otherwise refuse to let this column shrink narrower than its content's
   natural (unwrapped) width — needed now that the card itself is a fixed
   width instead of growing to fit. */
.proof-card__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
/* line-height: 1.2 here, not the inherited sitewide 1.68 (tuned for body prose) —
   at a tight 0.1rem gap, each span's own inherited leading was contributing more
   visual space than the gap itself. */
.proof-card__label { font-size: 0.875rem; line-height: 1.2; color: var(--color-metadata); }
.proof-card__value { font-family: var(--font-heading); font-weight: 800; line-height: 1.2; color: var(--color-primary); }
.proof-card__delta { margin-left: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--color-positive); }

/* Stat cards — standalone version of the same card, compact and left-aligned
   (not stretched to fill the row), usable on any page. */
/* Deliberately skinny — this section is just the card row, not a full content
   block, so it doesn't need the standard .section padding. */
.stat-cards { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.stat-cards__row { max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem; }
/* Muted gray background here specifically (not the shared .proof-card base,
   which main_hero's already-approved white cards also use via the same class) —
   same --color-secondary token as services_overview's item cards. Each card is
   meant to shrink-fit its own content (a short label like "founded" should be a
   narrower card than "clients served"), not stretch to a uniform width — the
   max-width is just a cap so an unusually long label wraps instead of the card
   growing without bound. */
.stat-cards__row .proof-card { flex: 0 1 auto; max-width: 18rem; background: var(--color-secondary); }

.main-hero__media {
  position: relative;
  flex: 1 1 22rem;
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.75rem 1.75rem 1.25rem;
}
.main-hero__image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.5rem;
  display: block;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
}
.main-hero__decor { position: absolute; border-radius: 50%; }
.main-hero__decor--circle { z-index: 1; width: 11rem; height: 11rem; background: var(--color-accent); right: 0; bottom: 0; opacity: 0.65; }
.main-hero__decor--dot-1 { z-index: 3; width: 1.75rem; height: 1.75rem; background: var(--color-positive); top: 0.5rem; right: 0.5rem; opacity: 0.65; }
.main-hero__decor--dot-2 { z-index: 3; width: 0.9rem; height: 0.9rem; background: var(--color-positive); top: 3rem; right: -0.25rem; opacity: 0.65; }
.main-hero__decor--dot-3 { z-index: 3; width: 1.5rem; height: 1.5rem; background: var(--color-positive); top: 55%; left: 0; opacity: 0.65; }

@media (max-width: 56rem) {
  .main-hero__inner { flex-direction: column; }
}
@media (max-width: 30rem) {
  .main-hero__proof-points { grid-template-columns: 1fr; max-width: none; }
}

/* Page hero ("Sub-page Hero" in the admin UI) — the recurring dark banner at the
   top of every non-home page. Dark/left-aligned, unlike the earlier light/centered
   design (2026-08-27 redesign), with the same decorative-dot language as main_hero. */
.page-hero { position: relative; overflow: hidden; background: var(--color-primary); }
.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.page-hero__badge {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-highlight-label);
}
.page-hero__headline { color: #fff; max-width: 52rem; font-size: clamp(1.875rem, 1.6rem + 1.5vw, 2.875rem); }
/* --color-metadata (a blue-gray) instead of plain washed-out white — reads as the
   subtle blue tint from the reference, and reuses an existing token rather than
   inventing a new one-off color. */
.page-hero__subtext { max-width: 34rem; font-size: 0.9375rem; color: var(--color-metadata); }

.page-hero__decor { position: absolute; border-radius: 50%; }
.page-hero__decor--circle-a { width: 22rem; height: 22rem; background: rgba(255, 255, 255, 0.04); bottom: -10rem; right: -4rem; }
.page-hero__decor--circle-b { width: 14rem; height: 14rem; background: rgba(255, 255, 255, 0.05); bottom: -6rem; left: -4rem; }
.page-hero__decor--dot-1 { width: 1.1rem; height: 1.1rem; background: var(--color-accent); top: 2.5rem; right: 8rem; }
.page-hero__decor--dot-2 { width: 0.6rem; height: 0.6rem; background: var(--color-positive); top: 4.5rem; right: 6.5rem; }
.page-hero__decor--dot-3 { width: 0.6rem; height: 0.6rem; background: var(--color-positive); bottom: 1.5rem; left: 1rem; }

/* Shared inner max-width */
.client-profiles__inner,
.services-overview__inner,
.services-list__items,
.team__inner,
.text-block__inner {
  max-width: 72rem;
  margin: 0 auto;
}

/* Client profiles */
/* Flex, not grid — a grid's leftover cells in an incomplete last row (e.g. 5
   items at 3 columns) sit left-aligned with no built-in way to center just
   that row. Flex-wrap + justify-content: center centers any leftover row for
   free, while a full row (3, 4, or 6 items) already spans edge-to-edge so
   centering has no visible effect there. --profile-columns is set inline
   per-render (see ClientProfiles.tsx) from the actual item count — 1-4 items
   get that many columns (one full row), 5-6 fix to 3 columns (3+2 or 3+3). */
.client-profiles--grid .client-profiles__inner,
.client-profiles--cards .client-profiles__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.client-profiles--grid .client-profile,
.client-profiles--cards .client-profile {
  flex: 0 0 calc((100% - (var(--profile-columns, 3) - 1) * 1.5rem) / var(--profile-columns, 3));
}
@media (max-width: 56rem) {
  /* min() here (not a flat 2-column override) so a 1-item row stays full-width
     instead of being forced to a 2-column width it doesn't need. */
  .client-profiles--grid .client-profile,
  .client-profiles--cards .client-profile {
    flex-basis: calc((100% - (min(var(--profile-columns, 3), 2) - 1) * 1.5rem) / min(var(--profile-columns, 3), 2));
  }
}
@media (max-width: 30rem) {
  .client-profiles--grid .client-profile,
  .client-profiles--cards .client-profile {
    flex-basis: 100%;
  }
}
.client-profiles--list .client-profiles__inner { display: flex; flex-direction: column; gap: 1.25rem; }
.client-profile { text-align: center; }
.client-profiles--list .client-profile { text-align: left; }
.client-profiles--cards .client-profile {
  border: 1px solid #e5e5e5;
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.client-profile__image {
  width: 100%;
  /* Always a landscape 16:9 crop with rounded corners (matches the other
     photo treatments) — object-fit: cover so a portrait upload can't throw off
     the row. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.75rem;
  margin: 0 auto 0.85rem;
  display: block;
}
/* Plain block flow here (no flex/gap), so this h3 needs its own margin-bottom
   to create the gap before the description — unlike every other card title in
   this file, which gets its spacing from the parent's flex "gap" instead. */
.client-profile__title { margin-bottom: 0.4rem; }
.client-profile__description { color: var(--color-muted); }

.client-profile__icon-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 0.85rem;
}
.client-profiles--list .client-profile__icon-chip { margin-left: 0; }
.client-profile__icon-blob { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; opacity: 0.65; }
.client-profile__icon-blob--a { top: 0; left: 0; }
.client-profile__icon-blob--b { bottom: 0; right: 0; }
.client-profile__icon-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.2);
}
.client-profile__icon-svg { width: 1.5rem; height: 1.5rem; color: var(--color-highlight); }

/* Rotating 3-color pastel pair per item — fixed decorative palette, not brand-driven. */
.client-profiles__inner .client-profile:nth-child(3n+1) .client-profile__icon-blob--a { background: var(--color-blob-1); }
.client-profiles__inner .client-profile:nth-child(3n+1) .client-profile__icon-blob--b { background: var(--color-blob-2); }
.client-profiles__inner .client-profile:nth-child(3n+2) .client-profile__icon-blob--a { background: var(--color-blob-3); }
.client-profiles__inner .client-profile:nth-child(3n+2) .client-profile__icon-blob--b { background: var(--color-blob-1); }
.client-profiles__inner .client-profile:nth-child(3n+3) .client-profile__icon-blob--a { background: var(--color-blob-2); }
.client-profiles__inner .client-profile:nth-child(3n+3) .client-profile__icon-blob--b { background: var(--color-blob-3); }

/* Client profiles — "detailed" style: a stacked, two-column row per item, for
   when there's real depth to say about each client type (icon/title/description
   on the left, an intro sentence + bullet points on the right). */
.client-profiles__detailed { max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.client-profile-detailed {
  display: flex;
  /* Clips both columns' flat backgrounds to the card's own rounded corners —
     without this, the two-tone split would poke out past the border-radius. */
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
}
.client-profile-detailed__intro-col {
  flex: 0 0 16rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.75rem;
  /* rgb(241, 245, 249) per design reference — deliberately a touch more blue
     than --color-secondary, not a reuse of that token this time. */
  background: #f1f5f9;
}
.client-profile-detailed__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.25rem;
  border-radius: 0.85rem;
  background: var(--color-accent);
}
.client-profile-detailed__icon-svg { width: 1.5rem; height: 1.5rem; color: var(--color-on-accent); }
.client-profile-detailed__title { font-size: 1.125rem; }
/* rgb(100, 116, 139) per design reference — not --color-muted this time. */
.client-profile-detailed__description { font-size: 0.8125rem; color: #64748b; }

.client-profile-detailed__body-col {
  flex: 1 1 28rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: #fff;
}
.client-profile-detailed__body-intro { font-weight: 600; color: var(--color-primary); font-size: 1.05rem; }
.client-profile-detailed__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.client-profile-detailed__point { display: flex; align-items: baseline; gap: 0.6rem; color: var(--color-muted); }
.client-profile-detailed__point-dot { flex-shrink: 0; align-self: center; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-accent); }

@media (max-width: 48rem) {
  .client-profile-detailed { flex-direction: column; }
  .client-profile-detailed__intro-col { flex: none; }
}

/* Services overview */
.services-overview__grid { display: grid; gap: 0.85rem; }
.services-overview:not(.services-overview--spotlight) .services-overview__grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.services-overview--spotlight .services-overview__grid { grid-template-columns: repeat(2, 1fr); }
.services-overview__item {
  border: 1px solid #e5e5e5;
  border-radius: 0.85rem;
  padding: 0.85rem;
  background: var(--color-secondary);
}
.services-overview__item-icon { width: 1.5rem; height: 1.5rem; color: var(--color-highlight); margin-bottom: 0.35rem; }
.services-overview__name { margin-bottom: 0.15rem; }
.services-overview__description { color: var(--color-muted); }

.services-overview--spotlight .services-overview__inner { display: flex; align-items: center; gap: 2.5rem; }
.services-overview__media {
  position: relative;
  flex: 1 1 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
}
.services-overview__decor { position: absolute; border-radius: 50%; }
.services-overview__decor--circle-1 { z-index: 0; width: 16rem; height: 16rem; background: var(--color-blob-1); top: 0; left: 2rem; opacity: 0.65; }
.services-overview__decor--circle-2 { z-index: -1; width: 17rem; height: 17rem; background: var(--color-secondary); top: 1rem; left: 4rem; }
.services-overview__decor--circle-3 { z-index: 0; width: 8rem; height: 8rem; background: var(--color-blob-3); opacity: 0.65; bottom: 1rem; left: 0; }
.services-overview__decor--circle-4 { z-index: 0; width: 10rem; height: 10rem; background: var(--color-blob-2); opacity: 0.65; bottom: 0; right: 2rem; }
.services-overview__spotlight {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  text-align: center;
  box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.25);
}
/* Same fix as main-hero__proof-point-*: tight line-height, not the inherited
   sitewide 1.68, so the gap value is the actual visual gap. */
.services-overview__spotlight-value { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; line-height: 1.2; color: var(--color-highlight); }
.services-overview__spotlight-label { color: var(--color-muted); font-weight: 600; line-height: 1.2; }

.services-overview__content { flex: 1 1 26rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.services-overview__heading { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }
.services-overview__subtext { color: var(--color-muted); max-width: 34rem; }
.services-overview__subtext--centered { margin: 0.6rem auto 0; text-align: center; }

@media (max-width: 56rem) {
  .services-overview--spotlight .services-overview__inner { flex-direction: column; align-items: stretch; }
  .services-overview--spotlight .services-overview__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 26rem) {
  .services-overview__grid { grid-template-columns: 1fr; }
}

/* Services list */
.services-list__items { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.services-list--detailed .services-list__items { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.services-list__item {
  border-left: 3px solid var(--color-accent);
  padding-left: 1rem;
}
/* Plain block flow (no flex/gap) — same reasoning as .client-profile__title. */
.services-list__name { margin-bottom: 0.4rem; }
.services-list__description { color: var(--color-muted); }

/* Services list — "expanded" style: a two-column benefit card per service. */
.services-list--expanded .services-list__items { display: flex; flex-direction: column; gap: 1.5rem; }
.service-card {
  display: flex;
  /* Clips both columns' flat backgrounds to the card's own rounded corners —
     same reasoning as .client-profile-detailed. */
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 1.25rem;
}
.service-card__content { flex: 1 1 30rem; display: flex; flex-direction: column; gap: 1rem; padding: 2.25rem; background: #fff; }
.service-card__header { display: flex; align-items: center; gap: 0.85rem; }
.service-card__index {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
}
.service-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  /* Same highlight tint as .site-nav__link--active's current-page pill —
     reused here rather than inventing a new one-off tint. */
  background: var(--color-highlight-tint);
}
.service-card__icon-svg { width: 1.25rem; height: 1.25rem; color: var(--color-highlight); }
.service-card__title { font-size: 1.25rem; }
.service-card__description { color: var(--color-muted); }
.service-card__tools { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 0.25rem; }
.service-card__tools-label {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-highlight-tint);
  color: var(--color-highlight);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.service-card__tools-value { font-style: italic; color: var(--color-muted); }

.service-card__benefits {
  flex: 1 1 26rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2.25rem;
  background: var(--color-secondary);
}
.service-card__benefits-label {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.service-card__benefits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.service-card__benefit { display: flex; align-items: baseline; gap: 0.85rem; color: var(--color-primary); }
.service-card__benefit-index {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 56rem) {
  .service-card { flex-direction: column; }
}

/* Testimonials — a single featured quote, not a grid */
.testimonials { background: var(--color-secondary); }
.testimonials__inner {
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.testimonials__mark { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--color-accent-text); }
.testimonials__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary);
}
.testimonials__author { color: var(--color-muted); }
.testimonials__author-title { color: var(--color-muted); }

/* Team */
.team__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}
.team-member { text-align: center; }
.team-member__photo {
  width: 100%;
  max-width: 8rem;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: block;
}
/* Plain block flow (no flex/gap) — same reasoning as .client-profile__title. */
.team-member__name { margin-bottom: 0.4rem; }
.team-member__title { color: var(--color-accent-text); font-weight: 600; margin-bottom: 0.5rem; }
.team-member__bio { color: var(--color-muted); }

/* Silhouette stand-in for a missing team photo — keeps every card in a group
   on the same layout when only some members have photos. */
.team__outer { max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
.team-photo-placeholder { display: flex; align-items: flex-end; justify-content: center; background: #e5e7eb; color: #9ca3af; overflow: hidden; }
.team-photo-placeholder__icon { width: 60%; height: 80%; }
.team-member__photo.team-photo-placeholder { aspect-ratio: 1; align-items: center; }
.team-member__photo.team-photo-placeholder .team-photo-placeholder__icon { width: 65%; height: 65%; }
.team-card__photo.team-photo-placeholder { min-height: 100%; }
@media (max-width: 40rem) { .team-card__photo.team-photo-placeholder { min-height: 14rem; } }

/* Team — "detailed" style: badge/heading above a small grid of bio cards. */
.team--detailed .team__inner { display: flex; flex-direction: column; gap: 2rem; }
.team__header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.team__heading { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }
.team__detailed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 2rem; }
.team-card {
  display: flex;
  /* Clips the photo to the card's own rounded corners — same pattern as
     .service-card / .client-profile-detailed. */
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 1.25rem;
}
.team-card__photo-col { flex: 0 0 11rem; }
.team-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__content { flex: 1 1 18rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.4rem 1.75rem; }
.team-card__header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.team-card__name { font-size: 1rem; }
/* Scoped down from .section-badge's sitewide size — this pill sits inline with
   a name/bio at card scale, not as a section-level eyebrow. */
.team-card__content .section-badge { padding: 0.2rem 0.7rem; font-size: 0.65rem; }
.team-card__bio { color: var(--color-muted); font-size: 0.85rem; }

@media (max-width: 40rem) {
  .team-card { flex-direction: column; }
  .team-card__photo-col { flex: none; height: 14rem; }
}

/* Team — "roster" style: a square-photo card grid for showing the whole team,
   no bio. Same decorative-circle language as page_hero/content_intro, using the
   fixed blob palette rather than brand colors. */
.team--roster { position: relative; overflow: hidden; background: var(--color-secondary); }
.team__decor { position: absolute; z-index: 0; border-radius: 50%; opacity: 0.5; }
.team__decor--circle-a { width: 20rem; height: 20rem; background: var(--color-blob-3); top: -6rem; right: -6rem; }
.team__decor--circle-b { width: 14rem; height: 14rem; background: var(--color-blob-1); bottom: -5rem; left: -4rem; }
.team--roster .team__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2rem; }
/* Fixed at 3 columns (not auto-fit) — the container is wide enough to fit 4+
   at the minmax width auto-fit would otherwise use. */
.team__roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 56rem) {
  .team__roster-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 30rem) {
  .team__roster-grid { grid-template-columns: 1fr; }
}
.team-roster-card { overflow: hidden; border: 1px solid #e5e5e5; border-radius: 1rem; background: #fff; }
.team-roster-card__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.team-roster-card__footer { padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.15rem; }
.team-roster-card__name { font-size: 1rem; }
.team-roster-card__title { color: var(--color-muted); font-size: 0.85rem; }

/* Text block */
.text-block { background-color: #fff; }
.text-block__inner { display: flex; flex-direction: column; gap: 1rem; }

/* Contact CTA — left info column (email/phone + one plain block or a card per
   location) next to a bordered form card. */
.contact-cta__layout { max-width: 72rem; margin: 0 auto; display: flex; align-items: flex-start; gap: 3rem; }
/* flex-grow: 0 — a fixed, narrower column (not one that grows to fill leftover
   space) so the cards inside it stay closer to their content width, with the
   reclaimed space going to the form column instead. */
.contact-cta__info { flex: 0 1 25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-cta__heading { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); }
.contact-cta__intro { font-size: 1.1rem; color: var(--color-muted); }

.contact-cta__primary { display: flex; align-items: center; gap: 0.85rem; }
/* Same highlight-tint chip as .service-card__icon / .site-nav__link--active's
   tint — reused for every email/phone/location icon on this section. */
.contact-cta__icon-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-highlight-tint);
}
.contact-cta__icon-svg { width: 1.15rem; height: 1.15rem; color: var(--color-highlight); }
.contact-cta__primary-text { display: flex; flex-direction: column; gap: 0.1rem; }
.contact-cta__primary-label,
.contact-location__label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-highlight);
}

.contact-cta__locations { display: flex; flex-direction: column; gap: 1rem; }
.contact-location {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-secondary);
}
/* A single location reads as a plain block, not a card — the card chrome only
   earns its keep once there's more than one to visually separate. */
.contact-cta__locations--single .contact-location { border: none; background: none; padding: 0; }
.contact-location__header { display: flex; align-items: center; gap: 0.85rem; }
.contact-location__city { font-size: 0.95rem; }
.contact-location__body { display: flex; flex-direction: column; gap: 0.35rem; }
/* white-space: pre-line — the address is authored as separate lines (street,
   suite, city/state/zip) and should wrap within a line, not collapse them. */
.contact-location__address { color: var(--color-muted); white-space: pre-line; }
.contact-location__phone { display: flex; align-items: center; gap: 0.5rem; color: var(--color-muted); }
.contact-location__phone-icon { flex-shrink: 0; width: 0.9rem; height: 0.9rem; }

/* Office hours — a dark card at the bottom of the locations stack, distinct
   from the light location cards above it. */
.contact-hours { display: flex; flex-direction: column; gap: 0.5rem; border-radius: 1rem; padding: 1.25rem 1.5rem; background: var(--color-primary); }
/* Same highlight tint as .page-hero__badge, reused here for an eyebrow
   label on the same dark-navy background. */
.contact-hours__label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-highlight-label); }
.contact-hours__schedule { font-family: var(--font-heading); color: #fff; font-weight: 700; white-space: pre-line; }
.contact-hours__note { color: var(--color-metadata); }

.contact-cta__form {
  flex: 1 1 40rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid #e5e5e5;
  border-radius: 1.25rem;
  padding: 2rem;
  background: #fff;
}
.contact-cta__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-cta__form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }
.contact-cta__form input,
.contact-cta__form select,
.contact-cta__form textarea {
  font: inherit;
  font-weight: 400;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.6rem;
}
/* Full-width highlight pill — distinct from the site's gold/navy CTA buttons on
   purpose, matching the pull_quote/cta_banner "banner" style's highlight accent
   rather than the accent-gold used for marketing CTAs elsewhere. */
.contact-cta__form button {
  width: 100%;
  padding: 0.9rem 1.9rem;
  background: var(--color-highlight);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.contact-cta__form button:hover { opacity: 0.9; }
.contact-cta__form input[type="radio"],
.contact-cta__form input[type="checkbox"] { padding: 0; border-radius: 0; accent-color: var(--color-highlight); }
.contact-cta__choice { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.contact-cta__choice legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); }
.contact-cta__choice label { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; }
.contact-cta__consent { flex-direction: row; align-items: flex-start; gap: 0.75rem; font-weight: 400; font-size: 0.8rem; color: var(--color-muted); }
.contact-cta__consent input { margin-top: 0.2rem; flex-shrink: 0; }
/* Off-screen rather than display:none — some bots skip display:none fields. */
.contact-cta__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-cta__form-status { margin: 0; font-size: 0.9rem; min-height: 1.25rem; }
.contact-cta__form-status[data-state="error"] { color: #b91c1c; }
.contact-cta__form-status[data-state="success"] { color: #15803d; font-weight: 600; }

@media (max-width: 56rem) {
  .contact-cta__layout { flex-direction: column; }
  .contact-cta__form { width: 100%; }
}
@media (max-width: 30rem) {
  .contact-cta__form-row { grid-template-columns: 1fr; }
}

/* Stats highlight */
.stats-highlight { background: var(--color-secondary); }
.stats-highlight__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.stats-highlight__content { flex: 1 1 26rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.stats-highlight__heading { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }

.stats-highlight__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.stats-highlight__item { display: flex; align-items: baseline; gap: 0.85rem; }
.stats-highlight__check {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.stats-highlight__check-icon { width: 1.1rem; height: 1.1rem; color: var(--color-on-accent); }
.stats-highlight__value { font-family: var(--font-heading); font-weight: 800; color: var(--color-highlight); }
.stats-highlight__label { color: var(--color-muted); }

/* Shared CTA pair (SectionCTAs.tsx) — used by stats_highlight, services_overview. */
.section-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.section-cta {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}
.section-cta--solid { background: var(--color-accent); color: var(--color-on-accent); }
.section-cta--solid:hover { opacity: 0.9; }
.section-cta--outline { background: #fff; color: var(--color-primary); border: 1px solid #cbd0da; }
.section-cta--outline:hover { border-color: var(--color-primary); }

.stats-highlight__insight {
  flex: 1 1 22rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.25);
}
.stats-highlight__insight-badge {
  display: block;
  color: var(--color-highlight);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stats-highlight__insight-heading { margin-top: 0.6rem; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); }
.stats-highlight__insight-body { margin-top: 0.6rem; color: var(--color-muted); }

@media (max-width: 56rem) {
  .stats-highlight__inner { flex-direction: column; align-items: stretch; }
}

/* Trust bar */
.trust-bar { position: relative; padding-top: 2.25rem; padding-bottom: 2.75rem; }
.trust-bar__heading {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-metadata);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.trust-bar__row {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
/* Plain medium gray, not the blue-tinted --color-muted used elsewhere — matches
   the reference more closely than reusing the slate token would have. */
.trust-bar__name { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; color: #6b7280; }
.trust-bar__logo { max-height: 5.5rem; max-width: 22rem; object-fit: contain; filter: grayscale(1) opacity(0.8); }
.trust-bar__accent { position: absolute; bottom: 0; left: 0; right: 0; height: 0.5rem; background: var(--color-accent); }

/* Any section with its own full-bleed background (not the page's default white)
   must not show the ".section + .section" divider line — a thin #eee line reads
   as a stray rendering artifact against a solid/dark fill, not an intentional
   border. Matches the two-class specificity of ".section + .section" (its
   border-top rule) so this override actually wins — a bare one-class selector
   has lower specificity and silently loses to it (found first on .cta-banner,
   generalized here after the same gap turned up on .page-hero/.testimonials/
   .stats-highlight during a consistency pass — every full-bleed section needs
   this, not just the ones that happened to get visually checked first). */
.section.page-hero,
.section.testimonials,
.section.stats-highlight,
.section.cta-banner,
.section.pull-quote,
.section.team--roster,
.section.announcement-banner {
  border-top: none;
}

/* CTA banner — full-bleed closer. Kept compact on purpose: the accent-color
   background already sets it apart, so it doesn't need to be a large section. */
.cta-banner { background: var(--color-accent); text-align: center; padding: 2.25rem 1.5rem; }
.cta-banner__inner { max-width: 38rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.cta-banner__headline { color: var(--color-on-accent); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); }
.cta-banner__subtext { color: var(--color-on-accent); opacity: 0.85; font-size: 0.95rem; }
.cta-banner__button {
  margin-top: 0.35rem;
  display: inline-block;
  padding: 0.7rem 1.9rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
}
.cta-banner__button:hover { opacity: 0.9; }

/* cta_banner "banner" style — horizontal row on a highlight-shade card, used to close
   sub-pages (e.g. Who We Serve) instead of the centered homepage treatment. */
.cta-banner--banner { background: var(--color-secondary); padding: 3rem 1.5rem; text-align: left; }
.cta-banner--banner .cta-banner__row {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem 3rem;
  border-radius: 1.5rem;
  /* A touch darker than --color-highlight; white text sits on it. */
  background: var(--color-highlight-shade);
}
.cta-banner__text { display: flex; flex-direction: column; gap: 0.5rem; }
.cta-banner__badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-highlight-tint); }
.cta-banner--banner .cta-banner__headline { color: #fff; }
.cta-banner--banner .cta-banner__subtext { color: var(--color-highlight-tint); opacity: 1; }
.cta-banner--banner .cta-banner__button { flex-shrink: 0; margin-top: 0; background: var(--color-accent); color: var(--color-on-accent); }
@media (max-width: 48rem) {
  .cta-banner--banner .cta-banner__row { flex-direction: column; align-items: flex-start; }
}

/* Content intro — two-column badge/heading/subtext + decorative circles, usually
   preceding a grid section (client_profiles, etc.). No items/CTA of its own. */
.content-intro__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
/* flex-grow: 0 (fixed at its basis, ~matching where the decorative shapes below
   actually end around 17-18rem) — flex-grow: 1 let this box expand well past the
   visible shapes, leaving dead space before the content column even with a small gap. */
.content-intro__media { position: relative; flex: 0 0 18rem; min-height: 15rem; }
.content-intro__decor { position: absolute; border-radius: 50%; }
.content-intro__decor--circle-1 { width: 13rem; height: 13rem; background: var(--color-blob-1); top: 0; left: 0; opacity: 0.65; }
.content-intro__decor--circle-2 { width: 7rem; height: 7rem; background: var(--color-highlight); opacity: 0.15; bottom: 2rem; left: 1rem; }
.content-intro__decor--circle-3 { width: 9rem; height: 9rem; background: var(--color-blob-2); bottom: 0; left: 4rem; opacity: 0.65; }
.content-intro__decor--dot-1 { width: 1.5rem; height: 1.5rem; background: var(--color-blob-1); top: 4.5rem; left: 15rem; opacity: 0.65; }
.content-intro__decor--dot-2 { width: 0.9rem; height: 0.9rem; background: var(--color-blob-2); top: 7.5rem; left: 16.5rem; opacity: 0.65; }

.content-intro__content { flex: 1 1 26rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.content-intro__heading { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }
.content-intro__subtext { max-width: 34rem; color: var(--color-muted); }

@media (max-width: 56rem) {
  .content-intro__inner { flex-direction: column; align-items: flex-start; }
}

/* Story — the firm's origin narrative: an uploaded photo alongside a badge,
   heading, body paragraphs, and an optional bolded closing line. */
/* align-items: flex-start — a flex column's default (stretch) was forcing the
   badge to fill the full row width, same fix already applied to every other
   badge-holding column (main-hero__content, content-intro__content, etc.). */
.story__inner { max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.story__row { width: 100%; display: flex; align-items: flex-start; gap: 3rem; }
.story__media { flex: 1 1 24rem; }
.story__image { width: 100%; border-radius: 1.25rem; display: block; object-fit: cover; aspect-ratio: 4 / 3; }
.story__content { flex: 1 1 28rem; display: flex; flex-direction: column; gap: 1.25rem; }
.story__heading { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }
.story__paragraph { color: var(--color-muted); }
.story__closing { color: var(--color-primary); font-weight: 700; }

@media (max-width: 56rem) {
  .story__row { flex-direction: column; }
}

/* Pull quote — full-bleed dark statement block, typically following "story". */
.pull-quote { position: relative; overflow: hidden; background: var(--color-primary); }
.pull-quote__inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.pull-quote__content {
  max-width: 44rem;
  border-left: 3px solid var(--color-accent);
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pull-quote__mark { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--color-accent-on-dark); }
.pull-quote__quote { color: #fff; font-size: 1.25rem; line-height: 1.6; }
.pull-quote__closing { color: var(--color-accent-on-dark); font-weight: 700; }
.pull-quote__decor { position: absolute; border-radius: 50%; }
.pull-quote__decor--circle { width: 20rem; height: 20rem; background: rgba(255, 255, 255, 0.04); top: -6rem; right: -4rem; }
.pull-quote__decor--dot { width: 1.1rem; height: 1.1rem; background: var(--color-accent); opacity: 0.65; top: 3.5rem; right: 8rem; }

/* Approach — left badge/heading/subtext next to a fixed 2x2 grid of cards. */
.approach__inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: flex-start; gap: 3rem; }
.approach__content { flex: 1 1 18rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.approach__heading { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); }
.approach__subtext { color: var(--color-muted); }
.approach__grid { flex: 2 1 36rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.approach-card {
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
/* Same overlapping-blob icon treatment as .client-profile__icon-chip — scoped
   to its own classes rather than shared directly, since the two components
   live in unrelated DOM contexts (the nth-child palette rule below needs its
   own selector scope), but the visual is deliberately identical. */
.approach-card__icon-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; }
.approach-card__icon-blob { position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 50%; opacity: 0.65; }
.approach-card__icon-blob--a { top: 0; left: 0; }
.approach-card__icon-blob--b { bottom: 0; right: 0; }
.approach-card__icon-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.2);
}
.approach-card__icon-svg { width: 1.15rem; height: 1.15rem; color: var(--color-highlight); }
.approach-card:nth-child(3n+1) .approach-card__icon-blob--a { background: var(--color-blob-1); }
.approach-card:nth-child(3n+1) .approach-card__icon-blob--b { background: var(--color-blob-2); }
.approach-card:nth-child(3n+2) .approach-card__icon-blob--a { background: var(--color-blob-3); }
.approach-card:nth-child(3n+2) .approach-card__icon-blob--b { background: var(--color-blob-1); }
.approach-card:nth-child(3n+3) .approach-card__icon-blob--a { background: var(--color-blob-2); }
.approach-card:nth-child(3n+3) .approach-card__icon-blob--b { background: var(--color-blob-3); }
.approach-card__text { display: flex; flex-direction: column; gap: 0.35rem; }
.approach-card__title { font-size: 0.95rem; }
.approach-card__description { color: var(--color-muted); font-size: 0.85rem; }

@media (max-width: 56rem) {
  .approach__inner { flex-direction: column; }
  .approach__grid { width: 100%; }
}
@media (max-width: 30rem) {
  .approach__grid { grid-template-columns: 1fr; }
}

/* Announcement banner — a slim full-width notice bar, home page only, sits
   directly under the header (not sticky itself — only the header stays
   pinned while scrolling). Deliberately compact: this is a notice, not a
   content section. */
.announcement-banner { background: var(--color-secondary); padding: 0.85rem 1.5rem; }
.announcement-banner__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}
.announcement-banner__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--color-alert); }
.announcement-banner__message { color: var(--color-primary); font-size: 0.9375rem; }
.announcement-banner__link {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  border-radius: 0.375rem;
}

/* Footer — a simplified duplicate of the header nav (no CTA buttons) plus copyright. */
.site-footer { background: var(--color-primary); }
.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.site-footer__logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  text-decoration: none;
}
.site-footer__logo img { max-height: 2rem; display: block; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.site-footer__nav-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer__nav-link:hover { color: #fff; }
.site-footer__copyright { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; }