/* cs-promo-banner — rounded promo card, image left, content stack right.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.8rem = 18px. */

.cs-promo-banner {
  /* No bottom padding — the next section's decoration (crossing lines)
     starts exactly where the banner card ends, per the composite design. */
  padding: var(--cs-space-lg) var(--cs-gutter) 0;
  font-family: var(--cs-font-body);
}

/* Strip BB's default row bottom spacing after the banner so the following
   section (steps) butts up against the card edge. */
.fl-row-content-wrap:has(.cs-promo-banner) {
  padding-bottom: 0;
}
.fl-module-content:has(.cs-promo-banner) {
  margin-bottom: 0;
}

/* The butt-up above only reads as intentional when the next section carries
   its own decoration. A full-bleed coloured band has none, so the two blocks
   collide — restore the 96px section gap for that pairing. */
.fl-row:has(.cs-promo-banner) + .fl-row:has(.cs-features-band) {
  margin-top: var(--cs-space-2xl);
}

.cs-promo-banner__card {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding: 4rem; /* 40px */
  border-radius: 3.5rem; /* 35px per Figma */
  display: grid;
  grid-template-columns: minmax(0, 504fr) minmax(0, 640fr);
  column-gap: 4rem;
  row-gap: var(--cs-space-md);
  align-items: center;
  color: var(--cs-white);
}

/* Image */
.cs-promo-banner__media {
  align-self: stretch;
  border-radius: 2.8rem;
  overflow: hidden;
}

.cs-promo-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 32rem; /* 320px */
  max-height: 48rem; /* 480px */
  object-fit: cover;
}

/* Video media — 49px radius per Figma, self-centered instead of stretched */
.cs-promo-banner__media--video {
  align-self: center;
  border-radius: 4.9rem;
}

.cs-promo-banner__media--video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Content */
.cs-promo-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-md);
}

/* Eyebrow (with leading line) */
.cs-promo-banner__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.8rem; /* 18px */
  line-height: 1.212;
  color: #EFF3FD;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cs-promo-banner__eyebrow-line {
  display: inline-block;
  width: 5.6rem;
  height: 2px;
  background: currentColor;
}

/* Heading — doubled-up class specificity so it survives BB Global Styles'
   `.fl-builder-content h2` color & font rules. */
.cs-promo-banner .cs-promo-banner__heading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: clamp(3rem, 3vw + 1rem, 4.8rem); /* 30px → 48px */
  font-style: normal;
  line-height: 1.212;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-white);
  text-wrap: balance;
}

/* Subheading */
.cs-promo-banner__subheading {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1vw + 1rem, 2.4rem); /* 18px → 24px */
  line-height: 1.212;
  color: #EFF3FD;
  text-transform: none;
}

/* Body — regular paragraph. Figma sets this in title case and it was mirrored
   here as `capitalize`, but title-casing a full sentence makes prose read as a
   heading. Body copy is sentence case sitewide; the Figma casing is
   deliberately not followed for prose. Headings keep their title case. */
.cs-promo-banner__body {
  font-family: var(--cs-font-display);
  font-weight: 400;
  font-size: 1.8rem; /* 18px */
  line-height: 1.212;
  color: var(--cs-white);
  text-transform: none;
  max-width: 53.2rem; /* match the design's measure */
}

/* Dark body scheme — for light banner backgrounds (e.g. #93B4DD) */
.cs-promo-banner--text-dark .cs-promo-banner__body {
  color: #1a1a1a;
}

/* Quote body scheme — 20px, sentence case (retreat "THE RETREAT" band) */
.cs-promo-banner--body-quote .cs-promo-banner__body {
  font-size: 2rem; /* 20px */
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
  max-width: 87rem;
}

.cs-promo-banner__body p {
  margin: 0 0 var(--cs-space-sm);
}

.cs-promo-banner__body p:last-child {
  margin-bottom: 0;
}

/* Value callouts inside the body — icon + label + one-line support, two-up
   on desktop (Resources "Tailored" band, change request 2026-09-13 T7.3).
   Markup lives in the body field; icons reuse the steps-cards line set. */
.cs-promo-banner__body .cs-promo-banner__callouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cs-space-md);
  margin-top: var(--cs-space-md);
}

.cs-promo-banner__callout {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.cs-promo-banner__callout-icon {
  flex: none;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  /* The source SVGs carry mismatched fills (#93B4DD vs #FC7F56) that read
     unevenly on the deep blue band — repaint both white, same trick as the
     warm steps-cards (icons are <img>s, a filter is the only repaint path). */
  filter: brightness(0) invert(1);
}

/* The steps-cards SVGs carry preserveAspectRatio="none" and no intrinsic
   size, so object-fit can't hold their ratio — non-square icons need their
   box sized to the viewBox by hand (step-foundation is 46×55). */
.cs-promo-banner__callout-icon--tall {
  width: 3.3rem;
}

.cs-promo-banner__callout-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cs-promo-banner__callout-text strong {
  font-weight: 700;
}

@media (max-width: 640px) {
  .cs-promo-banner__body .cs-promo-banner__callouts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Body lists — airy bullets for banner list content */
.cs-promo-banner__body ul {
  margin: 0;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Body links — white and underlined, surviving BB Global Styles */
.cs-promo-banner .cs-promo-banner__body a,
.cs-promo-banner .cs-promo-banner__body a:link,
.cs-promo-banner .cs-promo-banner__body a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cs-promo-banner .cs-promo-banner__body a:hover,
.cs-promo-banner .cs-promo-banner__body a:focus-visible {
  color: inherit;
  opacity: 0.85;
}

/* Footer row — spans both columns beneath image + content: decorative
   line + starburst on the left, CTA button on the right (per Figma). */
.cs-promo-banner__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--cs-space-md);
}

.cs-promo-banner__flourish {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  /* Bleed the line out to the card's left edge, past the padding. */
  margin-left: -4rem;
}

.cs-promo-banner__flourish::before {
  content: '';
  flex: 1;
  height: 3px;
  background: #F2F1F0;
  /* The starburst SVG's own line stub sits slightly below its vertical
     center — nudge ours to meet it seamlessly. */
  transform: translateY(0.46rem);
}

.cs-promo-banner__flourish img {
  display: block;
  height: 8.7rem; /* 87px per Figma */
  width: auto;
  margin-left: -2px;
}

/* ---------- "Media right" variant (Figma video-section) ----------
   Content left, media right, footer mirrored: button on the left,
   flourish flipped with the starburst inward and the line bleeding
   out to the card's right edge. */
/* Confined to the range where there are actually two columns to flip. This is a
   modifier selector (0,2,0), so left unscoped it outranks the single-column
   collapse in the max-width: 768px block below (0,1,0) — media queries add no
   specificity. That pinned the banner to two columns on phones, squeezing the
   heading into a 120px column where `overflow-wrap: break-word` then snapped
   words mid-character ("Founde/d This", "Becaus/e I Saw"). */
@media (min-width: 769px) {
  .cs-promo-banner--media-right .cs-promo-banner__card {
    grid-template-columns: minmax(0, 640fr) minmax(0, 504fr);
  }
}

.cs-promo-banner--media-right .cs-promo-banner__media {
  order: 2;
}

.cs-promo-banner--media-right .cs-promo-banner__content {
  order: 1;
}

.cs-promo-banner--media-right .cs-promo-banner__footer {
  flex-direction: row-reverse;
  /* Content/media get order 1/2 — keep the footer last in grid
     auto-placement or it jumps to the first row. */
  order: 3;
}

.cs-promo-banner--media-right .cs-promo-banner__flourish {
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: -4rem;
}

/* Heading accent — de-emphasized soft-blue runs via *asterisk* markup */
.cs-promo-banner .cs-promo-banner__heading-accent {
  color: var(--cs-accent-on-blue); /* was --cs-blue-soft — 1.82:1 on mid blue */
}

/* Blue accent variant — for light banners where soft-blue would vanish.
   Classes doubled to (0,4,0) so it also beats the --flat variant's
   pale-blue accent rule regardless of source order. */
.cs-promo-banner.cs-promo-banner--accent-blue .cs-promo-banner__heading-accent.cs-promo-banner__heading-accent {
  color: var(--cs-blue);
}

/* White accent variant — for deep-blue (#1B5386) bands where the dark-ink
   accent is unreadable (client request 2026-08-25, Rates & Insurance banner).
   White passes 7.99:1 on the deep blue. Classes doubled like --accent-blue. */
.cs-promo-banner.cs-promo-banner--accent-white .cs-promo-banner__heading-accent.cs-promo-banner__heading-accent {
  color: var(--cs-white);
}

/* ---------- Text-only variant (Figma mission banner) ----------
   No media: single centered column, statement-style heading (36px,
   relaxed leading, no title-case), flourish stops at ~63% like the mock. */
.cs-promo-banner--text-only .cs-promo-banner__card {
  grid-template-columns: minmax(0, 1fr);
}

.cs-promo-banner--text-only .cs-promo-banner__content {
  max-width: 88.6rem; /* 886px per Figma */
  margin-inline: 0 auto; /* left-aligned block per Figma 636:605 */
  width: 100%;
  padding-block: var(--cs-space-lg) 0;
}

/* THE RETREAT band ONLY (the site's one quote-style banner — Berty,
   2026-09-15): the top inset above stacked on the card's own 40px padding,
   leaving 80px of dead space over the eyebrow. The mission banners keep
   their inset. */
.cs-promo-banner--text-only.cs-promo-banner--body-quote .cs-promo-banner__content {
  padding-block-start: 0;
}

.cs-promo-banner--text-only .cs-promo-banner__heading {
  font-size: clamp(2.4rem, 2vw + 1.2rem, 3.6rem); /* 24px → 36px */
  font-weight: 700;
  line-height: 1.5;
  text-transform: none;
}

/* Section-style banners that lost their media (e.g. "Why Choose Individual
   Therapy?" on 393 — client dropped the video, change request 2026-09-13
   T3.1) keep the STANDARD heading scale, not the mission-statement style.
   A subheading marks them: every mission banner is heading-only. Flat bands
   excluded — the contact band's higher-specificity rules handle those.
   Selector kept on ONE line — BB's CSS rewrite breaks multiline selectors. */
.cs-promo-banner--text-only:not(.cs-promo-banner--flat) .cs-promo-banner__content:has(.cs-promo-banner__subheading) .cs-promo-banner__heading {
  font-size: clamp(3rem, 3vw + 1rem, 4.8rem); /* 30px → 48px, same as base */
  font-weight: 800;
  line-height: 1.212;
}

/* ...their content spans the full card (client: no dead space where the
   media used to be), and the body flows in two columns at desktop so the
   copy fills the width without stretching to an unreadable ~130ch measure.
   Below the stack breakpoint it reads as one normal column. */
.cs-promo-banner--text-only:not(.cs-promo-banner--flat) .cs-promo-banner__content:has(.cs-promo-banner__subheading) {
  max-width: none;
}

.cs-promo-banner--text-only:not(.cs-promo-banner--flat) .cs-promo-banner__content:has(.cs-promo-banner__subheading) .cs-promo-banner__body {
  max-width: none;
}

@media (min-width: 901px) {
  .cs-promo-banner--text-only:not(.cs-promo-banner--flat) .cs-promo-banner__content:has(.cs-promo-banner__subheading) .cs-promo-banner__body {
    columns: 2;
    column-gap: var(--cs-space-lg);
  }
}

.cs-promo-banner--text-only .cs-promo-banner__flourish {
  flex: 0 0 63%;
}

/* Flipped flourish — line bleeds out to the card's RIGHT edge, starburst
   sits inward on the left (per the individual-therapy mission banner). */
.cs-promo-banner--flourish-flip .cs-promo-banner__flourish {
  margin-left: auto; /* push to the right edge of the footer row */
  margin-right: -4rem;
  position: relative;
}

.cs-promo-banner--flourish-flip .cs-promo-banner__flourish::before {
  order: 2;
}

.cs-promo-banner--flourish-flip .cs-promo-banner__flourish img {
  order: 1;
  margin-left: 0;
  margin-right: -2px;
  transform: scaleX(-1);
}

/* Wordmark above the flourish line, near the card edge */
.cs-promo-banner__flourish-logo {
  position: absolute;
  right: 6rem;
  bottom: calc(50% + 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  color: var(--cs-white);
  font-family: var(--cs-font-display);
  white-space: nowrap;
}

.cs-promo-banner__flourish-logo-name {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
}

.cs-promo-banner__flourish-logo-sub {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.2;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.9;
}

.cs-promo-banner .cs-promo-banner__cta,
.cs-promo-banner .cs-promo-banner__cta:link,
.cs-promo-banner .cs-promo-banner__cta:visited {
  display: inline-block;
  background: var(--cs-white);
  color: var(--cs-ink);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 1.8rem; /* 18px */
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-decoration: none;
  padding: 1rem 2.4rem;
  border-radius: var(--cs-radius-pill);
  transition: background 200ms ease, transform 200ms ease, color 200ms ease;
}

.cs-promo-banner .cs-promo-banner__cta.cs-promo-banner__cta:hover,
.cs-promo-banner .cs-promo-banner__cta.cs-promo-banner__cta:focus-visible {
  background: var(--cs-off-white);
  color: var(--cs-blue-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Outline variant (second CTA on flat bands) */
.cs-promo-banner .cs-promo-banner__cta--outline,
.cs-promo-banner .cs-promo-banner__cta--outline:link,
.cs-promo-banner .cs-promo-banner__cta--outline:visited {
  background: transparent;
  color: var(--cs-white);
  border: 1px solid var(--cs-white);
}
.cs-promo-banner .cs-promo-banner__cta--outline.cs-promo-banner__cta--outline:hover,
.cs-promo-banner .cs-promo-banner__cta--outline.cs-promo-banner__cta--outline:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: var(--cs-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cs-promo-banner__card {
    padding: 3.2rem;
    gap: 3.2rem;
  }
}

@media (max-width: 768px) {
  /* Band convention on phones: the card's paint marks the section edge and
     the neighbor's 52px provides the whitespace — the desktop 40px top inset
     doubled up to lopsided 92px gaps above every banner. */
  .cs-promo-banner {
    padding-top: 0;
  }
  .cs-promo-banner__card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-lg);
    padding: 2.4rem;
    border-radius: 2rem;
  }
  .cs-promo-banner__media img {
    min-height: 24rem;
    max-height: 32rem;
  }
  .cs-promo-banner__flourish {
    display: none;
  }

  /* Mission banners (the ones carrying the wordmark lockup) keep their
     brand mark on small screens (client request 2026-09-15): logo centered
     below the text, starburst below the logo, and the line running from the
     card's right edge into the star (-2.4rem cancels the card's padding,
     same bleed trick as desktop's -4rem). :has(...) lifts specificity past
     both the display: none above and the --flourish-flip rules; the img
     keeps the flip variant's scaleX(-1) so its line stub faces the line. */
  .cs-promo-banner__flourish:has(.cs-promo-banner__flourish-logo) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "logo logo logo"
      ".    star line";
    align-items: center;
    row-gap: 1.6rem;
    flex: 1 1 auto;
    margin: 0 -2.4rem 0 0;
    transform: none;
  }
  .cs-promo-banner__flourish:has(.cs-promo-banner__flourish-logo)::before {
    grid-area: line;
  }
  .cs-promo-banner__flourish:has(.cs-promo-banner__flourish-logo) .cs-promo-banner__flourish-logo {
    grid-area: logo;
    position: static;
    justify-self: center;
    text-align: center;
  }
  .cs-promo-banner__flourish:has(.cs-promo-banner__flourish-logo) img {
    grid-area: star;
  }

  .cs-promo-banner .cs-promo-banner__cta {
    width: 100%;
    text-align: center;
  }
}

/* Tablets (600–768px): a CTA pair fits side by side instead of stacking
   (client 2026-09-15, Resources "Finding the Right Therapist" band). Placed
   after the block above so it outranks the full-width rule at equal
   specificity. A lone CTA just fills the row. */
@media (min-width: 600px) and (max-width: 768px) {
  .cs-promo-banner__footer {
    flex-wrap: wrap;
  }
  .cs-promo-banner .cs-promo-banner__cta {
    width: auto;
    flex: 1 1 auto; /* size to the label, grow to share the row */
    min-width: 0; /* the 330px floor forced the pair to wrap anyway */
  }
}


/* ---------- Flat full-width band (getting-started "Confidence" band) ---------- */
.cs-promo-banner.cs-promo-banner--flat {
  padding: 0;
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__card {
  /* Full-bleed: break out of the row container, same trick as cs-features-band.
     Interior stays on the container grid via side padding, so the media
     variant (photo left / content right) works inside the flat band too. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  border-radius: 0;
  padding: 5.6rem max(var(--cs-gutter), calc((100vw - var(--cs-container)) / 2));
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__content {
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  text-align: left;
}

/* Flat + heading + body (no media): two columns — heading left, body right
   (Figma "Addressing Individual and Relationship Needs" band). */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
  .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: var(--cs-space-lg);
  align-items: center;
}

.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
  .cs-promo-banner__content:has(.cs-promo-banner__heading) .cs-promo-banner__body {
  /* Block stays in the right column; text reads left-aligned (client request
     2026-08-25, was right-justified per Figma). */
  text-align: left;
  align-self: end;
}

/* Text-only flat band card: top-aligned content with fixed headroom */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__card {
  align-items: start;
  padding-top: 9rem;
}

/* Desktop: the Figma staggers the two blocks — the body box overlaps the
   heading box horizontally (it starts under the heading's "and", mid line 2),
   so the grid can't express it. Heading anchors the block; the body is
   absolutely positioned to the right. */
@media (min-width: 1101px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__card {
    height: 55rem; /* 550px */
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
    display: block;
    position: relative;
    /* Room for the absolutely-positioned body (top offset + ~3 lines) */
    min-height: 26rem;
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__body) .cs-promo-banner__heading {
    position: relative;
    max-width: 89.7rem; /* 897px per Figma */
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading) .cs-promo-banner__body {
    position: absolute;
    top: 21.4rem;
    right: 3.5rem; /* 35px */
    width: min(71.2rem, 54%); /* 712px per Figma */
  }
}

/* Text-only band with explicit light scheme + subheading (contact "Getting
   Started" band): the absolute stagger above collides with a subheading, so
   this variant flows — heading + subheading left, body right-aligned below. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: static;
  min-height: 0;
  gap: 1.2rem;
}

.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__subheading {
  font-size: 1.8rem;
  line-height: 1.5;
  text-transform: none;
  max-width: 79rem;
}

/* Contact-band heading: 48px + tight leading (client request 2026-09-08 —
   the shared 64px/1.5 text-only heading overwhelmed this band). Doubled
   heading class so it outranks the generic flat text-only rule. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__heading.cs-promo-banner__heading {
  font-size: clamp(3.2rem, 3vw + 1rem, 4.8rem); /* → 48px */
  line-height: 1.212;
}

/* All light text-only bands: body sits in flow, left-aligned. Resets the
   generic flat-band stagger (align-self: end + fixed min() width + absolute
   right offset) — client request 2026-09-08: no more right-pushed body. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__content .cs-promo-banner__body {
  position: static;
  align-self: flex-start;
  width: auto;
  letter-spacing: -0.02em;
}

/* Contact band only (the one with a subheading): 18px regular body. The
   other light bands keep the 24px italic from the generic text-only rule. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__content:has(.cs-promo-banner__subheading) .cs-promo-banner__body {
  font-style: normal;
  font-size: 1.8rem; /* 18px — body-copy floor */
  line-height: 1.5;
}

@media (min-width: 901px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__content .cs-promo-banner__body {
    max-width: 79rem; /* same measure as the subheading above */
    margin-left: 0; /* left-aligned with the subheading (client request 2026-09-08, was right-hugging) */
    margin-top: 1.6rem;
    text-align: left;  /* client request 2026-08-25, was right-justified */
  }
}

@media (min-width: 1101px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__card {
    height: auto;
    min-height: 49.7rem; /* 497px per Figma */
  }

  /* Contact band, desktop only: wider 75% measure for subheading + body
     (client request 2026-09-08). Tablet/mobile keep the caps above. */
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__content:has(.cs-promo-banner__subheading) .cs-promo-banner__subheading,
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only.cs-promo-banner--text-light .cs-promo-banner__content:has(.cs-promo-banner__subheading) .cs-promo-banner__body {
    max-width: 75%;
  }
}

/* Eyebrow + body, no heading (the "Start Therapy in Reno with Confidence"
   band). Both the 497px floor above and the 9rem top padding exist to serve
   the heading layout: above 1101px a heading turns the body into an
   absolutely-positioned block, which contributes no height, so the card needs
   a floor to contain it and headroom to sit under. With no heading the body
   stays in normal flow and sizes the card itself — the floor then only pads
   the band out with dead space, and the 9rem/5.6rem split leaves the text
   visibly high in the box. Size to content, with matching top and bottom.
   Ordered after the rule above so it wins the equal-specificity tie.

   Keep this selector on ONE line. BB rewrites module CSS into the per-layout
   stylesheet and collapses a newline that follows a `)`, which silently welds
   `:not(:has(…))` onto `.cs-promo-banner__card` as a compound selector and
   drops the descendant combinator — the rule then matches nothing, and only in
   the generated copy, so the source file still looks correct. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only:not(:has(.cs-promo-banner__heading)) .cs-promo-banner__card {
  min-height: 0;
  padding-top: 5.6rem; /* match the flat band's 5.6rem bottom */
}

/* Mobile: single column — heading on top, body below. */
@media (max-width: 900px) {
  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading):has(.cs-promo-banner__body) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only
    .cs-promo-banner__content:has(.cs-promo-banner__heading) .cs-promo-banner__body {
    text-align: left;
    align-self: start;
  }
}

/* Band title lives in the eyebrow: white caps with the short line on the left */
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__eyebrow {
  color: var(--cs-white);
  font-weight: 700;
  font-size: 1.8rem; /* 18px per Figma */
  letter-spacing: -0.02em;
}
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__eyebrow-line {
  background: var(--cs-white);
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body {
  max-width: 101rem; /* 1010px per Figma */
  font-size: 2rem;   /* 20px */
  line-height: 1.5;
  text-transform: none;
}

/* Text-only flat bands (Confidence / Addressing): 64px heading + 24px
   italic body per Figma. */
.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__heading {
  font-size: clamp(3.6rem, 4vw + 1rem, 6.4rem); /* → 64px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em; /* -1.28px @ 64px */
}

.cs-promo-banner.cs-promo-banner--flat.cs-promo-banner--text-only .cs-promo-banner__body {
  font-style: italic;
  font-size: 2.4rem; /* 24px */
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Photo bands (flat + media): dark-ink body per Figma (#1B1139 @ 45%) */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only) .cs-promo-banner__body {
  color: var(--cs-ink-soft); /* was #1b1139 at opacity .45 */
}

/* Dark photo bands with explicit light scheme (meet-the-team "How We Match"):
   soft-white text per Figma — heading 40px/1.5 sentence case, body 15px/1.5. */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only).cs-promo-banner--text-light .cs-promo-banner__heading {
  color: #F2F1F0;
  font-size: 4rem; /* 40px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: none;
}

.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only).cs-promo-banner--text-light .cs-promo-banner__body {
  color: #F2F1F0;
  opacity: 1;
  font-size: 1.8rem; /* 18px — body-copy floor */
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* Photo bands: content top-aligned (starts level with the image top) */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only) .cs-promo-banner__content {
  align-self: start;
}

/* Photo bands: the footer (buttons) renders INSIDE the content column,
   56px below the body. The content's own flex gap (--cs-space-md) already
   contributes, so the margin makes up the difference to exactly 5.6rem. */
.cs-promo-banner.cs-promo-banner--flat:not(.cs-promo-banner--text-only) .cs-promo-banner__content .cs-promo-banner__footer {
  grid-column: auto;
  margin-top: calc(5.6rem - var(--cs-space-md)); /* 56px total gap */
  flex-direction: row;
  flex-wrap: wrap;
}

/* Flat bands: dark ink accent — pale blue only hit 2.9:1 on the band blue.
   Same "darker wins on a blue band" fix as the default accent above. */
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__heading-accent {
  color: var(--cs-accent-on-blue);
}

.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a,
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:link,
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:hover,
.cs-promo-banner.cs-promo-banner--flat .cs-promo-banner__body a:focus-visible {
  opacity: 0.85;
  color: inherit;
}