/*
 * sections.css -- CGH INJURY LAWYERS Broadsheet section library.
 * ============================================================================
 *  Page-level sections composed from tokens + components + gp-* primitives.
 *  Authored for CGH (Broadsheet register: editorial urgency + trial authority).
 *  Token law: only --gp-* custom properties. Zero raw hex. BEM (cgh- prefix).
 * ============================================================================
 *  Load order: tokens -> base -> typography -> components -> primitives ->
 *  sections(THIS) -> visuals -> motion.
 *  Mobile-first. Breakpoints 390(implicit base) / 640 / 768 / 1024 / 1280.
 *  Overflow law: every grid child gets min-width:0 so long words never push
 *  scrollWidth past clientWidth. Reserved heights -> 0 CLS.
 */

/* ============================================================
   HEADER -- sticky nav shell. Atoms (.cgh-nav, .cgh-megamenu,
   .cgh-phone) live in components.css; this is the bar layout.
   ============================================================ */

.cgh-header {
  position: sticky;
  top: 0;
  z-index: var(--gp-z-sticky);
  background-color: var(--gp-nav-bg);
  border-bottom: 1px solid var(--gp-nav-border);
  transition: box-shadow var(--gp-transition-base), background-color var(--gp-transition-base);
}

/* JS adds .is-stuck after 200px scroll -> raise a shadow. */
.cgh-header.is-stuck {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* Phone link on the dark navy header reads in gold for legibility. */
.cgh-header .cgh-phone {
  color: var(--gp-accent);
}

.cgh-header .cgh-phone:hover {
  color: #ffffff;
}

.cgh-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-space-5);
  min-height: var(--gp-nav-height);
  padding-block: var(--gp-space-3);
}

.cgh-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.cgh-header__logo {
  display: block;
  width: auto;
  height: 110px;
  /* Logo is white+gold on the dark navy header -- no chip needed. */
}

/* .cgh-header__logo-chip removed -- header is now dark navy, chip is unneeded. */

.cgh-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gp-space-4);
  flex-shrink: 0;
}

/* Bilingual EN/ES indicator in the bar -- white on navy. */
.cgh-header__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-caption);
  font-weight: var(--gp-weight-semibold);
  color: #ffffff;
}

.cgh-header__lang-sep {
  color: rgba(255, 255, 255, 0.4);
}

/* Mobile-only tap-to-call control. Compact red (cardinal) circular button that
   fills the dead navy space between the logo and the hamburger. margin-left:auto
   pushes the call + toggle into one cluster on the right so the logo keeps the
   left, with a small gap before the toggle so the two targets read as distinct.
   Hidden >=1024px (the desktop .cgh-header__actions phone takes over there).
   Compact icon (not a labeled pill) so it does not duplicate the full-width
   sticky bottom call bar. */
.cgh-header__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  margin-right: var(--gp-space-2);
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-primary);
  color: var(--gp-static-white);
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(28, 23, 16, 0.30);
  transition: background-color var(--gp-transition-base), transform var(--gp-transition-base);
}

.cgh-header__call:hover {
  background-color: var(--gp-primary-700);
  color: var(--gp-static-white);
}

.cgh-header__call:active {
  transform: scale(0.94);
}

.cgh-header__call:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-static-white);
  outline-offset: 2px;
}

.cgh-header__call-icon {
  width: 22px;
  height: 22px;
}

/* Mobile menu toggle (hidden on desktop) -- white icon on navy. */
.cgh-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gp-radius-md);
  color: #ffffff;
}

.cgh-header__toggle svg {
  width: 26px;
  height: 26px;
}

.cgh-header__toggle:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

/* Desktop nav + actions cluster hidden under 1024; mobile panel + toggle
   take over. The phone and Free Consultation CTA live in .cgh-mobile-nav__cta
   on small screens, so no conversion path is lost. */
.cgh-header__nav { display: none; }
.cgh-header__actions { display: none; }
.cgh-header__call { display: inline-flex; }
.cgh-header__toggle { display: inline-flex; }

/* Mobile (base): shrink logo so header fits at 390px viewport. */
@media (max-width: 1023px) {
  .cgh-header__logo { height: 60px; }
  .cgh-header__bar { min-height: 70px; }
}

@media (min-width: 1024px) {
  .cgh-header__nav { display: flex; }
  .cgh-header__actions { display: flex; }
  .cgh-header__call { display: none; }
  .cgh-header__toggle { display: none; }
}

/* 1024-1279 is the tight band: brand + full nav + actions cluster would
   overrun the 928px usable row. Condense the bar there (tighter gaps, drop
   the decorative EN/ES chip which still lives in the mobile panel + footer),
   then restore the roomy layout at 1280+. Keeps scrollWidth === clientWidth. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cgh-header__bar { gap: var(--gp-space-4); }
  .cgh-header__actions { gap: var(--gp-space-3); }
  .cgh-header__lang { display: none; }
}

/* ----- MOBILE NAV PANEL ----- */
.cgh-mobile-nav {
  display: none;
  border-top: 1px solid var(--gp-nav-border);
  background-color: var(--gp-nav-bg);
  padding: var(--gp-space-4) 0 var(--gp-space-6);
}

.cgh-mobile-nav.is-open {
  display: block;
}

.cgh-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cgh-mobile-nav__link {
  display: block;
  padding: var(--gp-space-4) var(--gp-space-2);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-semibold);
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cgh-mobile-nav__link:hover {
  color: var(--gp-accent);
}

.cgh-mobile-nav__cta {
  margin-top: var(--gp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
}

@media (min-width: 1024px) {
  .cgh-mobile-nav,
  .cgh-mobile-nav.is-open { display: none; }
}

/* ============================================================
   HERO-MEGA -- deep ink panel + mega Fraunces H1 + gold tagline +
   dual CTA + gradient-mesh/photo slot. Hero H1 is the ONLY mega.
   ============================================================ */

.cgh-hero-mega {
  position: relative;
  overflow: hidden;
  background-color: var(--gp-hero-panel);
  color: var(--gp-static-white);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* Coded gradient-mesh ground (gold + cardinal on deep ink). The optional photo
   slot layers above this at low opacity for the Denver cityscape. */
.cgh-hero-mega__bg {
  position: absolute;
  inset: 0;
  z-index: var(--gp-z-base);
  background:
    radial-gradient(60% 80% at 82% 10%, var(--gp-mesh-blob-1), transparent 60%),
    radial-gradient(55% 70% at 6% 92%, var(--gp-mesh-blob-2), transparent 62%),
    radial-gradient(40% 50% at 50% 50%, var(--gp-mesh-blob-3), transparent 70%),
    linear-gradient(135deg, var(--gp-hero-edge), var(--gp-hero-panel) 72%);
  pointer-events: none;
}

/* Optional real photo layer (Denver cityscape). Sits above mesh at 30-40%. */
.cgh-hero-mega__photo {
  position: absolute;
  inset: 0;
  z-index: var(--gp-z-base);
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.34;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.cgh-hero-mega__veil {
  position: absolute;
  inset: 0;
  z-index: var(--gp-z-base);
  background-image:
    linear-gradient(var(--gp-visual-ondark-veil) 1px, transparent 1px),
    linear-gradient(90deg, var(--gp-visual-ondark-veil) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at 30% 30%, var(--gp-static-ink) 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, var(--gp-static-ink) 20%, transparent 75%);
  pointer-events: none;
}

.cgh-hero-mega__inner {
  position: relative;
  z-index: var(--gp-z-raised);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-7);
  align-items: center;
}

.cgh-hero-mega__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-5);
  max-width: 22ch;
  min-width: 0;
}

.cgh-hero-mega__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-3);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-accent);
}

.cgh-hero-mega__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-display-mega);
  font-weight: var(--gp-weight-bold);
  line-height: var(--gp-leading-mega);
  letter-spacing: var(--gp-tracking-mega);
  color: var(--gp-static-white);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

/* Gold accent on a key phrase inside the mega H1. */
.cgh-hero-mega__heading em {
  font-style: normal;
  color: var(--gp-accent);
}

/* Mobile: let the hero H1 use the full column and wrap on word boundaries.
   text-wrap:balance + the 16ch cap narrow the block so long words (e.g.
   "Responsible") were breaking mid-word at 390px. Full width + normal wrap fixes it. */
@media (max-width: 640px) {
  /* The hero text column (__body) keeps its narrow desktop max-width (~209px) on
     mobile, squeezing the H1 so long words break mid-word. Let it use the full column. */
  .cgh-hero-mega__body {
    max-width: none;
  }
  .cgh-hero-mega__heading {
    font-size: clamp(40px, 11.5vw, 48px);
    max-width: none;
    text-wrap: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

/* P1-5: trial-wedge sub-deck -- names the differentiator at peak intent
   (was demoted to the small grey signature line). Qualitative, no number
   pending CGH written sign-off. White text keeps gold scarce (H1 already
   carries the gold em). */
.cgh-hero-mega__deck {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-lg);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-static-white);
  margin: 0;
  max-width: 40ch;
}

.cgh-hero-mega__subhead {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-bone);
  margin: 0;
  max-width: 46ch;
}

.cgh-hero-mega__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-4);
  margin-top: var(--gp-space-2);
}

.cgh-hero-mega__phone-row {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  flex-wrap: wrap;
}

.cgh-hero-mega__phone-label {
  font-size: var(--gp-text-body-sm);
  color: var(--gp-slate-200);
}

/* Hero attorney signature (Direction-C human-first harvest): a real Kevin Cheney
   portrait anchors the "same trial team" promise with a human face above the fold.
   Renders on the dark ink panel; gold ring keeps gold scarce + intentional. */
.cgh-hero-mega__signature {
  display: flex;
  align-items: center;
  gap: var(--gp-space-4);
  margin-top: var(--gp-space-1);
}

.cgh-hero-mega__portrait {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--gp-radius-full);
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--gp-accent);
  box-shadow: var(--gp-shadow-md);
  background: var(--gp-hero-edge);
}

.cgh-hero-mega__signature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cgh-hero-mega__signature-name {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--gp-static-white);
}

.cgh-hero-mega__signature-meta {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-200);
}

/* Hero media column (coded visual or image slot). */
.cgh-hero-mega__media {
  position: relative;
  width: 100%;
  min-width: 0;
}

@media (min-width: 1024px) {
  .cgh-hero-mega__inner {
    grid-template-columns: 7fr 5fr;
  }
  .cgh-hero-mega__body { max-width: none; }
}

@media (max-width: 639px) {
  .cgh-hero-mega__actions { flex-direction: column; align-items: stretch; }
  .cgh-hero-mega__actions .btn { width: 100%; }
}

/* ============================================================
   ATTORNEY BIO HERO  (.cgh-hero-bio)
   Two-column bio hero: name / role / intro / actions left, portrait
   right. The markup ships in all 9 about-*.json bodies but had NO CSS,
   so __inner collapsed to a narrow left stack and left ~44% of the page
   empty light-gray (Dim 1 dead-space hard-gate FAIL, verified live).
   Mirrors .cgh-hero-mega__inner: mobile 1-col -> 7fr 5fr at >=1024px.
   ============================================================ */
.cgh-hero-bio {
  /* Kill the ~200px hollow gap between breadcrumb and H1. */
  padding-block: var(--gp-space-6) var(--gp-space-8);
}

.cgh-hero-bio__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-7);
  align-items: center;
}

.cgh-hero-bio__body {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  min-width: 0;
}

.cgh-hero-bio__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h1);
  font-weight: var(--gp-weight-bold);
  line-height: var(--gp-leading-h1);
  color: var(--gp-primary);
  margin: 0;
}

.cgh-hero-bio__role {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-gold-text);
  margin: 0;
}

.cgh-hero-bio__position {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-ink);
  margin: 0;
  max-width: 52ch;
}

.cgh-hero-bio__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-4);
  margin-top: var(--gp-space-2);
}

.cgh-hero-bio__media {
  position: relative;
  width: 100%;
  min-width: 0;
}

.cgh-hero-bio__photo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--gp-radius-lg);
  box-shadow: var(--gp-shadow-lg);
}

@media (min-width: 1024px) {
  .cgh-hero-bio__inner { grid-template-columns: 7fr 5fr; }
  .cgh-hero-bio__photo { margin-inline: 0 0 0 auto; }
}

@media (max-width: 639px) {
  .cgh-hero-bio__actions { flex-direction: column; align-items: stretch; }
  .cgh-hero-bio__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   QUICK-SUMMARY BLOCK -- 3 scan-bullets + paragraph, NO labeled
   heading, before the first H2 (contract section 7 + universal rule).
   ============================================================ */

.cgh-quick-summary {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  max-width: 72ch;
}

.cgh-quick-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.cgh-quick-summary__item {
  position: relative;
  padding-left: var(--gp-space-6);
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-ink);
}

.cgh-quick-summary__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-accent);
}

.cgh-quick-summary__lede {
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
  margin: 0;
  max-width: 72ch;
}

/* ============================================================
   ASSEMBLING-BENTO -- the signature wow. Mixed tile spans on a
   reserved-height grid so it animates in with 0 CLS. Skins the
   .gp-card-grid primitive; one per page, resolves next to a CTA.
   ============================================================ */

.cgh-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-4);
  /* Reserve min row height so reveal-stagger never collapses layout. */
  grid-auto-rows: minmax(160px, auto);
}

.cgh-bento__tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--gp-space-2);
  padding: var(--gp-space-6);
  border-radius: var(--gp-radius-lg);
  background-color: var(--gp-card-bg);
  border: var(--gp-card-border);
}

/* Feature tile: deep ink ground with mesh, mega number or claim. */
.cgh-bento__tile--feature {
  background-color: var(--gp-hero-panel);
  color: var(--gp-static-white);
  border-color: transparent;
}

.cgh-bento__tile--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--gp-z-base);
  background:
    radial-gradient(70% 90% at 80% 10%, var(--gp-mesh-blob-1), transparent 60%),
    radial-gradient(60% 70% at 10% 90%, var(--gp-mesh-blob-2), transparent 62%);
  pointer-events: none;
}

.cgh-bento__tile--warm { background-color: var(--gp-surface-warm); border-color: transparent; }
.cgh-bento__tile--gold-rule { border-top: 3px solid var(--gp-accent); }

.cgh-bento__content {
  position: relative;
  z-index: var(--gp-z-raised);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.cgh-bento__label {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-gold-text);
  margin: 0;
}

.cgh-bento__tile--feature .cgh-bento__label { color: var(--gp-accent); }

.cgh-bento__figure {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h1);
  font-weight: var(--gp-weight-bold);
  line-height: 1;
  color: var(--gp-primary);
  margin: 0;
}

.cgh-bento__tile--feature .cgh-bento__figure { color: var(--gp-static-white); }

.cgh-bento__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-bento__tile--feature .cgh-bento__title { color: var(--gp-static-white); }

.cgh-bento__body {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  margin: 0;
}

.cgh-bento__tile--feature .cgh-bento__body { color: var(--gp-bone); }

/* Mobile length tighten: single-column bento tiles carry desktop-scale 32px padding
   and 16px gaps, which compounds into a large cream void below the practice-areas grid
   before the buttons. Trimming gap to 12px and tile padding to 24px at <=640px reclaims
   ~200-300px with no tiles or copy removed. Desktop bento layout is untouched. */
@media (max-width: 640px) {
  .cgh-bento { gap: var(--gp-space-3); }
  .cgh-bento__tile { padding: var(--gp-space-5); }
}

@media (min-width: 768px) {
  .cgh-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Mixed spans: feature takes 2x2, others fill the gaps. */
  .cgh-bento__tile--span-2 { grid-column: span 2; }
  .cgh-bento__tile--span-2-row { grid-row: span 2; }
  .cgh-bento__tile--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ============================================================
   STAT-STRIP -- count-up figures on a ruled band. Ledger-safe
   values only. Skins gp-stat-strip from primitives where used.
   ============================================================ */

.cgh-stat-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-5);
  padding-block: var(--gp-space-7);
  border-top: 2px solid var(--gp-ink);
  border-bottom: 2px solid var(--gp-ink);
  list-style: none;
  margin: 0;
}

.cgh-stat-strip__item {
  text-align: center;
  padding: var(--gp-space-3);
  min-width: 0;
}

.cgh-stat-strip__figure {
  display: block;
  font-family: var(--gp-font-display);
  /* Fluid + bounded so a 10-char figure ("$2,527,546") always fits its cell at
     every breakpoint -- 1-col mobile, 2-col tablet, and 4-col desktop where cells
     are narrowest at ~1024. Releases up to 3rem on wide screens. Shared fix. */
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: var(--gp-weight-bold);
  line-height: 1;
  color: var(--gp-primary);
  font-variant-numeric: tabular-nums;
}

.cgh-stat-strip__label {
  display: block;
  margin-top: var(--gp-space-2);
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  max-width: 26ch;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .cgh-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cgh-stat-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cgh-stat-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   PROOF-RESULTS -- named settlements/verdicts. Honest figures only
   (ledger-approved). County + case type, no superiority claims.
   ============================================================ */

.cgh-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-4);
  list-style: none;
  margin: var(--gp-space-2) 0 0;
  padding: 0;
}

.cgh-results__card {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  padding: var(--gp-space-6);
  background-color: var(--gp-white);
  border: var(--gp-card-border);
  border-left: 4px solid var(--gp-accent);
  border-radius: var(--gp-radius-lg);
  min-width: 0;
  transition: border-color var(--gp-transition-base), box-shadow var(--gp-transition-base);
}

.cgh-results__card:hover {
  box-shadow: var(--gp-shadow-md);
}

.cgh-results__figure {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h2);
  font-weight: var(--gp-weight-bold);
  line-height: 1;
  color: var(--gp-ink);
  margin: 0;
  overflow-wrap: anywhere;
}

.cgh-results__type {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-results__meta {
  font-size: var(--gp-text-body-sm);
  color: var(--gp-slate-700);
  margin: 0;
}

.cgh-results__disclaimer {
  margin-top: var(--gp-space-4);
  font-size: var(--gp-text-caption);
  line-height: var(--gp-leading-caption);
  color: var(--gp-slate-700);
  max-width: 80ch;
}

@media (min-width: 768px) {
  .cgh-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cgh-results--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   AUDIENCE FOR / NOT-FOR -- two honest columns.
   ============================================================ */

.cgh-audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-5);
  margin-top: var(--gp-space-2);
}

.cgh-audience__col {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  padding: var(--gp-space-6);
  background-color: var(--gp-white);
  border: var(--gp-card-border);
  border-radius: var(--gp-radius-lg);
  min-width: 0;
}

/* DI item 5: green is off-brand. Top rule uses brand gold; checkmarks use navy for
   AA contrast on the bone card (gold checks would be ~1.7:1 on bone -> too light). */
.cgh-audience__col--for { border-top: 4px solid var(--gp-accent); background-color: var(--gp-bone); }
.cgh-audience__col--not { border-top: 4px solid var(--gp-slate-700); }

.cgh-audience__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  margin: 0;
}

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

.cgh-audience__item {
  position: relative;
  padding-left: var(--gp-space-6);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
}

.cgh-audience__col--for .cgh-audience__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background-color: var(--gp-primary); /* DI item 5: navy check (was off-brand green), ~10:1 on bone */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.cgh-audience__col--not .cgh-audience__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background-color: var(--gp-slate-700);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

@media (min-width: 768px) {
  .cgh-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   PROCESS RAIL -- horizontal numbered steps (NOT a pyramid).
   Vertical stack on mobile, horizontal rail on desktop.
   ============================================================ */

.cgh-process {
  counter-reset: cgh-step;
  list-style: none;
  margin: var(--gp-space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-6);
}

.cgh-process__step {
  position: relative;
  counter-increment: cgh-step;
  padding-left: var(--gp-space-9);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  min-width: 0;
}

.cgh-process__step::before {
  content: counter(cgh-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-hero-panel);
  color: var(--gp-accent);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-bold);
  z-index: var(--gp-z-raised);
}

/* Connector scoped to direct children: orphaned steps outside .cgh-process must
   not draw connectors (an unwrapped step spans the page; its right:-48px line
   forced 48px of horizontal overflow — colorado-springs-pedestrian, 2026-07-03). */
.cgh-process > .cgh-process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: calc(-1 * var(--gp-space-6));
  width: 2px;
  background: linear-gradient(180deg, var(--gp-accent), var(--gp-primary));
  opacity: 0.4;
}

.cgh-process__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-process__body {
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
  margin: 0;
}

@media (min-width: 1024px) {
  .cgh-process {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--gp-space-7);
  }
  .cgh-process__step {
    padding-left: 0;
    padding-top: var(--gp-space-8);
  }
  .cgh-process__step::before { left: 0; }
  .cgh-process > .cgh-process__step:not(:last-child)::after {
    left: 56px;
    top: 27px;
    bottom: auto;
    right: calc(-1 * var(--gp-space-7));
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gp-accent), var(--gp-primary));
  }

  /* DI item 4: dense rails (5+ steps) rendered as 5-7 equal columns of ~150px, turning
     150-250-word bodies into unreadable micro-text (Denver risks / dog-bites process).
     Cap at 3 columns (wraps to 3x2 etc). 3- and 4-step rails keep the single-row flow.
     The horizontal connector line can't survive row-wrapping, so drop it on capped rails;
     the numbered navy circles still anchor the sequence. */
  .cgh-process:has(.cgh-process__step:nth-child(5)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--gp-space-8);
  }
  .cgh-process:has(.cgh-process__step:nth-child(5)) .cgh-process__step:not(:last-child)::after {
    content: none;
  }
}

/* ============================================================
   PULL-QUOTE -- Libre Caslon Display + gold accent bar.
   ============================================================ */

.cgh-pullquote {
  position: relative;
  padding: var(--gp-space-6) 0 var(--gp-space-6) var(--gp-space-6);
  border-left: 4px solid var(--gp-accent);
  max-width: 62ch;
  margin-inline: auto;
}

.cgh-pullquote__text {
  font-family: var(--gp-font-editorial);
  font-size: var(--gp-text-h3);
  font-weight: var(--gp-weight-regular);
  line-height: var(--gp-leading-h3);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-pullquote__cite {
  display: block;
  margin-top: var(--gp-space-4);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-style: normal;
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-slate-700);
}

.surface--ink .cgh-pullquote__text {
  color: var(--gp-static-white);
}

@media (min-width: 768px) {
  .cgh-pullquote { padding-left: var(--gp-space-7); }
  .cgh-pullquote__text {
    font-size: var(--gp-text-h2);
    line-height: var(--gp-leading-h2);
  }
}

/* ============================================================
   FAQ -- <details>/<summary> accordion. Byte-matched to FAQPage
   schema (same copy via inc/faq-data.php). gp-faq primitive also
   available; this is the cgh- skinned variant.
   ============================================================ */

.cgh-faq {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  margin-top: var(--gp-space-4);
  max-width: 80ch;
}

.cgh-faq__item {
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-lg);
  overflow: hidden;
  transition: border-color var(--gp-transition-base);
}

.cgh-faq__item[open] { border-color: var(--gp-accent); }

.cgh-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-space-4);
  padding: var(--gp-space-5);
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  cursor: pointer;
  list-style: none;
  background-color: var(--gp-white);
  min-height: 56px;
  transition: background-color var(--gp-transition-base), color var(--gp-transition-base);
}

.cgh-faq__question::-webkit-details-marker { display: none; }
.cgh-faq__question::marker { content: ""; }

.cgh-faq__question:hover,
.cgh-faq__item[open] .cgh-faq__question {
  background-color: var(--gp-surface-warm);
}

.cgh-faq__question:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: calc(-1 * var(--gp-focus-offset));
}

.cgh-faq__icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--gp-transition-base), transform var(--gp-transition-moderate);
}

.cgh-faq__icon::after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  background-color: var(--gp-ink);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.cgh-faq__item[open] .cgh-faq__icon {
  background-color: var(--gp-accent);
  transform: rotate(180deg);
}

.cgh-faq__answer {
  padding: 0 var(--gp-space-5) var(--gp-space-5);
  background-color: var(--gp-white);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
}

.cgh-faq__answer p + p { margin-top: var(--gp-space-3); }

/* ============================================================
   CTA-BAND -- cardinal action band. Action+outcome CTA + the
   tagline + a non-booking next step. --ink variant on hero-panel.
   ============================================================ */

.cgh-cta-band {
  background-color: var(--gp-primary);
  padding-block: var(--gp-space-9);
  text-align: center;
}

.cgh-cta-band--ink {
  /* Repainted from the near-black hero ink (--gp-hero-panel #16120B) to true brand
     navy so the closing band visually separates from the black hero on scroll instead
     of reading as a clone. Reuses the existing #001a3e nav token; site-wide on every
     page that uses --ink. Subtle deep-navy gradient adds depth without a new color. */
  background-color: var(--gp-nav-bg);
  background-image: linear-gradient(160deg, var(--gp-nav-bg), #01122b);
}

.cgh-cta-band__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gp-container-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gp-space-4);
}

.cgh-cta-band__heading {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h1);
  font-weight: var(--gp-weight-bold);
  line-height: var(--gp-leading-h1);
  color: var(--gp-static-white);
  margin: 0;
}

.cgh-cta-band__subhead {
  font-size: var(--gp-text-body-lg);
  line-height: var(--gp-leading-body-lg);
  color: var(--gp-static-white);
  margin: 0;
  max-width: 56ch;
}

.cgh-cta-band--ink .cgh-cta-band__subhead { color: var(--gp-bone); }

.cgh-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-4);
  margin-top: var(--gp-space-2);
}

.cgh-cta-band__next {
  font-size: var(--gp-text-body-sm);
  color: var(--gp-static-white);
  margin: 0;
}

.cgh-cta-band__next a {
  color: var(--gp-static-white);
  font-weight: var(--gp-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgh-cta-band__next a:hover { color: var(--gp-primary-50); }

.cgh-cta-band--ink .cgh-cta-band__next a:hover { color: var(--gp-accent); }

.cgh-cta-band__next a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-static-white);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

@media (max-width: 639px) {
  .cgh-cta-band { padding-block: var(--gp-space-7); }
  .cgh-cta-band__heading { font-size: var(--gp-text-h2); }
  .cgh-cta-band__actions { flex-direction: column; width: 100%; }
  .cgh-cta-band__actions .btn { width: 100%; }
}

/* ============================================================
   CITY-PROOF-BLOCK -- the anti-doorway differentiator. Per-city
   courthouse / hospital / corridor facts in a 3-up factual grid.
   ============================================================ */

.cgh-city-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-4);
  margin-top: var(--gp-space-4);
}

.cgh-city-proof__item {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  padding: var(--gp-space-5);
  background-color: var(--gp-surface-warm);
  border-radius: var(--gp-radius-lg);
  border-top: 3px solid var(--gp-accent);
  min-width: 0;
}

.cgh-city-proof__label {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-gold-text);
  margin: 0;
}

.cgh-city-proof__name {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-city-proof__body {
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body-sm);
  color: var(--gp-slate-700);
  margin: 0;
}

@media (min-width: 768px) {
  .cgh-city-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   INTERLINK CLUSTER -- silo links grouped + labeled.
   ============================================================ */

.cgh-interlinks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-6);
  margin-top: var(--gp-space-4);
}

.cgh-interlinks__label {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-slate-700);
  margin: 0 0 var(--gp-space-3);
}

.cgh-interlinks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.cgh-interlinks__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-medium);
  color: var(--gp-primary);
  text-decoration: none;
  padding-block: var(--gp-space-1);
}

.cgh-interlinks__link::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: var(--gp-accent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: transform var(--gp-transition-base);
}

.cgh-interlinks__link:hover {
  color: var(--gp-primary-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgh-interlinks__link:hover::before { transform: translateX(3px); }

.cgh-interlinks__link--pending {
  color: var(--gp-slate-700);
  cursor: default;
}

.cgh-interlinks__link--pending::before {
  opacity: 0.55;
  transform: none;
}

.cgh-interlinks__link--pending:hover {
  color: var(--gp-slate-700);
  text-decoration: none;
}

.cgh-interlinks__link--pending:hover::before { transform: none; }

.cgh-interlinks__link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

@media (min-width: 768px) {
  .cgh-interlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cgh-interlinks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cgh-interlinks__link:hover::before { transform: none; }
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.cgh-breadcrumbs {
  padding-block: var(--gp-space-4);
}

.cgh-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--gp-text-body-sm);
}

.cgh-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  color: var(--gp-slate-700);
}

.cgh-breadcrumbs__item:not(:last-child)::after {
  content: "\203A"; /* single right angle quote */
  color: var(--gp-slate-200);
}

.cgh-breadcrumbs__link {
  color: var(--gp-slate-700);
  text-decoration: none;
}

.cgh-breadcrumbs__link:hover {
  color: var(--gp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgh-breadcrumbs__current {
  color: var(--gp-ink);
  font-weight: var(--gp-weight-semibold);
}

/* ============================================================
   FOOTER -- Denver NAP, practice/city link columns, llms link.
   ============================================================ */

.cgh-footer {
  background-color: var(--gp-hero-panel);
  color: var(--gp-bone);
  padding-block: var(--gp-space-9) var(--gp-space-6);
}

.cgh-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-7);
}

.cgh-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  max-width: 36ch;
  min-width: 0;
}

.cgh-footer__logo {
  height: 82px;
  width: auto;
  /* .cgh-footer__brand is a flex column, so its default align-items:stretch was
     stretching this img to the full 342px column width while height stayed 82px.
     With the logo's true 1.56:1 ratio that squashed it into a 4.2:1 box -- the
     "pixelated" footer logo. align-self:flex-start opts out of the cross-axis
     stretch so width follows the intrinsic aspect ratio (~128px) and the asset
     (1080x692) renders sharp at retina DPR. */
  align-self: flex-start;
  max-width: 100%;
}

.cgh-footer__tagline {
  color: var(--gp-accent);
}

.cgh-footer__nap {
  font-style: normal;
  font-size: var(--gp-text-body-sm);
  line-height: var(--gp-leading-body);
  color: var(--gp-bone);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.cgh-footer__nap-name {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h5);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-static-white);
}

.cgh-footer__nap a {
  color: var(--gp-bone);
  text-decoration: none;
}

.cgh-footer__nap a:hover {
  color: var(--gp-accent);
}

.cgh-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gp-space-6);
  min-width: 0;
}

.cgh-footer__col-label {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-eyebrow);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-accent);
  margin: 0 0 var(--gp-space-3);
}

.cgh-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
}

.cgh-footer__link {
  font-size: var(--gp-text-body-sm);
  color: var(--gp-bone);
  text-decoration: none;
  transition: color var(--gp-transition-base);
}

.cgh-footer__link:hover {
  color: var(--gp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgh-footer__link:focus-visible,
.cgh-footer__nap a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-accent);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

.cgh-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-space-3);
  margin-top: var(--gp-space-8);
  padding-top: var(--gp-space-5);
  border-top: 1px solid var(--gp-visual-ondark-border);
}

.cgh-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-space-2) var(--gp-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cgh-footer__copy {
  font-size: var(--gp-text-caption);
  color: var(--gp-slate-200);
  margin: 0;
  max-width: 80ch;
}

@media (min-width: 768px) {
  .cgh-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cgh-footer__top { grid-template-columns: 5fr 7fr; }
  .cgh-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   === CRO PUNCH-UP ===
   Conversion mechanics added to the Broadsheet skin (CRO-DESIGN-SPEC
   sections 2-5). Composed from --gp-* tokens only (zero raw hex), BEM
   under the cgh- prefix, mobile-first 390/768/1024, reduced-motion safe.
   None of these change the locked palette/type; they ADD the four
   highest-lift PI mechanics the goldens were missing (form, star/$
   proof strip, sticky mobile call bar, no-fee hero badge) plus the
   section-eyebrow drama, honest video slot, and bento/CTA strengthening.
   Conversion law: cardinal (--gp-primary) is the ONLY action color;
   gold (--gp-accent) is ornament/highlight only, never a button bg.
   ============================================================ */

/* ------------------------------------------------------------
   TRUST-STRIP -- slim above-fold proof row (G3 + G2). Reads on the
   ink hero panel (--surface-ink / inside .cgh-hero-mega) AND on paper.
   Layout: 5 gold stars + "5-star rated on Google" + one $ figure +
   one award chip, separated by hairline dividers. Wraps gracefully;
   each item min-width:0 so long award text never overflows (0 CLS).
   ------------------------------------------------------------ */

.cgh-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-3) var(--gp-space-5);
  padding: var(--gp-space-4) var(--gp-space-5);
  border-radius: var(--gp-radius-lg);
  background-color: var(--gp-surface-warm);
  border: 1px solid var(--gp-slate-200);
}

/* On the ink hero panel: translucent ground + light text, gold pops 7:1+. */
.cgh-hero-mega .cgh-trust-strip,
.surface--ink .cgh-trust-strip,
.cgh-trust-strip--ink {
  background-color: var(--gp-visual-ondark-veil);
  border-color: var(--gp-visual-ondark-border);
}

.cgh-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  min-width: 0;
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
}

.cgh-hero-mega .cgh-trust-strip__item,
.surface--ink .cgh-trust-strip__item,
.cgh-trust-strip--ink .cgh-trust-strip__item {
  color: var(--gp-bone);
}

/* The 5-star glyph row. Stars are pure ornament -> aria-hidden in markup,
   the accessible name lives in the adjacent __count text. */
.cgh-trust-strip__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--gp-accent);
  line-height: 1;
  font-size: var(--gp-text-body);
  letter-spacing: 0.02em;
}

.cgh-trust-strip__stars::before {
  content: "\2605\2605\2605\2605\2605"; /* ★★★★★ */
}

/* The $ figure leans on the display face for scale; cardinal for emphasis
   on light, gold on the dark hero ground. */
.cgh-trust-strip__figure {
  font-family: var(--gp-font-display);
  font-weight: var(--gp-weight-bold);
  font-size: var(--gp-text-h5);
  line-height: 1;
  color: var(--gp-primary);
  font-variant-numeric: tabular-nums;
}

.cgh-hero-mega .cgh-trust-strip__figure,
.surface--ink .cgh-trust-strip__figure,
.cgh-trust-strip--ink .cgh-trust-strip__figure {
  color: var(--gp-accent);
}

.cgh-trust-strip__count {
  color: inherit;
}

/* Hairline divider between items (hidden on wrap via the flex gap fallback). */
.cgh-trust-strip__divider {
  width: 1px;
  height: 1.4em;
  background-color: var(--gp-slate-200);
  flex-shrink: 0;
}

.cgh-hero-mega .cgh-trust-strip__divider,
.surface--ink .cgh-trust-strip__divider,
.cgh-trust-strip--ink .cgh-trust-strip__divider {
  background-color: var(--gp-visual-ondark-border);
}

@media (max-width: 639px) {
  .cgh-trust-strip { gap: var(--gp-space-2) var(--gp-space-3); }
  /* Drop dividers when stacked tight to avoid orphan hairlines. */
  .cgh-trust-strip__divider { display: none; }
  /* DI item 1: collapse the ticker to the 3 highest-impact items on mobile
     (rating + top result/credential + ABOTA). Items alternate with dividers, so the
     4th item onward sits at child position >=7. Also covers the __inner-wrapper and
     plain-__list markup variants used on a handful of city pages. Desktop unchanged. */
  .cgh-trust-strip > .cgh-trust-strip__item:nth-child(n+7),
  .cgh-trust-strip__inner > .cgh-trust-strip__item:nth-child(n+4),
  .cgh-trust-strip__list > li:nth-child(n+4) { display: none; }
}

/* ------------------------------------------------------------
   TRUST STRIP -- ledger variant (homepage only). Grouped 4-lane
   credibility ledger: each lane = micro-label -> anchor -> context.
   Scoped to --ledger so the 660+ flat strips keep the flex layout.
   Mobile keeps EVERY lane (no nth-child hiding): lanes stack with
   hairlines, award pills wrap under the Recognized label.
   ------------------------------------------------------------ */

.cgh-trust-strip--ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: center;
  align-items: stretch;
  gap: 0;
}

.cgh-trust-strip--ledger .cgh-trust-strip__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gp-space-1);
  min-width: 0;
  padding-inline: var(--gp-space-5);
}

.cgh-trust-strip--ledger .cgh-trust-strip__group + .cgh-trust-strip__group {
  border-inline-start: 1px solid var(--gp-slate-200);
}

.surface--ink .cgh-trust-strip--ledger .cgh-trust-strip__group + .cgh-trust-strip__group {
  border-inline-start-color: var(--gp-visual-ondark-border);
}

.cgh-trust-strip--ledger .cgh-trust-strip__label {
  font-family: var(--gp-font-display);
  font-size: 0.75rem;
  font-weight: var(--gp-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-primary);
}

.surface--ink .cgh-trust-strip--ledger .cgh-trust-strip__label {
  color: var(--gp-accent);
}

.cgh-trust-strip--ledger .cgh-trust-strip__anchor {
  font-family: var(--gp-font-display);
  font-weight: var(--gp-weight-bold);
  font-size: var(--gp-text-h6);
  line-height: 1.2;
  color: var(--gp-ink);
}

.cgh-trust-strip--ledger .cgh-trust-strip__figure {
  font-size: var(--gp-text-h4);
}

.cgh-trust-strip--ledger .cgh-trust-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-space-2);
  min-width: 0;
}

@media (max-width: 899px) {
  .cgh-trust-strip--ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cgh-trust-strip--ledger .cgh-trust-strip__group {
    padding-block: var(--gp-space-3);
  }
  /* 2-up grid: only odd lanes get a vertical rule neighbor; rows split by hairline. */
  .cgh-trust-strip--ledger .cgh-trust-strip__group + .cgh-trust-strip__group {
    border-inline-start: none;
  }
  .cgh-trust-strip--ledger .cgh-trust-strip__group:nth-child(even) {
    border-inline-start: 1px solid var(--gp-slate-200);
  }
  .cgh-trust-strip--ledger .cgh-trust-strip__group:nth-child(n+3) {
    border-block-start: 1px solid var(--gp-slate-200);
  }
}

@media (max-width: 639px) {
  .cgh-trust-strip--ledger { grid-template-columns: 1fr; }
  .cgh-trust-strip--ledger .cgh-trust-strip__group:nth-child(even) {
    border-inline-start: none;
  }
  .cgh-trust-strip--ledger .cgh-trust-strip__group + .cgh-trust-strip__group {
    border-block-start: 1px solid var(--gp-slate-200);
  }
}

/* ------------------------------------------------------------
   LEAD-FORM -- compact 3-field capture card (G1). Name / Phone /
   Case-type select + cardinal submit "Get My Free Case Review" +
   "100% confidential" microcopy. Two grounds:
     --hero  -> sits in the hero column on the ink panel (light labels)
     --band  -> sits in a cardinal/ink CTA band or on --gp-surface
   All inputs are >=44px tall, 16px font (no iOS zoom), AA borders,
   visible focus ring, and reserve height so reveal = 0 CLS.
   ------------------------------------------------------------ */

.cgh-lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  padding: var(--gp-space-6);
  border-radius: var(--gp-radius-lg);
  background-color: var(--gp-white);
  border: 1px solid var(--gp-slate-200);
  box-shadow: var(--gp-shadow-md);
  max-width: 30rem;
  min-width: 0;
}

.cgh-lead-form__title {
  font-family: var(--gp-font-display);
  font-size: var(--gp-text-h4);
  font-weight: var(--gp-weight-semibold);
  line-height: var(--gp-leading-h4);
  color: var(--gp-ink);
  margin: 0;
}

.cgh-lead-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  min-width: 0;
}

.cgh-lead-form__label {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-ink);
}

/* Shared control surface for <input> and <select>. */
.cgh-lead-form__input {
  width: 100%;
  min-height: 48px;
  padding: var(--gp-input-padding);
  font-family: var(--gp-font-body);
  font-size: 1rem; /* 16px floor: stops iOS Safari auto-zoom on focus */
  color: var(--gp-ink);
  background-color: var(--gp-input-bg);
  border: var(--gp-input-border);
  border-radius: var(--gp-input-radius);
  transition: border-color var(--gp-transition-base), box-shadow var(--gp-transition-base);
  appearance: none;
  -webkit-appearance: none;
}

/* Native select caret (gold chevron, token-driven, no raw hex). */
select.cgh-lead-form__input {
  padding-right: var(--gp-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5E10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--gp-space-4) center;
  background-size: 18px 18px;
}

.cgh-lead-form__input::placeholder { color: var(--gp-slate-700); opacity: 0.85; }

.cgh-lead-form__input:focus-visible {
  outline: none;
  border-color: var(--gp-input-focus-border);
  box-shadow: var(--gp-input-focus-ring);
}

.cgh-lead-form__submit {
  width: 100%;
  margin-top: var(--gp-space-1);
}

.cgh-lead-form__micro {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  font-size: var(--gp-text-caption);
  line-height: var(--gp-leading-caption);
  color: var(--gp-slate-700);
  margin: 0;
}

/* Lock icon before the confidential microcopy (gold-text on light). */
.cgh-lead-form__micro::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: var(--gp-gold-text);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* --hero variant: translucent card readable on the ink hero panel. */
.cgh-lead-form--hero {
  background-color: var(--gp-visual-ondark-veil);
  border-color: var(--gp-visual-ondark-border);
  box-shadow: var(--gp-shadow-hero);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cgh-lead-form--hero .cgh-lead-form__title { color: var(--gp-static-white); }
.cgh-lead-form--hero .cgh-lead-form__label { color: var(--gp-bone); }
.cgh-lead-form--hero .cgh-lead-form__micro { color: var(--gp-slate-200); }
.cgh-lead-form--hero .cgh-lead-form__micro::before { background-color: var(--gp-accent); }

/* Inputs stay white-grounded inside the hero card for max legibility/contrast. */
.cgh-lead-form--hero .cgh-lead-form__input {
  background-color: var(--gp-white);
  border-color: var(--gp-white);
  color: var(--gp-ink);
}

/* --band variant: warm surface card for the in-band repeat (G1 repeat). */
.cgh-lead-form--band {
  background-color: var(--gp-surface-warm);
  border-color: transparent;
  box-shadow: var(--gp-shadow-lg);
}

@media (max-width: 639px) {
  /* Fill the container on mobile: in a centered flex column (.cgh-cta-band__inner,
     hero media slots) the form otherwise keeps its ~30rem intrinsic width and
     spills both sides of a narrow viewport. width:100% + min-width:0 (base) pins
     it to the parent content box. */
  .cgh-lead-form { padding: var(--gp-space-5); max-width: none; width: 100%; }
  /* Multi-line message field ("What happened?") shares the input control class, which
     enforces a single-row 48px min-height. Give a textarea room to type on mobile and
     keep the 16px font floor so iOS Safari does not zoom on focus. */
  textarea.cgh-lead-form__input { min-height: 120px; font-size: 1rem; }
}

/* ------------------------------------------------------------
   CALLBAR -- fixed-bottom sticky mobile call bar (G4). Cardinal
   ground, two >=44px targets (tap-to-call + "Free Review"). Shown
   ONLY <=768px; hidden on desktop. Body gets bottom padding via
   .has-callbar so the bar never permanently covers footer content;
   the final CTA band stays reachable because the bar is a thin strip,
   not a full overlay.
   ------------------------------------------------------------ */

.cgh-callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--gp-z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background-color: var(--gp-primary);
  box-shadow: 0 -2px 14px rgba(28, 23, 16, 0.22);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone home-indicator gap */
}

.cgh-callbar__call,
.cgh-callbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-2);
  min-height: 56px; /* well above the 44px target floor */
  padding: var(--gp-space-3) var(--gp-space-4);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-bold);
  color: var(--gp-static-white);
  text-decoration: none;
  text-align: center;
  line-height: 1.1;
}

/* The call half is darker cardinal so the two targets read as distinct. */
.cgh-callbar__call {
  background-color: var(--gp-primary-700);
}

.cgh-callbar__call:hover,
.cgh-callbar__cta:hover {
  color: var(--gp-static-white);
}

.cgh-callbar__cta:hover {
  background-color: var(--gp-primary-700);
}

.cgh-callbar__call:focus-visible,
.cgh-callbar__cta:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-static-white);
  outline-offset: calc(-1 * var(--gp-focus-offset));
}

/* Small leading glyph (handset / arrow), inherits white. */
.cgh-callbar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Default: hidden. Only the mobile media query reveals it. */
.cgh-callbar { display: none; }

@media (max-width: 768px) {
  .cgh-callbar { display: grid; }
  /* Pages add .has-callbar to <body> so footer content clears the bar. The bar is
     >=56px tall PLUS the iPhone home-indicator safe-area inset (~34px), so a flat 64px
     clearance let the bar overlap the final CTA on notched phones. Clear the full bar
     height plus the safe-area inset so the closing CTA is always fully tappable. */
  .has-callbar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* DI item 2: on small phones the "Free case review" label wrapped to two lines.
   Tighten type/padding/icon and forbid wrapping so both labels stay one line at
   320-430px. Targets stay >=56px tall (well above the 44px floor). */
@media (max-width: 430px) {
  .cgh-callbar__call,
  .cgh-callbar__cta {
    gap: var(--gp-space-2);
    padding-left: var(--gp-space-2);
    padding-right: var(--gp-space-2);
    font-size: var(--gp-text-body-sm);
    white-space: nowrap;
  }
  .cgh-callbar__icon { width: 16px; height: 16px; }
}

/* ------------------------------------------------------------
   HERO no-fee GUARANTEE chip (G5 / move 3.9). Gold-outline badge on
   the ink hero, near the CTA: "No fee unless we win." Shield + check.
   ------------------------------------------------------------ */

.cgh-hero-mega__guarantee {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  align-self: flex-start;
  padding: var(--gp-space-2) var(--gp-space-4);
  border-radius: var(--gp-radius-full);
  border: 1.5px solid var(--gp-accent);
  background-color: var(--gp-visual-cobalt-trans);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-bold);
  color: var(--gp-accent);
  line-height: 1.2;
}

.cgh-hero-mega__guarantee::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--gp-accent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3Cpolyline points='9 12 11 14 15 10'%3E%3C/polyline%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3Cpolyline points='9 12 11 14 15 10'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* On a light surface (if reused outside the hero) the chip uses readable
   gold-text so the wordmark still passes AA. */
.surface--bone .cgh-hero-mega__guarantee,
.surface--white .cgh-hero-mega__guarantee {
  color: var(--gp-gold-text);
  background-color: var(--gp-secondary-50);
  border-color: var(--gp-gold-text);
}

.surface--bone .cgh-hero-mega__guarantee::before,
.surface--white .cgh-hero-mega__guarantee::before {
  background-color: var(--gp-gold-text);
}

/* ------------------------------------------------------------
   SECTION-EYEBROW -- bigger dramatic section kicker (move 3.1) for
   Broadsheet punch. Tracked caps Hanken in readable gold-text,
   preceded by the gold-dot ornament. ~2 steps larger than the card
   eyebrow. On ink surfaces the bright gold takes over.
   ------------------------------------------------------------ */

.cgh-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-3);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm); /* up from --gp-text-eyebrow */
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tracking-eyebrow);
  color: var(--gp-gold-text);
  margin: 0;
}

/* The leading gold dot (single, not the full ·•· cluster) for rhythm. */
.cgh-section__eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--gp-radius-full);
  background-color: var(--gp-accent);
  flex-shrink: 0;
}

/* Centered variant pairs with .gp-section__header--center. */
.cgh-section__eyebrow--center { justify-content: center; }

.surface--ink .cgh-section__eyebrow,
.cgh-hero-mega .cgh-section__eyebrow {
  color: var(--gp-accent);
}

@media (min-width: 768px) {
  .cgh-section__eyebrow { font-size: var(--gp-text-body); }
}

/* ------------------------------------------------------------
   VIDEO-PROOF -- testimonial / video slot (G10) with an HONEST
   "coming soon" placeholder. No fake play button over nothing: the
   placeholder state shows a film glyph + "Client video stories coming
   soon" copy so the empty slot reads as intentional, not broken. When
   a real <iframe>/<video> is dropped into __frame the placeholder is
   simply not rendered. 16:9 reserved -> 0 CLS.
   ------------------------------------------------------------ */

.cgh-video-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-5);
  margin-top: var(--gp-space-4);
}

.cgh-video-proof__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--gp-radius-lg);
  overflow: hidden;
  background-color: var(--gp-hero-panel);
  border: 1px solid var(--gp-visual-ondark-border);
  min-width: 0;
}

.cgh-video-proof__frame > iframe,
.cgh-video-proof__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

/* Honest placeholder: gold-dot mesh + film glyph + copy. NO play triangle. */
.cgh-video-proof__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-3);
  text-align: center;
  padding: var(--gp-space-6);
  background:
    radial-gradient(60% 80% at 80% 12%, var(--gp-mesh-blob-1), transparent 60%),
    radial-gradient(55% 70% at 10% 88%, var(--gp-mesh-blob-2), transparent 62%),
    linear-gradient(135deg, var(--gp-hero-edge), var(--gp-hero-panel) 72%);
}

.cgh-video-proof__placeholder::before {
  content: "";
  width: 40px;
  height: 40px;
  background-color: var(--gp-accent);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'%3E%3C/rect%3E%3Cline x1='7' y1='5' x2='7' y2='19'%3E%3C/line%3E%3Cline x1='17' y1='5' x2='17' y2='19'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='22' y2='12'%3E%3C/line%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'%3E%3C/rect%3E%3Cline x1='7' y1='5' x2='7' y2='19'%3E%3C/line%3E%3Cline x1='17' y1='5' x2='17' y2='19'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='22' y2='12'%3E%3C/line%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.cgh-video-proof__placeholder-text {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-bone);
  margin: 0;
  max-width: 28ch;
}

@media (min-width: 768px) {
  /* When real client clips exist, render 2-up; placeholder collapses to 1. */
  .cgh-video-proof--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   BENTO DRAMA strengthen (move 3.3) -- larger feature tile + a gold
   top-rule on the signature wow, without touching the base cgh-bento
   layout above. Opt-in via .cgh-bento--drama on the grid.
   ------------------------------------------------------------ */

.cgh-bento--drama .cgh-bento__tile--feature {
  border-top: 4px solid var(--gp-accent);
}

.cgh-bento--drama .cgh-bento__tile--feature .cgh-bento__figure {
  font-size: var(--gp-text-display); /* step the hero number up one scale */
  line-height: 1;
}

@media (min-width: 1024px) {
  /* Give the feature tile more presence: 3 cols wide on a 5-col drama grid. */
  .cgh-bento--drama {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .cgh-bento--drama .cgh-bento__tile--feature {
    grid-column: span 3;
    grid-row: span 2;
  }
  .cgh-bento--drama .cgh-bento__tile--span-2 { grid-column: span 2; }
}

/* ------------------------------------------------------------
   CTA-BAND tagline slot (move 3.11) -- "IT'S MORE THAN MONEY."
   tracked gold beat slotted above the heading in the action band.
   Uses bright gold on the cardinal/ink ground (passes on both).
   ------------------------------------------------------------ */

.cgh-cta-band__tagline {
  display: inline-block;
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--gp-tagline-tracking);
  color: var(--gp-accent);
  margin: 0 0 var(--gp-space-1);
}

/* ============================================================
   HERO-MEGA COMPACT MODIFIER (.cgh-hero-mega--compact)
   Applied alongside .cgh-hero-mega on sub-pages and interior
   landing pages where the full mega height is too dominant.
   Reduces vertical breathing room and steps the H1 down one
   notch (display-mega -> display). Background image, ink veil,
   gradient mesh, subhead, and CTAs are entirely unchanged.
   ============================================================ */

.cgh-hero-mega--compact {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cgh-hero-mega--compact .cgh-hero-mega__heading {
  font-size: var(--gp-text-display); /* 4rem / 64px -- one step below display-mega */
  line-height: var(--gp-leading-display);
  letter-spacing: -0.018em; /* tighter than body, relaxed from --gp-tracking-mega */
}

/* Mobile: the compact heading at full display scale can still crowd 390px.
   Keep the same floor as the full mega but cap at the display token. */
@media (max-width: 640px) {
  .cgh-hero-mega--compact .cgh-hero-mega__heading {
    font-size: clamp(32px, 9.5vw, 56px);
    max-width: none;
    text-wrap: normal;
  }
}

/* ============================================================
   TRUST-STRIP AUTHORITY BAND (.cgh-trust-strip as a standalone
   section, placed directly under the hero on bone surface).
   Distinct from the inline hero widget (same class root, different
   child elements). Carries: star rating + review count, badge list,
   and a primary CTA.
   Markup targeted:
     <section class="cgh-trust-strip section surface--bone">
       <div class="container cgh-trust-strip__inner">
         <div class="cgh-trust-strip__rating"> ... </div>
         <ul class="cgh-trust-strip__badges"> ... </ul>
         <a class="cgh-trust-strip__cta btn btn--primary"> ... </a>
       </div>
     </section>
   ============================================================ */

/* The section-level element itself: override the CRO trust-strip
   flex-wrap compact form (hero widget) so this stands alone as a
   tight authority band. Tight block padding; full-width. */
section.cgh-trust-strip,
.cgh-trust-strip.section {
  display: block;            /* section rhythm, not the inline flex widget */
  padding-block: var(--gp-space-4) var(--gp-space-5);
  border-top: 1px solid var(--gp-slate-200);
  border-bottom: 1px solid var(--gp-slate-200);
  background-color: transparent; /* inherits surface--bone (#F7F4EE) */
}

/* Inner: flex row, space-between, vertically centered, wraps gracefully. */
.cgh-trust-strip__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gp-space-4) var(--gp-space-6);
}

/* Rating block: stars + "5.0 from 345 Google reviews" inline. */
.cgh-trust-strip__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-3);
  min-width: 0;
}

/* Star glyphs in the authority band: bright brand gold, slightly larger. */
section.cgh-trust-strip .cgh-trust-strip__stars,
.cgh-trust-strip.section .cgh-trust-strip__stars {
  display: inline-block;
  color: var(--gp-accent);
  font-size: var(--gp-text-body-lg); /* 19px -- a step above body for presence */
  line-height: 1;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

section.cgh-trust-strip .cgh-trust-strip__stars::before,
.cgh-trust-strip.section .cgh-trust-strip__stars::before {
  content: "";
}

section.cgh-trust-strip .cgh-trust-strip__stars:empty::before,
.cgh-trust-strip.section .cgh-trust-strip__stars:empty::before {
  content: "\2605\2605\2605\2605\2605";
}

/* Rating label text: readable at body size; strong tags carry emphasis. */
.cgh-trust-strip__rating-text {
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);
  font-weight: var(--gp-weight-medium);
  color: var(--gp-slate-700);
  line-height: var(--gp-leading-body-sm);
  white-space: nowrap;
}

.cgh-trust-strip__rating-text strong {
  font-weight: var(--gp-weight-bold);
  color: var(--gp-ink);
}

/* Badge list: horizontal, no bullets, wraps on narrow viewports. */
.cgh-trust-strip__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Individual badge chip. Sized to accommodate a logo <img> later
   (min-height guards the slot; inline-flex keeps img + text aligned). */
.cgh-trust-strip__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: var(--gp-space-1) var(--gp-space-3);
  border-radius: var(--gp-radius-md);
  border: 1px solid var(--gp-slate-200);
  background-color: var(--gp-white);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-caption); /* 13px -- credential label */
  font-weight: var(--gp-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gp-slate-700);
  white-space: nowrap;
  transition: border-color var(--gp-transition-base), color var(--gp-transition-base);
}

/* Subtle gold hover so the chips feel live without competing with the CTA. */
.cgh-trust-strip__badge:hover {
  border-color: var(--gp-gold-text);
  color: var(--gp-gold-text);
}

/* CTA: spacing only; .btn.btn--primary handles all visual treatment. */
.cgh-trust-strip__cta {
  flex-shrink: 0;
}

/* Mobile (<= ~720px): stack to a centered column. */
@media (max-width: 720px) {
  .cgh-trust-strip__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--gp-space-4);
  }
  .cgh-trust-strip__badges {
    justify-content: center;
  }
  .cgh-trust-strip__cta {
    width: 100%;
  }
}

/* ============================================================
   HERO PROOF TOKEN (.cgh-hero__proof)
   Inline review signal placed inside the hero body near the CTAs.
   Renders on the dark .cgh-hero-mega ink panel -> text must be light.
   Markup:
     <p class="cgh-hero__proof">
       <span class="cgh-hero__proof-stars">★★★★★</span>
       <strong>5.0</strong> from <strong>345</strong> Google reviews
     </p>
   ============================================================ */

.cgh-hero__proof {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gp-space-2);
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body-sm);  /* 15px -- compact, does not compete with subhead */
  font-weight: var(--gp-weight-medium);
  line-height: 1.3;
  color: var(--gp-bone); /* warm near-white, legible on #16120B (hero panel) */
  margin: 0; /* caller's gap/margin-top from __actions handles spacing */
}

/* Stars: brand gold, identical brightness to the eyebrow gold above. */
.cgh-hero__proof-stars {
  display: inline-block;
  color: var(--gp-accent);           /* #E5B025 on #16120B -> ~7:1 contrast */
  font-size: var(--gp-text-body-sm);
  line-height: 1;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Bold figures (5.0, 345) slightly more prominent than surrounding copy. */
.cgh-hero__proof strong {
  font-weight: var(--gp-weight-bold);
  color: var(--gp-static-white); /* pure white for numeric emphasis */
}

/* ============================================================
   STATEWIDE COVERAGE  (.cgh-cities)   [P0-3 / audit section 2A]
   Replaces the unstyled SILO-GEN home-serve link dump. The old markup
   used gp-card / gp-card-grid / gp-section__title -- none of which have
   CSS -- so 37 cities rendered as raw blue underlined links with a grid
   hole. This is a deliberate chip grid on a bone band: equal-height
   navy-on-white chips, gold eyebrow, styled heading primitive, local
   trust line. Labels normalized to bare city names by the transform.
   ============================================================ */
.cgh-cities__header { text-align: center; }

.cgh-cities__trust {
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-slate-700);
  margin: var(--gp-space-3) auto 0;
  max-width: 62ch;
}
.cgh-cities__trust a {
  color: var(--gp-primary);
  font-weight: var(--gp-weight-semibold);
  text-underline-offset: 3px;
}

.cgh-cities__grid {
  list-style: none;
  margin: var(--gp-space-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gp-space-3);
}
@media (min-width: 640px) { .cgh-cities__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cgh-cities__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cgh-cities__grid li { display: flex; }

.cgh-cities__chip {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--gp-space-3) var(--gp-space-4);
  text-align: center;
  font-family: var(--gp-font-body);
  font-size: var(--gp-text-body);
  font-weight: var(--gp-weight-semibold);
  color: var(--gp-primary);
  background-color: var(--gp-static-white);
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-md);
  box-shadow: var(--gp-shadow-sm);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.cgh-cities__chip:hover {
  background-color: var(--gp-primary);
  border-color: var(--gp-primary);
  color: var(--gp-static-white);
  transform: translateY(-2px);
}
.cgh-cities__chip:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-primary);
  outline-offset: var(--gp-focus-offset);
}

/* ============================================================
   CLOSING CTA BAND -- 2-column split  (.cgh-cta-band__inner--split)
   [P1-1 / audit section 2B]
   The base __inner is a 760px centered stack, so the form floated in
   empty navy thirds with an orphaned Spanish line. --split lays
   copy + proof + labeled tap-to-call LEFT, form RIGHT on wide
   viewports; mobile stacks (proof above form).
   ============================================================ */
.cgh-cta-band__inner--split {
  max-width: var(--gp-container-wide);
  text-align: left;
  align-items: stretch;
}
@media (min-width: 900px) {
  .cgh-cta-band__inner--split {
    display: grid;
    grid-template-columns: 1fr minmax(360px, 440px);
    gap: var(--gp-space-8);
    align-items: center;
  }
}

.cgh-cta-band__lead {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  min-width: 0;
}
.cgh-cta-band__inner--split .cgh-cta-band__tagline { margin: 0; }
.cgh-cta-band__inner--split .cgh-cta-band__heading { margin: 0; }
.cgh-cta-band__inner--split .cgh-cta-band__subhead { max-width: 46ch; margin: 0; }

.cgh-cta-band__proof {
  list-style: none;
  margin: var(--gp-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
}
.cgh-cta-band__proof li {
  position: relative;
  padding-left: var(--gp-space-5);
  font-size: var(--gp-text-body);
  line-height: var(--gp-leading-body);
  color: var(--gp-bone);
}
.cgh-cta-band__proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--gp-radius-full);
  background: var(--gp-accent);
}
.cgh-cta-band__proof strong { color: var(--gp-static-white); font-weight: var(--gp-weight-bold); }
.cgh-cta-band__proof a { color: var(--gp-static-white); font-weight: var(--gp-weight-semibold); text-underline-offset: 3px; }
.cgh-cta-band__proof a:hover { color: var(--gp-accent); }

/* Labeled "call instead" path under the proof stack. */
.cgh-cta-band__callout {
  margin-top: var(--gp-space-2);
  padding-top: var(--gp-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-2);
  align-items: flex-start;
}
.cgh-cta-band__callout-label {
  font-size: var(--gp-text-body-sm);
  color: var(--gp-slate-200);
}

.cgh-cta-band__formwrap { min-width: 0; }

/* Foot line: Spanish + address merged into one centered trust line,
   now INSIDE the section container (was an orphaned left-aligned <p>). */
.cgh-cta-band__foot {
  max-width: var(--gp-container-wide);
  margin: var(--gp-space-6) auto 0;
  padding-inline: var(--gp-container-px);
  text-align: center;
  font-size: var(--gp-text-body-sm);
  color: var(--gp-slate-200);
}

/* QA (a11y F3): links/phone in the navy LEFT column inherit the light-bg dark-gold
   focus ring (#7A5E10 = only 2.82:1 on navy, fails 3:1). Match the theme's
   white-ring-on-dark pattern. Scoped to __lead so the RED form-submit button on the
   cream form card (in __formwrap) keeps its own correct focus ring. */
.cgh-cta-band__lead a:focus-visible {
  outline-color: var(--gp-static-white);
}

/* QA (reduced-motion): the chip hover transform uses a hardcoded .18s (not a
   --gp-transition token), so the token-zeroing reduced-motion block does not catch
   it. Neutralize the motion explicitly. */
@media (prefers-reduced-motion: reduce) {
  .cgh-cities__chip:hover { transform: none; }
}

/* ============================================================
   PILLAR ARTICLE + STICKY CONVERSION RAIL   (CRO audit P0-2)
   ------------------------------------------------------------
   The practice-area pillar body was a ~598px left-aligned content
   column with a ~618px DEAD right gutter down a very long scroll,
   and no persistent CTA. .cgh-article wraps the article body in a
   2-column grid: the prose stays left, and a sticky proof +
   conversion rail fills what used to be dead space on >=1024px.
   Below 1024px it collapses to one clean column and the rail is
   hidden (mobile already ships the hero form + the sticky bottom
   .cgh-callbar, so a rail here would only duplicate them).
   Token-only. Every custom property below is defined in tokens.css.
   ============================================================ */

/* MOBILE (< 1024px): .cgh-article and .cgh-article__main are pure
   pass-through block wrappers with NO geometry of their own, so the
   wrapped sections render exactly as they did before this change.
   The rail is hidden (mobile already ships the hero form + .cgh-callbar).
   The audit found "mobile is already correct", so nothing here touches it. */
.cgh-article__main { min-width: 0; }
.cgh-article__rail { min-width: 0; }
@media (max-width: 1023.98px) {
  .cgh-article__rail { display: none; }
}

/* DESKTOP (>= 1024px): the 2-column grid + rail + article clean-up. Every
   layout rule that reshapes the body is scoped HERE so mobile is untouched. */
@media (min-width: 1024px) {
  /* Shell mirrors .container geometry (max-width, auto side margins,
     responsive container padding) so the article's left edge lines up
     with the full-width bands stacked above and below it. */
  .cgh-article {
    max-width: var(--gp-container);
    margin-inline: auto;
    padding-inline: var(--gp-container-px);
    display: grid;
    /* minmax(0,1fr) lets the prose column shrink instead of overflowing;
       340px is the fixed rail. At 1440 the 1fr resolves to ~748px, a
       comfortable reading measure, and the rail lands in the old gutter. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--gp-space-8);
    align-items: start;
  }

  /* Article column: neutralize the alternating full-bleed band chrome so
     the wrapped sections read as ONE continuous article, not a stack of
     narrow white/bone cards inside the now-constrained column. */
  /* Direct-child only: de-chrome the top-level wrapped bands, NOT any section
     a component might nest inside them (avoids stripping intentional inner
     surfaces across 172 heterogeneous pages). */
  .cgh-article__main > .section {
    background-color: transparent; /* kill surface--white / surface--bone */
    border-top: 0;                 /* kill the band hairline separators */
    border-bottom: 0;
    padding-block: var(--gp-space-6); /* calm, even rhythm between bands */
  }
  /* Drop the inner container's own centering + side padding: the main grid
     cell already provides the left edge and gutter, so a nested .container
     would double-pad and push the prose out of alignment with the bands. */
  .cgh-article__main > .section > .container {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  /* First band tucks under the breadcrumb; trim its leading space. */
  .cgh-article__main > .section:first-of-type { padding-top: var(--gp-space-4); }

  /* Sticky rail. The sticky .cgh-header renders ~135px tall at this
     breakpoint (the --gp-nav-height token is a nominal 90px baseline, not
     the rendered height), so a 96px offset would tuck the card under it.
     Compose an offset that clears the real header with a gap: 90 + 64. */
  .cgh-article__rail {
    position: sticky;
    top: calc(var(--gp-nav-height) + var(--gp-space-8));
  }
}

/* Rail card: white so it lifts off the bone page background. */
.cgh-rail {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-4);
  padding: var(--gp-space-5);
  background-color: var(--gp-static-white);
  border: 1px solid var(--gp-slate-200);
  border-radius: var(--gp-radius-lg);
  box-shadow: var(--gp-shadow-sticky);
}
.cgh-rail__attorney {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
}
.cgh-rail__portrait {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: var(--gp-radius-full);
  object-fit: cover;
  object-position: top center;
  background-color: var(--gp-bone);
  border: 2px solid var(--gp-accent);
}
.cgh-rail__heading {
  margin: 0;
  font-family: var(--gp-font-display);
  font-weight: var(--gp-weight-semibold);
  font-size: 1.125rem;
  line-height: 1.15;
  color: var(--gp-primary);
}
.cgh-rail__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-space-2);
  font-family: var(--gp-font-body);
  font-size: 0.9375rem;
  color: var(--gp-slate-700);
  text-decoration: none;
}
.cgh-rail__rating:hover { text-decoration: underline; }
.cgh-rail__rating strong { color: var(--gp-ink); font-weight: var(--gp-weight-semibold); }
.cgh-rail__star {
  color: var(--gp-accent);
  font-size: 1.05em;
  line-height: 1;
}

/* Red tap-to-call button. Reuses .btn base geometry; only the color
   scheme is set here (the CTA red is reserved for the primary action). */
.cgh-rail__call {
  width: 100%;
  background-color: var(--gp-cta);
  color: var(--gp-static-white);
  border-color: var(--gp-cta);
}
.cgh-rail__call:hover {
  background-color: var(--gp-cta-700);
  border-color: var(--gp-cta-700);
}
.cgh-rail__call-icon { width: 18px; height: 18px; flex-shrink: 0; }

.cgh-rail__rating:focus-visible,
.cgh-rail__call:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-primary);
  outline-offset: var(--gp-focus-offset);
}

/* Flatten the reused hero lead-form inside the rail: strip its card
   chrome (it would otherwise be a card-inside-a-card) and force dark
   label/title/micro colors, since the hero variant colored those for a
   dark background. Field markup is reused verbatim, so friction stays low. */
.cgh-article__rail .cgh-lead-form {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  width: 100%;
  gap: var(--gp-space-3);
}
.cgh-article__rail .cgh-lead-form__title {
  color: var(--gp-primary);
  font-family: var(--gp-font-display);
}
.cgh-article__rail .cgh-lead-form__label { color: var(--gp-slate-700); }
.cgh-article__rail .cgh-lead-form__micro { color: var(--gp-slate-700); }

/* Trust line: "No fee unless we win" + "ABOTA member" (Cheney). */
.cgh-rail__trust {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-1) var(--gp-space-2);
  font-family: var(--gp-font-body);
  font-size: 0.8125rem;
  color: var(--gp-slate-700);
}
.cgh-rail__trust strong { color: var(--gp-primary); font-weight: var(--gp-weight-semibold); }
.cgh-rail__trust-sep { color: var(--gp-slate-200); }