/* ============================================================
   SECTIONS — Home 5 / About Us / Contact Us
   ============================================================ */

/* ── HERO (Home 5) ─────────────────────────────── */
/* The fixed header floats over the hero and occupies its top ~140px, so the image is anchored to the top and the crop is taken from the bottom, keeping subjects clear of the menu. */
/* Formerly two rulesets —.sh-hero (About/Who We Help/Services) and.sh-hero-home (Home only, no flex, no position:relative, a translucent background-color + blend-mode instead of a separate.sh-hero__overlay div). */
.sh-hero {
  position: relative;
  overflow: hidden;
  background-image: var(--hero-bg);
  background-size: var(--hero-zoom, cover);
  background-position: center top;
  background-repeat: no-repeat;
}

/* Editor-set photo wash (Hero → Photo Overlay Color / Strength). */
/* Directional, not a flat wash. */
.sh-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    var(--hero-scrim, rgba(11, 22, 34, .62)) 0%,
    var(--hero-scrim, rgba(11, 22, 34, .62)) 62%,
    var(--hero-scrim-fade, rgba(11, 22, 34, 0)) 100%
  );
  pointer-events: none;
}

/* The default scrim is weighted to the left, where left-aligned copy
   sits. Centred copy spans the middle, so it gets a symmetric one —
   dark through the centre, easing off at both edges — rather than
   sitting half on the fade. */
.sh-hero--align-center .sh-hero__scrim {
  background: linear-gradient(
    90deg,
    var(--hero-scrim-fade, rgba(11, 22, 34, 0)) 0%,
    var(--hero-scrim, rgba(11, 22, 34, .62)) 28%,
    var(--hero-scrim, rgba(11, 22, 34, .62)) 72%,
    var(--hero-scrim-fade, rgba(11, 22, 34, 0)) 100%
  );
}

@media (min-width: 769px) {
  .sh-hero {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}

@media (max-width: 768px) {
  .sh-hero {
    /* Portrait crop when the page supplies one. The desktop zoom is
       dropped here: it exists to clear the floating header, which is
       far smaller on mobile, and zooming further into an already
       severe crop is what made these unreadable. */
    background-image: var(--hero-bg-mobile, var(--hero-bg));
    background-size: cover;
    background-position: center 30%;
  }

  /* Home keeps the photo-led cover hero on phones, but the desktop left/right scrim would sit at nearly one uniform opacity across a narrow viewport. */
  .page-home .sh-hero__scrim {
    background: linear-gradient(
      to bottom,
      var(--hero-scrim, rgba(11, 22, 34, .62)) 0%,
      var(--hero-scrim, rgba(11, 22, 34, .62)) 48%,
      var(--hero-scrim-fade, rgba(11, 22, 34, 0)) 100%
    );
  }
}

/* ── Home cover: mobile side-blend treatment ──────────────────
   Match the Side/Blend hero on phones: copy starts on the editor-set
   overlay colour, then the section blends down to the white media
   area. The cover photo deliberately remains out of the background. */
@media (max-width: 768px) {
  .page-home .sh-hero {
    background: var(--hero-mobile-bg, #0b1622) !important;
    padding: 10rem 1.5rem 4rem;
  }

  .page-home .sh-hero__scrim {
    background: none;
  }

  /* The solid end of the Side/Blend treatment needs light copy,
     matching the Services hero, until the gradient releases to white. */
  .page-home .sh-hero__headline,
  .page-home .sh-hero__subtext,
  .page-home .sh-hero__meta,
  .page-home .sh-hero .sh-mark,
  .page-home .sh-hero__meta * {
    color: var(--hero-mobile-fg, #fff);
  }

  .page-home .sh-hero__meta-dot { background: currentColor; }

  .page-home .sh-hero__content {
    padding: 0;
    min-height: 0;
    margin: 0 0 4rem;
  }

  .page-home .sh-hero__content-inner { max-width: 100%; }

  .page-home .sh-hero .sh-highlight,
  .page-home .sh-hero .sh-highlight .sh-mark {
    color: #fff;
  }

  /* The next Home section already begins with its own padding, so the
     mobile photo card must meet it directly instead of adding 3.5rem. */
  .page-home .sh-hero::after {
    margin: 0;
    height: 20rem;
    aspect-ratio: auto;
    border-radius: var(--radius-2xl);
  }

  .page-home .sh-hero.sh-hero--hide-mobile-media::after {
    display: none;
    content: none;
  }

  .page-home .sh-hero--hide-mobile-media .sh-hero__content {
    margin-bottom: 0;
  }

  /* These adjacent Home sections each carry standard 4rem section
     padding. Halve only the touching edges so their shared white
     space reads as one intentional 4rem rhythm, not two stacked. */
  .page-home .sh-who-we-are {
    padding-bottom: 2rem;
  }

  .page-home .sh-why {
    padding-top: 2rem;
  }
}

/* Measure, rhythm and type scale are shared with the Services hero  — both are full-bleed photo heroes with centred copy, and the About/Who-we-help frames specify the same 64px headline on a 1003px measure. */
.sh-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin-top: 5rem;
  min-height: calc(70vh - 7.5rem);
}

/* Direct child of.sh-hero__content — carries the actual width
   constraint and vertical placement, so the outer element stays a
   plain row-direction flex wrapper. mx-auto (margin: 0 auto) self-
   centers this horizontally within the row even with no
   justify-content on the parent; align-self handles the vertical
   placement independently (the cross axis, since the parent is
   flex-direction: row). Breakpoints match Tailwind's defaults
   (md:768px, lg:1024px, xl:1280px); 3xl is not a default Tailwind
   breakpoint — 1920px assumed here, confirm against the actual
   custom config if different. */
.sh-hero__content-inner {
  width: 100%;
  margin: 0 auto;
  max-width: 88%;
  align-self: center;
}

@media (min-width: 768px) {
  .sh-hero__content-inner { max-width: 85%; }
}

@media (min-width: 1024px) {
  .sh-hero__content-inner { max-width: 80%; }
}

@media (min-width: 1280px) {
  .sh-hero__content-inner { max-width: 75%; }
}

@media (min-width: 1920px) {
  .sh-hero__content-inner { max-width: 70%; }
}

/* ── Text Position (cover) ───────────────────────────────────── Moves the copy column across the hero and turns the type to match, so "Left" reads as left-aligned copy on the left rather than a left-placed column of centred text. */
/* Left = left-aligned copy sitting in the centred column, which is what this hero has always looked like. */
.sh-hero--align-left .sh-hero__content-inner {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Centre means centred: the column sits in the middle AND the copy inside it is centred. */
.sh-hero--align-center .sh-hero__content-inner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sh-hero--align-center .sh-hero__content-panel {
  width: 100%;
  align-items: center;
  padding-right: 0;
}

.sh-hero--align-center .sh-hero__headline,
.sh-hero--align-center .sh-hero__subtext {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.sh-hero--align-left .sh-hero__ctas,
.sh-hero--align-left .sh-hero__meta { justify-content: flex-start; }

.sh-hero--align-center .sh-hero__ctas,
.sh-hero--align-center .sh-hero__meta { justify-content: center; }

/* Direct child of.sh-hero__content-inner, holding the headline and.sh-hero__stack. */
.sh-hero__content-panel {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .sh-hero__content-panel { width: 75%; }
}

@media (min-width: 1280px) {
  .sh-hero__content-panel {
    padding-right: 7.5rem;
  }
}

.sh-hero__stack { width: 100%; }

.sh-hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  font-size: clamp(2.375rem, 4.5vw, 4rem);
  max-width: 62.6875rem;
}

/* Home's hero is a different treatment from About/Who-we-help: a two-line display statement at 78px SemiBold with a tighter 0.95 leading and an italic second line , where the others are a single 64px regular sentence. */
.page-home .sh-hero__headline,
.sh-hero__headline:has(em) {
  font-weight: 600;
  /* 1.32, not the original 0.95: at this size the font's own glyph box (ascent+descent) is ~1.29em — taller than 0.95 line-height on its own. */
  line-height: 1.32;
  /* Down from clamp(2.75rem, 5.4vw, 4.875rem) — 78px at 1440 was
     dominating the page. */
  font-size: clamp(2.25rem, 4.1vw, 3.625rem);
  max-width: 52.625rem;
}

/* Line 2: Zalando Sans Italic 4.25rem, regular weight (vs SemiBold 4.875rem line 1) */
.sh-hero__headline em {
  font-style: italic;
  font-weight: 400;
  font-size: 0.87em;
}

.sh-hero__stack { display: flex; flex-direction: column; gap: 1.75rem; max-width: 100%; }

/* Brand name picked out of hero copy (About) */
/* Editors mark brand-colour words by wrapping them in [square
   brackets] in any copy field; starfish_text() turns those into
.sh-mark spans. Section-specific classes below override the colour
   where the design asks for a different accent. */
.sh-mark { color: var(--color-primary); }
.sh-hero__mark { color: var(--color-primary); }

/* On a photo hero the accent sits on the dark scrim, where the brand blue is blue-on-navy: measured 2.03:1 against the home hero, which fails even the 3:1 large-text bar. */
.sh-hero .sh-mark,
.sh-hero .sh-hero__mark { color: var(--color-blue-pale); }

/* ── Editor highlight ───────────────────────────────────────── A real background box behind the words, applied from the visual editor's Highlight button. */
.sh-highlight {
  /* Plain background-color paints the FONT'S OWN CONTENT AREA (ascent+descent) on an inline element — CSS gives no property to shrink that below the font's metrics. */
  background-color: var(--color-highlight);
  color: #fff;
  padding: 0 0.14em;
  /* Without this a highlight broken across two lines is painted as
     one box spanning the wrap, leaving a bar across the gap. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The accent-colour override above must not repaint text inside a
   highlight box — in there, white on teal is the pair that was
   measured. */
.sh-hero .sh-highlight,
.sh-hero .sh-highlight .sh-mark { color: #fff; }

.sh-hero__subtext {
  font-family: var(--font-nav);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: #f2f2f7;
  width: 52.4375rem;
  max-width: 100%; /*.sh-hero__stack is full-width, so this caps to the screen */
}

.sh-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Two CTAs (e.g. Services' "Talk to us" note + "Request Intake"
   button) sit side by side on desktop; the mobile column stack
   further down (max-width: 768px) stays untouched. Placed after the
   base rule above so it wins the cascade at equal specificity. */
@media (min-width: 769px) {
  .sh-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.sh-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-blue-pale);
}

.sh-hero__meta-dot {
  display: inline-block;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* ── WHO WE ARE  ───────────────────────────────── */
.sh-who-we-are {
  background: var(--color-bg-section);
  padding: 5.75rem var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.125rem;
}

.sh-who-we-are__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.375rem;
  text-align: center;
}

.sh-who-we-are__headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -1.4px;
  color: var(--color-heading-alt);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  max-width: 45rem;
}

.sh-who-we-are__headline em {
  font-style: italic;
  font-weight: 300;
  font-size: 0.94em;
  color: var(--color-blue-deep);
}

/* Brand name picked out of the paragraph (home "Who we are") */
.sh-who-we-are__mark { color: var(--color-primary); }

.sh-who-we-are__subtext {
  font-family: var(--font-nav);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  max-width: 51.9375rem;
}

/* Arch photo trio */
.sh-who-we-are__gallery {
  position: relative;
  width: 64.125rem;
  max-width: 100%;
  height: 29.75rem;
}

.sh-arch {
  position: absolute;
  width: 22.25rem;
  height: 26.5625rem;
  border-radius: 9.375rem;
  overflow: hidden;
  top: 1.5625rem;
}

.sh-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-arch--left  { left: 0;   transform: rotate(-9deg); }
.sh-arch--mid   { left: 50%; transform: translateX(-50%); top: 1.5625rem; border-radius: 8.125rem; }
.sh-arch--right { right: 0;  transform: rotate(9deg); border-radius: 8.125rem; }

/* ── WHY STARFISH  ─────────────────────────────── */
.sh-why {
  background: var(--color-bg-section);
  padding: 5.75rem var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.sh-why__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.sh-why__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-heading);
  text-align: center;
}

.sh-why__grid {
  display: flex;
  gap: 3rem;
  align-items: stretch;
  border-top: 1px solid var(--color-divider);
  width: 100%;
  max-width: var(--container);
}

.sh-why__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.25rem;
  text-align: center;
}

.sh-why__col-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.7vw, 2.375rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text);
  max-width: 18.1875rem;
}

.sh-why__col-sub {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-heading-alt);
}

.sh-why__col-sub em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--color-primary);
}

.sh-why__col-body {
  font-size: var(--text-md);
  line-height: 1.5;
  color: #000;
  opacity: 0.8;
  max-width: 22.625rem;
}

/* Inline links inside editorial copy ([label](url) via starfish_text). */
.sh-why__col-body a,
.sh-who-we-are__subtext a,
.sh-hero__subtext a,
.sh-hero-side__subtext a,
.sh-hero-split__subtext a,
.sh-hero-stacked__subtext a,
.sh-who-help__subtext a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
  transition: var(--transition-base);
}

.sh-why__col-body a:hover,
.sh-who-we-are__subtext a:hover,
.sh-hero__subtext a:hover,
.sh-hero-side__subtext a:hover,
.sh-hero-split__subtext a:hover,
.sh-hero-stacked__subtext a:hover,
.sh-who-help__subtext a:hover {
  color: var(--color-primary-hover);
  text-decoration-thickness: 2px;
}

.sh-why__divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, var(--color-divider), var(--color-divider-strong));
  flex-shrink: 0;
}

/* ── WHO WE HELP  ──────────────────────────────── */
.sh-who-help {
  background: var(--color-bg-white-soft);
  padding: 7.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sh-who-help__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 0 1.5rem 5rem;
  text-align: center;
}

.sh-who-help__headline {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.5vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-heading-soft);
  max-width: 55.375rem;
}

.sh-who-help__sub { display: flex; flex-direction: column; gap: 1rem; align-items: center; }

.sh-who-help__subtext {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 400;
  line-height: 1.5;
  color: #4c4c4c;
  max-width: 48rem;
}

.sh-who-help__medicaid {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-primary);
  text-wrap: pretty;
}

/* Image strip w/ 4 glass category cards */
.sh-who-help__strip-wrap {
  width: 100%;
  max-width: var(--container-wide);
  padding: 0 var(--gutter);
}

/* Photo supplied as --section-bg, not an inline background-image, so
   the mobile rules can drop it (inline wins over stylesheets). */
.sh-who-help__strip {
  background-image: var(--section-bg);
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  padding: 6.625rem 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--color-heading-alt);
}

.sh-who-help__strip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.sh-cat-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 2rem 1.375rem 4.125rem;
  border-radius: var(--radius-md);
  background: rgba(166, 166, 166, 0.25);
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  outline: none;
}

.sh-cat-card__icon { height: 2.1875rem; display: flex; align-items: flex-start; }
.sh-cat-card__icon img, .sh-cat-card__icon svg {
  width: 2.25rem;
  height: 2.1875rem;
  object-fit: contain;
  object-position: left center;
}

/* Photo with info overlay: on hover a translucent brand-tinted panel
   fades in over the image (photo stays visible underneath). */
.sh-cat-card__flip {
  position: relative;
  height: 18.125rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sh-cat-card__front {
  position: absolute;
  inset: 0;
}

.sh-cat-card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.sh-cat-card__back {
  position: absolute;
  inset: 0;
  /* Fallback for browsers without color-mix() */
  background: rgba(26, 91, 126, 0.8);
  /* Derived from the brand token — retint follows --color-blue-deep */
  background: color-mix(in srgb, var(--color-blue-deep) 80%, transparent);
  display: flex;
  align-items: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sh-cat-card__back p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  color: #fff;
}

.sh-cat-card:hover .sh-cat-card__back,
.sh-cat-card:focus-visible .sh-cat-card__back,
.sh-cat-card:focus-within .sh-cat-card__back {
  opacity: 1;
}

.sh-cat-card__label {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}

.sh-who-help__cta-row {
  display: flex;
  justify-content: center;
  padding-top: 5rem;
}

.sh-who-help__cta-row .sh-btn--blue {
  font-size: var(--text-xl);
  font-weight: 700;
}

/* ── HOW IT WORKS / dark steps  ── */
/* The photo arrives from the admin field as --section-bg on the
   element rather than as an inline background-image: an inline
   declaration cannot be overridden by a stylesheet without
   !important, and the mobile rules below need to drop it. */
.sh-steps {
  position: relative;
  padding: 7.5rem var(--gutter);
  overflow: hidden;
  background-color: #121212;
  background-image: var(--section-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sh-steps__overlay {
  position: absolute;
  inset: 0;
  background: var(--dark-overlay);
}

.sh-steps__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.sh-steps__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.sh-steps__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep the pill chip at its natural size */
  gap: 1.5rem;
  max-width: 45rem;
}

.sh-steps__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.72px;
  color: #fff;
}

.sh-steps__headline em {
  font-style: italic;
  color: var(--color-primary);
}

.sh-steps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sh-step-card {
  background: var(--dark-card-bg);
  border: 1px solid var(--dark-card-border);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  backdrop-filter: blur(0.9375rem);
  -webkit-backdrop-filter: blur(0.9375rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sh-step-card__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  color: var(--color-primary);
  line-height: 1;
}

.sh-step-card__title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #fff;
}

.sh-step-card__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-light);
}

/* About variant: bigger title, lighter body */
.sh-steps--model .sh-step-card__title { font-size: var(--text-2xl); }
.sh-steps--model .sh-step-card__body  { color: var(--dark-card-text); }

.sh-steps__cta { display: flex; justify-content: center; }

/* ── Steps, light variant ("How it works" redesign) ───────────
   Same markup as the dark panel — headline, cards, optional CTA —
   with the photo/overlay/dark-card treatment turned off and a plain
   4-column row with vertical dividers instead of the 2×2 dark-glass
   card grid. Scoped under.sh-steps--light throughout so the About
   page's existing dark "Our Model" section (no variant, or 'model')
   is completely untouched. */
.sh-steps--light {
  background-color: #fff;
  background-image: none;
  padding-top: 8.25rem;    /* 132px */
  padding-bottom: 8.25rem; /* 132px */
}

/* Intake's "How it works" needs less air than Home's — same light
   variant, just a shorter section. */
.sh-steps--light.sh-steps--compact {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.sh-steps--light .sh-steps__inner { gap: 3.5rem; }

.sh-steps--light .sh-steps__header-row { justify-content: center; }

.sh-steps--light .sh-steps__left {
  align-items: center;
  max-width: none;
  text-align: center;
}

.sh-steps--light .sh-steps__headline {
  color: var(--color-heading-alt);
  font-weight: 500;
  /* Capped below the shared clamp's 3.5rem ceiling — this light
     variant (Refer a Patient's "How it works") reads as a section
     subhead among smaller surrounding copy, not the hero-scale
     headline the dark variant is. */
  font-size: clamp(2.25rem, 4vw, 2.75rem);
}

.sh-steps--light .sh-steps__grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
}

.sh-steps--light .sh-step-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 2.5rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex: 1 1 0;
  gap: 0.75rem;
}

.sh-steps--light .sh-step-card:first-child { padding-left: 0; }
.sh-steps--light .sh-step-card:last-child  { padding-right: 0; }

.sh-steps--light .sh-step-card__number {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-muted);
}

.sh-steps--light .sh-step-card__title {
  color: var(--color-primary);
}

.sh-steps--light .sh-step-card__body {
  color: var(--color-text);
}

.sh-steps__divider {
  align-self: stretch;
  width: 1px;
  background: var(--color-border);
  flex: 0 0 auto;
}

/* Tablet / narrow-laptop range: a single 4-across row has no room left for the title+body text once each column drops under ~280px, well before the 900px stack point — 2×2 reads comfortably at these widths instead. */
@media (max-width: 1200px) and (min-width: 901px) {
  .sh-steps--light .sh-steps__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }
  .sh-steps--light .sh-step-card { padding: 0; }
  .sh-steps__divider { display: none; }
}

@media (max-width: 900px) {
  .sh-steps--light { padding-top: 4rem; padding-bottom: 4rem; }
  .sh-steps--light .sh-steps__grid { display: flex; flex-direction: column; gap: 2.5rem; }
  .sh-steps--light .sh-step-card { padding: 0; }
  /* Vertical dividers (side-by-side columns) become horizontal ones
     (stacked steps) — same divider element, just reoriented, and
     deliberately not full-width: a short rule under each step reads
     as "next" without a stack of full-bleed lines. */
  .sh-steps__divider {
    display: block;
    align-self: center;
    width: 75%;
    height: 1px;
  }
}

/* ── STAT BAR  — up to 4 counters ──────────────── */
.sh-stat-bar {
  /* Same light section-separator tint used elsewhere on the page
     (--color-bg-section) rather than a bespoke value — keeps this
     section visually distinct from the white ones around it without
     introducing a new colour to the palette. */
  background: var(--color-bg-section);
  padding: 4.375rem var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.sh-stat-bar__grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2.5rem, 6vw, 6rem);
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container);
}

.sh-stat-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
  min-width: 8rem;
}

.sh-stat-bar__number {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6vw, 4.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--color-primary);
}

.sh-stat-bar__suffix { font-weight: 300; }

.sh-stat-bar__label {
  font-family: var(--font-nav);
  font-size: var(--text-md);
  font-weight: 500;
  color: #000;
}

/* ── TESTIMONIALS  ─────────────────────────────── */
.sh-testimonials {
  background: var(--color-bg-testimonial);
  padding: 7.5rem var(--gutter);
}

.sh-testimonials__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: 5rem;
  align-items: center;
}

/* Photo column: stacked images, crossfaded to match the leftmost card */
.sh-testimonials__photo {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 43.75rem;
  border-radius: var(--radius-3xl);
  overflow: hidden;
}

.sh-testimonials__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.sh-testimonials__photo img.is-active { opacity: 1; }

/* Divider: pulses a traveling highlight while the carousel moves */
.sh-testimonials__divider {
  position: relative;
  width: 1px;
  height: 25rem;
  background: var(--color-divider);
  flex-shrink: 0;
  overflow: hidden;
}

.sh-testimonials__divider::after {
  content: '';
  position: absolute;
  left: 0;
  top: -30%;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--color-primary), transparent);
  opacity: 0;
}

.sh-testimonials__divider.is-moving::after {
  opacity: 1;
  animation: sh-divider-sweep 0.7s ease-in-out;
}

@keyframes sh-divider-sweep {
  from { top: -30%; }
  to   { top: 100%; }
}

/* Carousel viewport: two cards visible, track slides leftward.
   max-width caps the no-wrap track's min-content contribution so
   it can never widen the column-flex layout on small screens. */
.sh-testimonials__viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  contain: inline-size;
  /* Horizontal gestures drive the carousel; vertical still scrolls the page. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.sh-testimonials__track {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.sh-testimonials__track .sh-testimonial-card {
  flex: 0 0 calc(50% - 0.75rem);
  min-width: 0;
}

/* Card top row: quote icon left; avatar appears on mobile only */
.sh-testimonial-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sh-testimonial-card__avatar {
  display: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Carousel wrapper: hosts the side arrows */
.sh-testimonials__carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Prev / next controls — sit on the two sides of the carousel (mobile) */
.sh-testimonials__nav-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
  transition: var(--transition-base);
}

.sh-testimonials__nav-btn--prev { left: -0.625rem; }
.sh-testimonials__nav-btn--next { right: -0.625rem; }

.sh-testimonials__nav-btn:hover,
.sh-testimonials__nav-btn:active {
  background: var(--color-primary);
  color: #fff;
}

/* Slick-style dots — mobile only, active dot stretches into a pill */
.sh-testimonials__dots {
  display: none;
  gap: 0.5rem;
  justify-content: center;
  padding-top: 1.25rem;
}

.sh-testimonials__dot {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.sh-testimonials__dot.is-active {
  width: 1.75rem;
  background: var(--color-primary);
}

.sh-testimonials__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.sh-testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.sh-testimonials__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-heading-dark);
}

.sh-testimonials__subtext {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-muted-alt);
}

.sh-testimonials__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sh-testimonial-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sh-testimonial-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sh-testimonial-card__icon svg { width: 1.5rem; height: 1.5rem; }

.sh-testimonial-card__quote {
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}

.sh-testimonial-card__author {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted-alt);
}

.sh-testimonials__footnote {
  font-family: var(--font-nav);
  font-size: 0.875rem;
  color: var(--color-muted-alt);
}

/* ── AUDIENCE CARDS / Getting help?  ───────────── */
.sh-audience {
  background: #fff;
  padding: 7.5rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: center;
}

.sh-audience__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding-bottom: 5rem;
  text-align: center;
}

.sh-audience__headline {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-heading-soft);
  max-width: 55.375rem;
}

.sh-audience__subtext {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 40rem;
}

.sh-audience__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  max-width: var(--container);
}

.sh-audience-card {
  background: var(--color-bg-audience);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sh-audience-card__img {
  height: 23.75rem;
  overflow: hidden;
}

.sh-audience-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-audience-card__content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.sh-audience-card__label {
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-teal-deep);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.sh-audience-card__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-teal-deep);
}

.sh-audience-card__body {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-teal-deep);
  opacity: 0.8;
}

.sh-audience-card__footer { padding: 0 0 2.5rem 2.5rem; }

/* ── HERO: stacked (About-style) ─────────────────
   Element order comes from the template; every child row is
   centered. Media = single strip, card list, or auto marquee. */
.sh-hero-stacked {
  background: #fff;
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Use the foreground color calculated for the configured solid background. */
.sh-hero-stacked--bg {
  background: var(--hero-stacked-bg);
}

/* Backdrop image, behind the centered copy. A layered background
   (image + wash) rather than a separate ::before, so it participates
   in the same paint layer as the solid/gradient background it can sit
   on top of, with no extra element or stacking-context to manage. */
.sh-hero-stacked--photo {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    var(--hero-stacked-bg-image);
  background-size: cover;
  background-position: center;
}

.sh-hero-stacked--bg .sh-hero-stacked__headline {
  color: var(--hero-stacked-fg);
}

.sh-hero-stacked--bg .sh-hero-stacked__headline em {
  color: var(--hero-stacked-fg);
  opacity: 0.85;
}

.sh-hero-stacked--bg .sh-hero-stacked__subtext {
  color: var(--hero-stacked-fg-sub);
  opacity: 0.85;
}

.sh-hero-stacked__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
  text-align: center;
}

/* ── Text Position (stacked) ─────────────────────────────────── The section and each row are both column-flex, so the row's own align-items decides where its children sit and text-align turns the type. */
.sh-hero-stacked--align-left .sh-hero-stacked__row {
  align-items: flex-start;
  text-align: left;
}

/* The copy blocks are max-width capped, so on a wide viewport they
   need the opposite margin to actually reach the edge they are
   aligned to. */
.sh-hero-stacked--align-left .sh-hero-stacked__headline,
.sh-hero-stacked--align-left .sh-hero-stacked__subtext { margin-right: auto; }

.sh-hero-stacked--align-left .sh-hero-ctas,
.sh-hero-stacked--align-left .sh-hero-ctas-group { align-items: flex-start; justify-content: flex-start; }

.sh-hero-stacked__headline {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-navy);
  max-width: 55.375rem;
}

.sh-hero-stacked__headline em {
  font-style: italic;
  color: var(--color-blue-deep);
}

.sh-hero-stacked__subtext {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 48rem;
}

/* CTA pair (shared by stacked + split) */
.sh-hero-ctas {
  display: flex;
  gap: 1rem;
  /* nowrap — organic content-driven wrapping would break the row onto two lines at whatever width the labels happen to stop fitting, ahead of (or with no relation to) the deliberate stacked/equal- width breakpoint below. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

/* CTA row + note beneath it (10px column gap). */
.sh-hero-ctas-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

/* Note pill Hugs its content rather than filling
   the column, so the mint background traces the sentence. */
.sh-hero-note {
  display: inline-flex;
  /* Top-aligned so the icon sits with the first line when the text
     wraps, rather than drifting to the vertical middle of a two-line
     block and reading as unattached to either line. */
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.8125rem;
  background: #e5fafa;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: #219f99;
  text-align: center;
}

/* The icon must not shrink when the text wraps to two lines on
   narrow screens, and must not stretch when it does not. */
.sh-hero-note__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Media: single full strip */
.sh-hero-stacked__strip-wrap {
  width: 100%;
  max-width: var(--container-wide);
  padding: 3rem var(--gutter) 0;
}

.sh-hero-stacked__strip {
  position: relative;
  height: 44.0625rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sh-hero-stacked__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-hero-stacked__strip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* Media: horizontal card list (scrollable) / auto marquee */
.sh-hero-stacked__cards-wrap {
  width: 100%;
  max-width: var(--container-wide);
  padding: 3rem var(--gutter) 0;
  overflow: hidden;
}

.sh-hero-stacked__cards {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sh-hero-stacked__cards::-webkit-scrollbar { display: none; }

.sh-hero-stacked__card {
  flex: 0 0 23.75rem;
  height: 30rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: start;
}

.sh-hero-stacked__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Auto-scrolling marquee variant: track is duplicated in markup,
   animation loops half its own width for a seamless drift. */
.sh-hero-stacked__cards-wrap.is-marquee .sh-hero-stacked__cards {
  overflow: visible;
  width: max-content;
  animation: sh-marquee 40s linear infinite;
}

.sh-hero-stacked__cards-wrap.is-marquee:hover .sh-hero-stacked__cards {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  .sh-hero-stacked__cards-wrap.is-marquee .sh-hero-stacked__cards {
    animation: none;
    overflow-x: auto;
    width: auto;
  }
}

/* ── HERO: split (text one side, image the other) ──────────── */
.sh-hero-split {
  background: var(--color-bg);
  padding: 12.5rem var(--gutter) 6rem;
}

.sh-hero-split__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: stretch;
}

.sh-hero-split--media-left .sh-hero-split__inner {
  flex-direction: row-reverse;
}

.sh-hero-split__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}

.sh-hero-split__content .sh-hero-ctas { justify-content: flex-start; }

.sh-hero-split__headline {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-heading-alt);
}

.sh-hero-split__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-blue-deep);
}

.sh-hero-split__subtext {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 35rem;
}

.sh-hero-split__meta {
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-blue-deep);
}

.sh-hero-split__media {
  flex: 1;
  min-width: 0;
  min-height: 35rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

/* ── HERO: side (solid color, breadcrumbs + heading + action row) ── */
.sh-hero-side {
  background: var(--hero-side-bg, #0f172a);
  padding: 12.5rem var(--gutter) 6rem;
}

.sh-hero-side__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: center;
}

.sh-hero-side--media-left .sh-hero-side__inner {
  flex-direction: row-reverse;
}

/* No narrowing of __inner when there's no image. */

.sh-hero-side__content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  max-width: 45rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.sh-hero-side__breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sh-hero-side__breadcrumbs li { display: flex; align-items: center; gap: 0.375rem; }

.sh-hero-side__breadcrumbs a,
.sh-hero-side__breadcrumbs span {
  font-family: var(--font-nav);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--hero-side-fg-sub, rgba(255, 255, 255, 0.7));
}

.sh-hero-side__breadcrumbs a { opacity: 0.7; transition: var(--transition-base); }
.sh-hero-side__breadcrumbs a:hover { opacity: 1; }
.sh-hero-side__breadcrumbs span[aria-current] { opacity: 1; }

.sh-hero-side__headline {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hero-side-fg, #fff);
}

.sh-hero-side__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--hero-side-fg, #fff);
}

.sh-hero-side__subtext {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--hero-side-fg-sub, rgba(255, 255, 255, 0.75));
  /* No cap of its own — __content already sets the measure for the
     whole column, and a second, narrower number here only meant the
     subtext wrapped short of the headline it sits under. One value
     to change instead of two. */
}

.sh-hero-side__action {
  /* One height for every control in the row. */
  --action-h: 3.5rem;
  display: flex;
  /* Wrap on demand rather than switching to a column at a fixed width. */
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.sh-hero-side__action > * {
  flex: 1 1 auto;
}

.sh-hero-side__action > .sh-btn,
.sh-hero-side__action .sh-hero-side__dropdown select {
  height: var(--action-h);
  min-height: 0; /* the shared height wins over the icon-pill's own */
  padding-block: 0;
  box-sizing: border-box;
}

/* Bring the icon circle down to fit inside the shared row height with an even inset. */
.sh-hero-side__action .sh-btn {
  --btn-icon-size: calc(var(--action-h) - 0.75rem);
}

.sh-hero-side__dropdown {
  position: relative;

  /* min-width: 0 because this is a flex item, and a flex item's default min-width: auto refuses to shrink below its content's min-content width. */
  display: flex;
  min-width: 0;

  /* Own stacking context (position: relative is already set above;
     z-index makes it actually apply), so the open panel's z-index is
     compared directly against the page content below the hero rather
     than leaking into whatever stacking level that content happens to
     occupy..sh-service__toc is position: sticky — also a positioned
     element — and without this the two could end up compared at the
     same level with DOM order deciding the winner, which is what put
     the panel behind the article on scroll. */
  z-index: 1;
}

.sh-hero-side__dropdown select {
  appearance: none;
  /* Always fills the row rather than sitting at a fixed preferred
     size: the wrapper's flex:1 1 auto (see.sh-hero-side__action > *)
     already lets it share the line with a button, so 100% here means
     "take this item's full share of the row" at every width, not
     "always the whole row regardless of what's beside it". */
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  /* A long option label truncates rather than forcing the box wider
     than the space available for it. */
  text-overflow: ellipsis;
  padding: 0.875rem 2.75rem 0.875rem 1.25rem;
  border-radius: 8px;
  /* --dd-bg / --dd-fg are set inline per-item when an editor picks a
     Dropdown Background (see hero.php); absent one, this falls back to
     the translucent tint of the hero's own foreground. */
  border: 1px solid var(--dd-bg, color-mix(in srgb, var(--hero-side-fg, #fff) 30%, transparent));
  background: var(--dd-bg, color-mix(in srgb, var(--hero-side-fg, #fff) 8%, transparent));
  font-family: var(--font-nav);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--dd-fg, var(--hero-side-fg, #fff));
  cursor: pointer;
}

/* A background-image data URI bakes in a fixed stroke colour, which
   would vanish on a light hero the same way the old solid-blue action
   button did — a mask instead inherits var(--hero-side-fg) via
   currentColor, so it auto-contrasts with whatever bg_color an editor
   picks. */
.sh-hero-side__dropdown::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  background-color: var(--dd-fg, var(--hero-side-fg, #fff));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  pointer-events: none;
}

.sh-hero-side__dropdown select option { color: var(--color-navy); }

/* Enhanced: the custom toggle draws its own chevron, so the wrapper's
   one for the native select would be a second arrow in the same box.
   Keyed off the class main.js sets, so the native styling stays intact
   when the script has not run. */
.sh-hero-side__dropdown.is-enhanced::after { content: none; }

/* ── Custom listbox (built by main.js from the native <select>) ── The panel is ours, so it opens directly under the control and its type is set here rather than left to the OS. */
.sh-listbox {
  /* The panel is absolutely positioned against this. The hero's own
     wrapper sets position: relative too, which is why that one worked
     before this was a shared component; a second user would not have. */
  position: relative;
}

.sh-listbox__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Fills its share of the action row (matching the button beside it) rather than sizing to content — a content-fitted box read as an accidentally-narrow control next to a full-height button. */
  width: 100%;
  min-width: var(--select-w, 16rem);
  flex: 1 1 auto;
  height: var(--action-h, 3.5rem);
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--dd-bg, color-mix(in srgb, var(--hero-side-fg, #fff) 30%, transparent));
  background: var(--dd-bg, color-mix(in srgb, var(--hero-side-fg, #fff) 8%, transparent));
  font-family: var(--font-nav);
  font-size: 1rem;
  font-weight: 500;
  color: var(--dd-fg, var(--hero-side-fg, #fff));
  cursor: pointer;
  text-align: left;
}

.sh-listbox__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-listbox__chevron {
  flex-shrink: 0;
  width: 12px;
  height: 8px;
  background-color: currentColor;
  transition: transform var(--transition-base);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.sh-listbox.is-open .sh-listbox__chevron { transform: rotate(180deg); }

.sh-listbox__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown, 20);
  /* Raised well past what 10 short rows need at this row's own padding/line-height, since 17rem was not clearing anywhere near that. */
  max-height: min(32rem, 70vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: var(--color-surface);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Set by main.js (setOpen) when the panel would not fit between the
   toggle and the bottom of the viewport and there is more room above
   it — opens upward instead of past the fold, which otherwise left
   part of the list reachable only by scrolling the page afterward. */
.sh-listbox--upward .sh-listbox__panel {
  top: auto;
  bottom: calc(100% + 0.5rem);
}

.sh-listbox__option {
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  font-family: var(--font-nav);
  /* Larger than the native option list this replaces, which rendered
     at whatever size the OS picker chose. */
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-navy);
  cursor: pointer;
}

/* One highlight for both pointer and keyboard, so arrowing through
   the list looks the same as hovering it. */
.sh-listbox__option.is-active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .sh-listbox__chevron { transition: none; }
}

.sh-hero-side__media {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.sh-hero-side__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── HERO: side, blended photo (side_media_style = 'blend') ──── The photo sits on one side as a full-height panel and dissolves into the background rather than being cropped by a hard edge — geometry and stops from the reference. */
.sh-hero-side--blend {
  position: relative;
  /* No overflow: hidden..sh-hero-side__bg (the bled photo layer) is
     fully self-contained — top: 0; bottom: 0; right: 0; width: 61%
     pins it to this section's own box, and it paints as a CSS
     background-image with background-size: cover, not an <img>, so it
     can never overflow that box. overflow: hidden here was not
     clipping anything of its own; its only real effect was clipping
     the hero action row's dropdown panel to the section's height,
     which is what made a long option list only show two or three rows
     before requiring a scroll — position: absolute escapes normal
     flow, but not an ancestor's overflow clipping. */
}

.sh-hero-side--blend .sh-hero-side__inner {
  position: relative;
  z-index: 1;
}

/* Hold the copy clear of the photo half rather than letting it run
   the full container width. */
.sh-hero-side--blend .sh-hero-side__content {
  max-width: 45rem;
}

.sh-hero-side--blend.sh-hero-side--media-left .sh-hero-side__inner {
  /* Back to row, overriding the plain --media-left rule's row-reverse. */
  flex-direction: row;
  justify-content: flex-end;
}

.sh-hero-side__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 61%;
  background-image: var(--hero-overlay-image);
  background-size: cover;
  background-position: center;
}

.sh-hero-side--media-left .sh-hero-side__bg {
  right: auto;
  left: 0;
}

/* Flat scrim as the colour layer, gradient as the image layer on top
   of it — same stacking order as the reference's fill list. */
.sh-hero-side__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--hero-ov-scrim);
}

.sh-hero-side--overlay-gradient .sh-hero-side__bg::after {
  background-image: linear-gradient(to right, var(--hero-ov-1) 0%, var(--hero-ov-2) 20%, var(--hero-ov-3) 34%);
}

.sh-hero-side--media-left.sh-hero-side--overlay-gradient .sh-hero-side__bg::after {
  background-image: linear-gradient(to left, var(--hero-ov-1) 0%, var(--hero-ov-2) 20%, var(--hero-ov-3) 34%);
}

.sh-hero-side--overlay-solid .sh-hero-side__bg::after {
  background-color: var(--hero-ov-solid);
}

/* The contained card is rendered in blend mode too (see hero.php) but
   stays hidden while the bled background layer is doing the work. */
.sh-hero-side--blend .sh-hero-side__media {
  display: none;
  width: 100%;
}

/* Below the desktop breakpoint a side panel has nowhere to sit, so
   blend simply becomes card: drop the bled layer and let the ordinary
.sh-hero-side__media rules take over, which means one small-screen
   treatment for both styles rather than two that can drift apart. */
@media (max-width: 1023px) {
  .sh-hero-side--blend .sh-hero-side__bg { display: none; }
  .sh-hero-side--blend .sh-hero-side__content { max-width: none; }
}

/* Two classes to match the hiding rule above — the shared card rule here is a single class and would otherwise lose. */
@media (max-width: 768px) {
  .sh-hero-side.sh-hero-side--blend {
    background: var(--hero-side-bg);
  }

  .sh-hero-side--blend .sh-hero-side__media {
    display: block;
    position: relative;
  }
}

.sh-hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── CAROUSEL — What makes us different  ────────── */
.sh-different {
  background: var(--color-bg-section);
  padding-bottom: 7.5rem;
  overflow: hidden;
}

.sh-different__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 5.75rem var(--gutter) 2.5rem;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.sh-different__headline {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-heading);
}

/* Track */
.sh-carousel {
  /* Same left offset as the centered header (max-width 90rem +
     gutter), so the active card lines up with "Our Story" on every
     screen — including viewports wider than the container. */
  --story-edge: calc(max((100% - var(--container-wide)) / 2, 0px) + var(--gutter));
  gap: 3.5625rem;          /* track inherits this */
  padding-left: var(--story-edge);
  overflow: hidden;
}

/* JS clones the card set after the originals and slides this with a
   transform, so the loop never shows an empty end — the first card
   always follows the last. */
.sh-carousel__track {
  display: flex;
  gap: inherit;
  transition: transform 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
  will-change: transform;
  /* Horizontal gestures drive the carousel; vertical still scrolls
     the page. Without this the browser claims the whole gesture. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.sh-carousel__track.is-dragging { cursor: grabbing; }

/* Native image dragging would hijack the swipe */
.sh-carousel__item img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ── Story carousel stage — arrows flank the track ────────── */
.sh-story__stage {
  position: relative;
  --story-card-w: 74.5rem; /* card width — track and arrows both key off this */
}

.sh-carousel__item {
  position: relative;
  flex: 0 0 var(--story-card-w);
  height: 45rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1.5rem;
}

.sh-carousel__img,
.sh-carousel__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-carousel__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
}

.sh-carousel__panel {
  position: relative;
  z-index: 1;
  width: 33.75rem;
  min-height: 34.25rem;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-xl);
  padding: 3.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  flex-shrink: 0;
}

/* Sized to hold a long card title (the third story card runs to a
   full sentence) without overflowing its panel, while a short title
   still reads as a display heading. */
.sh-carousel__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  text-wrap: pretty;
}

.sh-carousel__body {
  font-size: var(--text-md);
  line-height: 1.6;
  opacity: 0.9;
}

/* ── OUR VISION  ────────────────────────────────── */
.sh-vision {
  background: var(--color-bg-section);
  padding: 5.75rem var(--gutter) 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
}

/* Section title  */
.sh-vision__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  text-align: center;
}

.sh-vision__text {
  max-width: 67.375rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sh-vision__primary {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  font-weight: 600;
  line-height: 1.25;
  color: #000;
}

.sh-vision__secondary {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-blue-deep);
}

.sh-vision__features {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 70rem;
  margin-top: 1.5rem;
}

.sh-vision__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
  width: 13.75rem;
  text-align: center;
}

.sh-vision__feature img,
.sh-vision__feature svg {
  height: 2.875rem;
  width: auto;
  max-width: 4.4375rem;
  object-fit: contain;
}

.sh-vision__feature p {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-body-dark);
}

/* ── TEAM  ─────────────────────────────────────── */
.sh-team {
  background: #fff;
  padding: 7.5rem var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.375rem;
}

.sh-team__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding-bottom: 0.625rem;
  text-align: center;
}

.sh-team__headline {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-heading-soft);
  max-width: 55.375rem;
}

.sh-team__subtext {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 40rem;
}

.sh-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: var(--container);
}

.sh-team-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sh-team-card__photo {
  height: 25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-audience);
}

.sh-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.sh-team-card__name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: #000;
}

.sh-team-card__role {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* ── CONTACT: split panel  ──────────────────────── */
.sh-contact-top {
  background: var(--color-bg);
  padding: 15rem var(--gutter) 3.125rem;
  display: flex;
  justify-content: center;
}

.sh-contact-panel {
  display: flex;
  width: 100%;
  max-width: var(--container);
  align-items: stretch;
}

.sh-contact-panel__left {
  position: relative;
  width: 50%;
  padding: 6rem 4.1875rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7.5rem;
  overflow: hidden;
  /* Photo comes from the admin field as an inline background-image. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sh-contact-panel__left::before,
.sh-contact-panel__left::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Fill layer: blurred and scaled past the edges so the blur's soft
   boundary is never visible against the panel border. */
.sh-contact-panel__left::before {
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(2.25rem) saturate(1.15);
  transform: scale(1.18);
}

/* Photo layer. */
.sh-contact-panel__left::after {
  z-index: 1;
  background-position: center;
}

.sh-contact-panel__left--fill::after { background-size: cover; }
.sh-contact-panel__left--fill::before { display: none; }

.sh-contact-panel__left--fit::after { background-size: contain; }

/* vertical scrim: solid dark at the foot of the
   panel (so the headline and pills stay legible) fading to almost
   clear at the top, rather than a flat wash over the whole photo. */
.sh-contact-panel__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    0deg,
    var(--contact-overlay) 0%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

.sh-contact-panel__label {
  position: relative;
  z-index: 3;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
}

.sh-contact-panel__bottom {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

.sh-contact-panel__text { display: flex; flex-direction: column; gap: 1.5rem; }

.sh-contact-panel__headline {
  font-size: clamp(2.25rem, 3.7vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.sh-contact-panel__body {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.sh-contact-panel__pills { display: flex; gap: 1rem; flex-wrap: wrap; }

.sh-contact-panel__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.sh-contact-panel__pill:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sh-contact-panel__pill svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* Right form panel */
.sh-contact-panel__right {
  width: 50%;
  background: #fff;
  /* No bottom padding: the JotForm iframe carries its own trailing
     space, so the panel's own 6rem stacked on top of it and left a
     visible gap under the form. */
  padding: 6rem 4.125rem 0;
  display: flex;
  justify-content: center;
}

.sh-contact-panel__form-wrap {
  width: 100%;
  max-width: 31.8125rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sh-contact-panel__crisis {
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-red);
}

.sh-contact-panel__form-headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.7vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-dark);
}

.sh-contact-panel__form-subtext {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-gray);
}

.sh-contact-panel__embed { width: 100%; }

/* JotForm renders inside an iframe it sizes itself; keep it fluid
   and visually consistent with the native form */
.sh-contact-panel__embed iframe {
  width: 100% !important;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-md);
}

/* Native form */
.sh-contact-form { display: flex; flex-direction: column; gap: 1rem; }

.sh-cf__group { display: flex; flex-direction: column; gap: 0.5rem; }

.sh-cf__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
}

.sh-cf__input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-dark);
  outline: none;
  transition: var(--transition-base);
}

.sh-cf__input::placeholder { color: var(--color-placeholder); }

.sh-cf__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 141, 194, 0.12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.sh-cf__textarea {
  height: 7.5rem;
  padding: 0.875rem 1rem;
  resize: vertical;
}

.sh-cf__select-wrap { position: relative; }

.sh-cf__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.75rem;
}

.sh-cf__chevron {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray);
  width: 1.125rem;
  height: 1.125rem;
}

.sh-cf__submit {
  width: 100%;
  height: 3.875rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-base);
}

.sh-cf__submit:hover { background: var(--color-primary-hover); }

/* ── CONTACT DETAILS  ───────────────────────────── */
.sh-contact-details {
  background: var(--color-bg);
  padding: 4rem var(--gutter) 6rem;
}

.sh-contact-details__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.sh-contact-details__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.625rem;
  width: 20.375rem;
  flex-shrink: 0;
}

.sh-contact-details__text { display: flex; flex-direction: column; gap: 0.875rem; }

.sh-contact-details__headline {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-dark);
}

.sh-contact-details__subtext {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-gray);
}

.sh-contact-details__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sh-contact-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Map inside the details right column — same width as the card grid */
.sh-contact-details__right .sh-map {
  height: 26.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-card);
}

.sh-cd-card {
  background: #fff;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  /* Lets an Outline button (.sh-btn--outline-contrast) inside this card read correctly without being told which colour to use — the same --hero-side-fg/--hero-side-bg pair a hero already sets inline, defined here instead against this card's own fixed background. */
  --hero-side-fg: var(--color-primary);
  --hero-side-bg: #fff;
}

.sh-cd-card--blue {
  background: var(--color-primary);
  border-color: var(--color-primary);
  --hero-side-fg: #fff;
  --hero-side-bg: var(--color-primary);
}

.sh-cd-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-icon-bg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sh-cd-card__icon svg { width: 1.25rem; height: 1.25rem; }

.sh-cd-card--blue .sh-cd-card__icon {
  background: #fff;
  color: var(--color-primary);
}

.sh-cd-card__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.sh-cd-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-blue-deep);
}

.sh-cd-card--blue .sh-cd-card__title { color: #fff; }

.sh-cd-card__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-gray);
}

.sh-cd-card--blue .sh-cd-card__text { color: #f2f2f7; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .sh-story__stage { --story-card-w: 92vw; }
  .sh-testimonials__inner { gap: 3rem; }
  .sh-testimonials__divider { display: none; }
}

@media (max-width: 1024px) {
  .page-home .sh-who-we-are__gallery {
    display: flex;
    justify-content: center;
  }
  .sh-arch { position: static; }
  .sh-arch--left, .sh-arch--mid, .sh-arch--right { transform: none; }

  .sh-why__grid { flex-direction: column; gap: 2.5rem; }

  /* Stacked, the three points ran together as one long column of centred text with nothing marking where one ended. */
  .sh-why__divider {
    width: 100%;
    height: 1px;
    align-self: auto;
    background: linear-gradient(to right, var(--color-divider), var(--color-divider-strong));
  }

  /* Tablet & below: no photo column — the featured image moves onto
     each card as an avatar instead. Two cards stay in view. */
  .sh-testimonials__inner { flex-direction: column; align-items: stretch; }
  .sh-testimonials__content { width: 100%; }
  .sh-testimonials__photo,
  .sh-testimonials__divider { display: none; }
  .sh-testimonial-card__avatar { display: block; }

  .sh-audience__cards { grid-template-columns: 1fr; }

  .sh-contact-panel { flex-direction: column; }
  .sh-contact-panel__left,
  .sh-contact-panel__right { width: 100%; }
  .sh-contact-panel__left {
    min-height: 30rem;
    gap: 3.75rem;
    /* Stacked, the panel turns short and wide (~0.83) while the photo
       is a tall 0.5 portrait, so `cover` crops top and bottom and a
       centred slice decapitates the subject. Faces sit in the upper
       third of a portrait, so anchor there. */
    background-position: center 22%;
  }

  .sh-contact-panel__left::before,
  .sh-contact-panel__left::after { background-position: center 22%; }

  /* Column mode: children must stretch full width (the desktop
     align-items: flex-start would otherwise hug them left) */
  .sh-contact-details__inner { flex-direction: column; align-items: stretch; }
  .sh-contact-details__left { width: 100%; }

  .sh-team__grid { grid-template-columns: 1fr 1fr; }
}

/* Tablet width: the side hero's image squeezes the content column too
   tight to be worth keeping — hidden here, brought back at phone width
   below where the layout stacks instead of sitting side by side. */
@media (max-width: 1023px) {
  .sh-hero-side__media { display: none; }
}

@media (max-width: 768px) {
  .sh-hero-side__media { display: block; }
  .sh-steps__grid { grid-template-columns: 1fr; }
  .sh-testimonials__cards { grid-template-columns: 1fr; }

  /* Testimonials on mobile: one card per view, side arrows + dots
     (photo column already hidden and avatars shown from ≤1024) */
  .sh-testimonials { padding: 4rem 1.5rem; }
  .sh-testimonials__track .sh-testimonial-card { flex: 0 0 100%; }
  .sh-testimonials__nav-btn { display: flex; }
  .sh-testimonials__dots { display: flex; }
  /* Side padding clears the overlaid arrows (2.75rem wide, inset -0.625rem) */
  .sh-testimonial-card { padding: 2rem 2.75rem; }

  /* Section rhythm on small screens */
  .sh-who-we-are { padding: 4rem var(--gutter); gap: 3rem; }
  /* Arch photo gallery is desktop/tablet-only. Match the Home-only
     tablet selector above so this narrower breakpoint still wins. */
  .page-home .sh-who-we-are__gallery { display: none; }
  .sh-why { padding: 4rem var(--gutter); gap: 2.5rem; }
  .sh-why__col-body { max-width: 100%; }
  .sh-who-help { padding: 4rem 0; }
  .sh-who-help__header { padding-bottom: 3rem; }
  .sh-who-help__cta-row { padding-top: 3rem; }
  .sh-steps { padding: 4rem var(--gutter); }
  .sh-steps__inner { gap: 2.5rem; }
  .sh-stat-bar { padding: 3rem var(--gutter); }
  .sh-audience { padding: 4rem var(--gutter); gap: 1.5rem; }
  .sh-audience__header { padding-bottom: 2rem; }
  .sh-audience-card__img { height: 16.25rem; }
  .sh-audience-card__content { padding: 1.5rem; }
  .sh-audience-card__footer { padding: 0 0 1.5rem 1.5rem; }
  .sh-team__grid { grid-template-columns: 1fr; }
  .sh-contact-details__grid { grid-template-columns: 1fr; }
  .sh-carousel { gap: 1.25rem; }
  .sh-carousel__item {
    height: auto;
    padding: 1rem;
    justify-content: center;
  }
  .sh-carousel__panel { width: 100%; padding: 2rem 1.5rem; min-height: 0; }
  .sh-different__header { flex-direction: column; align-items: flex-start; }
  .sh-different__headline { font-size: clamp(1.625rem, 7.5vw, 3.5rem); overflow-wrap: break-word; max-width: 100%; }
  .sh-contact-top { padding: 10rem 1.5rem 2.5rem; }
  .sh-contact-panel__left { padding: 4rem 2rem; }
  .sh-contact-panel__right { padding: 4rem 1.5rem 0; }
  .sh-hero-stacked__strip { height: 25rem; }
  .sh-hero-stacked__strip-wrap,
  .sh-hero-stacked__cards-wrap,
  .sh-who-help__strip-wrap { padding: 1.5rem 1.5rem 0; }
  .sh-hero-split__inner { flex-direction: column !important; }
  .sh-hero-split { padding: 10rem 1.5rem 4rem; }
  .sh-hero-split__media { min-height: 23.75rem; }
  .sh-hero-side__inner { flex-direction: column !important; }
  .sh-hero-side { padding: 10rem 1.5rem 4rem; }
  /* flex:1 with no fixed container height means this grows to eat
     whatever vertical space the hero's own min-height leaves over —
     495px on a 375-wide screen, taller than the copy above it. A
     capped height stops it competing with the content for room. */
  .sh-hero-side__media { flex: 0 0 auto; height: 20rem; }
  /* No column switch here — the row wraps on its own (see
.sh-hero-side__action), and the dropdown now shrinks on its own
     too (see.sh-hero-side__dropdown), so neither needs a patch at
     this breakpoint. */
  .sh-vision__features { flex-wrap: wrap; gap: 2.5rem; justify-content: center; }
}

/* "Not sure where to start? Talk to us" — translucent on the photo */
.sh-cta-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(109, 110, 110, 0.35);
  border: 1px solid var(--color-border-chip);
  border-radius: var(--radius-pill);
  padding: 1.1875rem 2rem;
  font-family: var(--font-nav);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  transition: var(--transition-base);
}

.sh-cta-note strong { font-weight: 800; }
.sh-cta-note:hover { background: rgba(109, 110, 110, 0.55); color: #fff; }

/* ── LIGHT NOTE PILL (referral hero) ──────────────────────── */
.sh-cta-note--light {
  background: #f8feff;
  border-color: var(--color-primary);
  color: var(--color-blue-deep);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 1.1875rem 2rem;
}

.sh-cta-note--light:hover {
  background: #eefbfd;
  color: var(--color-blue-deep);
}

/* ── ELIGIBILITY SPLIT — Who We Accept  ────────── */
.sh-eligibility {
  background: var(--color-bg-white-soft);
  padding: 5.75rem var(--gutter) 8.75rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.sh-eligibility__header {
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.sh-eligibility__header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.sh-eligibility__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-primary);
}

.sh-eligibility__eyebrow-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-primary);
}

.sh-eligibility__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-blue-deeper);
}

/* Semantic amber eligibility warning — not brand-derived */
.sh-eligibility__note {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.28;
  color: #ff6a07;
  max-width: 32.2rem;
}

.sh-eligibility__note strong { font-weight: 700; }

.sh-eligibility__body {
  width: 100%;
  max-width: var(--container);
  display: flex;
  gap: 2.75rem;
  align-items: flex-start;
}

/* The photo is cropped to the design's 619×672 box; without this
   its portrait source stretches the whole section. */
.sh-eligibility__photo {
  width: 48.4%;
  aspect-ratio: 619 / 672;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  flex-shrink: 0;
}

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

/* ── ICON CARD GRID (shared: accept grid + who-refers) ────── */
.sh-ic-grid {
  display: grid;
  gap: 2.75rem;
  flex: 1;
  min-width: 0;
}

.sh-ic-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
.sh-ic-grid--cols3 { grid-template-columns: repeat(3, 1fr); }

.sh-ic-card {
  background: var(--color-bg-audience);
  border-radius: var(--radius-3xl);
  padding: 2rem 1.875rem 2.625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
}

.sh-ic-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-icon-circle);
  flex-shrink: 0;
}

.sh-ic-card__icon img {
  width: 2.25rem;
  height: 2.1875rem;
  object-fit: contain;
}

.sh-ic-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sh-ic-card__title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: normal;
  color: var(--color-navy);
}

.sh-ic-card__text {
  font-family: var(--font-nav);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-heading-alt);
  opacity: 0.7;
}

/* Who We Accept cards: solid-blue icon disc + white icon. */
.sh-eligibility .sh-ic-card {
  background: #f4f9fc;
  height: 19.625rem;
  justify-content: flex-start;
  gap: 2.75rem;
}

.sh-eligibility .sh-ic-card__icon {
  background: var(--color-primary);
}

/* Plain variant (Who Refers): pale-blue centered tiles */
.sh-ic-grid--plain .sh-ic-card {
  gap: 1.25rem;
  padding: 2rem 3.6rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--color-border-header);
  border: 1px solid #e9f0f4;
  border-radius: 2rem;
  min-height: 14rem;
}

.sh-ic-grid--plain .sh-ic-card__icon {
  width: 4.25rem;
  height: 4.25rem;
  background: var(--color-icon-circle);
}

.sh-ic-grid--plain .sh-ic-card__icon img {
  width: 3rem;
  height: 3rem;
}

.sh-ic-grid--plain .sh-ic-card__title {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--color-blue-deep);
  text-align: center;
}

/* ── ICON CARDS SECTION (Who Refers To Us) ─────── */
.sh-icon-cards {
  background: #fff;
  padding: 7.5rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  align-items: center;
}

.sh-icon-cards__header {
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.sh-icon-cards__subtext {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-navy);
}

.sh-icon-cards .sh-ic-grid {
  width: 100%;
  max-width: var(--container);
}

/* Who Refers chip: bold primary-blue label  */
.sh-icon-cards .sh-pill-chip {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}

/* ── REFERRAL STEPS — deep-blue band  ──────────── */
.sh-ref-steps {
  background: var(--color-footer);
  padding: 10rem var(--gutter) 9.375rem;
}

.sh-ref-steps__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
}

.sh-ref-steps__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.sh-ref-steps__badge {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: var(--radius-pill);
  padding: 1.125rem 1.25rem;
  font-family: var(--font-nav);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.sh-ref-steps__headline {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  max-width: 55.375rem;
}

.sh-ref-steps__headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-divider);
}

.sh-ref-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.sh-ref-step {
  background: rgba(0, 0, 0, 0.27);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sh-ref-step__number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  line-height: normal;
  color: var(--color-primary);
}

.sh-ref-step__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sh-ref-step__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.sh-ref-step__body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-gray-light);
}

/* Urgent-referral notice */
.sh-ref-steps__urgent {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-ref-steps__urgent-label {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-urgent);
}

.sh-ref-steps__urgent-text {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.8);
}

/* ── Referral page responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  .sh-eligibility__header { flex-direction: column; align-items: flex-start; }
  .sh-eligibility__body { flex-direction: column; }
  .sh-eligibility__photo { width: 100%; max-height: 26rem; }
  .sh-ref-steps__grid { grid-template-columns: 1fr; }
  .sh-ic-grid--cols3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sh-ic-grid--cols2,
  .sh-ic-grid--cols3 { grid-template-columns: 1fr; }
  .sh-ic-grid { gap: 1.25rem; }
  .sh-ref-steps { padding: 5rem 1.5rem; }
  .sh-eligibility { padding: 4rem 1.5rem 5rem; }
  .sh-icon-cards { padding: 4rem 1.5rem; }
}

/* ── Frosted-glass fallback ─────────────────────────────────
   When backdrop-filter isn't supported, the glass panels lose
   their blur and become near-invisible washes. Fall back to
   solid translucent fills that keep text legible. */
@supports not (backdrop-filter: blur(1px)) {
  .sh-carousel__panel { background: rgba(0, 0, 0, 0.55); }
  .sh-cat-card { background: rgba(60, 60, 60, 0.55); }
  .sh-step-card { background: rgba(28, 28, 30, 0.88); }
  .sh-ref-step { background: rgba(0, 0, 0, 0.55); }
}

/* WHO WE HELP — CONDITIONS CAROUSEL The active card widens to show its photo; the rest collapse to their dark glass panel. */
.sh-conditions {
  padding: clamp(4rem, 7vw, 8rem) var(--gutter);
  background: var(--color-surface);
}

.sh-conditions__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  max-width: 44.3rem;
  margin: 0 auto 3.75rem;
}

.sh-conditions__glyph {
  width: 2.625rem;
  height: 3.625rem;
  margin-bottom: 0.625rem;
}

.sh-conditions__headline {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-heading);
}

.sh-conditions__subtext {
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-muted);
}

.sh-conditions__stage {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
}

/* One curve and one duration for every part of the step, so the track, the card geometry and the panel inside it move as a single object. */
.sh-conditions {
  /* Not a symmetric ease — this front-loads so hard that a shrinking card's last ~15% of width sat at ~1px, motionless, for over 100ms before finally snapping to 0. */
  --cond-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cond-dur: 0.62s;
}

.sh-conditions__viewport {
  overscroll-behavior-x: contain; overflow: hidden; }

.sh-conditions__track {
  /* Horizontal gestures drive the carousel; vertical still scrolls
     the page. overscroll-behavior-x stops a horizontal flick from
     reaching the browser's swipe-to-go-back gesture — a CSS-level
     guarantee that does not depend on JS winning the race. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
  display: flex;
  gap: 1.5rem;
  transition: transform var(--cond-dur, 0.62s) var(--cond-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Card chrome borders are neutral gray-blues from the design,
   not part of the brand-derived blue family. */
.sh-cond-card {
  position: relative;
  flex: 0 0 24.5rem;
  height: 37.375rem;
  padding: 0.625rem;
  display: flex;
  justify-content: flex-end;
  border: 1px solid #a9b7ca;
  border-radius: var(--radius-xl);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-width: 0;
  transition:
    flex-basis   var(--cond-dur, 0.62s) var(--cond-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    padding      var(--cond-dur, 0.62s) var(--cond-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    border-width var(--cond-dur, 0.62s) var(--cond-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    opacity      calc(var(--cond-dur, 0.62s) * 0.7) var(--cond-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* The photo lives on its OWN layer, fixed at the widest the card ever gets, rather than on the card itself. */
.sh-cond-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 54rem;            /*.is-active flex-basis — the widest it goes */
  background-image: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}

.sh-cond-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.sh-cond-card.is-active { flex-basis: 54rem; }
.sh-cond-card.is-peek   { flex-basis: 24.5rem; }

/* Conveyor transition: the outgoing card collapses to nothing while
   the incoming one grows, keeping the pair's total width constant. */
.sh-cond-card.is-gone {
  flex-basis: 0;
  min-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
}

/* At rest only the active + peek pair is on stage  */
@media (min-width: 901px) {
  .sh-cond-card.is-off { display: none; }
}

.sh-cond-card__panel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 23.25rem;
  height: 100%;
  padding: 3.25rem 2.1875rem 3.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid #7e92ae;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
}

.sh-cond-card__panel {
  transition: max-width var(--cond-dur, 0.62s) var(--cond-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.sh-cond-card.is-active .sh-cond-card__panel { max-width: 20.75rem; }

.sh-cond-card__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}

.sh-cond-card__body {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.6;
  opacity: 0.9;
}

/* Round carousel arrow — shared by Who We Help and the About
   story carousel so both read as the same control. */
.sh-conditions__arrow,
.sh-story-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.625rem;
  height: 3.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-blue-pale);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  z-index: 2;
  transition: var(--transition-base);
}

.sh-conditions__arrow:hover,
.sh-story-arrow:hover { background: var(--color-primary-hover); }

.sh-conditions__arrow:focus-visible,
.sh-story-arrow:focus-visible {
  outline: 2px solid var(--color-blue-deep);
  outline-offset: 3px;
}

.sh-story-arrow--prev,
.sh-story-arrow--next {
  --story-edge: calc(max((100% - var(--container-wide)) / 2, 0px) + var(--gutter));
}

/* Straddle the active card's edges: centered on the left edge (the
   header line) and on the card's right edge, clear of the glass
   panel and of the next card's peek. */
.sh-story-arrow--prev { left: calc(var(--story-edge) - 1.8125rem); }
.sh-story-arrow--next { left: calc(var(--story-edge) + var(--story-card-w) - 1.8125rem); }

/* Card is 92vw here — straddling would bleed off-screen, so the
   arrows tuck just inside the viewport edges instead. */
@media (max-width: 1200px) {
  .sh-story-arrow--prev { left: 0.5rem; }
  .sh-story-arrow--next { left: auto; right: 0.5rem; }
}

@media (max-width: 768px) {
  .sh-story-arrow { width: 2.75rem; height: 2.75rem; }
  .sh-story-arrow--prev { left: 0.375rem; }
  .sh-story-arrow--next { left: auto; right: 0.375rem; }
}
.sh-conditions__arrow--prev { left: 1.25rem; }
.sh-conditions__arrow--next { right: 1.25rem; }

/* Mobile: no expand/collapse — a swipeable snap strip instead */
@media (max-width: 900px) {
  .sh-conditions__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
  }

  .sh-conditions__viewport::-webkit-scrollbar { display: none; }

  .sh-conditions__track {
    transform: none !important;
    width: max-content;
    /* Below 901px this is a native scroll-snap strip inside.sh-conditions__viewport, not a JS-stepped carousel. */
    touch-action: auto;
  }

  .sh-cond-card,
  .sh-cond-card.is-active {
    flex-basis: min(26rem, 82vw);
    width: min(26rem, 82vw);
    height: 32rem;
    scroll-snap-align: center;
  }

  .sh-cond-card__panel,
  .sh-cond-card.is-active .sh-cond-card__panel { max-width: none; }

  .sh-cond-card__title { font-size: var(--text-4xl); }

  .sh-conditions__arrow--prev { left: 0.25rem; }
  .sh-conditions__arrow--next { right: 0.25rem; }
}

/* ============================================================
   CTA BAND — centered statement + one button on soft gray
   ============================================================ */
.sh-cta-band {
  background: #f7f7f7;
  padding: clamp(5rem, 9vw, 10rem) var(--gutter);
}

.sh-cta-band__inner {
  max-width: 48.125rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.sh-cta-band__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, var(--text-7xl));
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-heading);
}

.sh-cta-band__body {
  max-width: 42.125rem;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-heading);
}

.sh-cta-band__inner .sh-btn { margin-top: 0.625rem; }

/* BANNER — starfish_banner posts (group_banner), embeddable via a page/category's Content → Banner block (see banner.php). */
.sh-banner {
  /* 16px flat, not the --radius-2xl token: rounding is only meant to soften an INSET card (full width / column), and.sh-bw-screen below zeroes it again once the banner's background runs to the screen edge, where a rounded corner would have nothing to sit against. */
  border-radius: 1rem;
  padding: clamp(2.5rem, 5vw, 4rem);
  /* No margin here on purpose — Space above/below's own default is now 'none' at every placement (see starfish_acf_spacing_field()'s $default argument), so this component carries none itself either. */
  margin-block: 0;
}

.sh-banner--white  { background: #fff; }
.sh-banner--brand  { background: var(--color-primary); }
.sh-banner--dark   { background: var(--color-navy); }

/* Use --banner-fg for all background presets and custom colors. */

.sh-banner--one-col.sh-banner {
  background-image: var(--banner-bg-image, none);
  background-size: cover;
  background-position: center;
}

.sh-banner--one-col .sh-banner__col1 {
  max-width: 40rem;
}

.sh-banner--two-col {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.sh-banner__col1,
.sh-banner__col2 {
  flex: 1;
  min-width: 0;
}

.sh-banner__headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.sh-banner__body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.sh-banner__col2-image {
  width: 100%;
  height: 100%;
  max-height: 22rem;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
}

.sh-banner__col2-text {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  .sh-banner--two-col {
    flex-direction: column;
  }
}

/* ============================================================
   PHOTO STRIP — portrait row w/ bottom gradient + overlay copy
   ============================================================ */
.sh-photo-strip {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #fff;
}

.sh-photo-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

/* 2px white rules divide the photos and separate the strip from
   the footer. The last VISIBLE cell drops its
   divider — which cell that is changes with the column count. */
.sh-photo-strip__cell {
  aspect-ratio: 288 / 467;
  border-right: 2px solid #fff;
}

.sh-photo-strip__cell:nth-child(5) { border-right: 0; }

.sh-photo-strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-photo-strip__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 36%, rgba(0, 0, 0, 0) 71%);
  pointer-events: none;
}

.sh-photo-strip__content {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  /* Proportional so the caption keeps the same relative position as
     the strip's height changes across breakpoints. */
  bottom: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  color: #fff;
}

.sh-photo-strip__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.sh-photo-strip__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.0625rem;
  font-size: var(--text-lg);
  line-height: 1.2;
  margin-top: -0.625rem;
}

.sh-photo-strip__meta li {
  display: flex;
  align-items: center;
  gap: 1.0625rem;
}

.sh-photo-strip__meta li + li::before {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #fff;   /* white separators, not the brand blue */
}

@media (max-width: 900px) {
  .sh-photo-strip__grid { grid-template-columns: repeat(3, 1fr); }
  .sh-photo-strip__cell:nth-child(n+4) { display: none; }
  .sh-photo-strip__cell:nth-child(3) { border-right: 0; }
}

@media (max-width: 560px) {
  .sh-photo-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .sh-photo-strip__cell:nth-child(n+3) { display: none; }
  .sh-photo-strip__cell:nth-child(2) { border-right: 0; }
  .sh-photo-strip__cell:nth-child(3) { border-right: 2px solid #fff; }

  /* The photos are landscape (≈3:2). Squeezed into two narrow
     portrait cells, object-fit:cover shows only about a third of the
     frame, so faces crop away and the images read as bright blur.
     One full-width photo keeps far more of the frame visible. */
  .sh-photo-strip__grid { grid-template-columns: 1fr; }
  .sh-photo-strip__cell:nth-child(n+2) { display: none; }
  .sh-photo-strip__cell {
    aspect-ratio: 4 / 5;
    border-right: 0;
  }

  .sh-photo-strip__content {
    
    gap: 1.125rem;
  }

  /* Inline facts wrap mid-list on a phone and strand a separator dot
     at the start of a line. Stack them one per row, with the dot
     sitting between each pair — the li becomes a column so its
     ::before dot renders above its own text. */
  .sh-photo-strip__meta {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0;
    font-size: var(--text-base);
  }

  .sh-photo-strip__meta li {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    text-align: center;
  }
}

/* Locations page disclaimer. */
.sh-locations__disclaimer {
  max-width: var(--container);
  margin: 3rem auto 0;
  padding: 0 var(--gutter) 5rem;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-primary);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   INTAKE BANNER
   ───────────────────────────────────────────────────────────── */

.sh-banner--intake {
  overflow: hidden;
  /* Positioning context for the leaf photo. */
  position: relative;
  background: linear-gradient(100deg, #3f87c4 0%, #2f9fc7 45%, #5fd5d2 100%);
  /* Fixed background, always mid-blue/teal — never white — so this is hardcoded rather than computed per-instance the way a colour-configurable banner would be. */
  --hero-side-fg: #fff;
  --hero-side-bg: #3f87c4;
  /* The base.sh-banner is an inset card — padded, with a bottom margin. */
  padding: 0;
  margin-bottom: 0;
}

/* Band is 480px tall in the design, content inset 80px from the left
   and vertically centred. The photo is positioned rather than a grid
   column because it deliberately overflows the band top and bottom. */
/* Content sits on the page measure — var(--container), the same
   ladder every other section uses — so the banner's copy lines up
   with the content above it instead of running 100px wider to the
   band's own gutter. The band itself stays full-bleed. */
.sh-banner__intake-inner {
  /* Real padding, not the old max-width+margin:auto centering trick.
     That assumed the outer band was always full-bleed (100vw), which
     was true before Width existed as a setting on where a banner is
     placed. Once.sh-bw-page could cap the outer to the page measure,
     inner and outer became the SAME width and that centering collapsed
     to zero — leaving text flush against the box's own edge in "Full
     width" mode instead of having its own inset. */
  width: 100%;
  min-height: 30rem;
  padding: 5rem clamp(2rem, 5vw, 4rem);
  display: flex;
  align-items: center;
}

/* Full screen only: the OUTER already insets its content to the page
   margin via its own padding-inline (see.sh-bw-screen below) —
   adding this banner's padding on top would push it in further than
   the rest of the page sits. */
.sh-bw-screen .sh-banner__intake-inner {
  padding-left: 0;
  padding-right: 0;
}

/* The button row is wider than the copy in the design (641px of
   buttons under a 575px text block), so the block is sized for the
   buttons and the text is held narrower by its own max-width —
   otherwise the three actions wrap onto a second row. */
.sh-banner__intake-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 41rem;
}

.sh-banner__intake-title,
.sh-banner__intake-body { max-width: 35rem; }

.sh-banner__intake-title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1.25rem;
}

.sh-banner__intake-body {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2.25rem;
}

.sh-banner__intake-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.125rem;
}

/* 62px matches the Request Intake pill, whose height comes from the
   shared.sh-btn--pill-white icon sizing — the design has all three
   actions the same height. */
.sh-banner__intake-secondary,
.sh-banner__intake-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.875rem;
  padding: 0 1.5rem;
  font-size: var(--text-md);
  font-weight: 500;
  border-radius: 8px;
  transition: var(--transition-base);
}

.sh-banner__intake-secondary {
  color: var(--color-primary);
  background: var(--color-surface);
}

.sh-banner__intake-secondary:hover { color: var(--color-primary-hover); }

.sh-banner__intake-outline {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.sh-banner__intake-outline:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* The photo sits inside the brand's leaf silhouette — two opposing
   rounded corners, which is the same shape the design draws with a
   vector outline. */
/* The photo sits in the StarFish leaf — a five-lobed organic shape that no border-radius can express, so it is a mask exported from the design (assets/img/intake-leaf-*.png) rather than redrawn. */
.sh-banner__intake-media {
  position: absolute;
  top: 46.8%;
  left: 80.4%;
  width: 38.74%;                        /* 557.8 / 1440 */
  /* Capped at the design's own pixel size. */
  max-width: 557.8px;
  aspect-ratio: 557.8 / 939.595;
  transform: translate(-50%, -50%) rotate(-18.91deg);
  pointer-events: none;
}

/* The outline is the same shape as a stroke, painted by masking a
   white box with the exported outline — that keeps the hairline
   pure white regardless of what the exported PNG's own colour is. */
.sh-banner__intake-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  -webkit-mask-image: url('../img/intake-leaf-outline.png');
  mask-image: url('../img/intake-leaf-outline.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The leaf silhouette, carrying the rotation from its parent. */
.sh-banner__intake-media-clip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 90.55%;                        /* 505.09 / 557.8 */
  height: 90.55%;
  overflow: hidden;
  -webkit-mask-image: url('../img/intake-leaf-mask.png');
  mask-image: url('../img/intake-leaf-mask.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Counter-rotated back to level and shown at its NATURAL aspect — no object-fit crop at all. */
.sh-banner__intake-media-clip img {
  position: absolute;
  /* Offset the photo right and down within the leaf to keep both faces visible. */
  top: 52%;
  left: 58%;
  transform: translate(-50%, -50%) rotate(18.91deg);
  display: block;
  width: 191.65%;
  height: auto;
  /* The global img{max-width:100%} reset would otherwise clamp this
     back to the clip's own width, re-zooming the photo. */
  max-width: none;
}

@media (max-width: 1100px) {
  .sh-banner__intake-inner { text-align: center; }
  .sh-banner__intake-content { max-width: none; margin: 0 auto; }
  .sh-banner__intake-title,
  .sh-banner__intake-body { max-width: none; }
  .sh-banner__intake-media { display: none; }
  /* Stacked, not wrapped, for this entire narrow tier (matching where the photo already drops above) — not only true phone widths. */
  .sh-banner__intake-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
  }
  .sh-banner__intake-actions .sh-btn,
  .sh-banner__intake-secondary,
  .sh-banner__intake-outline {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .sh-banner__intake-inner { min-height: 0; padding: 3.5rem clamp(1.25rem, 6vw, 2rem); }
}

/* ============================================================
   REFERRAL BANNER — photo card w/ gradient panel
   ============================================================ */
.sh-ref-banner {
  max-width: var(--container);
  margin: 0 auto clamp(4rem, 7vw, 7rem);
  padding: 5rem;
  border-radius: 1.5rem;
  background-size: cover;
  background-position: center;
}

.sh-ref-banner__panel {
  border-radius: 1.25rem;
  padding: 4.75rem 3.625rem;
  background: linear-gradient(90deg, rgba(10, 63, 90, 0.6) 25%, rgba(20, 84, 116, 0.1) 97%);
}

.sh-ref-banner__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.5rem;
}

.sh-ref-banner__body {
  max-width: 29.3rem;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4rem;
}

@media (max-width: 900px) {
  .sh-ref-banner { margin-left: var(--gutter); margin-right: var(--gutter); padding: 1.5rem; }
  .sh-ref-banner__panel { padding: 2.5rem 1.75rem; }
  .sh-ref-banner__body { margin-bottom: 2.5rem; }
}

/* Bold headline variant on icon-cards ("Who Refers To Us") */
.sh-icon-cards__headline {
  max-width: 44rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-heading-dark);
}

/* ── Embedded form loading state ────────────────────────────── The JotForm bundle is ~3MB from a third-party CDN and takes a few seconds. */
.sh-contact-panel__embed {
  position: relative;
  min-height: 30rem;
}

/* The skeleton lives on a pseudo-element, NOT the container: an
   opacity animation on the container would be inherited by the
   iframe inside it, leaving the loaded form pulsing forever. */
.sh-contact-panel__embed::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-md);
  background-image:
    linear-gradient(var(--color-border-header) 0 0),
    linear-gradient(var(--color-border-header) 0 0),
    linear-gradient(var(--color-border-header) 0 0),
    linear-gradient(var(--color-border-header) 0 0);
  background-repeat: no-repeat;
  background-size: 40% 0.75rem, 100% 3rem, 40% 0.75rem, 100% 3rem;
  background-position: 0 0.5rem, 0 2rem, 0 6rem, 0 7.5rem;
  animation: sh-embed-pulse 1.6s ease-in-out infinite;
}

@keyframes sh-embed-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Opaque and above the skeleton, so it covers it once it paints */
.sh-contact-panel__embed iframe {
  position: relative;
  z-index: 1;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sh-contact-panel__embed::before { animation: none; }
}

/* STARFISH SELECT — themed replacement for the OS dropdown Built by JS over a native <select data-sh-select>; the native element stays for form submission and no-JS fallback. */
.sh-select { position: relative; }

/* Stacks every option label in a single grid cell and collapses to
   zero height: contributes width only, so the control is sized by
   its longest option and never resizes when the choice changes.
   Mirrors the button's padding + gap + chevron (0.875×2 + 0.625 + 1). */
.sh-select__sizer {
  display: grid;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  padding-right: calc(3.375rem + 2px);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
}

.sh-select__sizer > span {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.sh-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sh-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border: 1px solid var(--color-border-card);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-blue-deep);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* This span had no rule of its own — it was picking up the hero listbox's identically-named.sh-select__value, back when the two components shared a namespace. */
.sh-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-select__button:hover,
.sh-select__button:focus-visible,
.sh-select.is-open .sh-select__button {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.sh-select__chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform 0.25s ease;
}

.sh-select.is-open .sh-select__chevron { transform: rotate(180deg); }

.sh-select__list {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: max-content;
  max-width: 20rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.375rem;
  background: #fff;
  border: 1px solid var(--color-border-card);
  border-radius: 0.625rem;
  box-shadow: 0 0.75rem 2rem rgba(16, 68, 95, 0.16);
  list-style: none;
}

.sh-select__list:focus { outline: none; }

.sh-select__option {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sh-select__option:hover,
.sh-select__option.is-active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-blue-deep);
}

.sh-select__option[aria-selected="true"] {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .sh-select__button,
  .sh-select__chevron,
  .sh-select__option { transition: none; }
  .sh-select.is-open .sh-select__chevron { transform: none; }
}

/* MOBILE / TABLET HARDENING The rem scale shrinks with the viewport (13.5px root at ≤400px), which is right for headings but drags small labels under 12px — below comfortable reading size on a phone. */
@media (max-width: 1024px) {
  .sh-why__col-sub,
  .sh-testimonial-card__author,
  .sh-testimonials__footnote,
  .sh-cta-note,
  .sh-cd-card__text,
  .sh-contact-panel__label,
  .sh-contact-panel__pill {
    font-size: max(0.8125rem, 13px);
  }

  /* Touch targets: 44px is the accepted minimum. The visual size of
     the dots stays small — the hit area grows via padding, not the
     rendered dot. */
  .sh-testimonials__nav-btn,
  .sh-story-arrow,
  .sh-conditions__arrow,
  .sh-select__button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Reach without resizing: an invisible 44px pad centred on each
     dot. Padding would have inflated the dot itself — the active one
     is a 28px pill, so it ballooned into a slab. */
  .sh-testimonials__dot {
    position: relative;
  }

  .sh-testimonials__dot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
   OUR STORY — header + three icon cards
   ============================================================ */
.sh-story-cards {
  background: var(--color-bg-section);
  padding: clamp(4.5rem, 9vw, 10.625rem) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 3.875rem);
}

.sh-story-cards__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  max-width: 32rem;
}

.sh-story-cards__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-heading);
}

.sh-story-cards__subtext {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}

/* auto-fit so a fourth card (or a removed one) still lays out evenly */
.sh-story-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: var(--container);
}

.sh-story-card {
  background: #fff;
  border-radius: 1.75rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.625rem;
  /* No fixed height: the cards stretch to the tallest in the row, so
     uneven copy lengths stay aligned without clipping. */
}

.sh-story-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: var(--radius-pill);
  background: #effaff;
  flex-shrink: 0;
}

.sh-story-card__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-icon-circle);
}

.sh-story-card__disc img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.sh-story-card__text {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
  color: #393939;
}

.sh-story-card__text strong { font-weight: 700; }
/*.sh-mark is what [bracket] syntax emits; __mark is kept so any copy
   still saved against the old highlight field renders identically. */
.sh-story-card__mark,
.sh-story-card .sh-mark { color: var(--color-blue-deep); }

@media (max-width: 1024px) {
  .sh-story-cards__grid {
    grid-template-columns: 1fr;
    max-width: 44rem;
  }
}

/* ============================================================
   VISION & MISSION — two photo cards
   ============================================================ */
.sh-vm {
  background: #fff;
  padding: clamp(4rem, 8vw, 10rem) var(--gutter);
}

.sh-vm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2.625rem;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.sh-vm__card {
  position: relative;
  min-height: 42rem;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background-color: var(--color-blue-deep);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* The photo lives here rather than on the card so it can scale by
   itself — on the card it would drag the caption panel with it.
   position:absolute is load-bearing, not tidiness: at >=900px the card
   becomes a subgrid container, and an in-flow ::before would be
   counted as a grid item and take a row of its own. */
.sh-vm__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--vm-photo, none);
  background-size: cover;
  background-position: center;
  transform-origin: center;
}

/* Above the photo layer. */
.sh-vm__spacer,
.sh-vm__panel {
  position: relative;
  z-index: 1;
}

/* Titles must line up across the two cards even when one card's copy runs to more lines. */
/* Below 900px force a single column. auto-fit alone flip-flopped: at 768px the small gutter left room for two columns, at 769px the larger gutter left room for only one — so the pair kept switching between side-by-side-unaligned and a collapsed second card. */
@media (max-width: 899px) {
  .sh-vm__grid { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .sh-vm__grid {
      grid-template-rows: minmax(28.9375rem, 1fr) auto;
      /* Each card spans both rows, so a row gap would be counted
         INSIDE the card (463 + 42 + 209 = 714 instead of 672). The
         cards sit side by side here, so only the column gap is
         wanted. */
      row-gap: 0;
      column-gap: 2.625rem;
    }

    .sh-vm__card {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      /* The rows define the height here (463 photo + panel = the
         design's 672). Leaving the base min-height in play would add
         to that and overshoot. */
      min-height: 0;
    }
  }
}

.sh-vm__spacer { min-height: 0; }

/* Caption sits in flow at the foot of the card, so longer copy grows
   the panel upward rather than spilling past the rounded corner. */
.sh-vm__panel {
  background: rgba(0, 0, 0, 0.7);
  padding: 1.5rem 2.875rem 2.5rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  color: #fff;
}

.sh-vm__title {
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.sh-vm__body {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  max-width: 31rem;
}

@media (max-width: 1024px) {
  .sh-vm__card { min-height: 34rem; }
  .sh-vm__panel { padding: 1.25rem 1.75rem 2rem 2rem; }
}

@media (max-width: 768px) {
  .sh-story-cards { padding: 4rem 1.5rem; }
  .sh-story-card { padding: 1.75rem; gap: 1.75rem; }
  .sh-vm { padding: 4rem 1.5rem; }
  .sh-vm__card { min-height: 28rem; }
}

/* ── HERO CTAs ON MOBILE ──────────────────────────────────────
   Below 768px every hero CTA row becomes a full-width vertical
   stack, so buttons share one width instead of wrapping ragged
   (measured at 375px before this: 262px beside 160px on Referral
   Partners, 271px beside 135px on Services).

   Written as a mobile-only override rather than a mobile-first
   rewrite because the three containers have different desktop
   layouts — cover is already a centred column, stacked and
   services are wrapping rows — and this way none of that is
   disturbed above the breakpoint.

   Children are targeted by class, never with `> *`: the cover
   hero's CTA row also holds.sh-hero__meta (the italic tagline),
   which must keep its natural width. No heights or radii are set
   either —.sh-btn--pill-blue is 3.875rem tall to house a 3.125rem
   icon disc, and a blanket height would crop it. */
@media (max-width: 768px) {

  .sh-hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .sh-hero-ctas,
  .sh-hero-ctas-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Equal width, always — the icon-pill styles keep their own
     label-left/icon-right layout automatically now (space-between is
     baked into.sh-btn--pill-blue/white/plain in base.css, not
     conditional on width), so nothing else is needed here for that;
     this block only has to make the two buttons match each other. */
  .sh-hero__ctas > .sh-btn,
  .sh-hero__ctas > .sh-cta-note,
  .sh-hero-ctas > .sh-btn,
  .sh-hero-ctas > .sh-cta-note {
    width: 100%;
    /* Cap mobile button width on wider phone viewports. */
    max-width: 24rem;
  }

  /* Stretched full width, so mirror the icon reserve on the left and the label lands on the button's true centre. */
  .sh-hero__ctas > .sh-btn:is(.sh-btn--pill-blue, .sh-btn--pill-white, .sh-btn--pill-plain),
  .sh-hero-ctas > .sh-btn:is(.sh-btn--pill-blue, .sh-btn--pill-white, .sh-btn--pill-plain) {
    padding-left: var(--btn-icon-reserve);
  }

  .sh-hero__ctas > .sh-cta-note,
  .sh-hero-ctas > .sh-cta-note {
    justify-content: center;
  }
}

/* Use light foregrounds for photo heroes below 768px. */
@media (max-width: 768px) {

  /* The scrim exists to darken a photo *behind* the copy. There is no
     photo behind the copy here — it moves to the card below and the
     section goes white — so an inset:0 dark layer would simply paint
     over that white ground and take the newly-darkened text with it. */
  .sh-hero__scrim {
    display: none;
  }

  .sh-hero {
    /* Height came from min-height:100vh so the photo filled the
       screen; with the photo out of the background the section
       should be as tall as its content. display:block lets the
       content and the photo card stack in normal flow. */
    display: block;
    min-height: 0;
    overflow: visible;
    background-image: none;
    background-color: #fff;
    /* The Services hero carries a 10rem top padding on mobile to push
       its copy clear of the photo's focal point. That sat on top of
       the content's own padding and left ~135px of empty white here,
       so it is reset and the content padding below does the work. */
    padding-top: 0;
  }

  .sh-hero__content {
    padding: 10rem var(--gutter) 2.5rem;
    margin: 0;
  }

  /* Reversed-out copy → dark. */
  .sh-hero__headline { color: var(--color-navy); }

  .sh-hero__subtext { color: var(--color-muted); }

  .sh-hero__meta { color: var(--color-blue-deep); }

  /* The white pill would be white-on-white and vanish, so it takes
     the blue pill's colours — same geometry, inverted palette. */
  .sh-hero__ctas .sh-btn--pill-white {
    background: var(--color-primary);
    color: #fff;
  }
  .sh-hero__ctas .sh-btn--pill-white .sh-btn__icon {
    background: #fff;
    color: var(--color-primary);
  }

  /* Services' "Not sure where to start?" note is translucent grey
     with white text for the photo; --light is the existing variant
     for light backgrounds. */
  .sh-hero__ctas .sh-cta-note {
    background: #f8feff;
    border-color: var(--color-primary);
    color: var(--color-blue-deep);
  }

  /* The photo, now a card below the copy. Uses --hero-bg (the
     desktop image) rather than --hero-bg-mobile: the mobile crops
     are tall portraits cut for a full-bleed backdrop and would be
     badly framed in a landscape card. */
  .sh-hero::after {
    content: '';
    display: block;
    margin: 0 var(--gutter) 3.5rem;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-3xl);
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* ── MOBILE / TABLET: DROP DECORATIVE SECTION PHOTOS ────────── The steps photo sits behind content under a heavy overlay. */
@media (max-width: 768px) {

  /* How It Works (home) and What Makes Us Different (about) — one
     partial, so both are covered. */
  .sh-steps { background-image: none; }
}

/* ── CATEGORY CARD GRID — predictable column counts ─────────── auto-fit with a 15rem minimum produced a non-monotonic sequence as the viewport grew: 1 → 1 → 2 → 2 → 3 → 3 → 4 columns, with card widths swinging 308 → 405 → 255 → 339 → 230 → 271 → 244px. */
@media (max-width: 639px) {
  .sh-who-help__strip { grid-template-columns: 1fr; }
}

@media (min-width: 640px) and (max-width: 1199px) {
  .sh-who-help__strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── SERVICE AREAS GRID (Services Overview) ──────────────────
   Service grid dimensions:
   1440 frame, 86/80/116/80 padding, 1280 container, 48 gap below the
   head, centred heading over a 3-up card grid. */
.sh-areas {
  background: var(--color-bg-section);
  padding: 5.375rem var(--gutter) 7.25rem;
}

.sh-areas__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.sh-areas__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  text-align: center;
}

.sh-areas__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-heading-alt);
}

.sh-areas__subtext {
  max-width: 41rem;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-muted);
}

/* Three across here, rather than card-grid.php's default two — this
   is a top-level overview, not a list nested inside a content column. */
/* still a real grid, not the flex-wrap base.sh-card-grid now uses. */
.sh-areas .sh-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  margin-top: 0;
}

/* Title keeps the site's shared display font (Lora) — this section
   doesn't get its own typeface — but goes near-black here instead of
   the shared class's blue-deep, per the reference design. */
.sh-areas .sh-card-grid__title {
  color: var(--color-heading-alt);
}

@media (max-width: 1024px) {
  .sh-areas .sh-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sh-areas { padding: 4rem 1.5rem 4.5rem; }
  .sh-areas .sh-card-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* The notched card + badge treatment for icon-bearing cards lives on
   the shared component in pages.css, not here — it is how a card with
   an icon looks everywhere, not something specific to this section. */

/* Solid CTA + outline note, centred under the grid — the section's
   own closing action, matching the hero's cta_primary/cta_note pair
   in spirit but rendered directly rather than through hero.php. */
.sh-areas__footer {
  display: flex;
  /* nowrap, not wrap: with wrap, the row breaks onto two lines the
     moment the two buttons' own content stops fitting — a width that
     depends on button label length and shifts if the CTA labels are
     ever edited, and doesn't line up with the breakpoint below where
     they get the deliberate stacked/equal-width treatment. Forcing
     nowrap here means the ONLY place stacking happens is the media
     query, so there's no gap between "wrapped but not yet styled for
     it" and "properly stacked". */
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

@media (max-width: 640px) {
  .sh-areas__footer { flex-direction: column; align-items: stretch; }
  .sh-areas__footer .sh-btn { width: 100%; }
  .sh-areas__footer .sh-btn:is(.sh-btn--pill-blue, .sh-btn--pill-white, .sh-btn--pill-plain) {
    padding-left: var(--btn-icon-reserve);
  }
  /* Icon-pill styles keep their own space-between (icon pinned right,
     see base.css) — this only centres the plain outline note button,
     which has no icon to keep clear of. */
  .sh-areas__footer .sh-btn:not(.sh-btn--pill-blue):not(.sh-btn--pill-white):not(.sh-btn--pill-plain) {
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   BANNER — width modes, custom colour, inner padding
   ───────────────────────────────────────────────────────────── */

/* Inner padding is the banner's own, at every width, so it never sits
   flush against its background..sh-banner already sets this; these
   modes only change where the OUTER edge falls. */
.sh-banner {
  container-type: inline-size;
}

/* Custom background: the colour and its readable foreground both come
   from the record (see banner.php), so one picker drives both. */
.sh-banner--custom {
  /* var(--banner-bg) is either a solid colour or a linear-gradient()
     value — the `background` shorthand accepts both, so one rule
     covers custom colour and custom gradient alike. */
  background: var(--banner-bg, var(--color-divider-teal));
  color: var(--banner-fg, #fff);
}

.sh-banner__headline,
.sh-banner__body,
.sh-banner__col2-text {
  /* Falls back to each element's own base colour (set further down)
     only when a banner predates this and carries no --banner-fg at
     all — a live one always has it, from every one of the five
     background choices. */
  color: var(--banner-fg, inherit);
}

/* Shared width classes for all banner layouts. */

/* Full screen: the background runs the width of the window while the
   content stays on the page measure. Stretched out of its container
   and padded back in, so it works wherever it is placed rather than
   needing a special parent. */
.sh-bw-screen {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2));
}

/* Full width: the page measure. The block wrapper already supplies it,
   so this only has to undo any full-bleed a layout applies by default
   — which.sh-insurance-band does. */
.sh-bw-page {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container);
}

/* In the column: narrower, so the padding comes down with it or the
   copy is squeezed into a ribbon. */
.sh-bw-column {
  width: auto;
  padding: clamp(1.5rem, 4cqi, 2.5rem);
}

/* Every banner runs full-screen on mobile regardless of its own Width setting — Page and Column both collapse to the same full-bleed treatment.sh-bw-screen already gives, since a bordered/inset banner has no room to read as anything but cramped at this size. */
@media (max-width: 768px) {
  .sh-bw-page,
  .sh-bw-column {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    border-radius: 0;
    padding-inline: var(--gutter);
  }
}

/* The image earns its place only when there is room for it. */
@container (max-width: 34rem) {
  .sh-banner--two-col { flex-direction: column; align-items: stretch; }
  .sh-banner--two-col .sh-banner__col2-image { display: none; }
}

/* Without container query support the viewport is the best available
   proxy — wrong for a column-width banner on a wide screen, but it
   errs toward showing the image rather than hiding it wrongly. */
@supports not (container-type: inline-size) {
  @media (max-width: 700px) {
    .sh-banner--two-col { flex-direction: column; align-items: stretch; }
    .sh-banner--two-col .sh-banner__col2-image { display: none; }
  }
}

/* HOME — type scale Section headings ran 56–64px at 1440, which read as oversized against the body copy beside them. */
.page-home .sh-why h2,
.page-home .sh-who-we-are h2,
.page-home .sh-who-help h2,
.page-home .sh-steps h2,
.page-home .sh-testimonials h2,
.page-home .sh-audience h2 {
  font-size: clamp(1.875rem, 3.1vw, 2.75rem);
}

/* INTAKE FORM (Contact page) + CRISIS NOTICE The form sits below the contact cards at #intake-form, which is where every "Request Intake" button on the site lands. */
.sh-intake-form {
  padding: 5rem var(--gutter);
}

/* Same 45rem cap as.sh-wizard--inline.sh-wizard__frame — heading,
   notice and embed read as one grouped block, not three separate
   full-width children of the section. */
.sh-intake-form__frame {
  max-width: 45rem;
  margin: 0 auto;
}

.sh-intake-form__head {
  max-width: 44rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.sh-intake-form__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.sh-intake-form__subheading {
  font-size: var(--text-md);
  color: var(--color-muted);
  line-height: 1.5;
}

/* Intake page's own form wrapper — no longer shared with the Refer a
   Patient wizard embed, which has its own.sh-wizard__embed instead
   (see wizard.css). */
.sh-intake-form__inner {
  position: relative;
  margin: 0 auto;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  /* Holds the card open while the embed is still empty, so the page
     below does not jump upward as the form paints in. Roughly the
     height of the form itself; min- rather than fixed so a taller
     form is never clipped. */
  min-height: 32rem;
}

/* The embed fades in rather than appearing mid-paint — JotForm's
   iframe renders its own background before its fields, which reads as
   a flash of empty box without this. */
.sh-intake-form__embed {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sh-intake-form__inner.is-loaded .sh-intake-form__embed { opacity: 1; }

/* Once loaded the embed dictates the height; keeping min-height would
   leave dead space under a short form. */
.sh-intake-form__inner.is-loaded { min-height: 0; }

.sh-intake-form__embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.sh-intake-form__loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.sh-intake-form__spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: sh-intake-spin 0.8s linear infinite;
}

.sh-intake-form__loading-text {
  font-size: var(--text-md);
  color: var(--color-muted);
}

@keyframes sh-intake-spin { to { transform: rotate(360deg); } }

/* Respect a reduced-motion preference: keep the indicator, drop the
   spin — the text alone still says the form is on its way. */
@media (prefers-reduced-motion: reduce) {
  .sh-intake-form__spinner { animation: none; border-top-color: var(--color-border); }
}

@media (max-width: 768px) {
  .sh-intake-form { padding: 3.5rem var(--gutter); }
  .sh-intake-form__inner { min-height: 26rem; }
}

/* Contact page after the redesign: the details section lost its left
   header column (the hero carries the heading now), so the card grid
   is the whole section and centres on a narrower measure instead of
   filling the width a two-column layout gave it. */
.page-contact .sh-contact-details__inner { justify-content: center; }

.page-contact .sh-contact-details__right {
  flex: 0 1 auto;
  width: 100%;
  max-width: 52rem;
}

/* The crisis notice sits above this narrower measure, not the page's full container — matching the card grid it introduces, rather than reading as a wider, unrelated banner dropped in front of it. */
.sh-emergency-band--contact.sh-emergency--full {
  max-width: 52rem;
}

.sh-emergency-band--intake {
  margin-bottom: 1.75rem;
}

/* PER-SECTION BACKGROUND OVERRIDES (Home page) Each of these pairs a section's own class with a "--bg" modifier applied only when its Background setting resolves to something — see starfish_block_bg_style() and starfish_acf_background_fields(). */
.sh-who-we-are--bg,
.sh-why--bg,
.sh-who-help--bg,
.sh-testimonials--bg,
.sh-audience--bg,
.sh-services-offer--bg,
.sh-stat-bar--bg {
  background: var(--block-bg);
  color: var(--block-fg);
}

.sh-steps--bg { background-color: var(--block-bg); }

/* Every one of these headings/body lines hardcodes its own colour by default (--color-heading-alt, #000, var(--color-text), …) — the same reason self-pay.php's own --bg modifier needs this. */
.sh-who-we-are--bg .sh-who-we-are__headline,
.sh-who-we-are--bg .sh-who-we-are__subtext,
.sh-why--bg .sh-why__headline,
.sh-why--bg .sh-why__col-title,
.sh-why--bg .sh-why__col-body,
.sh-who-help--bg .sh-who-help__headline,
.sh-testimonials--bg .sh-testimonials__headline,
.sh-testimonials--bg .sh-testimonials__subtext,
.sh-audience--bg .sh-audience__headline,
.sh-audience--bg .sh-audience__subtext,
.sh-services-offer--bg .sh-areas__headline,
.sh-stat-bar--bg .sh-stat-bar__number,
.sh-stat-bar--bg .sh-stat-bar__label {
  color: inherit;
}

/* Services We Offer's subhead specifically gets --block-subheader, not
   the flat --block-fg every other bg-aware element above uses: on this
   section's light default (#F8F8F8) that resolves to a designed
   #4c4c4c rather than the harsher full-contrast heading colour, while
   still switching to near-white if the background is ever set dark —
   see the near-white check in starfish_block_bg_style(). */
.sh-services-offer--bg .sh-areas__subtext,
.sh-who-help--bg .sh-who-help__subtext {
  color: var(--block-subheader);
}

/* Home's "Services We Offer" section only —.sh-areas is shared with
   the Services Overview page's own grid (areas-grid.php), which keeps
   its centred header/footer untouched. Scoped to.sh-services-offer
   so this doesn't leak into that other usage. */
.sh-services-offer .sh-areas__head {
  align-items: flex-start;
  text-align: left;
}

.sh-services-offer .sh-areas__footer {
  justify-content: flex-start;
}

/* Insurance Band's outer page background on Home — see the wrapping div in front-page.php. */
.sh-insurance-section-wrap {
  background: var(--block-bg);
}

/* ── LOCATIONS PREVIEW ──────────────── Geometry is straight from the design: 100/80 section padding, 42px between blocks, an 1280px column, and a white card with a 20px inset holding a 22px-radius photo and contact panel. */
.sh-locations {
  background: #f8f8f8;
  border-bottom: 1px solid #c0dae6;
  padding: 6.25rem var(--gutter);
  display: flex;
  justify-content: center;
}

.sh-locations--bg {
  background: var(--block-bg);
  color: var(--block-fg);
}

/* The container ladder, not the design's raw 1280 — that measurement
   assumes a 1441px design canvas and reads wider than every other
   section on a real viewport. */
.sh-locations__inner {
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.625rem; /* 42px */
}

.sh-locations__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem; /* 18px */
}

.sh-locations__headline {
  font-family: var(--font-display);
  font-size: 3.25rem; /* 52px */
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -1.04px;
  color: var(--color-heading-alt); /* #28334a */
}

.sh-locations__subtext {
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  line-height: 1.5;
  color: #4c4c4c;
  max-width: 44.375rem; /* 710px */
}

.sh-locations--bg .sh-locations__headline { color: inherit; }
.sh-locations--bg .sh-locations__subtext  { color: var(--block-subheader); }

/* Cards stack as more programs open; the design shows one. */
.sh-locations__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sh-locations-card {
  background: var(--color-surface);
  border-radius: 1.75rem; /* 28px */
  padding: 1.25rem;       /* 20px */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem; /* 24px */
  align-items: stretch;
}

/* No photo yet: the panel takes the full width rather than leaving a
   blank half. */
.sh-locations-card:not(:has(.sh-locations-card__media)) {
  grid-template-columns: 1fr;
}

.sh-locations-card__media {
  position: relative;
  border: 1px solid #a0a0a0;
  border-radius: 1.375rem; /* 22px */
  overflow: hidden;
  min-height: 14.6875rem;  /* 235px */
  background: var(--color-bg-section);
}

/* Absolute so the photo's own aspect ratio never drives the card's height — the row is sized by the panel, and the image crops into whatever that comes to. */
.sh-locations-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The design lays a 10% black wash over the photo. */
.sh-locations-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1.375rem;
  pointer-events: none;
}

.sh-locations-card__panel {
  background: var(--color-surface);
  border-radius: 1.375rem;
  padding: 1rem 1.5rem 1.3125rem; /* 16 / 24 / 21 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 14.6875rem;
}

.sh-locations-card__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sh-locations-card__id {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
}

.sh-locations-card__name {
  font-family: var(--font-body);
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-heading-alt);
}

.sh-locations-card__name a {
  color: inherit;
  transition: var(--transition-base);
}

.sh-locations-card__name a:hover { color: var(--color-primary); }

.sh-locations-card__address {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-navy); /* #212a3d */
  max-width: 31.3125rem;    /* 501px */
}

.sh-locations-card__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

.sh-locations-card__lines li {
  display: flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-navy);
}

.sh-locations-card__lines a {
  color: inherit;
  transition: var(--transition-base);
}

.sh-locations-card__lines a:hover { color: var(--color-primary); }

/* --color-divider-teal2, not --color-divider-strong: the latter has a
   brand-derived color-mix override that resolves bluer than the
   design's teal. This token is the design's #67C8C7 exactly. */
.sh-locations-card__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-divider-teal2);
}

.sh-locations-card__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  line-height: 1.5;
  color: #04618e;
  border-bottom: 1px solid var(--color-primary);
  transition: var(--transition-base);
}

.sh-locations-card__directions:hover { color: var(--color-primary); }

.sh-locations-card__dir-arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .sh-locations-card {
    grid-template-columns: 1fr;
  }
  .sh-locations-card__media {
    min-height: 0;
    aspect-ratio: 608 / 235;
  }
  .sh-locations-card__panel {
    min-height: 0;
    padding: 1.25rem 0.5rem 0.5rem;
  }
}

@media (max-width: 768px) {
  .sh-locations {
    padding: 4rem var(--gutter);
  }
  .sh-locations__inner { gap: 2rem; }
  .sh-locations__headline { font-size: 2.25rem; }
  .sh-locations__subtext  { font-size: 1rem; }
}

/* ── LOCATIONS CAROUSEL ── Two or more active locations. */
.sh-loc-carousel {
  width: 100%;
}

.sh-loc-carousel__track {
  display: flex;
  align-items: stretch;
  gap: 1.25rem; /* 20px */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.sh-loc-carousel__track::-webkit-scrollbar { display: none; }

/* grow:1 / shrink:0 against the design width as the basis. */
.sh-loc-tile {
  position: relative;
  flex: 1 0 clamp(9rem, 17vw, 15.625rem); /* 250px collapsed */
  height: clamp(20rem, 32vw, 28.4375rem); /* 455px */
  border-radius: 1.5rem; /* 24px */
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: flex-basis 0.45s ease, flex-grow 0.45s ease;
}

.sh-loc-tile.is-open {
  flex-grow: 2;
  flex-basis: clamp(17rem, 37vw, 33.375rem); /* 534px */
  justify-content: center;
}

.sh-loc-tile__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One flat wash on every card, open or not — the design uses the
   same 46% black behind both states. */
.sh-loc-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
}

/* Full-bleed hit area, under the copy but over the photo. */
.sh-loc-tile__activate {
  position: absolute;
  inset: 0;
  z-index: 1;
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.sh-loc-tile__activate:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Click-through so the card's own hit area keeps working; the button
   below opts back in. */
.sh-loc-tile__content {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem; /* 32px */
  padding: 2rem 1.25rem;
  text-align: center;
}

.sh-loc-tile__name {
  display: flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  font-family: var(--font-display);
  font-size: 1.375rem; /* 22px collapsed */
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  transition: font-size 0.45s ease;
}

.sh-loc-tile.is-open .sh-loc-tile__name {
  font-size: 2rem; /* 32px */
}

/* The pin belongs to the open state only — collapsed cards are just
   a name over a photo. */
.sh-loc-tile__pin {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: none;
}

.sh-loc-tile.is-open .sh-loc-tile__pin { display: block; }

/* Rounded rectangle, not one of the theme's pills — the design gives
   this button an 11px radius and no arrow. */
.sh-loc-tile__btn {
  display: none;
  background: var(--color-primary);
  color: #fff;
  border-radius: 0.6875rem; /* 11px */
  padding: 0.75rem 1.125rem; /* 12 / 18 */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  transition: var(--transition-base);
}

.sh-loc-tile.is-open .sh-loc-tile__btn {
  display: inline-block;
  pointer-events: auto;
}

.sh-loc-tile__btn:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

@media (max-width: 768px) {
  /* Collapsed cards get too narrow to read a name in; widen both
     states and let the row slide instead. */
  .sh-loc-tile {
    flex-basis: 11rem;
    height: 22rem;
  }
  .sh-loc-tile.is-open {
    flex-basis: 17rem;
  }
  .sh-loc-tile__content { padding: 1.25rem 1rem; gap: 1.5rem; }
  .sh-loc-tile.is-open .sh-loc-tile__name { font-size: 1.5rem; }
}

/* Mobile is a native snap strip: cards never change width, so there
   is no rescaling to avoid and the oversized photo layer would just
   crop every card to its left edge. Back to filling the card. */
@media (max-width: 900px) {
  .sh-cond-card::after { width: 100%; }
}

/* The carousel still steps for reduced-motion visitors — it just
   arrives instead of travelling. */
@media (prefers-reduced-motion: reduce) {
  .sh-conditions__track,
  .sh-cond-card,
  .sh-cond-card__panel { transition: none; }
}

/* ── Standalone FAQ section (Refer a Patient) ─────────────────
   The inner block reuses.sh-content-block--faqs wholesale, so only
   the outer section needs anything here: the page measure and the
   vertical rhythm the flexible-content wrapper would otherwise have
   supplied. */
.sh-faq-section {
  padding: 5.5rem var(--gutter);
  background: #fff;
}

.sh-faq-section > .sh-content-block {
  max-width: var(--container);
  margin-inline: auto;
}

@media (max-width: 768px) {
  .sh-faq-section { padding: 3.5rem var(--gutter); }
}

/* ============================================================
   REFER A PATIENT — new design
   ============================================================ */

/* ── Emergency notice ───────────────────────────────────────── */
.sh-emergency {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem 1.375rem;
  background: #fdf2f2;
  border-left: 3px solid #d64545;
  border-radius: 0.375rem;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-heading);
}

.sh-emergency--full {
  max-width: var(--container);
  margin: 2.5rem auto 0;
  width: calc(100% - var(--gutter) * 2);
}

.sh-emergency__mark {
  flex-shrink: 0;
  font-weight: 700;
  color: #d64545;
  line-height: 1.5;
}

.sh-emergency__text p:last-child { margin-bottom: 0; }

/* ── Who we accept ──────────────────────────────────────────── */
.sh-accept { padding: 4.5rem var(--gutter) 5.5rem; background: #fff; }

.sh-accept__inner { max-width: var(--container); margin-inline: auto; }

.sh-accept__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  /* stretch, not start: the tall photo takes its height from this row
     so it finishes level with the facts column beside it. A fixed
     aspect ratio could not — it sized itself from its own width and
     drifted away from the column as the copy grew or shrank. */
  align-items: stretch;
}

.sh-accept__headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-heading);
  margin-bottom: 1.75rem;
}

/* The location pill — a real select when there is more than one
   location, otherwise plain text in the same shell so the two states
   look identical. */
.sh-accept__switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 17rem;
  padding: 0.875rem 1.125rem;
  margin-bottom: 2.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-chip);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-heading);
}

.sh-accept__switch-pin svg { width: 1.125rem; height: 1.125rem; color: var(--color-primary); display: block; }

/* Two states share this shell. With one location it is plain text;
   with several the themed listbox sits inside it, stripped of its own
   button chrome so the pill remains the visible control rather than a
   box inside a box. */
.sh-accept__switch--picker {
  padding-right: 0.875rem;
}

.sh-accept__switch-wrap { flex: 1; min-width: 0; }

.sh-accept__switch-wrap .sh-select {
  width: 100%;
}

.sh-accept__switch-wrap .sh-select__list {
  left: -2.875rem;
  right: -0.875rem;
  width: auto;
  max-width: none;
}

.sh-accept__switch .sh-select__button {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  color: inherit;
}

/* The shared control draws a focus ring on the BUTTON. Stripped of
   its own border and radius, that ring becomes a rectangle floating
   inside the pill — the "box on hover". Move it to the pill, which is
   the control as far as anyone looking at it is concerned. */
.sh-accept__switch .sh-select__button:hover,
.sh-accept__switch .sh-select__button:focus-visible,
.sh-accept__switch .sh-select.is-open .sh-select__button {
  background: none;
  box-shadow: none;
}

.sh-accept__switch:hover,
.sh-accept__switch:focus-within {
  border-color: var(--color-primary);
}

.sh-accept__switch .sh-select__chevron { color: var(--color-heading); }

/* The native element stays in the DOM for no-JS and form semantics;
   it must not also draw a second control inside the pill. */
.sh-accept__switch .sh-select + .sh-accept__switch-select,
.sh-accept__switch select.sh-accept__switch-select { display: none; }

/* No JS: the themed listbox never gets built, so the native select is
   all there is — give it back the pill's own typography. */
.no-js .sh-accept__switch select.sh-accept__switch-select {
  display: block;
  flex: 1;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sh-accept__list { display: flex; flex-direction: column; }

/* A rule between rows, not around them — the last row closes the list
   rather than adding a line under the final value. */
.sh-accept__row { padding: 1.375rem 0; }
.sh-accept__row + .sh-accept__row { border-top: 1px solid var(--color-border-card); }
.sh-accept__row:first-child { padding-top: 0; }

.sh-accept__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 0.5rem;
}

.sh-accept__value {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-heading);
}

.sh-accept__link { margin: 0.625rem 0 0; }

.sh-accept__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
}

.sh-accept__link a:hover { color: var(--color-primary-hover); }

/* Staggered pair: the short photo drops so the two read as one
   composition rather than a row of equal tiles. */
.sh-accept__media { display: flex; gap: 1.25rem; align-items: flex-end; height: 100%; min-height: 26rem; }

.sh-accept__photo { border-radius: var(--radius-xl); overflow: hidden; flex: 1; }
.sh-accept__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Full row height; the short one keeps the staggered proportion the
   design has between the pair (539/774 ≈ 70%). */
.sh-accept__photo--tall { height: 100%; }
/* No margin-top: the container's align-items:flex-end is what
   staggers these now. Leaving it would fight that the moment the two
   photos' proportions change. */
.sh-accept__photo--short { height: 70%; }

/* ── What we treat ──────────────────────────────────────────── */
.sh-accept__treat { margin-top: 5rem; }

.sh-accept__treat-head {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 1.75rem;
}

.sh-accept__cards {
  display: grid;
  /* auto-fit + a minimum card width, not a fixed column count: 4 equal columns held all the way down to the 1024px breakpoint, which left cards as narrow as 202px on an 1100px screen — visibly cramped, titles wrapping badly. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.625rem;
}

.sh-accept-card {
  padding: 2rem 1.875rem;
  background: var(--color-bg-audience);
  border-radius: var(--radius-lg);
}

.sh-accept-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.75rem;
  margin-bottom: 1.75rem;
  background: var(--color-primary);
  border-radius: 50%;
}

.sh-accept-card__icon img { width: 2.25rem; height: 2.25rem; filter: brightness(0) invert(1); }

.sh-accept-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.625rem;
}

.sh-accept-card__text { font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); }

/* ── Urgent referrals bar ───────────────────────────────────── */
.sh-accept__urgent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding: 1.5rem 1.875rem;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  color: #fff;
}

.sh-accept__urgent-title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.25rem; }
.sh-accept__urgent-text { font-size: var(--text-md); opacity: 0.9; }

.sh-accept__urgent-contacts { display: flex; flex-wrap: wrap; gap: 1.75rem; }

.sh-accept__urgent-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff;
}

.sh-accept__urgent-link svg { width: 1.25rem; height: 1.25rem; }
.sh-accept__urgent-link:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1024px) {
  /* The photo pair is what made this section cramped at tablet widths — a two-column grid squeezed to one column still had a tall image column pushing the facts list to fight it for room. */
  .sh-accept__top { grid-template-columns: 1fr; gap: 2rem; }
  .sh-accept__media { display: none; }
}

@media (max-width: 640px) {
  .sh-accept { padding: 3rem var(--gutter) 3.5rem; }
  .sh-accept__cards { grid-template-columns: 1fr; }
  .sh-accept__urgent { flex-direction: column; align-items: flex-start; }
}

/* ── Who refers to us: navy bar variant ────── */
.sh-icon-cards--bars {
  background: var(--color-secondary);
  color: #fff;
}

.sh-icon-cards--bars .sh-icon-cards__header { align-items: flex-start; text-align: left; }

.sh-icon-cards--bars .sh-icon-cards__headline {
  color: #fff;
  max-width: 42rem;
}

/* White rows, icon left, label following it — a list of referrers
   rather than a grid of tiles. */
.sh-icon-cards--bars .sh-ic-grid { gap: 1.125rem; }

/* flex-direction and gap both have to be named: the base card is a
   tall column with a 3rem gap, which is the whole reason these read
   as tiles rather than rows. */
.sh-icon-cards--bars .sh-ic-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  /* min-height comes from.sh-ic-grid--plain and is the reason these
     stayed 14rem tall — same specificity, so it survives everything
     this rule does not explicitly name. */
  min-height: 0;
  padding: 1.0625rem 1.375rem;
  background: #fff;
  border-radius: var(--radius-md);
  text-align: left;
  box-shadow: none;
}

/* The circle stays, just smaller. These SVGs are fill="white" — drawn
   to sit inside a coloured disc — so stripping the background does not
   give a blue pictogram, it gives an invisible one. */
.sh-icon-cards--bars .sh-ic-card__icon {
  width: 2.375rem;
  height: 2.375rem;
  margin: 0;
  flex-shrink: 0;
  background: var(--color-primary);
  border-radius: 50%;
}

.sh-icon-cards--bars .sh-ic-card__icon img {
  width: 1.375rem;
  height: 1.375rem;
}

/* The body is a column-flex wrapper around the title — with one child
   only its gap matters, and it should be none. */
.sh-icon-cards--bars .sh-ic-card__body { gap: 0; }

.sh-icon-cards--bars .sh-ic-card__title {
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-heading);
  margin: 0;
}

@media (max-width: 640px) {
  .sh-icon-cards--bars .sh-ic-card { padding: 1rem 1.125rem; gap: 1rem; }
}

/* ── Refer a Patient: per-section background overrides ────────
   Each section paints --block-bg when an editor has chosen one, and
   otherwise keeps the colour it shipped with. --block-fg /
   --block-subheader come from starfish_block_bg_style(), so copy
   stays legible on whatever is picked without a second setting. */
.sh-emergency-band--bg,
.sh-accept--bg,
.sh-faq-section--bg,
.sh-wizard--bg { background: var(--block-bg); }

/*.sh-emergency-band is now on the same element as.sh-emergency--full (see emergency-notice.php) — that element's own margin-top: 2.5rem already gives the section its top spacing, so nothing extra is needed here. */

.sh-icon-cards--bars.sh-icon-cards--bg { background: var(--block-bg); }
.sh-icon-cards--bars.sh-icon-cards--bg .sh-icon-cards__headline { color: var(--block-fg, #fff); }

.sh-accept--bg .sh-accept__headline,
.sh-accept--bg .sh-accept__treat-head,
.sh-faq-section--bg .sh-content-block__heading,
.sh-wizard--bg .sh-wizard__title { color: var(--block-fg, inherit); }

.sh-accept--bg .sh-accept__value { color: var(--block-fg, inherit); }
.sh-accept--bg .sh-accept__label { color: var(--block-subheader, var(--color-gray)); }

/* ── Hero subtext holding more than one block ──────────────── starfish_richtext_tag() switches the wrapper to a <div> when an editor has written a paragraph plus a heading or a list, since a <p> cannot legally hold those. */
div.sh-hero__subtext > *,
div.sh-hero-side__subtext > *,
div.sh-hero-split__subtext > *,
div.sh-hero-stacked__subtext > * {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

div.sh-hero__subtext > * + *,
div.sh-hero-side__subtext > * + *,
div.sh-hero-split__subtext > * + *,
div.sh-hero-stacked__subtext > * + * {
  margin-top: 0.75rem;
}

/* Home: adjacent white sections should share one compact rhythm rather
   than stacking both sections' full top/bottom padding. */
.page-home .sh-who-we-are { padding-bottom: 2rem; }
.page-home .sh-why { padding-top: 2rem; }

/* ── Hero: "Hide photo on mobile" (shared ACF field) ────────── One toggle, every layout — but each has its own photo mechanism, so each needs its own rule. */
@media (max-width: 768px) {
  .sh-hero--hide-mobile-media.sh-hero {
    background-image: none !important;
  }

  .sh-hero--hide-mobile-media.sh-hero-split .sh-hero-split__media,
  .sh-hero--hide-mobile-media.sh-hero-side .sh-hero-side__media,
  .sh-hero--hide-mobile-media.sh-hero-side .sh-hero-side__bg,
  .sh-hero--hide-mobile-media.sh-hero-stacked .sh-hero-stacked__strip-wrap,
  .sh-hero--hide-mobile-media.sh-hero-stacked .sh-hero-stacked__cards-wrap {
    display: none;
  }

  /* Blend's mobile gradient fades to white by 66% of the hero's height, so the pill-white "Refer a Patient" button reads on a dark ground however tall the hero is — it was tuned against the photo-card height further down. */
  .sh-hero--hide-mobile-media.sh-hero-side--blend {
    background: var(--hero-side-bg) !important;
  }
}