/* ──────────────────────────────────────────────────────────────
   Bayou City Breastfeeding — Site header CSS
   ──────────────────────────────────────────────────────────────
   Loaded globally on every page. Styles the sticky top nav and
   the mobile hamburger panel. Pulls colors / spacing / type from
   colors_and_type.css (must be enqueued first).
   ────────────────────────────────────────────────────────────── */

/* ─── Global resets ───────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--navy-500);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Hide GeneratePress's built-in back-to-top button. The site uses the
   custom branded .back-to-top button injected by assets/back-to-top.js;
   GP's native one would otherwise stack a small dark arrow in the same
   corner. !important beats GP's inline customizer CSS. */
.generate-back-to-top { display: none !important; }

/* Skip link — keyboard / screen reader accessibility */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link.screen-reader-text:focus {
  position: fixed;
  left: 16px; top: 16px;
  width: auto; height: auto;
  padding: 12px 18px;
  background: var(--pink-500);
  color: var(--white);
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  z-index: 9999;
  box-shadow: var(--shadow-md);
}

/* ─── Top nav ─────────────────────────────────────────────── */
/* Pinned to viewport top sitewide on every page. position: fixed
   is used instead of position: sticky because GP's parent-theme
   wrapper structure was preventing sticky from anchoring reliably.
   Body gets padding-top compensation below so content does not
   hide behind the fixed bar. */
.nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--gray-100);
}
/* Push the body content down by the nav height so the fixed nav
   does not cover the top of the page. Nav internal layout is
   14px top padding + 44px logo + 14px bottom padding + 1px border
   = 73px. Reserve 76px for breathing room.
   NOTE: scoped as `html body` (specificity 0,0,0,2) so it beats
   GeneratePress's inline `body{padding-top:0}` global-spacing rule,
   which otherwise wins on source order and lets the fixed nav cover
   the top of the page (hero eyebrow / mobile slide chip get clipped). */
html body { padding-top: 76px; }
/* When WP admin-bar is present, add its height on top (32px desktop,
   46px under 783px viewport). */
body.admin-bar { padding-top: calc(76px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar { padding-top: calc(76px + 46px); }
}
.nav__inner { max-width: 1320px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 32px; }
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy-700); flex-shrink: 0; }
.nav__logo img { width: 44px; height: 44px; }
.nav__brand { font-family: var(--font-accent); font-weight: 800; font-size: 16px; letter-spacing: 0.04em; line-height: 1.05; text-transform: uppercase; color: var(--pink-500); }
.nav__brand small { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--navy-400); text-transform: uppercase; margin-top: 2px; }
.nav__links { display: flex; align-items: center; margin-left: auto; font-family: var(--font-sans); font-weight: 600; font-size: 14px; }

/* Strip default ul/li styling site-wide for any nav inside our nav containers */
.nav__links ul, .nav__links li,
.navmenu__links ul, .navmenu__links li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
  background: transparent;
}
.nav__links ul::before, .nav__links li::before,
.navmenu__links ul::before, .navmenu__links li::before {
  content: none !important;
  display: none !important;
}

.nav__links .nav__menu,
.nav__links > ul {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__links li { position: relative; }
.nav__links li a {
  text-decoration: none;
  color: var(--navy-500);
  display: block;
  padding: 8px 0;
  white-space: nowrap;
}
.nav__links li a:hover { color: var(--pink-500); }
.nav__links li a[aria-current="page"],
.nav__links li.current-menu-item > a,
.nav__links li.current-menu-ancestor > a { color: var(--pink-500); }

/* Dropdown indicator: chevron after items that have submenus */
.nav__links li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast);
}
.nav__links li.menu-item-has-children:hover > a::after {
  transform: translateY(0) rotate(225deg);
}

/* Dropdown panel */
.nav__links li > ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(31, 45, 64, 0.10);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base), visibility var(--dur-base), transform var(--dur-base);
  z-index: 60;
}
.nav__links li:hover > ul.sub-menu,
.nav__links li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__links li > ul.sub-menu li { width: 100%; }
.nav__links li > ul.sub-menu li a {
  padding: 10px 18px;
  font-size: 14px;
  color: var(--navy-700);
  border-bottom: 1px solid var(--gray-50);
}
.nav__links li > ul.sub-menu li:last-child a { border-bottom: 0; }
.nav__links li > ul.sub-menu li a:hover {
  background: var(--pink-50);
  color: var(--pink-600);
}
.nav__cta.btn { height: 44px; padding: 0 22px; font-size: 12px; }
.nav__hamburger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid var(--navy-300); background: var(--white); cursor: pointer; align-items: center; justify-content: center; color: var(--navy-700); transition: background var(--dur-fast), border-color var(--dur-fast); }
.nav__hamburger:hover { background: var(--gray-50); border-color: var(--navy-500); }
.nav__hamburger svg { flex: none; width: 26px; height: 26px; stroke-width: 2.6; }

/* ─── Mobile menu panel ───────────────────────────────────── */
.navmenu { position: fixed; inset: 0; z-index: 100; background: rgba(16,21,31,0.55); display: none; opacity: 0; transition: opacity var(--dur-base); }
.navmenu.is-open { display: block; opacity: 1; }
.navmenu__backdrop { position: absolute; inset: 0; }
.navmenu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--white); box-shadow: -8px 0 32px rgba(16,21,31,0.15); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-base); overflow-y: auto; }
.navmenu.is-open .navmenu__panel { transform: translateX(0); }
.navmenu__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--gray-100); }
.navmenu__close { width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; color: var(--navy-700); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast); }
.navmenu__close:hover { background: var(--gray-100); }
.navmenu__close svg { flex: none; width: 20px; height: 20px; }
.navmenu__brand { font-family: var(--font-accent); font-weight: 800; font-size: 14px; color: var(--pink-500); letter-spacing: 0.02em; text-decoration: none; }
.navmenu__links { display: flex; flex-direction: column; padding: 16px 0; flex: 1; }
.navmenu__links .navmenu__menu,
.navmenu__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.navmenu__links li a {
  display: block;
  padding: 16px 28px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy-700);
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.navmenu__links li a:hover { background: var(--pink-50); color: var(--pink-500); }

/* Mobile submenu: collapsed by default. Tapping a parent item with
   children toggles the .is-expanded class (set by nav.js), revealing
   the submenu. */
.navmenu__links li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  margin-left: 12px;
  transition: transform var(--dur-base);
  vertical-align: middle;
  opacity: 0.6;
}
.navmenu__links li.menu-item-has-children.is-expanded > a::after {
  transform: translateY(2px) rotate(-135deg);
}

.navmenu__links li ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
}
.navmenu__links li.is-expanded > ul.sub-menu {
  max-height: 1000px; /* generous; accommodates many child items */
}
.navmenu__links li ul.sub-menu li a {
  padding-left: 48px;
  font-size: 15px;
  color: var(--navy-500);
  background: var(--gray-50);
}
.navmenu__links li ul.sub-menu li a:hover {
  background: var(--pink-50);
  color: var(--pink-600);
}
.navmenu__cta { padding: 24px; border-top: 1px solid var(--gray-100); background: var(--gray-50); }
.navmenu__cta .btn { width: 100%; height: 52px; font-size: 14px; }

@media (max-width: 980px) {
  /* !important needed because some snippets paste inline <style>
     blocks that redefine .btn at the document level, beating
     same-specificity external rules via source order. */
  .nav__links { display: none !important; }
  .nav__cta { display: none !important; }
  .nav__hamburger { display: flex !important; }
}

/* ─── Site footer fallback styles ─────
   Background matches the dark band used by .reviews and .team
   on the homepage so the page-to-footer transition is seamless. */
.site-footer { background: #1F2D40; color: var(--white); }
.site-footer__fallback { padding: clamp(48px, 6vw, 80px) 32px; }
.site-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 32px; }
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__brand img { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--white); padding: 4px; }
.site-footer__brand-text { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__name { margin: 0; font-family: var(--font-accent); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.site-footer__name [data-brand-subtitle] { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--navy-200); text-transform: uppercase; }
.site-footer__brand-reset { display: inline-block; margin-top: 6px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: var(--navy-200); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 3px; cursor: pointer; }
.site-footer__brand-reset:hover { color: var(--pink-300); text-decoration-color: var(--pink-300); }
.site-footer__brand-reset[hidden] { display: none; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer__nav a { color: var(--navy-100); text-decoration: none; font-weight: 500; font-size: 14px; }
.site-footer__nav a:hover { color: var(--pink-300); }
.site-footer__legal { margin: 0; font-size: 13px; color: var(--navy-300); }

@media (min-width: 720px) {
  .site-footer__inner { grid-template-columns: auto 1fr auto; align-items: center; }
}

/* ─── GP container transparency override ─────────────────────────
   GeneratePress's "Separate Containers" mode (default) gives
   .site-main / .site-content / .content-area a white background
   that covers the body's page-specific gradients defined in
   /assets/pages/<slug>.css. Override on pages so the gradient
   shows through. Scoped to body.full-width-content so blog
   archives and single posts (which want the white container)
   are unaffected.
   ────────────────────────────────────────────────────────────── */
body.full-width-content .site,
body.full-width-content .site-content,
body.full-width-content .content-area,
body.full-width-content .site-main,
body.full-width-content .inside-article,
body.full-width-content .inside-content {
  background: transparent !important;
  padding: 0 !important;
}

/* GeneratePress also adds margin around .site-content in some
   container modes. Zero it out on full-width pages so sections
   sit edge-to-edge. */
body.full-width-content .site-content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Mobile overflow guards */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
img, iframe, video, embed, object {
  max-width: 100%;
  height: auto;
}

/* ─── Mobile-specific nav adjustments ──────────────────────────
   At small phone widths (<480px), the desktop padding (32px each side)
   plus the brand text plus the hamburger pushes the nav past the
   viewport. Tighten padding, gaps, and brand text size for phones.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nav__inner {
    padding: 14px 16px;
    gap: 12px;
  }
  .nav__logo { gap: 8px; }
  .nav__logo img { width: 36px; height: 36px; }
  .nav__brand { font-size: 14px; line-height: 1; }
  .nav__brand small { font-size: 10px; margin-top: 1px; }
}

/* On narrower phones (<=640px) the brand subtitle (especially the ACB version
   "Part of Bayou City Breastfeeding . San Antonio") is long enough to push the
   hamburger button off the right edge of the viewport. Hide the subtitle here,
   let the brand block shrink, and lock the hamburger so it can't be squeezed out. */
@media (max-width: 640px) {
  .nav__brand small { display: none; }
  .nav__brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__hamburger { flex-shrink: 0; margin-left: auto; }
}

/* ─── Buttons: allow text wrap on narrow viewports ─────────────
   Default .btn has fixed height: 52px. Long button labels
   ("Verify Insurance & Request", "Open the Secure Contact Form")
   wrap on mobile and get cut off because of the fixed height.
   Switch to min-height with auto height + padding so multi-line
   labels expand the button vertically instead.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn {
    min-height: 52px;
    height: auto !important;
    padding: 12px 20px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .btn--lg {
    min-height: 60px;
    height: auto !important;
    padding: 14px 24px;
  }
  .btn--sm {
    min-height: 40px;
    height: auto !important;
    padding: 8px 16px;
  }
}

/* ─── Sitewide section spacing standard ─────────────────────────
   Per-section padding values across the page snippets originally
   ranged from clamp(64-72px floor, ..., 112-128px cap). On mobile
   the floor compounds across many sections to feel airy; on
   desktop the cap creates excessive empty space between sections.
   Standardize to tighter spacing for all pages built with the
   full-width-content body class (every brochure page).
   The body-class + element selector (specificity 0,0,1,2) wins
   over per-section rules (0,0,1,0) without needing !important.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.full-width-content section {
    padding-top: clamp(36px, 6vw, 56px);
    padding-bottom: clamp(36px, 6vw, 56px);
  }
}
@media (min-width: 721px) {
  body.full-width-content section {
    padding-top: clamp(40px, 5vw, 72px);
    padding-bottom: clamp(40px, 5vw, 72px);
  }
}

/* ─── Mobile sticky CTA bar ────────────────────────────────────
   Persistent "Request Appointment" button anchored to the bottom
   of the viewport on phones and small tablets. Hidden on desktop
   (the top nav has its own Request Appointment pill at >980px).
   Markup is in footer.php.
   ────────────────────────────────────────────────────────────── */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 16px;
  /* Respect iPhone home indicator / notch safe area */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 12px rgba(31, 45, 64, 0.06);
}
.mobile-cta-bar .btn {
  width: 100%;
  margin: 0;
}

@media (max-width: 980px) {
  .mobile-cta-bar { display: block; }

  /* Push body content up so it doesn't get hidden under the bar.
     L-014: scoped as `html body` (specificity 0,0,0,2) so it beats
     GeneratePress's inline `body{padding-bottom:0}` global-spacing rule
     (same fix already in place for padding-top above). 2026-05-28. */
  html body { padding-bottom: 80px; }
  html body.admin-bar { padding-bottom: 80px; }

  /* Account for iPhone safe-area in the body offset too */
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    html body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  }
}

/* Landscape phones: a short viewport makes the full-width fixed bottom bar
   eat too much of the screen. Hide it (and drop the body offset) when the
   phone is landscape and the viewport is short. Request Appointment stays
   available in the hamburger menu. Tablets in landscape are >980px wide, so
   they already show the top-nav pill and never matched this bar. 2026-06-07. */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-cta-bar { display: none; }
  html body,
  html body.admin-bar { padding-bottom: 0; }
}

/* ─── Hub sub-nav (generalized folder-tab strip) ───────────────
   Sitewide tabbed strip that links a hub page to its sibling/spoke
   pages. Lives here (global) so the same markup works on the hub
   AND every spoke without per-page CSS, and so it survives the
   Model 5 URL migration (not slug-scoped). The live Classes pages
   keep their own .cls-subnav; this is the canonical class for all
   other hubs (Services, Insurance, Locations, About, future hubs).

   Markup contract:
     <section class="hub-subnav">            (add --scroll for 6+ tabs)
       <div class="hub-subnav__inner">
         <div class="hub-subnav__links">
           <a class="hub-subnav__link" aria-current="page" href="[hub]">[Hub] Hub</a>
           <a class="hub-subnav__link" href="[sibling]">[Sibling]</a> ...
         </div>
       </div>
     </section>
   ────────────────────────────────────────────────────────────── */
.hub-subnav {
  position: relative;
  background: #ffffff;
  border-bottom: 1px solid #cfd3d9;
}
/* L-015: .hub-subnav is a top-level <section>, so the global
   body.full-width-content section padding-block (40-72px) would inflate
   the strip. .full-width-content .hub-subnav (0,2,0) beats that (0,1,2);
   the __inner padding sets the real strip height. */
.full-width-content .hub-subnav { padding-block: 0; }
/* The sticky nav's body padding-top spacer would otherwise show the page
   ombré as a band above this first strip. Fill that spacer white so the
   top of the page reads clean under the fixed nav. */
.hub-subnav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 600px; background: #ffffff;
}
.hub-subnav__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 12px 32px 0;            /* no bottom padding: tabs run to the strip border */
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
}
.hub-subnav__links {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-end;
  min-width: 0;
}
/* Folder-tab look: rounded top, sits on the strip's baseline, active tab connects in */
.hub-subnav__link {
  padding: 9px 17px;
  border: 1px solid #cfd3d9; border-bottom: none;
  border-radius: 9px 9px 0 0;
  margin-bottom: -1px;             /* overlap the 1px baseline so the active tab reads connected */
  background: #c5d2e5;             /* soft slate-blue for inactive tabs */
  font-family: var(--font-accent); font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #3e5068; text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.hub-subnav__link:hover { background: #b3c2da; color: #293448; }
.hub-subnav__link[aria-current="page"] {
  background: #344258; color: #ffffff; border-color: #344258;
}
/* Coming-soon tabs: a cluster strip can list siblings that are not built
   yet. They render as non-clickable <span class="hub-subnav__link
   hub-subnav__link--soon"> so the full cluster shows without seeding dead
   links. Muted fill + a small "Soon" badge; the rule only styles elements
   carrying the class, so pages without Soon tabs are unaffected. */
.hub-subnav__link--soon {
  background: #d7dde6;
  color: #8197b0;
  cursor: default;
  pointer-events: none;
}
.hub-subnav__link--soon .hub-subnav__soon {
  font-family: var(--font-accent);
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #8197b0;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 7px;
  vertical-align: 1px;
}

/* Scaling: hub + its direct siblings. When that exceeds ~5 tabs, keep a
   single row on desktop and scroll horizontally rather than wrapping into
   stacked rows. Add class "hub-subnav--scroll" to the section. */
.hub-subnav--scroll .hub-subnav__links {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 1px;             /* keep the -1px tab overlap from clipping the scroll edge */
}

/* Mobile (<=880px): keep the desktop folder-tab look, but on a SINGLE
   horizontally-scrollable row (App-Store-style strip). Suzanne's call:
   the pill conversion was too space-hungry; the tabs scroll like desktop now. */
@media (max-width: 880px) {
  .hub-subnav__inner { padding: 12px 20px; }
  .hub-subnav__links {
    gap: 4px;                       /* tighter spacing, matches desktop tab strip */
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 2px;
    -ms-overflow-style: none;
  }
  .hub-subnav__links::-webkit-scrollbar { display: none; }
  .hub-subnav--scroll .hub-subnav__links { flex-wrap: nowrap; overflow-x: auto; }
  .hub-subnav__link {
    flex: 0 0 auto;                 /* size to content; don't shrink or wrap */
    white-space: nowrap;
    scroll-snap-align: start;
    /* folder-tab styling (rounded top, flat bottom, -1px baseline) inherits from the
       base .hub-subnav__link rule above; no border/border-radius override here. */
  }
}

/* ──────────────────────────────────────────────────────────────
   HUB BAND — capped dark image hero band
   ──────────────────────────────────────────────────────────────
   Ported from the hero-redesign handoff's hub-hero.css (2026-06-06).
   Globalized HERE in nav.css rather than a per-page file because the
   band is shared hub chrome that pairs with .hub-subnav above it (same
   single-canonical-copy approach as the frosted card + footer ombré).
   The .hub-band class only renders on hubs that opt in via markup, so
   loading it sitewide is inert elsewhere. The home page keeps its own
   immersive treatment (homepage.css .hero--immersive); the prototype's
   carousel/dots variant is intentionally NOT ported (no hub uses it).

   ⚠ CLASS NAME — the handoff called this .hub-hero, but that name is
   ALREADY taken on the live site: locations, houston-area, self-pay,
   all-plans, and using-your-superbill use .hub-hero / .hub-hero__* for a
   different (older) hero pattern, styled by their own body.page-* CSS.
   Globalizing unscoped .hub-hero here would bleed into those 5 pages
   (navy bg, forced min-height, flex reflow). So the new capped band uses
   a fresh .hub-band namespace — visually identical to the handoff, zero
   collision. When an in-scope hub on the OLD pattern (e.g. Locations) is
   migrated to this band, swap its markup to .hub-band and delete its old
   per-page .hub-hero CSS. Do NOT rename this back to .hub-hero.

   Drop the markup DIRECTLY UNDER the .hub-subnav strip:
     <section class="hub-band" style="--hero-focus: 50% 24%; --hero-scrim: .86">
       <img class="hub-band__img" src="…" alt="" />
       <div class="hub-band__scrim" aria-hidden="true"></div>
       <div class="hub-band__content">
         <p  class="hub-band__eyebrow">…</p>
         <h1 class="hub-band__title">Confident Parents, <em>Thriving Babies</em></h1>
         <p  class="hub-band__lede">…</p>
         <a  class="btn btn--primary hub-band__cta" href="/about/team/">Meet our team</a>
       </div>
     </section>

   Three inline knobs (tune per hub on the live photo so white type stays
   AA-legible):
     --hero-band-h   band height (default ≈ half the viewport)
     --hero-scrim    bottom-edge darkness 0–1 (raise for light/busy photos)
     --hero-focus    object-position for the photo (biased up so faces
                     aren't cropped by the scrim)
   For a hub without strong photography, add --no-image and drop the
   <img>/<scrim>: a navy brand band stands in.
   ────────────────────────────────────────────────────────────── */
:root {
  --hero-band-h: clamp(360px, 50vh, 440px); /* knob 1 — band height */
  --hero-scrim:  0.86;                       /* knob 2 — scrim strength (0–1) */
  --hero-focus:  50% 22%;                    /* per-image focal point */
}

.hub-band {
  position: relative;
  min-height: var(--hero-band-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-700);   /* shows while the photo decodes */
  /* Soft blend into the section below — the bottom ~7% of the whole band
     (photo + scrim + navy base) fades to transparent so the page gradient
     shows through, instead of a hard photo cutoff. Matches the established
     hub-hero treatment (the former per-page hub heroes). The centered
     variant's type is mid-band, well clear of the fade; the base variant's
     bottom-anchored content sits above its padding, clearing it too. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 93%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 93%, transparent 100%);
}
/* L-015: .hub-band is a top-level <section>, so the global
   body.full-width-content section padding would inset the full-bleed band.
   .full-width-content .hub-band (0,2,0) beats that (0,1,2); the band's own
   padding lives on .hub-band__content. */
.full-width-content .hub-band { padding: 0; }

.hub-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
  z-index: -2;
}

/* Dark scrim — stronger at the bottom where the type sits. Every stop is
   scaled by --hero-scrim, so the one knob dims or lifts the whole gradient. */
.hub-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(16, 21, 31, calc(var(--hero-scrim) * 0.40)) 0%,
    rgba(16, 21, 31, calc(var(--hero-scrim) * 0.16)) 34%,
    rgba(16, 21, 31, calc(var(--hero-scrim) * 0.60)) 70%,
    rgba(12, 16, 24, var(--hero-scrim)) 100%
  );
}

.hub-band__content {
  position: relative;
  padding: 26px 24px 30px;
  width: 100%;
  max-width: 680px;
}

.hub-band__eyebrow {
  font-family: var(--font-accent);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-200);
  margin: 0 0 12px;
  /* Pink eyebrow can wash out over a light/busy photo — a dark shadow keeps it
     legible over the scrim (matches the homepage immersive hero eyebrow). */
  text-shadow: 0 1px 10px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5);
}

.hub-band__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 0 14px;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.38);
}
.hub-band__title em {
  font-style: italic;
  color: var(--pink-200);
}

.hub-band__lede {
  font-size: clamp(15px, 4.1vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}

.hub-band__cta {
  margin-top: 20px;
  align-self: flex-start;
  white-space: nowrap;
}

/* ── Centered variant ──────────────────────────────────────────
   For hubs whose photo has faces across the whole frame (e.g. the About
   team shot) where there is no clean lower third to drop the type into.
   Instead of fighting the crop, this darkens the frame more evenly and
   floats LARGER, CENTERED type over the middle of the photo. Add
   .hub-band--center to the section. The even/center-weighted scrim keeps
   white type AA-legible over faces (the base bottom-weighted scrim is
   lightest in the middle, where centered type would sit). */
.hub-band--center {
  justify-content: center;
  text-align: center;
}
.hub-band--center .hub-band__content {
  margin-inline: auto;
  max-width: 760px;
  padding-block: 48px;
}
.hub-band--center .hub-band__title {
  font-size: clamp(44px, 12.5vw, 72px);
}
.hub-band--center .hub-band__lede {
  margin-inline: auto;          /* center the capped-width lede */
  font-size: clamp(18px, 4.8vw, 22px);
}
.hub-band--center .hub-band__cta {
  align-self: center;
}
.hub-band--center .hub-band__scrim {
  background: linear-gradient(
    180deg,
    rgba(16, 21, 31, calc(var(--hero-scrim) * 0.42)) 0%,
    rgba(12, 16, 24, calc(var(--hero-scrim) * 0.74)) 50%,
    rgba(16, 21, 31, calc(var(--hero-scrim) * 0.50)) 100%
  );
}

/* ── No-image fallback ─────────────────────────────────────────
   For a hub without strong photography (e.g. Insurance & Billing). Drop the
   <img> and <scrim>, add this modifier — a navy brand band with a soft pink
   glow stands in so the type system and layout stay identical. */
.hub-band--no-image {
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(194, 99, 138, 0.30) 0%, rgba(194, 99, 138, 0) 55%),
    linear-gradient(158deg, var(--navy-600) 0%, var(--navy-800) 100%);
}

/* ── Wider screens ─────────────────────────────────────────────
   The vh-based band grows on tablet/desktop; cap it so the image never
   becomes a billboard, and hold the copy to a readable width. 95% of traffic
   is mobile, so this is a light touch. */
@media (min-width: 768px) {
  :root { --hero-band-h: clamp(420px, 56vh, 560px); }
  .hub-band__content { padding: 40px 48px 48px; }
}