/* Budding Futures WordPress theme: design layer. See wp-build/DESIGN.md.
   Loaded after the legacy stylesheets and each page's own styles. Content overrides are nested under
   .bfw:not(#_) so they win on specificity without !important. */

:root {
  --bfw-canvas: #FFFDF9;
  --bfw-cream: #F8F3EA;
  --bfw-mint: #EEF4EF;
  --bfw-ink: #15302F;
  --bfw-ink-soft: #4A605E;
  --bfw-deep: #123433;
  --bfw-deeper: #0E2928;
  --bfw-teal: #1F4D4C;
  --bfw-teal-mid: #2A6260;
  --bfw-lime: #8DC21F;
  --bfw-lime-hi: #B5E04F;
  --bfw-lime-dark: #4A7510;
  --bfw-sand: #D9B77E;
  --bfw-line: #E6DFD2;
  --bfw-radius: 18px;
  --bfw-radius-sm: 12px;
  --bfw-wrap: 1240px;
  --bfw-gutter: clamp(16px, 4vw, 32px);
  --bfw-sec: clamp(64px, 8vw, 112px);
  --bfw-shadow-1: 0 1px 2px rgba(18, 52, 51, .06), 0 6px 18px rgba(18, 52, 51, .06);
  --bfw-shadow-2: 0 2px 4px rgba(18, 52, 51, .06), 0 16px 40px rgba(18, 52, 51, .10);
  --bfw-shadow-3: 0 4px 10px rgba(8, 30, 29, .12), 0 30px 70px rgba(8, 30, 29, .28);
  --bfw-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bfw-header-h: 84px;
}

/* ---------------------------------------------------------------- base ---- */
html { scroll-padding-top: calc(var(--bfw-header-h) + 16px); }
body.bfw {
  font-family: 'Rubik', system-ui, sans-serif;
  background: var(--bfw-canvas);
  color: var(--bfw-ink);
  overflow-x: clip;
  display: block;
  min-height: 0;
}
.bfw-wrap { width: 100%; max-width: var(--bfw-wrap); margin: 0 auto; padding: 0 var(--bfw-gutter); box-sizing: border-box; }
.bfw-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--bfw-lime); color: var(--bfw-deep); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.bfw-skip:focus { left: 12px; }
.bfw :focus-visible { outline: 3px solid var(--bfw-lime); outline-offset: 2px; }
#bfw-main { display: block; height: 0; }

.bfw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--bfw-radius-sm); font: 700 .95rem/1 'Rubik', sans-serif; text-decoration: none; transition: transform 140ms var(--bfw-ease), box-shadow 140ms var(--bfw-ease), background-color 140ms var(--bfw-ease); white-space: nowrap; }
.bfw-btn:active { transform: translateY(1px); }
.bfw-btn-accent { background: var(--bfw-lime); color: var(--bfw-deep); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px rgba(141,194,31,.35); }
.bfw-btn-accent:hover { background: #9BD12A; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(141,194,31,.42); }
.bfw-btn-ghost { background: transparent; color: var(--bfw-teal); border: 2px solid rgba(31,77,76,.25); }
.bfw-btn-ghost:hover { border-color: var(--bfw-teal); }

/* ------------------------------------------------------ legacy resets ---- */
/* Legacy page CSS carries bare nav/footer rules written for the old header. */
nav.bfw-nav, nav.bfw-foot-policies { position: static; top: auto; width: auto; z-index: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; transition: none; height: auto; padding: 0; }
footer.bfw-footer { padding: 0; }
.bfw-header a:not(.bfw-btn):not(.bfw-drop a), .bfw-topbar a, .bfw-footer a { padding: 0; border: 0; border-radius: 0; font-size: inherit; background: none; width: auto; height: auto; }
.bfw-header .bfw-btn { padding: 0 22px; }

/* ------------------------------------------------------------ top bar ---- */
.bfw-topbar { background: var(--bfw-deeper); color: rgba(251,248,242,.82); font-size: .82rem; }
.bfw-topbar-row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 24px; }
.bfw-topbar-l, .bfw-topbar-r { display: flex; align-items: center; gap: 22px; }
.bfw-topbar a { color: rgba(251,248,242,.88); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.bfw-topbar a:hover { color: #fff; }
.bfw-topbar svg { width: 15px; height: 15px; flex: none; }
.bfw-topbar-l svg { color: var(--bfw-lime-hi); }
.bfw-topbar-note { display: inline-flex; align-items: center; gap: 7px; }
.bfw-topbar-note svg { color: var(--bfw-lime-hi); }
.bfw-topbar-social { display: inline-flex; gap: 14px; padding-left: 20px; border-left: 1px solid rgba(251,248,242,.16); }
.bfw-topbar-social svg { fill: currentColor; width: 15px; height: 15px; }

/* ------------------------------------------------------------- header ---- */
.bfw-header { position: sticky; top: 0; z-index: 900; background: rgba(255,253,249,.97); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow 200ms var(--bfw-ease), border-color 200ms var(--bfw-ease); }
.bfw-scrolled .bfw-header { border-bottom-color: var(--bfw-line); box-shadow: 0 8px 24px rgba(18,52,51,.08); }
.bfw-header-row { display: flex; align-items: center; gap: 28px; min-height: var(--bfw-header-h); }
.bfw-logo { display: block; flex: none; }
.bfw-logo img { display: block; height: 52px; width: auto; }
.bfw-nav { flex: 1; display: flex; justify-content: center; }
.bfw-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.bfw-item { position: relative; margin: 0; }
.bfw-drop-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--bfw-ink); font: 500 .96rem/1 'Rubik', sans-serif; cursor: pointer; transition: background-color 140ms var(--bfw-ease), color 140ms var(--bfw-ease); }
.bfw-drop-btn svg { transition: transform 180ms var(--bfw-ease); color: var(--bfw-teal-mid); }
.bfw-drop-btn:hover, .bfw-item.is-open .bfw-drop-btn { background: var(--bfw-cream); color: var(--bfw-teal); }
.bfw-item.is-open .bfw-drop-btn svg { transform: rotate(180deg); }
.bfw-drop { position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; padding: 10px; background: #fff; border: 1px solid var(--bfw-line); border-radius: 16px; box-shadow: var(--bfw-shadow-2); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 160ms var(--bfw-ease), transform 160ms var(--bfw-ease), visibility 0s linear 160ms; }
.bfw-item.is-open .bfw-drop { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms var(--bfw-ease), transform 160ms var(--bfw-ease); }
.bfw-header .bfw-drop a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--bfw-ink); text-decoration: none; font-size: .95rem; line-height: 1.3; }
.bfw-drop a:hover { background: var(--bfw-cream); color: var(--bfw-teal); }
.bfw-item:last-child .bfw-drop { left: auto; right: 0; }
.bfw-drop-loc { width: 560px; left: 50%; transform: translate(-50%, 6px); padding: 18px; }
.bfw-item.is-open .bfw-drop-loc { transform: translate(-50%, 0); }
.bfw-drop-head { padding: 4px 14px 14px; border-bottom: 1px solid var(--bfw-line); margin-bottom: 8px; }
.bfw-header .bfw-drop-head a { padding: 0; display: inline-block; font-weight: 700; font-size: 1.05rem; color: var(--bfw-teal); }
.bfw-drop-head a:hover { background: none; text-decoration: underline; }
.bfw-drop-head p { margin: 4px 0 0; font-size: .85rem; color: var(--bfw-ink-soft); }
.bfw-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 4px; }
.bfw-header .bfw-loc-grid a { padding: 8px 14px; }
.bfw-drop-all { display: flex !important; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; color: var(--bfw-teal) !important; background: var(--bfw-cream); }
.bfw-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.bfw-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--bfw-teal); font-weight: 700; text-decoration: none; font-size: .98rem; }
.bfw-phone svg { width: 18px; height: 18px; color: var(--bfw-lime-dark); }
.bfw-burger { display: none; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--bfw-cream); cursor: pointer; padding: 0; position: relative; }
.bfw-burger span { position: absolute; left: 14px; right: 14px; height: 2px; border-radius: 2px; background: var(--bfw-teal); transition: transform 200ms var(--bfw-ease), opacity 150ms; }
.bfw-burger span:nth-child(1) { top: 17px; }
.bfw-burger span:nth-child(2) { top: 23px; }
.bfw-burger span:nth-child(3) { top: 29px; }
.bfw-menu-open .bfw-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bfw-menu-open .bfw-burger span:nth-child(2) { opacity: 0; }
.bfw-menu-open .bfw-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.bfw-nav-mobile-actions { display: none; }

@media (max-width: 1180px) {
  .bfw-header-row { gap: 16px; }
  .bfw-drop-btn { padding: 0 10px; font-size: .92rem; }
  .bfw-phone span { display: none; }
}
@media (max-width: 1024px) {
  :root { --bfw-header-h: 72px; }
  .bfw-topbar { display: none; }
  .bfw-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bfw-canvas); }
  .bfw-logo img { height: 44px; }
  .bfw-phone { display: none; }
  .bfw-burger { display: block; }
  .bfw-actions { margin-left: auto; gap: 10px; }
  nav.bfw-nav { position: fixed; inset: var(--bfw-header-h) 0 0 0; width: auto; z-index: 899; height: auto; background: var(--bfw-canvas); display: block; overflow-y: auto; padding: 12px var(--bfw-gutter) 120px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 180ms var(--bfw-ease), transform 180ms var(--bfw-ease), visibility 0s linear 180ms; border-top: 1px solid var(--bfw-line); }
  .bfw-menu-open nav.bfw-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--bfw-ease), transform 180ms var(--bfw-ease); }
  .bfw-menu-open { overflow: hidden; }
  .bfw-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .bfw-item { border-bottom: 1px solid var(--bfw-line); }
  .bfw-drop-btn { width: 100%; justify-content: space-between; min-height: 58px; padding: 0 4px; font-size: 1.08rem; font-weight: 600; border-radius: 0; }
  .bfw-drop-btn:hover, .bfw-item.is-open .bfw-drop-btn { background: none; }
  .bfw-drop, .bfw-drop-loc { position: static; width: auto; min-width: 0; transform: none !important; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 12px; display: none; opacity: 1; visibility: visible; background: none; }
  .bfw-item.is-open .bfw-drop { display: grid; }
  .bfw-header .bfw-drop a { padding: 12px 12px; min-height: 44px; font-size: 1rem; }
  .bfw-loc-grid { grid-template-columns: 1fr 1fr; }
  .bfw-drop-head { padding: 0 12px 10px; }
  .bfw-nav-mobile-actions { display: grid; gap: 10px; margin-top: 20px; }
}
@media (max-width: 480px) {
  .bfw-cta { padding: 0 16px; min-height: 44px; font-size: .9rem; }
  .bfw-logo img { height: 40px; }
}

/* ------------------------------------------------------------- footer ---- */
.bfw-footer { background: var(--bfw-deeper); color: rgba(251,248,242,.78); font-size: .95rem; position: relative; overflow: hidden; }
.bfw-footer::before { content: ""; position: absolute; right: -180px; top: -220px; width: 620px; height: 620px; border-radius: 50%; border: 90px solid rgba(181,224,79,.05); pointer-events: none; }
.bfw-foot-grid { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 40px; padding-top: 80px; padding-bottom: 56px; position: relative; }
.bfw-foot-brand img { height: 64px; width: auto; display: block; margin-bottom: 20px; }
.bfw-foot-brand p { margin: 0 0 18px; line-height: 1.65; color: rgba(251,248,242,.78); max-width: 34ch; font-size: .95rem; }
.bfw-foot-brand address { font-style: normal; line-height: 1.6; margin-bottom: 14px; color: rgba(251,248,242,.9); }
.bfw-foot-contacts { display: grid; gap: 8px; margin-bottom: 20px; }
.bfw-foot-contacts a { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 600; }
.bfw-foot-contacts svg { color: var(--bfw-lime-hi); }
.bfw-foot-social { display: flex; gap: 10px; }
.bfw-foot-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(251,248,242,.08); color: #fff; transition: background-color 140ms var(--bfw-ease); }
.bfw-foot-social a:hover { background: rgba(181,224,79,.22); }
.bfw-foot-social svg { width: 18px; height: 18px; fill: currentColor; }
.bfw-foot-heading { margin: 6px 0 16px; color: #fff; font-weight: 700; font-size: .98rem; letter-spacing: .01em; }
.bfw-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bfw-foot-col a { color: rgba(251,248,242,.76); text-decoration: none; line-height: 1.4; display: inline-block; padding: 5px 0; transition: color 140ms var(--bfw-ease); }
.bfw-foot-col a:hover { color: var(--bfw-lime-hi); }
.bfw-foot-bottom { border-top: 1px solid rgba(251,248,242,.1); position: relative; }
.bfw-foot-bottom-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; padding-bottom: 28px; }
.bfw-foot-policies { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.bfw-foot-policies a { color: rgba(251,248,242,.62); text-decoration: none; font-size: .84rem; padding: 4px 0; }
.bfw-foot-policies a:hover { color: #fff; }
.bfw-foot-copy { margin: 0; color: rgba(251,248,242,.55); font-size: .84rem; }
@media (max-width: 1024px) { .bfw-foot-grid { grid-template-columns: 1fr 1fr; } .bfw-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .bfw-foot-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 56px; } }

/* ------------------------------------------------ page content layer ---- */
.bfw:not(#_) {
  color: var(--bfw-ink);
  background: var(--bfw-canvas);
  /* Old palette variables used in page styles and inline style attributes, mapped to the warm palette. */
  --lavender-bg: var(--bfw-canvas);
  --lavender-mid: var(--bfw-cream);
  --panel: var(--bfw-cream);
  --mist: var(--bfw-mint);
  --white: #fff;
  --muted: var(--bfw-ink-soft);
  --mid: var(--bfw-ink-soft);
  --lime-dark: var(--bfw-lime-dark);

  /* Body links: brand teal, underlined, never browser blue. */
  & main :is(p, li, td, dd, span, strong, em, .faq-a, .faq-copy, .ins-note) > a:not([class]), & .bf-sms a, & .sms-consent a { color: var(--bfw-teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; font-weight: 600; }
  & main :is(p, li, td, dd, span, strong, em, .faq-a, .faq-copy, .ins-note) > a:not([class]):hover { color: var(--bfw-teal-mid); text-decoration-thickness: 2px; }
  & .cta-left a:not([class]) { color: #fff; }

  /* Hero eyebrow: a pill on the dark ground. */
  & .hero .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: .78rem; letter-spacing: .12em; }

  /* The old fixed header reserved space; the new header is sticky, so the hero padding comes back down. */
  & main { background: var(--bfw-canvas); }

  /* ======================= HERO (city / service / homepage) ======================= */
  /* Light, photo-led hero: the copy sits on a solid warm ground on the left, a real photo fills the right
     half behind the form card and fades out toward the copy. Photo per template via the body class below. */
  & .hero {
    --bfw-hero-photo: url(/images/child_milestone.jpg);
    --bfw-hero-pos: center 30%;
    background:
      radial-gradient(900px 520px at 6% 0%, rgba(181, 224, 79, .26), transparent 60%),
      radial-gradient(760px 520px at 100% 100%, rgba(42, 98, 96, .16), transparent 62%),
      linear-gradient(160deg, #FFFDF9 0%, #F5F8F1 50%, #E8F1E9 100%);
    padding-top: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex; flex-direction: column;
  }
  /* The photo. Default: a framed band that closes the hero under the copy (plain heroes, and every hero on
     phones). Heroes with a form card place the photo inside their grid instead (rules further down). */
  & .hero::before {
    content: ""; order: 2; position: static; flex: none; z-index: auto; pointer-events: none; filter: none; opacity: 1;
    inset: auto; height: clamp(220px, 24vw, 340px); border: 0; border-radius: 22px; -webkit-mask-image: none; mask-image: none;
    width: min(calc(100% - 2 * var(--bfw-gutter) - 18px), calc(var(--bfw-wrap) - 2 * var(--bfw-gutter) - 18px));
    margin: 0 auto 44px;
    background: var(--bfw-hero-photo) var(--bfw-hero-pos) / cover no-repeat;
    box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--bfw-lime), var(--bfw-shadow-2);
  }
  & .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: none; opacity: 1;
    width: auto; height: auto; border: 0; border-radius: 0; mask-image: none; -webkit-mask-image: none;
    background: linear-gradient(180deg, rgba(255, 253, 249, .55), rgba(255, 253, 249, 0) 22%);
  }
  & .hero .hero-photo, & .hero .hero-blob { display: none; }
  & .hero .hero-inner { order: 1; width: 100%; box-sizing: border-box; }
  & .bfw-photo-card, & .bf-hero-2col::after, &.bf-preview-home .hero-inner::after, & .research-hero .hero-shell:not(:has(.hero-visual))::after {
    content: ""; display: block; margin: 9px; border-radius: 22px; min-height: 220px; align-self: stretch;
    background: var(--bfw-hero-photo) var(--bfw-hero-pos) / cover no-repeat;
    box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--bfw-lime), var(--bfw-shadow-2);
  }
  @media (min-width: 901px) {
    /* City / service hero: the form card spans both rows on the right, the photo sits under the copy. */
    & .hero:has(.bf-hero-2col)::before { display: none; }
    & .bf-hero-2col { grid-template-rows: auto minmax(240px, 1fr); }
    & .bf-hero-2col > .bf-hero-main { grid-column: 1; grid-row: 1; }
    & .bf-hero-2col > .bf-hero-formcard { grid-column: 2; grid-row: 1 / span 2; }
    & .bf-hero-2col::after { grid-column: 1; grid-row: 2; min-height: 240px; }
    /* Hub and conversion pages (research hero, no visual panel): the photo takes the empty right column. */
    & .research-hero .hero-shell:not(:has(.hero-visual))::after { grid-column: 2; grid-row: 1; min-height: 340px; border-radius: 24px; }
  }
  @media (min-width: 1025px) {
    /* Homepage: the copy is shorter than the form card, so the photo fills the space under the copy. */
    &.bf-preview-home .hero::before { display: none; }
    &.bf-preview-home .hero-inner { grid-template-rows: auto minmax(200px, 1fr); }
    &.bf-preview-home .hero-inner > :first-child { grid-column: 1; grid-row: 1; }
    &.bf-preview-home .hero-inner > .hero-card { grid-column: 2; grid-row: 1 / span 2; }
    &.bf-preview-home .hero-inner::after { grid-column: 1; grid-row: 2; }
  }
  @media (max-width: 1024px) {
    &.bf-preview-home .hero-inner::after { display: none; }
  }
  @media (max-width: 900px) {
    & .bf-hero-2col::after { display: none; }
    & .research-hero .hero-shell:not(:has(.hero-visual))::after { min-height: 200px; }
    & .hero::before { height: clamp(200px, 42vw, 300px); margin-bottom: 40px; }
    & .hero::after { display: none; }
  }
  & .hero .hero-inner { padding: clamp(40px, 6vw, 84px) var(--bfw-gutter) clamp(56px, 7vw, 96px); max-width: var(--bfw-wrap); position: relative; z-index: 2; }
  & .hero h1 { color: var(--bfw-deep); font-weight: 800; letter-spacing: -.028em; line-height: 1.03; font-size: clamp(2.4rem, 4.6vw, 4.1rem); max-width: 15ch; text-wrap: balance; margin-bottom: 1.4rem; }
  /* Two pages center their hero copy; the 15ch heading block centers with them. */
  &.bf-page-careers .hero h1, &.bf-page-sitemap-page .hero h1 { margin-left: auto; margin-right: auto; }
  /* Heroes built without .hero-inner (podcast, referral pages) carry the old fixed-header offset in their
     own padding; give their wrapper the same top space the others get. */
  & .hero > .wrap:first-child { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(40px, 5vw, 64px); }
  & .hero h1 .accent { color: var(--bfw-lime-dark); }
  & .hero .hero-sub { color: var(--bfw-ink-soft); font-size: 1.08rem; line-height: 1.65; max-width: 56ch; }
  & .hero .hero-eyebrow { background: #fff; border: 1px solid var(--bfw-line); color: var(--bfw-teal); box-shadow: var(--bfw-shadow-1); }
  & .hero .hero-dot { background: var(--bfw-lime); }
  & .hero .bf-crumbs ol { color: var(--bfw-ink-soft); }
  & .hero .bf-crumbs a { color: var(--bfw-teal); }
  & .hero .bf-crumbs li[aria-current] { color: var(--bfw-ink-soft); }
  & .hero .bf-crumbs li + li::before { color: rgba(21, 48, 47, .35); }
  & .hero .bf-outcomes-label { color: var(--bfw-lime-dark); }
  & .hero .bf-outcome { background: #fff; border-color: var(--bfw-line); color: var(--bfw-ink); box-shadow: var(--bfw-shadow-1); }
  & .hero .bf-outcome svg { color: var(--bfw-lime-dark); }
  & .hero .hero-pills .pill { background: #fff; border: 1px solid var(--bfw-line); color: var(--bfw-teal); box-shadow: none; }
  & .hero .hero-pills .pill:hover { background: var(--bfw-cream); }
  & .hero .pill-dot { background: var(--bfw-lime); }
  & .hero .bf-review-strip { background: #fff; border: 1px solid var(--bfw-line); box-shadow: var(--bfw-shadow-1); }
  & .hero .bf-review-label, & .hero .bf-review-count { color: var(--bfw-ink-soft); }
  & .hero .bf-review-score { color: var(--bfw-ink); }
  & .hero .bf-review-stars { color: #B06A00; }
  & .hero .bf-review-link { color: var(--bfw-teal); }
  & .hero .btn-lime, & .btn-lime { background: var(--bfw-lime); color: var(--bfw-deep); border-radius: var(--bfw-radius-sm); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px rgba(141, 194, 31, .32); font-weight: 700; }
  & .hero .btn-outline { background: #fff; color: var(--bfw-teal); border: 2px solid rgba(31, 77, 76, .22); border-radius: var(--bfw-radius-sm); }
  & .hero .btn-outline:hover { border-color: var(--bfw-teal); background: #fff; }
  & .hero .bf-hero-quote { background: #fff; border: 1px solid var(--bfw-line); color: var(--bfw-ink); box-shadow: var(--bfw-shadow-1); }
  & .hero .bf-hero-quote :is(p, cite, span) { color: var(--bfw-ink-soft); }
  & .hero .bf-trust-row, & .hero .bf-trust-row :is(span, small) { color: var(--bfw-ink-soft); }

  /* Hero form card: floats over the photo with a frosted ring. */
  & .bf-hero-formcard { background: #fff; border: 0; border-radius: 22px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), var(--bfw-shadow-3); position: relative; overflow: hidden; }
  & .bf-hero-formcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--bfw-lime), var(--bfw-lime-hi)); }
  & .bf-hero-formcard .bf-hff-title { color: var(--bfw-ink); letter-spacing: -.015em; }
  & .bf-hero-formcard .bf-hff-sub { color: var(--bfw-ink-soft); }
  & .bf-ff label { color: var(--bfw-ink); letter-spacing: .02em; text-transform: none; font-size: .86rem; font-weight: 600; }
  & .bf-ff input, & .bf-ff select, & .fg input, & .fg select, & .fg textarea { border: 1.5px solid #D8D1C3; border-radius: var(--bfw-radius-sm); background: #FFFEFB; min-height: 48px; font-size: 1rem; }
  & .bf-ff input:focus, & .bf-ff select:focus, & .fg input:focus, & .fg select:focus { border-color: var(--bfw-teal); box-shadow: 0 0 0 4px rgba(31, 77, 76, .12); outline: 0; }
  & .bf-form-btn, & .form-btn { background: var(--bfw-lime); color: var(--bfw-deep); border-radius: var(--bfw-radius-sm); min-height: 54px; font-weight: 700; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px rgba(141, 194, 31, .3); }
  & .bf-step-num { background: var(--bfw-deep) !important; color: #fff !important; }
  & :is(.hero-card, .bf-hero-formcard, .cta-form) :is(label, .card-sub, .form-note, .bf-hff-sub, .sms-consent span, .bf-sms span, .bf-step-text) { color: var(--bfw-ink-soft); }
  & :is(.hero-card, .bf-hero-formcard, .cta-form) :is(label) { color: var(--bfw-ink); }
  & :is(.hero-card, .bf-hero-formcard) .bf-review-strip { background: var(--bfw-cream); border: 1px solid var(--bfw-line); }
  & :is(.hero-card, .bf-hero-formcard) :is(.bf-review-label, .bf-review-count) { color: var(--bfw-ink-soft); }
  & :is(.hero-card, .bf-hero-formcard) .bf-review-score { color: var(--bfw-ink); }
  & :is(.hero-card, .bf-hero-formcard) .bf-review-link { color: var(--bfw-teal); }
  & .bf-leader-role, & .bf-leader-cred { color: var(--bfw-lime-dark); }

  /* ======================= EDITORIAL HERO ======================= */
  /* Same light ground as the city hero; the visual panel is a real photo with the lime ring. */
  & .research-hero {
    --bfw-hero-photo: url(/images/aba-teaching-techniques-hero.jpg);
    --bfw-hero-pos: center 30%;
    background:
      radial-gradient(900px 520px at 6% 0%, rgba(181, 224, 79, .26), transparent 60%),
      radial-gradient(760px 520px at 100% 100%, rgba(42, 98, 96, .16), transparent 62%),
      linear-gradient(160deg, #FFFDF9 0%, #F5F8F1 50%, #E8F1E9 100%);
    padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
    position: relative; overflow: hidden; isolation: isolate; border: 0;
  }
  & .research-hero::before { content: ""; position: absolute; z-index: 0; width: 760px; height: 760px; right: -280px; top: -340px; border-radius: 50%; border: 90px solid rgba(141, 194, 31, .12); pointer-events: none; }
  & .research-hero::after { display: none; }
  & .research-hero > * { position: relative; z-index: 1; }
  & .research-hero h1 { color: var(--bfw-deep); letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
  & .research-hero h1 .accent { color: var(--bfw-lime-dark); }
  & .research-hero .lead, & .research-hero p { color: var(--bfw-ink-soft); }
  & .research-hero .eyebrow { color: var(--bfw-teal); background: #fff; border: 1px solid var(--bfw-line); box-shadow: var(--bfw-shadow-1); border-radius: 999px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 8px; }
  & .research-hero .dot { background: var(--bfw-lime); }
  & .research-hero .bf-review-strip { background: #fff; border: 1px solid var(--bfw-line); box-shadow: var(--bfw-shadow-1); }
  & .research-hero .bf-review-label, & .research-hero .bf-review-count { color: var(--bfw-ink-soft); }
  & .research-hero .bf-review-score { color: var(--bfw-ink); }
  & .research-hero .bf-review-link { color: var(--bfw-teal); }
  & .research-hero .hero-visual {
    position: relative; min-height: 380px; border-radius: 24px; border: 0; overflow: hidden; margin: 9px;
    background: var(--bfw-hero-photo) var(--bfw-hero-pos) / cover no-repeat, var(--bfw-cream);
    box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--bfw-lime), var(--bfw-shadow-2);
  }
  & .research-hero .hero-visual::before, & .research-hero .hero-visual::after { display: none; }
  & .research-hero .hero-visual img { display: none; }
  & .research-hero .hero-visual .data-badge { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(255, 255, 255, .96); border: 1px solid var(--bfw-line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--bfw-shadow-2); }
  & .research-hero .hero-visual .data-badge strong { color: var(--bfw-ink); display: block; font-size: 1.02rem; }
  & .research-hero .hero-visual .data-badge p { color: var(--bfw-ink-soft); margin: 6px 0 0; font-size: .92rem; line-height: 1.55; }

  /* ======================= SECTIONS ======================= */
  /* Section rhythm. Several sections carry inline background colors from the old palette, hence !important. */
  & main > .section, & main > section.section { background: var(--bfw-canvas) !important; padding: var(--bfw-sec) 0; position: relative; }
  & main > .section:nth-of-type(odd), & main > section.alt { background: var(--bfw-cream) !important; }
  & main > section.alt + section.alt { background: var(--bfw-cream) !important; }
  & main > #reviews, & main > .testimonial-sec { background: var(--bfw-mint) !important; }
  & main > .cta-sec { background: var(--bfw-canvas) !important; }
  /* Sections designed dark in the page styles stay dark, on the new deep ground. */
  & main > .why-sec:not(.why-sec--light) { background: var(--bfw-deep) !important; }
  & .why-sec:not(.why-sec--light) :is(.sec-title, h2, h3) { color: #fff; }
  & .why-sec:not(.why-sec--light) .sec-title .accent { color: var(--bfw-lime-hi); }
  & .why-sec:not(.why-sec--light) .eyebrow { color: var(--bfw-lime-hi); }
  & .why-sec:not(.why-sec--light) :is(p, .why-text) { color: rgba(251, 248, 242, .82); }
  & #bf-localres-band { background: var(--bfw-mint) !important; }
  & #bf-localres-band a { color: var(--bfw-teal) !important; }
  & .sec-inner, & .shell { max-width: var(--bfw-wrap); padding-left: var(--bfw-gutter); padding-right: var(--bfw-gutter); }
  & .eyebrow { color: var(--bfw-lime-dark); letter-spacing: .12em; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
  & .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--bfw-lime); flex: none; }
  & .research-hero .eyebrow::before { display: none; }
  & .sec-title, & .section-title { color: var(--bfw-ink); font-weight: 800; letter-spacing: -.028em; line-height: 1.06; text-wrap: balance; }
  & .sec-title .accent, & .section-title .accent { color: var(--bfw-teal-mid); }
  & .sec-desc, & .section-copy { color: var(--bfw-ink-soft); }
  & .section-copy { font-size: 1.06rem; line-height: 1.72; max-width: 68ch; }
  & .sec-desc { font-size: 1.04rem; line-height: 1.72; }
  & .text-link { color: var(--bfw-teal); font-weight: 700; }

  /* ======================= CARDS ======================= */
  & .benefit-card, & .svc-card, & .bf-leader-card, & .bf-review-card, & .source-card, & .city-card, & .hub-card {
    background: #fff; border: 1px solid var(--bfw-line); border-radius: var(--bfw-radius);
    box-shadow: var(--bfw-shadow-1); position: relative;
    transition: transform 160ms var(--bfw-ease), box-shadow 160ms var(--bfw-ease);
  }
  /* Value cards are tinted by position (mint, lime, sand) with a matching left edge, like the reference's
     pastel cards. On cream bands they go white so the tint never sinks into the ground. */
  & .benefit-card, & .bf-leader-card, & .source-card { border-left: 4px solid var(--bfw-teal); background: var(--bfw-mint); border-color: transparent; border-left-color: var(--bfw-teal); }
  & .benefit-card:nth-child(3n+2), & .source-card:nth-child(3n+2), & .bf-leader-card:nth-child(2n) { border-left-color: var(--bfw-lime); background: #F3F8E3; }
  & .benefit-card:nth-child(3n+3), & .source-card:nth-child(3n+3) { border-left-color: var(--bfw-sand); background: #FBF4E4; }
  & main > .section:nth-of-type(odd) :is(.benefit-card, .bf-leader-card, .source-card) { background: #fff; border-color: var(--bfw-line); }
  & main > .section:nth-of-type(odd) .benefit-card, & main > .section:nth-of-type(odd) .bf-leader-card, & main > .section:nth-of-type(odd) .source-card { border-left-color: var(--bfw-teal); }
  & main > .section:nth-of-type(odd) :is(.benefit-card:nth-child(3n+2), .source-card:nth-child(3n+2), .bf-leader-card:nth-child(2n)) { border-left-color: var(--bfw-lime); }
  & main > .section:nth-of-type(odd) :is(.benefit-card:nth-child(3n+3), .source-card:nth-child(3n+3)) { border-left-color: var(--bfw-sand); }
  & a.svc-card:hover, & a.city-card:hover, & a.source-card:hover, & a.hub-card:hover { transform: translateY(-2px); box-shadow: var(--bfw-shadow-2); }
  & .b-icon, & .c-icon { background: #fff; color: var(--bfw-teal); box-shadow: 0 0 0 1px var(--bfw-line), var(--bfw-shadow-1); }
  & .benefit-card:nth-child(3n+2) .b-icon { color: var(--bfw-lime-dark); }
  & .benefit-card:nth-child(3n+3) .b-icon { color: #8A6420; }
  & .svc-card img, & .city-card img, & .hub-card img { border-radius: 14px; }
  & .b-title, & .svc-name, & .bf-leader-name { color: var(--bfw-ink); }
  & .b-desc, & .svc-desc { color: var(--bfw-ink-soft); }
  & .city-card .city-dot { background: var(--bfw-lime); }

  /* ======================= PILLS ======================= */
  & .ins-pill, & .n-pill { background: var(--bfw-cream); color: var(--bfw-teal); border: 1px solid #E9DFCC; border-radius: 999px; font-weight: 600; }
  & main > .section:nth-of-type(even) .ins-pill, & main > .section:nth-of-type(even) .n-pill { background: #fff; }
  & .ins-pill.medicaid { background: var(--bfw-deep); color: #fff; border-color: var(--bfw-deep); }

  /* ======================= REVIEWS ======================= */
  & .bf-review-card { border-top: 0; }
  & .bf-gr-avatar { background: var(--bfw-deep); color: var(--bfw-lime-hi); }
  & .bf-review-card cite { color: var(--bfw-ink-soft); }

  /* ======================= FAQ ======================= */
  & .city-faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-left: auto; margin-right: auto; }
  & .city-faq details, & .method-faq-item {
    background: #fff; border: 1px solid var(--bfw-line); border-radius: 16px; box-shadow: var(--bfw-shadow-1);
    border-left: 4px solid transparent; transition: border-color 160ms var(--bfw-ease), box-shadow 160ms var(--bfw-ease); overflow: hidden;
  }
  & .city-faq details:hover, & .method-faq-item:hover { box-shadow: var(--bfw-shadow-2); }
  & .city-faq details[open], & .method-faq-item[open] { border-left-color: var(--bfw-lime); }
  & .city-faq summary, & .method-faq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 60px; padding: 16px 20px; color: var(--bfw-ink); font-weight: 700; font-size: 1.02rem; line-height: 1.4;
  }
  & .city-faq summary::-webkit-details-marker, & .method-faq-item summary::-webkit-details-marker { display: none; }
  & .city-faq summary::after, & .method-faq-item summary::after {
    content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bfw-mint); color: var(--bfw-teal); font-weight: 600; font-size: 1.2rem; line-height: 1;
    transition: transform 180ms var(--bfw-ease), background-color 180ms var(--bfw-ease);
  }
  & .city-faq details[open] > summary::after, & .method-faq-item[open] > summary::after { content: "–"; background: var(--bfw-lime); color: var(--bfw-deep); }
  & .city-faq .faq-a, & .method-faq-item .faq-copy { padding: 0 20px 20px; color: var(--bfw-ink-soft); font-size: 1rem; line-height: 1.7; }

  /* ======================= IMAGE BREAKS ======================= */
  /* The lime ring is the site's photo signature: white gap, lime line, soft teal shadow. */
  & .bf-imgbreak img { border-radius: 22px; box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--bfw-lime), var(--bfw-shadow-2); }
  & .bf-imgbreak { padding: 9px; }

  /* ======================= CTA SECTION ======================= */
  & .cta-sec { background: var(--bfw-canvas); padding: var(--bfw-sec) 0; }
  & .cta-box { background: var(--bfw-deep); border-radius: 28px; box-shadow: var(--bfw-shadow-2); isolation: isolate; overflow: hidden; position: relative; }
  & .cta-box::before { background: radial-gradient(rgba(251, 248, 242, .06) 1px, transparent 1.2px) 0 0 / 22px 22px; }
  & .cta-box::after { content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; right: -260px; bottom: -380px; border-radius: 50%; border: 90px solid rgba(42, 98, 96, .55); pointer-events: none; }
  & .cta-left .eyebrow { color: var(--bfw-lime-hi); }
  & .cta-left .sec-title { color: #fff; }
  & .cta-left .sec-title .accent { color: var(--bfw-lime-hi); }
  & .cta-left p { color: rgba(251, 248, 242, .82); }
  & .cta-contact { color: #fff; }
  & .cta-right, & .cta-form { border-radius: 22px; }
  & .cta-band { background: var(--bfw-deep); border-radius: 28px; color: #fff; }
  & .cta-band h2 { color: #fff; }
  & .cta-band p:not(:is(.bf-hero-formcard, .cta-form, .hero-card) p) { color: rgba(251, 248, 242, .82); }
  /* Rating stars on light grounds: a deeper amber that clears 3:1. The hero keeps its bright gold. */
  & :is(.bf-review-stars, .bf-rc-stars, .bf-gr-stars, .bf-q-stars, .bf-grate-stars) { color: #B06A00; }

  /* ======================= READ-MORE FOLDS ======================= */
  & details.bf-readmore > summary.bf-readmore-sum { background: #fff; color: var(--bfw-teal); border: 1.5px solid var(--bfw-line); border-radius: 999px; box-shadow: var(--bfw-shadow-1); }
  & details.bf-readmore > summary.bf-readmore-sum:hover { border-color: var(--bfw-teal); }

  /* ======================= MOBILE CTA BAR ======================= */
  & .bf-mobile-cta { background: var(--bfw-deeper); border-top: 1px solid rgba(251, 248, 242, .1); }
  & .bf-mobile-cta .bf-mc-call { background: rgba(251, 248, 242, .1); color: #fff; border-radius: 12px; }
  & .bf-mobile-cta .bf-mc-form { background: var(--bfw-lime); color: var(--bfw-deep); border-radius: 12px; }
}

/* Hero photo per template (body classes carried over from the static site). */
.bfw.bf-preview-home:not(#_) .hero { --bfw-hero-photo: url(/images/child-therapy-excited.jpg); --bfw-hero-pos: 58% 38%; }
.bfw.bf-preview-location:not(#_) :is(.hero, .research-hero) { --bfw-hero-photo: url(/images/child-playing-blocks.jpg); --bfw-hero-pos: 30% 45%; }
.bfw.bf-template-service:not(#_) :is(.hero, .research-hero) { --bfw-hero-photo: url(/images/child_milestone.jpg); --bfw-hero-pos: center 30%; }
.bfw.bf-template-conversion:not(#_) :is(.hero, .research-hero) { --bfw-hero-photo: url(/images/assent-and-ethical-aba-hero.jpg); --bfw-hero-pos: 42% 30%; }
.bfw.bf-template-hub:not(#_) :is(.hero, .research-hero) { --bfw-hero-photo: url(/images/children-running-park.jpg); --bfw-hero-pos: center 40%; }
.bfw.bf-template-article:not(#_) .research-hero { --bfw-hero-photo: url(/images/assent-and-ethical-aba-hero.jpg); }

/* Legacy page CSS carries a bare `nav { position: fixed; top: 0 }` rule meant for the old header; it also
   catches the breadcrumb nav inside the page body on ten pages. */
.bfw:not(#_) main nav.bf-breadcrumb { position: static; top: auto; width: auto; min-height: 0; z-index: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }

/* The thank-you page never had the phone call bar. */
.bfw.bf-template-utility .bf-mobile-cta, .bfw.bf-template-utility .bf-mobile-cta-spacer { display: none; }

/* No JavaScript or reduced motion: never leave revealed content hidden. */
@media (prefers-reduced-motion: reduce) {
  .bfw .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 900px) {
  .bfw:not(#_) {
    & .hero .hero-inner { padding-bottom: clamp(32px, 6vw, 48px); }
  }
}
@media (max-width: 640px) {
  .bfw:not(#_) {
    & .hero h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); }
    & .hero .hero-sub { font-size: 1rem; }
    & .research-hero { padding-top: 40px; }
    & .research-hero .hero-visual { min-height: 260px; }
  }
}


/* Content never waits on the reveal script: jump links, folded sections and missed observers left .fade-up
   blocks at opacity 0 (invisible text and images). Visible by default; the reveal is decoration only. */
.bfw:not(#_) .fade-up { opacity: 1 !important; transform: none !important; }

/* ======================= TEAL HERO (switch: body class bfw-hero-teal) ======================= */
/* Zechariah's pick 2026-09-28: the pilot's deep teal ground and light type, with the light version's photo
   placements (cards and bands with the lime ring). Remove the body class to fall back to the light hero. */
.bfw.bfw-hero-teal:not(#_) {
  & .hero, & .research-hero { background: var(--bfw-deep); }
  & .hero::after {
    display: block;
    background:
      radial-gradient(600px 380px at 12% 8%, rgba(181, 224, 79, .10), transparent 70%),
      radial-gradient(rgba(251, 248, 242, .06) 1px, transparent 1.2px) 0 0 / 22px 22px;
  }
  & .research-hero::before { border-color: rgba(42, 98, 96, .5); }
  & .research-hero::after { content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(rgba(251, 248, 242, .06) 1px, transparent 1.2px) 0 0 / 22px 22px; }
  & :is(.hero, .research-hero) h1 { color: #fff; }
  & :is(.hero, .research-hero) h1 .accent { color: var(--bfw-lime-hi); }
  & .hero .hero-sub, & .research-hero .lead, & .research-hero p:not(:is(.hero-visual, .hero-card, .bf-hero-formcard, .cta-form) *) { color: rgba(251, 248, 242, .84); }
  & .hero .hero-eyebrow, & .research-hero .eyebrow { background: rgba(251, 248, 242, .08); border: 1px solid rgba(251, 248, 242, .16); color: #F5F0E6; box-shadow: none; }
  & .research-hero .eyebrow { color: var(--bfw-lime-hi); }
  & .hero .hero-dot, & .research-hero .dot, & .hero .pill-dot { background: var(--bfw-lime-hi); }
  & .hero .bf-crumbs ol, & .hero .bf-crumbs li[aria-current] { color: rgba(251, 248, 242, .7); }
  & .hero .bf-crumbs a { color: #F5F0E6; }
  & .hero .bf-crumbs li + li::before { color: rgba(251, 248, 242, .4); }
  & .hero .bf-outcomes-label { color: var(--bfw-lime-hi); }
  & .hero .bf-outcome { background: rgba(251, 248, 242, .07); border-color: rgba(251, 248, 242, .14); color: #F5F0E6; box-shadow: none; }
  & .hero .bf-outcome svg { color: var(--bfw-lime-hi); }
  & .hero .hero-pills .pill { background: transparent; border: 1px solid rgba(251, 248, 242, .28); color: #F5F0E6; }
  & .hero .hero-pills .pill:hover { background: rgba(251, 248, 242, .1); }
  & :is(.hero, .research-hero) > * .bf-review-strip:not(:is(.hero-card, .bf-hero-formcard) *) { background: rgba(251, 248, 242, .07); border: 1px solid rgba(251, 248, 242, .14); box-shadow: none; }
  & :is(.hero, .research-hero) :is(.bf-review-label, .bf-review-count):not(:is(.hero-card, .bf-hero-formcard) *) { color: rgba(251, 248, 242, .8); }
  & :is(.hero, .research-hero) .bf-review-score:not(:is(.hero-card, .bf-hero-formcard) *) { color: #fff; }
  & :is(.hero, .research-hero) .bf-review-stars:not(:is(.hero-card, .bf-hero-formcard) *) { color: #F4C04E; }
  & :is(.hero, .research-hero) .bf-review-link:not(:is(.hero-card, .bf-hero-formcard) *) { color: var(--bfw-lime-hi); }
  & .hero .btn-outline { background: transparent; color: #F5F0E6; border: 2px solid rgba(251, 248, 242, .32); }
  & .hero .btn-outline:hover { border-color: #F5F0E6; background: rgba(251, 248, 242, .06); }
  & .hero .bf-hero-quote { background: rgba(251, 248, 242, .07); border: 1px solid rgba(251, 248, 242, .14); color: #F5F0E6; box-shadow: none; }
  & .hero .bf-hero-quote :is(p, cite, span) { color: rgba(251, 248, 242, .82); }
  & .hero .bf-trust-row:not(:is(.hero-card, .bf-hero-formcard) *), & .hero .bf-trust-row:not(:is(.hero-card, .bf-hero-formcard) *) :is(span, small) { color: rgba(251, 248, 242, .8); }
  /* Photo frames sit on the dark ground: a deep gap instead of the white one. */
  & .hero::before, & .bfw-photo-card, & .bf-hero-2col::after, &.bf-preview-home .hero-inner::after, & .research-hero .hero-shell:not(:has(.hero-visual))::after, & .research-hero .hero-visual { box-shadow: 0 0 0 5px var(--bfw-deep), 0 0 0 9px var(--bfw-lime), 0 18px 40px rgba(0, 0, 0, .28); }
  & .bf-hero-formcard { box-shadow: 0 0 0 6px rgba(251, 248, 242, .08), var(--bfw-shadow-3); }
}

/* ======================= FIXES 2026-09-28 (static Vercel build, scan round 1) ======================= */
/* Links with a class (cards, chips, map pins) had no color once Bright Clinical was dropped and fell back to
   browser blue. Zero-specificity defaults: cards take their section's text color, plain links go teal; any page
   or component rule still wins. */
:where(.bfw) :where(main, .bfw-footer) a:where([class]) { color: inherit; text-decoration: none; }
:where(.bfw) :where(main) a:where(:not([class])) { color: var(--bfw-teal); }
.bfw:not(#_) main :is(p, li, td) > a.bfs-nowrap { color: var(--bfw-teal); text-decoration: underline; text-underline-offset: .18em; font-weight: 600; }

/* A few pages keep a legacy two-column grid on .hero-inner around the newer .bf-hero-2col layout, which squeezed
   the copy into a narrow first column (prior authorization page). The inner layout owns the grid. */
.bfw:not(#_) .hero-inner:has(> .bf-hero-2col) { display: block; }

/* Decorative blobs and wide tables must never push the page sideways on phones. */
.bfw:not(#_) .hero-inner-page { overflow: hidden; }
@media (max-width: 760px) {
  .bfw:not(#_) main :is(table.data-table, table.bf-dt, .fade-up > table, .shell > table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Dark CTA box: headings and eyebrow were ink on the deep ground. */
.bfw:not(#_) :is(.cta-box, .cta-inner, .cta-content, .bf2-cta) :is(.sec-title, h2) { color: #fff; }
.bfw:not(#_) :is(.cta-box, .cta-inner, .cta-content, .bf2-cta) :is(.sec-title .accent, .eyebrow) { color: var(--bfw-lime-hi); }
.bfw:not(#_) .image-break-copy h2 { color: #fff; }

/* Teal hero: page-level text inside the hero that was written for a light ground. Cards and white panels keep
   their own dark text. */
.bfw.bfw-hero-teal:not(#_) {
  & :is(.hero, .research-hero) :is(p, li, .bfp-pitch, .bf-fold-trust-label, .bf-fold-trust-note, .bf-fold-trust-note strong, .note, .sec-note, .meta, .hero-lead, .hero-sub-2):not(:is(.bf-hero-formcard, .hero-card, .cta-form, form, .hero-pathways, .hero-visual, .bf-payer-chips, .hero-pills, .bf-outcomes, .bf-review-strip, .bf-crumbs, h1) *):not(.bf-payer-chips li) { color: rgba(251, 248, 242, .86); }
  & :is(.hero, .research-hero) :is(.bfp-hook li, .bfs-trust li, .bf-fold-trust-note strong) { color: #F5F0E6; }
  & :is(.hero, .research-hero) :is(.eyebrow, .bf-fold-trust-label):not(:is(.bf-hero-formcard, .hero-card, .hero-pathways) *) { color: var(--bfw-lime-hi); }
  & :is(.hero, .research-hero) :is(p, li) > a:not([class]):not(:is(.bf-hero-formcard, .hero-card, .cta-form, form, .hero-pathways, .hero-visual) *) { color: var(--bfw-lime-hi); }
  & .hero .link-band a { color: var(--bfw-lime-hi); }
  & :is(.hero, .research-hero) .btn-secondary:not(:is(.bf-hero-formcard, .hero-card) *) { color: #F5F0E6; border-color: rgba(251, 248, 242, .4); background: transparent; }
  & .hero .bfs-trust li::before { color: var(--bfw-lime-hi); }
}

/* ======================= FIXES 2026-09-28 (scan round 2) ======================= */
/* Teal hero: the Google review quote inside the white form card was styled for the dark ground (light text on
   white). Inside a white card it takes the card's dark text. */
.bfw.bfw-hero-teal:not(#_) .hero :is(.bf-hero-formcard, .hero-card) .bf-hero-quote { background: var(--bfw-cream); border: 1px solid var(--bfw-line); color: var(--bfw-ink); }
.bfw.bfw-hero-teal:not(#_) .hero :is(.bf-hero-formcard, .hero-card) .bf-hero-quote :is(p, cite, span) { color: var(--bfw-ink-soft); }
/* Phones: cro-assets.css turns the hero card see-through under 900px (form hidden, steps and quote kept), so what
   is left sits on the teal ground and takes light text. */
@media (max-width: 900px) {
  .bfw.bfw-hero-teal:not(#_) .hero :is(.bf-formcard-mobhide .bf-hero-formcard, .hero-card:not(.bfx-has-finder)) { background: transparent; box-shadow: none; border: 0; padding: 0; }
  .bfw.bfw-hero-teal:not(#_) .hero :is(.bf-formcard-mobhide .bf-hero-formcard, .hero-card:not(.bfx-has-finder))::before { display: none; }
  .bfw.bfw-hero-teal:not(#_) .hero :is(.bf-formcard-mobhide .bf-hero-formcard, .hero-card:not(.bfx-has-finder)) :is(.form-note, .bf-step-text) { color: rgba(251, 248, 242, .86); }
  .bfw.bfw-hero-teal:not(#_) .hero :is(.bf-formcard-mobhide .bf-hero-formcard, .hero-card:not(.bfx-has-finder)) .bf-step-text strong { color: #fff; }
  .bfw.bfw-hero-teal:not(#_) .hero :is(.bf-formcard-mobhide .bf-hero-formcard, .hero-card:not(.bfx-has-finder)) .bf-step-num { background: var(--bfw-lime-hi) !important; color: var(--bfw-deep) !important; }
  .bfw.bfw-hero-teal:not(#_) .hero :is(.bf-formcard-mobhide .bf-hero-formcard, .hero-card:not(.bfx-has-finder)) .bf-hero-quote { background: rgba(251, 248, 242, .07); border-color: rgba(251, 248, 242, .14); }
  .bfw.bfw-hero-teal:not(#_) .hero :is(.bf-formcard-mobhide .bf-hero-formcard, .hero-card:not(.bfx-has-finder)) .bf-hero-quote :is(p, cite, span) { color: rgba(251, 248, 242, .82); }
}
/* Teal hero: links with an inline teal color (city and hub intros) and white panels inside the hero. */
.bfw.bfw-hero-teal:not(#_) :is(.hero, .research-hero) :is(p, li) > a[style*="color"]:not(:is(.bf-hero-formcard, .hero-card, .cta-form, form, .hero-pathways, .hero-visual, .panel) *) { color: var(--bfw-lime-hi) !important; }
.bfw.bfw-hero-teal:not(#_) :is(.hero, .research-hero) :is(.panel, .panel *, .bfl-disclose) { color: var(--bfw-ink-soft) !important; }
.bfw.bfw-hero-teal:not(#_) :is(.hero, .research-hero) .panel :is(h2, h3, strong) { color: var(--bfw-ink); }
.bfw:not(#_) .hero-pathways .hero-pathways-note { color: var(--bfw-ink); }

/* Dark sections: links inside the deep CTA box and teal CTA cards were teal on teal. */
.bfw:not(#_) :is(.cta-box, .cta-card, .bf2-cta, section.cta, div.cta) :is(p, li) > a:not([class]) { color: var(--bfw-lime-hi) !important; }
/* White cards inside the dark "why" band keep dark text. */
.bfw:not(#_) .why-sec:not(.why-sec--light) .why-card :is(p, .why-text) { color: var(--bfw-ink-soft); }
.bfw:not(#_) .why-sec:not(.why-sec--light) .why-card :is(h3, h4, .why-title) { color: var(--bfw-ink); }
/* The parent-training "you're not alone" band is designed dark (light text); the section reset made it cream. */
.bfw:not(#_) main > section.section.alone-sec { background: var(--bfw-deep) !important; }
.bfw:not(#_) .alone-sec :is(h2, h3, .sec-title) { color: #fff; }
.bfw:not(#_) .alone-sec .alone-text { color: rgba(251, 248, 242, .84); }
.bfw:not(#_) .alone-sec :is(.eyebrow, .sec-title .accent) { color: var(--bfw-lime-hi); }

/* Lime buttons and badges: teal text on lime sat just under 4.5:1. Deep teal reads clearly. */
.bfw:not(#_) main :is(.btn.btn-primary, .btn-lime-on-dark, .listicle-num, .link-band a, form > button, .buttons a.btn:not(.btn-outline)) { color: var(--bfw-deep); }
.bfw:not(#_) main a:is([style*="background:var(--lime)"], [style*="background: var(--lime)"]) { color: var(--bfw-deep) !important; }
/* Small grey notes a shade too light on cream and white. */
.bfw:not(#_) main :is(.res-disclaimer, .sec-note, .note, li > span.p, .episode .meta, .quote-attr, .bfh-sub):not(:is(.hero, .research-hero, .cta-box, .why-sec, .alone-sec, .cta-card, .quote-card) *) { color: var(--bfw-ink-soft); }
.bfw:not(#_) main :is(.figure-head span, .quote-card .quote-attr) { color: rgba(251, 248, 242, .86); }
.bfw:not(#_) main .article-kicker { color: var(--bfw-lime-dark); }
.bfw:not(#_) .bf-gr-stars { color: #8A5300; }

/* Phones: pages that scrolled sideways. */
.bfw:not(#_) figure.bfs-photo img { display: block; width: 100%; max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .bfw:not(#_) main .testimonial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bfw:not(#_) main :is([style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(3"]) { grid-template-columns: 1fr !important; }
}

/* ======================= FIXES 2026-09-28 (review round 1) ======================= */
/* Older service heroes (.hero-inner-page, 51 pages) keep their own hero and photo; the empty photo frame the
   2-col layout adds is dropped there (it has no photo on these pages). */
.bfw:not(#_) .hero-inner-page .bf-hero-2col::after { display: none; }
/* One-sentence link bands (e.g. trauma-informed ABA, Denver resources) read as empty stripes with full section
   padding. They become a compact callout card. */
.bfw:not(#_) main > section.section:is(#bf-localres-band, :has(> .sec-inner > p.section-copy:only-child)) { padding: 1rem 0 !important; background: var(--bfw-canvas) !important; }
.bfw:not(#_) main > section.section:is(#bf-localres-band, :has(> .sec-inner > p.section-copy:only-child)) > .sec-inner > p {
  max-width: 820px; margin: 0 auto !important; padding: 1.1rem 1.4rem; background: #fff; border: 1px solid var(--bfw-line);
  border-left: 4px solid var(--bfw-lime); border-radius: 14px; text-align: left; font-size: 1rem !important; line-height: 1.6 !important; color: var(--bfw-ink-soft) !important; box-shadow: var(--bfw-shadow-1);
}
.bfw:not(#_) main > section.section:is(#bf-localres-band, :has(> .sec-inner > p.section-copy:only-child)) > .sec-inner { max-width: calc(820px + 2 * var(--bfw-gutter)) !important; margin: 0 auto !important; }

/* Teal investigation box (trust gap report): theme text and link colors were teal on teal. */
.bfw:not(#_) .investigation-box p { color: rgba(251, 248, 242, .86); }
.bfw:not(#_) .investigation-box a { color: #fff !important; }

/* ======================= TYPOGRAPHY PASS 2026-09-28 ======================= */
/* DESIGN.md: body 17px desktop / 16px phone, line-height 1.65+, body in ink. Long-form pages shipped at 15.2px
   in ink-soft, headings had no space above them inside running copy, and plain lists had no indent. */
.bfw:not(#_) main .content-wrap { max-width: 720px; }
.bfw:not(#_) main :is(.content-wrap, .page-content, .content-block, .module, .reloc-summary, .looks-like-text, .article-section, .post-q, .bfl-prose) > :is(p, ul, ol):not([class]),
.bfw:not(#_) main :is(.content-wrap, .page-content, .content-block, .module, .reloc-summary, .looks-like-text, .article-section, .post-q, .bfl-prose) > :is(ul, ol):not([class]) > li {
  font-size: 1.0625rem; line-height: 1.72; color: var(--bfw-ink); text-wrap: pretty;
}
.bfw:not(#_) main :is(.content-wrap, .page-content, .content-block, .module, .reloc-summary, .looks-like-text, .article-section, .post-q, .bfl-prose) > p:not([class]) { margin: 0 0 1.25rem; }
@media (max-width: 700px) {
  .bfw:not(#_) main :is(.content-wrap, .page-content, .content-block, .module, .reloc-summary, .looks-like-text, .article-section, .post-q, .bfl-prose) > :is(p, ul, ol):not([class]),
  .bfw:not(#_) main :is(.content-wrap, .page-content, .content-block, .module, .reloc-summary, .looks-like-text, .article-section, .post-q, .bfl-prose) > :is(ul, ol):not([class]) > li { font-size: 1rem; line-height: 1.68; }
}
/* Headings inside running copy: more space above than below, so the heading belongs to what follows. */
.bfw:not(#_) main :is(p:not([class]), ul:not([class]), ol:not([class]), figure, table, blockquote, .key-facts, details.bf-readmore) + h2:not(:is(.hero, .research-hero, .hero-inner-page, form, .cta-box, [class*="card"]) *) { margin-top: 3rem; margin-bottom: .9rem; }
.bfw:not(#_) main :is(p:not([class]), ul:not([class]), ol:not([class]), figure, table, blockquote, .key-facts) + h3:not(:is(.hero, .research-hero, .hero-inner-page, form, .cta-box, [class*="card"]) *) { margin-top: 2rem; margin-bottom: .5rem; }
.bfw:not(#_) main .content-wrap > h2 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.18; letter-spacing: -.02em; color: var(--bfw-ink); text-wrap: balance; }
.bfw:not(#_) main .content-wrap > h3 { font-size: 1.15rem; line-height: 1.35; color: var(--bfw-ink); }
/* Question-and-answer runs (h3 + answer, repeated) read as a list: a hairline between the pairs. */
.bfw:not(#_) main .content-wrap > p + h3 { border-top: 1px solid var(--bfw-line); padding-top: 1.5rem; margin-top: 1.5rem; }
/* Plain lists inside copy. */
.bfw:not(#_) main :is(.content-wrap, .shell, .sec-inner, .page-content, .post-q, .article-section, .content-block, .module) > :is(ul, ol):not([class]) { padding-left: 1.4rem; margin: 0 0 1.5rem; }
.bfw:not(#_) main :is(.content-wrap, .shell, .sec-inner, .page-content, .post-q, .article-section, .content-block, .module) > :is(ul, ol):not([class]) > li { margin: 0 0 .55rem; padding-left: .25rem; }
.bfw:not(#_) main :is(.content-wrap, .shell, .sec-inner, .page-content, .post-q, .article-section, .content-block, .module) > :is(ul, ol):not([class]) > li::marker { color: var(--bfw-lime-dark); font-weight: 700; }
.bfw:not(#_) main .content-wrap > figure { margin: 1.75rem 0 2rem; }
.bfw:not(#_) main .content-wrap > figure img { display: block; width: 100%; height: auto; border-radius: 18px; }
/* Key facts and step boxes: the old lavender gradient is off palette, and the text sat at 13px. */
.bfw:not(#_) .key-facts { background: #fff; border: 1px solid var(--bfw-line); border-radius: 18px; box-shadow: var(--bfw-shadow-1); padding: 1.5rem 1.75rem; margin: 2rem 0 2.25rem; }
.bfw:not(#_) .key-fact-text { font-size: 1rem; line-height: 1.6; color: var(--bfw-ink); }
.bfw:not(#_) .key-fact-num { background: var(--bfw-deep); color: #fff; font-size: .88rem; font-weight: 800; min-width: 36px; height: 36px; padding: 0 .55rem; border-radius: 10px; display: inline-grid; place-items: center; flex: none; }
.bfw:not(#_) .key-facts > .key-fact { display: flex; align-items: flex-start; gap: 1rem; padding: .85rem 0; margin: 0; border-bottom: 1px solid var(--bfw-line); }
.bfw:not(#_) .key-facts > .key-fact:first-child { padding-top: .25rem; }
.bfw:not(#_) .key-facts > .key-fact:last-child { border-bottom: 0; padding-bottom: .25rem; }
.bfw:not(#_) .key-facts > .key-fact .key-fact-text { padding-top: .3rem; }
@media (max-width: 700px) { .bfw:not(#_) .key-facts { padding: 1.1rem 1.1rem; } }

/* Related-link blocks: the link styles lived in a stylesheet the redesign drops, so links ran together. */
.bfw:not(#_) main .links:not(:is(.hero, .research-hero, .hero-inner-page, form) *) { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .6rem; margin: 1.25rem 0 0; }
.bfw:not(#_) main .links:not(:is(.hero, .research-hero, .hero-inner-page, form) *) > a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; padding: .8rem 1rem; background: #fff; border: 1px solid var(--bfw-line); border-radius: 12px; color: var(--bfw-teal); font-size: .98rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.bfw:not(#_) main .links:not(:is(.hero, .research-hero, .hero-inner-page, form) *) > a::after { content: "\2192"; color: var(--bfw-lime-dark); flex: none; }
.bfw:not(#_) main .links:not(:is(.hero, .research-hero, .hero-inner-page, form) *) > a:hover { border-color: var(--bfw-teal); }
/* Inline lavender bands from the old palette (silo link bands, guides) move onto the warm palette. */
.bfw:not(#_) main :is(section[data-w^="bf-silo"], section[data-w^="bf-cost-wire"], #bf-parent-guides) { background: var(--bfw-cream) !important; border-top: 0 !important; padding: 2.75rem var(--bfw-gutter) !important; }
.bfw:not(#_) main :is(section[data-w^="bf-silo"], section[data-w^="bf-cost-wire"], #bf-parent-guides) > div { max-width: 720px !important; }
.bfw:not(#_) main :is(section[data-w^="bf-silo"], section[data-w^="bf-cost-wire"], #bf-parent-guides) h2 { color: var(--bfw-ink) !important; font-size: 1.4rem !important; letter-spacing: -.02em; }
.bfw:not(#_) main :is(section[data-w^="bf-silo"], section[data-w^="bf-cost-wire"], #bf-parent-guides) p { font-size: 1.0625rem; color: var(--bfw-ink) !important; }

/* Narrow inner wrappers (inline max-width) sat against the left edge on pages whose own CSS never centered them. */
.bfw:not(#_) main .sec-inner { margin-left: auto; margin-right: auto; }
/* The summary line under the hero lines up with the article column and reads at body size. */
.bfw:not(#_) main .reloc-summary { max-width: 720px; margin: 0 auto; }
.bfw:not(#_) main .reloc-summary > p { max-width: none; font-size: 1.125rem; line-height: 1.65; color: var(--bfw-ink); margin: 0; }
@media (max-width: 700px) { .bfw:not(#_) main .reloc-summary > p { font-size: 1.0625rem; } }

/* Inline lavender backgrounds inside the page body (the build maps the same colors in page style blocks). */
.bfw:not(#_) main :is([style*="background:#F7F9FE" i], [style*="background: #F7F9FE" i], [style*="background-color:#F7F9FE" i], [style*="background:#F4F8FE" i], [style*="background: #F4F8FE" i], [style*="background:#EAF0FB" i], [style*="background: #EAF0FB" i], [style*="background-color:#EAF0FB" i]):not(#bf-localres-band, section) { background: #FBF8F2 !important; }
.bfw:not(#_) main :is(.quick-card, .callout, .link-card, .report-note, .bf-rq-chip.no) { background: #FBF8F2; border-color: var(--bfw-line); }
.bfw:not(#_) main :is(section.faq, section.bfx-sec--tint) { background: var(--bfw-cream); }
.bfw:not(#_) main section.bfx-sec th { background: var(--bfw-mint); color: var(--bfw-ink); }
.bfw:not(#_) main section.faq a:not([class]) { background: transparent; }

/* ======================= SPEED PASS 2026-10-05 ======================= */
/* A phone had to lay out the whole page before it could show the top of it: 880ms of layout for a city page (962
   elements) on a phone-speed processor, measured with Chrome's own counters, against 22ms of script. Sections below
   the first one, and the footer, are now laid out only as they come near the screen. contain-intrinsic-size is the
   stand-in height until then; `auto` makes the browser keep the real height once it has drawn a section, so the
   scrollbar settles. With the menu rule below: layout 879ms -> 379ms, first paint 1152ms -> 532ms after the
   stylesheets arrive. Browsers without content-visibility ignore both rules.
   This is for the first paint only. Left on for good, a jump link (the phone "Free Consultation" button to #cta)
   landed 430px off, because the stand-in heights above the target change as the page scrolls past them. So the rule
   hangs on html.bfw-lazy, which a one-line script in the head sets (not when the URL has a #target), and
   bf-theme.js marks the sections .bfw-ready one by one in idle time after load, then drops the class. From then on
   the page is laid out in full, exactly as before.
   While a section is still waiting it has paint containment: nothing inside may hang over its own edge, and a
   position:fixed element inside would be placed against the section. Checked on all 377 pages 2026-10-05. */
html.bfw-lazy .bfw:not(#_) main > section:nth-of-type(n+2):not(.bfw-ready), html.bfw-lazy .bfw:not(#_) .bfw-footer:not(.bfw-ready) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* The two sections on the site whose card shadow runs to the section's own edge, where containment would trim it. */
html.bfw-lazy .bfw:not(#_) main > section:is(.school-transition-sec, .booking) { content-visibility: visible; }
/* The phone menu is the full link list, hidden until the burger is tapped; it was laid out on every page load. */
@media (max-width: 1024px) { body.bfw:not(.bfw-menu-open) nav.bfw-nav { content-visibility: hidden; } }

/* ======================= SPACING PASS 2026-10-05 ======================= */
/* Team strip (.bf-leaders, 47 pages). Its own stylesheet gives it half a section's padding, so on the city pages its
   heading sat 56px under the reviews and its cards 170px over the next heading. It takes the section padding on a
   side where the ground changes, and none on a side where the neighbour is a full cream section: there the
   neighbour's own padding is the gap, the same 112px every other heading on the page gets. A neighbour that is cream
   but compact (inline padding, one-line callout, silo link band) keeps the strip's own padding on that side.
   Measured on all 47 pages at 1440 and 390 on 2026-10-05; re-measure after adding the strip to a new page family. */
.bfw:not(#_) section.bf-leaders { padding-block: var(--bfw-sec); }
.bfw:not(#_) main > section.section:is(:nth-of-type(odd), .alt):not(#reviews, .testimonial-sec, .alone-sec, [style*="padding"], #bf-localres-band, :has(> .sec-inner > p.section-copy:only-child)) + section.bf-leaders { padding-top: 0; }
/* Below the strip the full cream neighbour gives up its top padding instead (:has() cannot nest inside :has()). */
.bfw:not(#_) main > section.bf-leaders + section.section:is(:nth-of-type(odd), .alt):not(#reviews, .testimonial-sec, .alone-sec, [style*="padding"], #bf-localres-band, :has(> .sec-inner > p.section-copy:only-child)) { padding-top: 0; }
.bfw:not(#_) main > section.bf-leaders:has(+ :is(section[data-w^="bf-silo"], section[data-w^="bf-cost-wire"], #bf-parent-guides)) { padding-bottom: calc(var(--bfw-sec) - 2.75rem); }
/* Goal-card grid on the 16 city pages (#specific-goals): inline 3rem padding and a left-set heading on pages where
   every other section head is centred inside the full section padding. */
.bfw:not(#_) main > section#specific-goals { padding-block: var(--bfw-sec) !important; }
.bfw:not(#_) #specific-goals > .sec-inner > :is(.eyebrow, .sec-title, p) { text-align: center; }
.bfw:not(#_) #specific-goals > .sec-inner > .eyebrow { display: flex; justify-content: center; }
.bfw:not(#_) #specific-goals > .sec-inner > p { margin-inline: auto !important; }


/* ======================= HERO CLIP (switch: page listed in HERO_CLIP in build.mjs; body class bfw-hero-clip) ======================= */
/* 2026-10-04, Colorado Springs test. A silent looping clip is the stage. Only the breadcrumb, headline, first sentence,
   review line and buttons sit on it, over a teal tint that follows the text column, so the people in the clip stay
   visible. The form card starts lower on the right and hangs past the clip. The rest of the hero copy continues below
   on the light hero ground with its normal styles. Remove the page from HERO_CLIP to fall back to the light hero. */
.bfw.bfw-hero-clip:not(#_) {
  & .bfw-clip-hero::before, & .bfw-clip-hero::after { display: none; }
  & .bfw-clip-hero .hero-inner { display: block; padding-top: 0; padding-bottom: clamp(40px, 5vw, 72px); }
  /* The clip area is tall enough to show the people and what they are doing; the form card starts near its bottom
     edge so it does not sit over them (Zechariah 2026-10-04: "the form is blocking the hero"). His design rule: the
     form must line up with something, so its top edge sits on the same line as the top of the hero buttons. The
     headline block is anchored to the bottom of the clip, which makes that line the clip's bottom edge minus the
     foot padding and the button height, at every desktop width.
     2026-10-05 (Zechariah: the text sat "way too low compared to the header"): the clip used to have a fixed height,
     so on wide screens the spare height piled up above the breadcrumb (176px at 1920) and pushed the buttons under
     the fold on laptops. Now the clip's height comes from its content, top padding + headline block + foot, so the
     text starts right under the header, and the spare height is the foot under the buttons instead. The foot is the
     old clip height minus what a four-line headline block needs (540px, less on narrower screens where the H1 is
     smaller), so the clip is as tall as before. The form line above is untouched. */
  & .bfw-clip-grid { --bfw-clip-h: clamp(600px, 46vw, 720px); --bfw-clip-btn: 54px;
    --bfw-clip-foot: max(clamp(40px, 4.6vw, 64px), calc(var(--bfw-clip-h) - min(540px, 306px + 16.2vw)));
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 3rem; grid-template-rows: auto 1fr; }
  & .bfw-clip-stage { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 0; overflow: hidden; margin-inline: calc(50% - 50vw);
    min-height: 480px;
    background-color: var(--bfw-deep); background-position: center 12%; background-size: cover; background-repeat: no-repeat; }
  & .bfw-clip-stage video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 12%;
    display: block; opacity: 0; transition: opacity .6s ease; }
  & .bfw-clip-stage.is-playing video { opacity: 1; }
  & .bfw-clip-top { grid-column: 1; grid-row: 1; position: relative; z-index: 1; max-width: 470px; padding: clamp(36px, min(4.4vw, 7vh), 60px) 0 var(--bfw-clip-foot);
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
  & .bfw-clip-top .hero-btns { margin-bottom: 0; }
  & .bfw-clip-top > * { max-width: 100%; }
  /* The tint follows the text column, not the screen: solid behind the words to the end of the lines, gone 70px
     past them. (It used to start fading 30px before the lines ended.) */
  & .bfw-clip-top::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50vw; right: -70px;
    background: linear-gradient(90deg, rgba(18, 52, 51, .94) 0, rgba(18, 52, 51, .92) calc(100% - 70px), rgba(18, 52, 51, 0) 100%); }
  & .bfw-clip-side { grid-column: 2; grid-row: 2; position: relative; z-index: 2; margin-top: calc(-1 * (var(--bfw-clip-foot) + var(--bfw-clip-btn))); }
  & .bfw-clip-rest { grid-column: 1; grid-row: 2; padding-top: 40px; }
  & .bfw-clip-more { margin-top: 24px; }
  & .bfw-clip-more .bf-hero-quote { margin-top: 0; }
  & .bfw-clip-rest .bf-steps { margin-top: 1.9rem; gap: 1rem 1.4rem; }
  & .bfw-clip-rest .hero-pills { margin-bottom: 0; }

  & .bfw-clip-top h1 { color: #fff; font-size: clamp(2.05rem, 3.5vw, 3.1rem); max-width: 14ch; margin-bottom: 1.1rem; }
  & .bfw-clip-top h1 .accent { color: var(--bfw-lime-hi); }
  & .bfw-clip-top .hero-sub { color: rgba(251, 248, 242, .9); max-width: 44ch; margin-bottom: 1.2rem !important; }
  & .bfw-clip-top .bf-crumbs ol, & .bfw-clip-top .bf-crumbs li[aria-current] { color: rgba(251, 248, 242, .84); }
  & .bfw-clip-top .bf-crumbs a { color: #F5F0E6; }
  & .bfw-clip-top .bf-crumbs li + li::before { color: rgba(251, 248, 242, .4); }
  /* The review line is wider than the text column, so it carries its own ground. */
  & .bfw-clip-top .bf-trust-row { width: max-content; max-width: calc(100vw - 2 * var(--bfw-gutter)); }
  & .bfw-clip-top .bf-review-strip { background: rgba(18, 52, 51, .82); border: 1px solid rgba(251, 248, 242, .2); box-shadow: none; }
  & .bfw-clip-top :is(.bf-review-label, .bf-review-count) { color: rgba(251, 248, 242, .82); }
  & .bfw-clip-top .bf-review-score { color: #fff; }
  & .bfw-clip-top .bf-review-stars { color: #F4C04E; }
  & .bfw-clip-top .bf-review-link { color: var(--bfw-lime-hi); }
  /* Its right end reaches the edge of the tint, so the button carries its own ground. */
  & .bfw-clip-top .btn-outline { background: rgba(18, 52, 51, .7); color: #F5F0E6; border: 2px solid rgba(251, 248, 242, .36); }

  @media (min-width: 901px) and (max-width: 1180px) {
    /* Narrow laptops and tablets on their side: no room for faces between the text and the form, so the clip plays in
       a clear band on top, the headline block sits on solid teal under it, and the form rides up over the join. */
    & .bfw-clip-grid { grid-template-rows: auto auto 1fr; }
    & .bfw-clip-stage { grid-row: 1; min-height: 0; height: min(43.75vw, 460px); }
    & .bfw-clip-top { display: block; }
    & .bfw-clip-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 52, 51, 0) 62%, rgba(18, 52, 51, 1) 100%); }
    & .bfw-clip-top { grid-row: 2; max-width: none; padding: 8px 0 40px; }
    & .bfw-clip-top::before { left: -50vw; right: -100vw; background: var(--bfw-deep); }
    /* Same rule here: the form's top edge sits on the first line of the headline block (the breadcrumb). */
    & .bfw-clip-side { grid-row: 2 / span 2; margin-top: 8px; }
    & .bfw-clip-rest { grid-row: 3; }
    & .bfw-clip-top .bf-trust-row { width: auto; max-width: 100%; }
    & .bfw-clip-rest .bf-steps.bf-steps--row { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    /* Phones: the clip plays in a clear band above the headline, then the headline block on solid teal. The two hero
       buttons go, because the bar fixed to the bottom of the screen already has Call and Free Consultation. */
    & .bfw-clip-grid { display: block; }
    & .bfw-clip-stage { margin-inline: calc(-1 * var(--bfw-gutter)); min-height: 0; height: min(62.5vw, 430px); width: auto; }
    & .bfw-clip-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 52, 51, 0) 62%, rgba(18, 52, 51, 1) 100%); }
    & .bfw-clip-top { display: block; max-width: none; background: var(--bfw-deep); margin-inline: calc(-1 * var(--bfw-gutter)); padding: 10px var(--bfw-gutter) 30px; }
    & .bfw-clip-top::before { display: none; }
    & .bfw-clip-top h1 { max-width: none; }
    & .bfw-clip-top .hero-btns { display: none; }
    & .bfw-clip-top .bf-trust-row { width: auto; max-width: 100%; margin-bottom: 0; }
    & .bfw-clip-side { margin-top: 0; }
    & .bfw-clip-side .bf-hero-formcard { display: none; }
    & .bfw-clip-rest { padding-top: 28px; }
  }
}