/* BMB skeleton — minimal scaffold. Real design lands in Phase 5 (post-owner confirm). */
/* ----------------------------------------------------------
   Palette test 2026-05-25 (coolors.co/5bc2e7-897c80-ba8f95-cab6cd-cfbcdf)
   Previous brand was #b76b87 (mauve). To revert, just put that
   back as --brand and remove the --accent line.
   ---------------------------------------------------------- */
:root {
  /* ── Brand palette per official guidelines
     coolors.co/0d2c54-b39555-aa7f86-5bc2e7-f7f0f0
     The page was over-leaning on dusty rose; navy + gold now break it up. */
  --brand: #aa7f86;          /* dusty rose — primary (refined from #ba8f95) */
  --brand-dk: #8a5f66;       /* darker rose — hover / emphasis */
  --brand-50:  #fbf4f5;      /* near-white rose */
  --brand-100: #f4e3e5;      /* pale rose */
  --brand-200: #e8c8cc;      /* light rose */
  --brand-700: #6e4b50;      /* deep rose */
  --navy: #0d2c54;           /* premium midnight blue — section eyebrows + strong proof */
  --navy-dk: #061730;        /* darker navy for hover */
  --gold: #b39555;           /* warm champagne gold — pillar numbers + accents */
  --gold-dk: #8d7341;        /* darker gold for hover */
  --accent: #5bc2e7;         /* sky blue — interactive accent, logo color */
  --cream: #f7f0f0;          /* brand cream surface */

  /* ── Ink + neutrals ── */
  --ink: #2a2a2a;
  --ink-2: #4a4a4a;          /* softer ink for body copy / supporting text */
  --muted: #897c80;          /* taupe — warmer muted than the old #6b6b6b */
  --bg: #fdfaf8;
  --bg-2: #f7efec;           /* warmer surface for footer / inset blocks */
  --surface: #ffffff;
  --line: #e7dfd8;
  --line-rose: rgba(186, 143, 149, .35);  /* tinted hairline for ghost buttons */

  --max: 1180px;
  --r: 6px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(120,80,90,.05), 0 6px 16px rgba(120,80,90,.06);
  --shadow:    0 6px 18px rgba(120,80,90,.08), 0 28px 60px rgba(120,80,90,.08);

  /* Typography — Cormorant Garamond (display) + Inter (body).
     Elegant + tranquil + readable. Fallbacks: Georgia for display,
     system-ui for body (matches what the page renders during the
     web-font download so first paint isn't jarring).
     --serif / --sans are short aliases used by the shared chrome
     (header, footer) so the same rules read on every page. */
  --font-display: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { font-family: var(--font-body); color: var(--ink); background: var(--bg); font-size: 17px; overflow-x: clip; }
body { margin: 0; line-height: 1.6; overflow-x: clip; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0 0 .5em; font-weight: 500; letter-spacing: -.005em; }
h1 { font-size: 2.25rem; line-height: 1.2; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.15rem; }
/* Global header — translucent warm-taupe + sticky on every page.
   Promoted 2026-06-06 from page-scoped overrides (was previously dark
   relative-positioned by default, with warm-taupe sticky only on the
   home page via home.css and on service prototype pages via service.css
   body.is-immersive-page scope). The shared IIFE in IMMERSIVE_HERO_SCRIPT
   morphs this to a floating pill after the first section scrolls past. */
.site-header {
  padding: 1rem max(1.5rem, calc((100vw - 1560px) / 2));
  border-bottom: 1px solid rgba(120, 80, 90, 0.10);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  /* SOLID OPAQUE CREAM — no transparency, no backdrop blur, no
     tint changes per page. Earlier attempts at translucent /
     warm-taupe / light-frost all let the page bg bleed through
     and absorb the cyan brand logo. A solid cream bar guarantees
     the cyan logo (and the dark nav text) reads on every page
     regardless of what's behind. The pill state stays its own
     dark chrome via the .is-floating rules below. */
  background: #fdfaf8;
  box-shadow: 0 4px 20px -10px rgba(120, 80, 90, 0.18);
  position: sticky; top: 0; z-index: 50;
  will-change: opacity;
  /* Smooth bg + border transitions so the warm-taupe → opaque cream
     swap that fires when the mobile burger opens lines up with the
     0.35s menu slide-in. NOTE: backdrop-filter is intentionally NOT
     transitioned — backdrop-filter > 0 creates a containing block for
     fixed-position descendants, and easing it from blur(16px) to none
     over 320ms would trap the .primary-nav overlay inside the ~50px
     header for those 320ms (the "only the top of the menu shows" bug).
     Drop backdrop-filter instantly; only the opaque colours animate. */
  transition:
    background-color .32s cubic-bezier(.16, 1, .3, 1),
    border-color .32s cubic-bezier(.16, 1, .3, 1),
    box-shadow .32s cubic-bezier(.16, 1, .3, 1);
}
/* Pill appearance / disappearance — opacity-only fade (the geometry
   change is instant under the hood so it reads as "the pill fades in"
   instead of "the bar zooms into a pill"). */
@keyframes pillFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes barFadeIn  { from { opacity: 0; } to { opacity: 1; } }
.site-header.is-floating { animation: pillFadeIn .32s ease-out; }
.site-header:not(.is-floating) { animation: barFadeIn .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .site-header.is-floating,
  .site-header:not(.is-floating) { animation: none; }
}
/* Floating pill — toggled by the IIFE once the first section scrolls
   past. Uses inline styles applied via JS as the source of truth (Chromium
   has cascade quirks with !important on shorthand + class-toggled changes);
   the CSS here is a fallback that keeps the page sensible even if the
   inline-style writer is blocked by an extension. */
.site-header.is-floating {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 1520px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(28, 22, 18, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 10px 32px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: .55rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  gap: .6rem 1.2rem;
  flex-wrap: nowrap;
}
@media (max-width: 720px) {
  .site-header.is-floating {
    width: calc(100% - 1rem);
    top: .5rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    gap: .4rem;
  }
}
.site-header.is-floating .brand img {
  height: 40px;
  transition: height .35s cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 720px) {
  .site-header.is-floating .brand img { height: 30px; }
}
/* While the mobile nav overlay is open, drop backdrop-filter and the
   transform — both create containing blocks for the fixed-position
   .primary-nav overlay, which would otherwise be trapped inside the
   ~50px header (only the first menu item shows). */
@media (max-width: 768px) {
  body.mobile-nav-open .site-header,
  body.mobile-nav-open .site-header.is-floating {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
    padding: 1rem 1.25rem !important;
    animation: none !important;
    /* Smooth the warm-taupe → opaque-cream chrome flip so it lines up
       with the 0.35s menu slide-in. CRITICAL: do NOT transition
       backdrop-filter — backdrop-filter > 0 creates a containing block
       for fixed-position descendants. If we eased it from blur(16px)
       to none, for 320ms the .primary-nav overlay (position:fixed;
       inset:0) would still be trapped inside the ~50px header and
       only the first menu item would be visible (this was the
       previously-fixed bug; transitioning backdrop-filter reintroduced
       it). Drop backdrop-filter instantly via no-transition; only the
       opaque colours animate. */
    transition:
      background-color .32s cubic-bezier(.16, 1, .3, 1) !important,
      border-bottom-color .32s cubic-bezier(.16, 1, .3, 1) !important,
      box-shadow .32s cubic-bezier(.16, 1, .3, 1) !important;
  }
  body.mobile-nav-open .bmb-nav-toggle-bar { background: #2a2a2a !important; }
  body.mobile-nav-open .primary-nav {
    z-index: 95 !important;
    /* Match the transparent + blurred mobile nav background below.
       Was solid var(--bg); switched to slight-transparency frost
       so the page softens through instead of a solid cream wall. */
    background: rgba(253, 250, 248, 0.88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
  }
}
.site-header .brand { font-weight: 600; font-size: 1.125rem; color: var(--brand); line-height: 0; display: inline-flex; align-items: center; position: relative; }
.site-header .brand img { display: block; height: 80px; width: auto; max-width: 100%; transition: opacity .15s ease; }
.site-header .brand:hover img { opacity: .85; }
@media (max-width: 640px) { .site-header .brand img { height: 60px; } }
/* Two logos in the header — white shows on dark/over-hero state,
   black shows when .is-light is toggled (header over cream sections).
   Selectors include `img.` to match specificity of the existing
   `.site-header .brand img` rule above. */
.site-header .brand img.brand-logo-light { display: block; }
.site-header .brand img.brand-logo-dark { display: none; }
.site-header.is-light .brand img.brand-logo-light { display: none; }
.site-header.is-light .brand img.brand-logo-dark { display: block; }
/* Pill state forces the cyan logo — the pill chrome is always
   dark (rgba(28,22,18,0.72)), so the dark logo variant from .is-light
   would otherwise vanish into it. Specificity (0,3,2) ties with
   .is-light rules, source order here wins. */
.site-header.is-floating .brand img.brand-logo-light { display: block !important; }
.site-header.is-floating .brand img.brand-logo-dark  { display: none !important; }
/* Pill state forces nav text WHITE. The home page's home.css
   .is-light rule (color: var(--ink) !important; specificity (0,3,3)
   on its widest selector) was tying / nearly tying mine — I'm
   adding body.is-immersive-page as an extra qualifier so this rule
   is unambiguously (0,5,3), beating the .is-light rule on the home
   page after scrolling over the cream services section. */
body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a {
  color: rgba(255, 250, 247, 0.92) !important;
}
body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a:hover,
body.is-immersive-page .site-header.is-floating .primary-nav .nav-root > li > a:focus-visible {
  color: rgba(255, 255, 255, 1) !important;
}

/* The previous body.is-content-page override (cream-bg header + dark
   logo on non-service pages) was reverted 2026-06-10 at user request —
   they want the service-page warm-taupe + cyan-logo + pill-morph
   treatment consistently site-wide, not a different chrome per
   page type. The body class stays "is-immersive-page" everywhere
   now; the default .site-header rules above carry the warm-taupe
   chrome on every page. */

/* Primary navigation with hover/focus dropdowns (CSS-only).
   Editorial serif (Cormorant Garamond) at desktop, sans fallback on
   mobile for legibility — applied globally so every page reads the
   same as the homepage. Previously this lived in home.css; promoted
   to style.css 2026-06-05 for cross-page consistency. */
.primary-nav .nav-root { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; align-items: center; }
.primary-nav .nav-root > li { position: relative; }
.primary-nav .nav-root > li > a {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0;
  /* Dark ink — header bar is now light cream-frost (was warm-taupe
     where near-white text was readable). Dark text on light frost
     reads well on every page, with the pill state below forcing
     white text back when the floating dark pill is active. */
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 0;
  transition: color .15s ease;
}
/* Hover tint — deep rose (--brand-dk) is dark enough to be visible
   on the light header bar and matches the brand. Earlier pale rose
   (--brand-100) was designed for the dark warm-taupe header; on the
   light bar it disappeared. The Contact pill keeps its sky-blue
   background regardless. */
.primary-nav .nav-root > li > a:hover,
.primary-nav .nav-root > li > a:focus-visible {
  color: var(--brand-dk, #8a5f66);
  text-decoration: none;
}

/* Caret indicator next to dropdown parents */
.primary-nav .caret {
  display: inline-block;
  width: .55em;
  height: .55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  opacity: .75;
}
.primary-nav .has-submenu:hover > a .caret,
.primary-nav .has-submenu:focus-within > a .caret { transform: rotate(-135deg) translateY(2px); opacity: 1; }

/* Submenu panel */
.primary-nav .submenu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 240px;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(42, 42, 42, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 50;
}
.primary-nav .submenu--wide { min-width: 260px; }
/* Services fly-out menu (desktop). A vertical column of life-stage
   categories (Pregnancy / Post-Partum / Baby / Others). Hovering a
   category reveals its services in a panel that flies out to the
   right — a two-level menu instead of a 4-column wall. */
.primary-nav .submenu--flyout {
  min-width: 230px;
  padding: .5rem 0;
}
.primary-nav .flyout-cat { position: relative; margin: 0; }
.primary-nav .flyout-cat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: .55rem 1.1rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.primary-nav .flyout-arrow {
  flex: 0 0 auto;
  width: .46rem;
  height: .46rem;
  margin-left: .85rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .55;
  transition: opacity .12s ease, transform .25s ease;
}
/* Fly-out panel base box (shared). Positioning + hover reveal are
   desktop-only (below) so they don't fight the mobile accordion. */
.primary-nav .flyout-panel {
  min-width: 250px;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
}
/* ===== Desktop-only interactive fly-out =====
   Scoped to min-width:769px on purpose. The :hover rules below carry
   high specificity; if they applied on mobile a tap would leave :hover
   "stuck" and fight the .flyout-panel accordion reset. Keeping them
   desktop-only avoids that entirely. */
@media (min-width: 769px) {
  .primary-nav .flyout-cat:hover > .flyout-cat-label,
  .primary-nav .flyout-cat:focus-within > .flyout-cat-label {
    background: var(--brand-100, #f7eef2);
    color: var(--brand);
  }
  .primary-nav .flyout-cat:hover > .flyout-cat-label .flyout-arrow,
  .primary-nav .flyout-cat:focus-within > .flyout-cat-label .flyout-arrow { opacity: 1; }
  .primary-nav .flyout-panel {
    position: absolute;
    top: -.5rem;
    left: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(42, 42, 42, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    z-index: 60;
  }
  /* Panels stay hidden until the user hovers (or keyboard-focuses) a
     specific category — nothing shows by default. */
  .primary-nav .flyout-cat:hover > .flyout-panel,
  .primary-nav .flyout-cat:focus-within > .flyout-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
  }
}
/* Right-edge submenus: the last two nav items sit close to the right
   edge of the viewport, and their dropdowns would otherwise extend
   past the page and get clipped. Anchor those dropdowns to the right
   so they expand leftward and stay fully visible. The Services fly-out
   skips this — it's the leftmost item with plenty of room to its right. */
.primary-nav .nav-root > li:nth-last-child(-n+2):not(.nav-cta-item) .submenu:not(.submenu--flyout) {
  left: auto;
  right: 0;
}

/* Top-level Contact button (accent blue pill). Replaces the previous
   "Contact Us" buried two levels deep inside the What We Do dropdown.
   Standard primary-nav link cadence, just chromed as a button so it
   pulls the eye as the page's clearest call-to-action. */
.primary-nav .nav-cta-item { margin-left: .4rem; }
.primary-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  padding: .42rem 1.1rem !important;
  background: var(--accent, #5bc2e7);
  color: #fff !important;
  border-radius: 999px;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 4px 12px -4px rgba(91, 194, 231, .55);
}
.primary-nav .nav-cta:hover,
.primary-nav .nav-cta:focus-visible {
  background: #3fa9d4 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(91, 194, 231, .6);
  text-decoration: none;
}
.primary-nav .has-submenu:hover > .submenu,
.primary-nav .has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.primary-nav .submenu li { margin: 0; }
.primary-nav .submenu a {
  display: block;
  padding: .55rem 1.1rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.primary-nav .submenu a:hover,
.primary-nav .submenu a:focus-visible {
  background: var(--brand-100, #f7eef2);
  color: var(--brand);
  text-decoration: none;
}
/* Mobile: revert to sans for the full-screen overlay (Cormorant at
   body size reads "Roman" / archaic, hurts legibility on phones). */
@media (max-width: 768px){
  .primary-nav .nav-root > li > a,
  .primary-nav .submenu a {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .005em;
  }
}

/* ===== Hamburger toggle button (mobile only) ===== */
.bmb-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 100;
}
.bmb-nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  /* Dark ink on the light cream-frost header (the new global default,
     2026-06-10). Was cream on warm-taupe before the light-bar swap.
     The mobile-nav-open state above already uses #2a2a2a. */
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), opacity .15s ease, background-color .25s ease;
}
/* Pill state: dark pill bg, so flip burger bars back to white for
   contrast. (.is-floating wins over the default .ink and over the
   mobile-nav-open !important since we use !important here too.) */
.site-header.is-floating .bmb-nav-toggle-bar {
  background: rgba(251, 246, 243, 0.92) !important;
}
body.mobile-nav-open .bmb-nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.mobile-nav-open .bmb-nav-toggle-bar:nth-child(2) { opacity: 0; }
body.mobile-nav-open .bmb-nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== Mobile nav overlay (≤768px) ===== */
@media (max-width: 768px) {
  /* Show hamburger */
  .bmb-nav-toggle { display: flex; }

  /* Hide the desktop nav by default; transform into a full-screen overlay */
  .site-header { padding: .85rem 1.25rem; flex-wrap: nowrap; }
  .site-header .brand { flex: 0 1 auto; }

  .primary-nav {
    position: fixed;
    inset: 0;
    /* Slight transparency + backdrop blur so the page beneath
       softens through instead of a solid cream wall (2026-06-10). */
    background: rgba(253, 250, 248, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    padding: 6rem 1.5rem 2.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 90;
    visibility: hidden;
  }
  body.mobile-nav-open .primary-nav {
    transform: translateX(0);
    visibility: visible;
  }
  /* Lock the background so the page can't scroll behind the open menu
     (plain overflow:hidden is unreliable on mobile). The matching JS
     sets body.style.top = -scrollY and restores it on close, and the
     close (X) button is pinned below so it never scrolls out of reach. */
  body.mobile-nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
  body.mobile-nav-open .bmb-nav-toggle {
    position: fixed;
    top: .85rem;
    right: 1.25rem;
  }
  .primary-nav { overscroll-behavior: contain; }

  /* Mobile nav layout */
  .primary-nav .nav-root {
    flex-direction: column;
    gap: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    align-items: stretch;
  }
  .primary-nav .nav-root > li {
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .primary-nav .nav-root > li:last-child { border-bottom: 0; }
  .primary-nav .nav-root > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    font-size: 1.125rem;
    color: var(--ink);
    font-weight: 500;
  }
  /* Tapped / expanded top-level item turns a readable blue. (Without
     this it inherited the desktop pale-rose :hover colour, which is
     almost invisible on the cream mobile overlay.) */
  .primary-nav .nav-root > li > a:hover,
  .primary-nav .nav-root > li > a:focus,
  .primary-nav .nav-root > li > a:focus-visible,
  .primary-nav .nav-root > li > a:active,
  .primary-nav .has-submenu.is-expanded > a {
    color: #1c7fa1;
  }
  .primary-nav .caret {
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
    opacity: .55;
  }
  .primary-nav .has-submenu.is-expanded .caret {
    transform: rotate(-135deg) translateY(2px);
    opacity: 1;
  }

  /* Submenu — collapsed by default, expand on tap with a smooth
     ease-out reveal. Two layers of animation:
       1. The submenu box opens via max-height (with a generous
          duration + ease-out-quart curve so the eased portion lines
          up with the actual content height — feels like a true
          accordion, not a snap-to-visible pop).
       2. Each submenu link fades + lifts in with a small per-row
          delay, so the eye reads them top-to-bottom as the box
          opens, rather than all popping in at once. */
  .primary-nav .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height .42s cubic-bezier(.22, 1, .36, 1),
      padding .35s cubic-bezier(.22, 1, .36, 1);
    list-style: none;
  }
  .primary-nav .has-submenu.is-expanded .submenu {
    max-height: 520px;
    padding: 0 0 .75rem 1rem;
  }
  .primary-nav .submenu a {
    padding: .55rem 0;
    font-size: 1rem;
    color: var(--muted);
    display: block;
  }
  .primary-nav .submenu a:hover,
  .primary-nav .submenu a:focus-visible {
    color: var(--brand);
    background: transparent;
  }
  /* Item-level reveal — collapsed: faded + lifted; expanded: fades
     back in with a small stagger so links read sequentially. */
  .primary-nav .submenu li {
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity .24s ease-out,
      transform .32s cubic-bezier(.22, 1, .36, 1);
  }
  .primary-nav .has-submenu.is-expanded .submenu li {
    opacity: 1;
    transform: translateY(0);
  }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(1) { transition-delay: .06s; }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(2) { transition-delay: .10s; }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(3) { transition-delay: .14s; }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(4) { transition-delay: .18s; }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(5) { transition-delay: .22s; }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(6) { transition-delay: .26s; }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(7) { transition-delay: .30s; }
  .primary-nav .has-submenu.is-expanded .submenu li:nth-child(8) { transition-delay: .34s; }
  @media (prefers-reduced-motion: reduce) {
    .primary-nav .submenu,
    .primary-nav .submenu li {
      transition: none !important;
    }
    .primary-nav .submenu li {
      opacity: 1;
      transform: none;
    }
  }
  /* Services fly-out on mobile — the desktop hover panels become a
     nested accordion. The four categories stack in a column; tapping a
     category expands its services beneath it (is-open toggled by JS).
     The Services dropdown needs a taller max-height since every panel
     can be open at once. */
  .primary-nav .submenu--flyout {
    display: block;
    padding: 0;
    min-width: 0;
  }
  .primary-nav .has-submenu.is-expanded .submenu--flyout {
    max-height: 1600px;
    padding: 0 0 .75rem 1rem;
  }
  .primary-nav .flyout-cat { margin: .1rem 0; }
  .primary-nav .flyout-cat-label {
    width: 100%;
    padding: .55rem 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .005em;
    color: var(--muted);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .primary-nav .flyout-cat.is-open > .flyout-cat-label { color: #1c7fa1; }
  .primary-nav .flyout-arrow {
    transform: rotate(45deg);
    transition: transform .25s ease;
    opacity: .55;
  }
  .primary-nav .flyout-cat.is-open > .flyout-cat-label .flyout-arrow {
    transform: rotate(-135deg);
    opacity: 1;
  }
  /* Panel collapses to an accordion: static flow, max-height transition. */
  .primary-nav .flyout-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition:
      max-height .38s cubic-bezier(.22, 1, .36, 1),
      padding .3s cubic-bezier(.22, 1, .36, 1);
  }
  .primary-nav .flyout-cat.is-open > .flyout-panel {
    max-height: 480px;
    padding: 0 0 .35rem .85rem;
  }
  /* Contact button on mobile — keep the accent pill chrome but stack
     it just like the other items with a small lead margin so it sits
     visually separate. */
  .primary-nav .nav-cta-item { margin-left: 0; margin-top: .6rem; }
  .primary-nav .nav-cta {
    display: inline-block;
    padding: .55rem 1.4rem !important;
    font-size: 1.05rem !important;
  }
}
main { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
main section { margin: 2.25rem 0; }
.hero { text-align: center; padding: 3rem 1rem; }
.hero .tagline { color: var(--muted); font-size: 1.05rem; }
.hero .proof { font-weight: 600; margin-top: 1rem; }
.cta { display: inline-block; background: var(--brand); color: #fff; padding: .75rem 1.5rem; border-radius: 999px; margin-top: 1rem; font-weight: 500; }
.cta:hover { text-decoration: none; opacity: .9; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.services-grid li { border: 1px solid var(--line); border-radius: 10px; }
.services-grid a { display: block; padding: 1.25rem; color: var(--ink); }
.trimesters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.trimesters > div { border: 1px solid var(--line); padding: 1rem; border-radius: 10px; text-align: center; }
/* ═══════════════════════════════════════════════════════════════
   Shared site footer — single 5-column row used on every page.
   Was previously homepage-only (in pages/home.css) which left other
   routes on the bare-bones legacy footer. Moved here so it's the
   canonical chrome treatment across all 54 URLs.
   Layout: Brand (1.7fr) | Services | Explore | Resources | Legal & Trust
   ═══════════════════════════════════════════════════════════════ */
.site-footer{
  background:var(--bg-2,#f3ece1);
  padding:4rem 2rem 1.6rem;color:var(--ink);
}
.site-footer .footer-row{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));
  gap:2.4rem;align-items:start;
}
.site-footer .footer-row-bot{margin-top:3.4rem}
.site-footer .footer-col-wide{grid-column:span 2}

/* Section / column heading — Cormorant Garamond serif */
.site-footer .footer-col-head{
  font-family:var(--serif);
  font-weight:500;font-size:1.25rem;
  letter-spacing:.005em;color:var(--ink);
  margin:0 0 1.4rem;text-transform:none;
}

/* Brand column (row 1, col 1) */
.site-footer .footer-brand .footer-logo{
  height:54px;width:auto;margin-bottom:1.2rem;display:block;
}
.site-footer .footer-tagline{
  font-family:var(--sans);font-size:.92rem;line-height:1.65;
  color:var(--ink-2);margin:0 0 1.2rem;max-width:32ch;
}
.site-footer .footer-brand-contact{margin:0;font-family:var(--sans);font-size:.88rem}
.site-footer .footer-brand-contact a{
  color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.84rem;text-decoration:none;border-bottom:1px solid var(--brand);
  padding-bottom:1px;transition:color .15s, border-color .15s;
}
.site-footer .footer-brand-contact a:hover{color:var(--brand-dk);border-color:var(--brand-dk)}

/* Link columns (Services / Explore / Resources / Legal) */
.site-footer .footer-col ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.9rem;
}
.site-footer .footer-col li{margin:0}
.site-footer .footer-col li a{
  font-family:var(--sans);font-size:.95rem;color:var(--ink-2);
  text-decoration:none;line-height:1.4;
  transition:color .15s ease;
}
.site-footer .footer-col li a:hover{color:var(--brand-dk)}

/* Our Clinic block (row 2, spans 2 cols on pages that still use it) */
.site-footer .footer-locations{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
}
.site-footer .footer-location{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.8rem;
  box-shadow:0 1px 3px rgba(120,80,90,.05), 0 6px 16px rgba(120,80,90,.05);
}
.site-footer .footer-location h4{
  font-family:var(--serif);font-weight:500;font-size:1.1rem;
  color:var(--ink);margin:0 0 .2rem;letter-spacing:-.005em;
}
.site-footer .footer-location address{
  font-family:var(--sans);font-style:normal;font-size:.86rem;
  line-height:1.6;color:var(--ink-2);margin:0;
}
.site-footer .footer-hours{
  font-family:var(--sans);font-size:.84rem;color:var(--ink-2);
  line-height:1.55;margin:0;padding:.6rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.site-footer .footer-hours strong{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dk);
  display:block;margin-bottom:.2rem;
}
.site-footer .footer-contact{
  font-family:var(--sans);font-size:.86rem;line-height:1.55;color:var(--ink-2);margin:0;
}
.site-footer .footer-contact a{
  color:var(--brand-dk);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;font-weight:600;
}
.site-footer .footer-contact a:hover{color:var(--brand)}
.site-footer .footer-map{
  margin-top:.4rem;border-radius:10px;overflow:hidden;border:1px solid var(--line);
}
.site-footer .footer-map iframe{
  width:100%;height:160px;border:0;display:block;
  filter:grayscale(.15) saturate(.85);
}

/* Copyright bar */
.site-footer .copyright{
  max-width:1280px;margin:3rem auto 0;padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.78rem;color:var(--muted);text-align:center;
}

/* Mobile — collapse to 2 cols then 1 */
@media (max-width:960px){
  .site-footer .footer-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
  .site-footer .footer-col-wide{grid-column:span 2}
}
@media (max-width:720px){
  .site-footer{padding:2.6rem 1.2rem 1.2rem}
  .site-footer .footer-row{grid-template-columns:1fr;gap:1.8rem}
  .site-footer .footer-col-wide{grid-column:auto}
  .site-footer .footer-locations{grid-template-columns:1fr;gap:1.2rem}
  .site-footer .footer-map iframe{height:160px}
  .site-footer .footer-row-bot{margin-top:1.8rem}
}
@media (max-width: 640px) {
  .locations { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.75rem; }
}

/* Category archive + /blogs/ */
.category-hero { padding: 1.5rem 0 0.5rem; text-align: center; }
.category-hero h1 { font-size: 2rem; }
.category-hero .lead { color: var(--muted); max-width: 720px; margin: .5rem auto 1.5rem; }
/* Legacy post grid — auto-fit + capped max + justify-content:center
   so 2-card rows centre, orphan cards in the last row centre, and
   cards don't stretch to fill 1fr (kept a sensible upper bound). */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 1.25rem; }
.post-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: box-shadow .15s; overflow: hidden; display: flex; flex-direction: column; }
.post-card-thumb { display: block; }
.post-card-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.post-card > h3, .post-card > p { padding: 0 1.25rem; }
.post-card > h3 { margin-top: 1rem; }
.post-card > p:last-child { padding-bottom: 1.25rem; }
.post-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.post-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; line-height: 1.3; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--brand); }
.post-card-date { color: var(--muted); font-size: .8rem; margin: 0 0 .5rem; }
.post-card-excerpt { color: var(--ink); font-size: .9rem; line-height: 1.5; margin: 0; }

/* WP-imported content normalisation */
.wp-content h1 { font-size: 2rem; }
.wp-content h2 { font-size: 1.5rem; margin-top: 1.5rem; }
.wp-content h3 { font-size: 1.15rem; margin-top: 1.2rem; color: var(--brand); }
.wp-content p { margin: .5rem 0; }
.wp-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }
.wp-content ul, .wp-content ol { margin: .5rem 0 1rem 1.5rem; }
.wp-content li { margin: .25rem 0; }
.wp-content a { color: var(--brand); }
.wp-content blockquote { border-left: 4px solid var(--brand); padding-left: 1rem; color: var(--muted); margin: 1rem 0; }
.cta-block { text-align: center; padding: 2rem 0; }

/* Enquiry form on /contact-us/ */
.enquiry-form { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 10px; background: #fbf7f5; }
.enquiry-form h2 { margin-top: 0; }
.enquiry-form label { display: block; margin: .85rem 0; font-size: .92rem; color: var(--ink); }
.enquiry-form input[type=text], .enquiry-form input[type=tel], .enquiry-form input[type=email], .enquiry-form select, .enquiry-form textarea {
  width: 100%; max-width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: #fff; margin-top: .25rem; box-sizing: border-box;
}
.enquiry-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.enquiry-form .form-consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--muted); }
.enquiry-form .form-consent input { width: auto; margin-top: .25rem; }
.enquiry-form button[type=submit] { background: var(--brand); color: #fff; border: 0; border-radius: 999px; padding: .7rem 1.75rem; font: inherit; font-weight: 500; cursor: pointer; margin-top: .5rem; }
.enquiry-form button[type=submit]:hover:not(:disabled) { opacity: .9; }
.enquiry-form button[type=submit]:disabled { opacity: .5; cursor: wait; }
.enquiry-form .form-status { font-size: .9rem; margin-top: .75rem; min-height: 1.4em; color: var(--ink); }
.enquiry-form .form-status a { color: var(--brand); font-weight: 500; }
@media (max-width: 640px) { .enquiry-form .form-row { grid-template-columns: 1fr; } }

/* Product grid for /store/, /shop-beauty/, /product-category/promotions/ */
/* Legacy product grid — same centering pattern as .post-grid so the
   "Related products" section on every /product/* detail page and any
   listing still on the legacy template centre 2-card rows and orphan
   cards instead of left-packing them. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; gap: 1.25rem; }
.product-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s; overflow: hidden; }
.product-card-thumb { display: block; }
.product-card-thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }
.product-card > h3, .product-card > p, .product-card > a:not(.product-card-thumb) { padding: 0 1.25rem; }
.product-card > h3 { margin-top: 1rem; }
.product-card > a.product-card-cta { margin: 0 1.25rem 1.25rem; padding: .5rem 1rem; }
.product-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.product-card h3 { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.product-card h3 a { color: var(--ink); }
.product-card h3 a:hover { color: var(--brand); }
.product-card-price { margin: 0; font-size: 1rem; color: var(--ink); }
.product-card-price del { color: var(--muted); font-weight: 400; margin-right: .35rem; }
.product-card-price strong { color: var(--brand); }
.product-card-cta { display: inline-block; background: var(--brand); color: #fff; padding: .5rem 1rem; border-radius: 999px; font-size: .9rem; text-align: center; margin-top: auto; }
.product-card-cta:hover { text-decoration: none; opacity: .9; }

/* Cookie consent banner — PDPA + GDPR (Consent Mode v2) */
.bmb-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bmb-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(42, 42, 42, .12); }
.bmb-consent[hidden] { display: none; }
.bmb-consent-inner { max-width: var(--max); margin: 0 auto; padding: 1.1rem 1.25rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; }
.bmb-consent-text h2 { font-size: 1.05rem; margin: 0 0 .25rem; font-family: Georgia, "Times New Roman", serif; }
.bmb-consent-text p { margin: 0; font-size: .9rem; color: var(--ink); line-height: 1.5; }
.bmb-consent-text a { color: var(--brand); text-decoration: underline; }
.bmb-consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.bmb-consent-btn { font: inherit; font-size: .9rem; font-weight: 500; padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--brand); line-height: 1.2; white-space: nowrap; }
.bmb-consent-btn--primary { background: var(--brand); color: #fff; }
.bmb-consent-btn--primary:hover { opacity: .9; }
.bmb-consent-btn--secondary { background: #fff; color: var(--brand); }
.bmb-consent-btn--secondary:hover { background: #f7eef2; }
.bmb-consent-btn:focus-visible { outline: 3px solid #f3c6d2; outline-offset: 2px; }
.bmb-consent-prefs { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .25rem; }
.bmb-consent-prefs[hidden] { display: none; }
.bmb-consent-prefs fieldset { border: 0; padding: 0; margin: 0 0 .75rem; }
.bmb-consent-pref { display: flex; gap: .65rem; align-items: flex-start; margin: .5rem 0; font-size: .88rem; color: var(--ink); }
.bmb-consent-pref input[type=checkbox] { margin-top: .25rem; accent-color: var(--brand); }
.bmb-consent-pref input[type=checkbox]:focus-visible { outline: 3px solid #f3c6d2; outline-offset: 2px; }
.bmb-consent-pref strong { color: var(--ink); }
.bmb-consent-reopen { position: fixed; left: 1rem; bottom: 1rem; z-index: 9998; background: #fff; color: var(--brand); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .82rem; cursor: pointer; box-shadow: 0 2px 10px rgba(42, 42, 42, .08); }
.bmb-consent-reopen[hidden] { display: none; }
.bmb-consent-reopen:hover { background: #f7eef2; }
.bmb-consent-reopen:focus-visible { outline: 3px solid #f3c6d2; outline-offset: 2px; }
@media (max-width: 720px) {
  .bmb-consent-inner { grid-template-columns: 1fr; padding: 1rem 1rem 1.1rem; }
  .bmb-consent-actions { justify-content: stretch; }
  .bmb-consent-actions .bmb-consent-btn { flex: 1 1 auto; text-align: center; }
}

/* ===== Whole blog/post card clickable =====
   Each .bmb-post-card has separate links (thumb, title, "Read article").
   A stretched overlay on the title link makes the entire card a single
   tap target (esp. helpful on mobile) without nesting <a> tags. The CTA
   stays above so it still works; date/excerpt become part of the hit
   area. Text selection inside the card is traded for easier tapping. */
.bmb-post-card { position: relative; }
.bmb-post-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.bmb-post-card .bmb-post-card-cta { position: relative; z-index: 2; }

/* ──────────────────────────────────────────────────────────────
   Floating WhatsApp FAB (added 2026-06-10)

   The standing always-on conversion path per the aphyx-website
   playbook ("WhatsApp deep-links as a fallback so a customer
   enquiry never silently dies"). Singapore main hotline is the
   default; lactation-only number stays on the lactation page
   CTA pair.

   Position: fixed bottom-right with iOS safe-area inset so it
   doesn't fall behind the iPhone home-bar. Z-index 45 — below
   the sticky header (z=50) but above page content.

   Hidden:
   - on /contact-us/ (JS removes the element; that page already
     has the enquiry form so a second floating CTA would be noise)
   - while the mobile burger menu overlay is open
   - with prefers-reduced-motion the pulse animation is dropped
   ────────────────────────────────────────────────────────────── */
.bmb-wa-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.5rem);
  bottom: calc(clamp(1rem, 2.5vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  text-decoration: none;
  box-shadow:
    0 6px 20px rgba(20, 18, 16, 0.22),
    0 2px 6px rgba(20, 18, 16, 0.14);
  transition:
    transform .22s cubic-bezier(.2, .7, .2, 1),
    background-color .22s cubic-bezier(.2, .7, .2, 1),
    box-shadow .22s cubic-bezier(.2, .7, .2, 1),
    opacity .25s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.bmb-wa-fab:hover,
.bmb-wa-fab:focus-visible {
  background: #1ebe57;
  transform: translateY(-3px);
  box-shadow:
    0 10px 26px rgba(20, 18, 16, 0.28),
    0 3px 8px rgba(20, 18, 16, 0.18);
  text-decoration: none;
}
.bmb-wa-fab:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.bmb-wa-fab__icon {
  width: 1.85rem;
  height: 1.85rem;
  position: relative;
  z-index: 1;
  display: block;
}
.bmb-wa-fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.55;
  animation: bmbWaFabPulse 2.4s cubic-bezier(.2, .7, .2, 1) infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes bmbWaFabPulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.6);  opacity: 0;    }
  100% { transform: scale(1.6);  opacity: 0;    }
}
/* While mobile nav overlay is open, hide the FAB so it doesn't
   stack on top of the menu (overlay is at z=90, but the FAB would
   still be visible through transparent areas of some pages). */
body.mobile-nav-open .bmb-wa-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce) {
  .bmb-wa-fab { transition: opacity .25s ease-out; }
  .bmb-wa-fab:hover,
  .bmb-wa-fab:focus-visible { transform: none; }
  .bmb-wa-fab__pulse { animation: none; opacity: 0; }
}
/* Service pages have a sticky bottom-center .service-floating-cta
   that appears past the hero. On pages where that bar is in the DOM
   (only the 14 immersive service pages), nudge the WA fab up a touch
   so the two don't visually collide at the bottom edge — the FAB
   stays bottom-right, the bar stays bottom-center, plenty of
   breathing room. :has() narrows this to the actual pages with the
   bar, instead of every page that carries body.is-immersive-page. */
body:has(.service-floating-cta) .bmb-wa-fab {
  bottom: calc(clamp(1rem, 2.5vw, 1.5rem) + 4.5rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 640px) {
  .bmb-wa-fab { width: 3.25rem; height: 3.25rem; }
  .bmb-wa-fab__icon { width: 1.65rem; height: 1.65rem; }
}