/**
 * WumeHealth - Site Styles
 * Wume Brand Style Guide aligned (Section 1 — Brand Foundations).
 * Color palette: cream / sand / sage / lbrown / brown / black ONLY.
 * Typography: Rhymes Text (heading) + Unica 77 LL (body).
 * Text-on-bg rule (page 36, binding): cream/sand/sage → black; lbrown/brown/black → cream.
 * V04 adds: mega-menu desktop backdrop (page 63), mobile full-screen overlay
 *      menu (page 63), modal backdrop blur, and .wume-popup-panel for
 *      inline-bottom newsletter-style pop-ups (page 64).
 * V05 adds: unified 3-column mega-menu panel (page 63) that replaces the
 *      per-item dropdowns; serif item links, sand divider lines under
 *      column kickers, drops down inside the navbar with absolute positioning.
 * V22 replaces the @media (max-width: 991.98px) navbar block — was a brown
 *      full-screen overlay (V07/brand page 63), now a cream-on-cream R0 figma
 *      accordion drawer with full-width rows, +/− pseudo-element indicator
 *      keyed off aria-expanded, [hidden]-attribute-driven sublists, and focus
 *      management; supports the new accordion markup added in base.html.twig
 *      V25. Drawer is top-sheet style (sits under the sticky navbar at
 *      top: var(--wume-nav-height)) and locks body scroll while open.
 * V23 spec-gap fixes for Phase A:
 *      (1) Mobile-compact Request CTA — the navbar Request button now renders
 *          at <992px per spec section 2.1.3. Adds .wume-btn-request mobile
 *          override (smaller font/padding/letter-spacing) so the button fits
 *          the three-region top bar without crowding the centered logo at
 *          375/390/414 viewports.
 *      (2) Sub-list expand transition — the mobile drawer sublist now
 *          animates open/closed via max-height: 0 → 800px with
 *          transition: max-height 0.15s ease-out per spec section 2.10.2.
 *          The previous [hidden]-attribute mechanic is replaced by an
 *          .is-open class toggle (driven from the inline JS in
 *          base.html.twig V26). 800px headroom is safely larger than the
 *          longest sublist (Physicians, 4 items ≈ 240px tall).
 * V24 Phase B — per-page mobile reflow rules added at the umbrella 991.98
 *      breakpoint, co-located with the existing per-section CSS:
 *      Universal — .wume-split breakpoint moved 768 → 991.98; .wume-section
 *      and .wume-hero compress padding to 3rem 0 / 4rem 0 below 992 with
 *      .wume-hero-title scaling to clamp(2rem, 7vw, 2.75rem); jump-link
 *      target sections gain scroll-margin-top:106px under the sticky
 *      announcement+navbar.
 *      Home — services tile 7-up grid stacks to 1 column (was 2-up at <769);
 *      testimonial col-md-4 row collapses to 1 column at <992 via
 *      .row > .col-md-4 override; doctor-digest 4-up grid stacks to 1
 *      column (was 2-up at <769).
 *      Care — 3-pillar row, 4-step process, and side-by-side comparison
 *      cards (col-md-6 inside .wume-section-alt) all stack with a slim
 *      sand-toned divider between the comparison cards.
 *      Pathways — featured-pathways 4 col-md-3 teaser tiles stack to 1
 *      column; how-it-works diagram scales down to fit 320px viewports.
 *      Physicians — sage-band CTA pair flex-direction column; Dr. Wu
 *      credentials inner row collapses to 1 col (label-above-value);
 *      4-physician 2x2 grid (.wume-physician-row alternating) stacks; Our
 *      Standard 6-pillar grid stacks; architectural-band fontsize scales.
 *      Visit — 3-up Email/Phone/Office contact panels stack with bottom
 *      borders restored; doctor-digest 4-up stacks; press-swatch wall
 *      goes 6→2 columns at <992 and 2→1 at <576.
 *      Conflict reconciliation — pre-existing 768 blocks for
 *      .wume-services-grid (repeat(2, 1fr)), .wume-doctor-digest-grid
 *      (repeat(2, 1fr)), and .wume-press-swatch-grid (repeat(3, 1fr))
 *      contradicted the design's 1-up-at-<992 mandate; they were
 *      neutralized by setting 1fr at the new 991.98 umbrella with !important
 *      so the 768 narrower-viewport rules cannot re-multi-columnize the
 *      cascade.
 * V25 Phase B cascade fix — code-quality follow-up to V24:
 *      (1) The pre-existing @media (max-width: 768px) block (.wume-section
 *      padding 60px 0, .wume-hero 80px 0 60px, .wume-hero-title 2.2rem,
 *      .wume-section-title 1.8rem) sat BEFORE the V24 991.98 umbrella in
 *      source order and so was silently dead at <769 (991.98 always won
 *      the source-order tiebreak between two equal-specificity rules that
 *      both match the viewport). The 768 block has been moved AFTER the
 *      991.98 block and rewritten so it now wins for <769 viewports with
 *      strictly tighter values: titles use clamp() with smaller floors
 *      (clamp(1.8rem, 6vw, 2.2rem) for hero, clamp(1.4rem, 5vw, 1.8rem)
 *      for section), padding uses --wume-*-phone tokens that are strictly
 *      tighter than --wume-*-mobile, and units are rem (consistent with
 *      991.98) so cascade comparison is unit-consistent.
 *      (2) Custom-property extraction added to :root —
 *      --wume-section-padding-mobile (4rem), --wume-section-padding-phone
 *      (3rem), --wume-hero-padding-mobile (5rem 0 4rem),
 *      --wume-hero-padding-phone (4rem 0 3rem), --wume-mobile-sticky-offset
 *      (calc(var(--wume-nav-height,64px)+42px)). 991.98 + 768 padding rules
 *      and section[id] scroll-margin-top now read from these tokens.
 *      (3) !important reduction — V24 added !important on .wume-services-grid,
 *      .wume-doctor-digest-grid, .wume-press-swatch-grid, and the 575.98
 *      .wume-press-swatch-grid override (4 declarations) to defeat
 *      conflicting 768 grid rules. The 768 conflicts are now deleted at
 *      source; all 4 !important declarations dropped. Redundant 768
 *      duplicates of .wume-step-card, .wume-three-pillar, .wume-physician-row,
 *      and .wume-contact-panel-grid (4 blocks) deleted.
 *      Cache-bust ?v=23 → ?v=24.
 * V26 Phase C — extrapolated-pages mobile reflow rules added at the umbrella
 *      991.98 breakpoint (no figma reference; pattern extrapolation per spec
 *      section 3.3). All 6 pages already inherited the universal Phase B
 *      rules (.wume-section padding, .wume-hero scaling, section[id] scroll-
 *      margin, Bootstrap col flatten); per-page additions are minimal.
 *      Journal index — .wume-doctor-digest-grid already collapses to 1fr at
 *      991.98 (Phase B universal). New: .wume-pill-row flex-wraps with
 *      tighter gap on mobile so the 6-pill filter row does not overflow at
 *      375; .wume-pill scales font-size and padding down for thumb-friendly
 *      tap targets.
 *      Journal detail — .wume-article-body horizontal padding (1.25rem) so
 *      reading-column copy doesn't hug the viewport edge at <992; pull-quote
 *      scales down (1.6rem → clamp(1.2rem, 4.5vw, 1.5rem)) and indent
 *      compresses (24px → 16px) so it doesn't dominate at 375.
 *      Search — .wume-search-input-row stacks (input above button) so the
 *      search field gets full width; .wume-search-suggestions flex-wraps with
 *      tighter gap for the 6 suggestion pills; .wume-search-empty centers
 *      with 1.25rem horizontal padding.
 *      Account — .wume-account-split breakpoint moved 768 → 991.98 to align
 *      with the umbrella, .wume-account-split-pane padding tightens further
 *      at <992 (60px 32px → 48px 24px). Sign-in form pane is naturally first
 *      in DOM order so explicit `order: -1` is unnecessary; the existing
 *      DOM ordering already stacks form-above-invite as the spec intends.
 *      FAQ — accordion already vertical; .wume-faq-category gains tighter
 *      bottom margin at <992 (40px → 28px) so 6 categories don't push the
 *      footer too far.
 *      404 — .wume-404-band already centered single-element; minor padding
 *      tightening at <992 (no separate band rule needed; universal .wume-
 *      hero-tagline + .wume-hero-title scaling applies).
 *      Cache-bust ?v=24 → ?v=25.
 * V27 Mobile top-bar polish (post-domain-rename feedback):
 *      (1) Suppress Bootstrap's default 4px box-shadow focus ring on the
 *      hamburger (.navbar-toggler) and the sr-only in-drawer close X
 *      (.wume-mobile-menu-close) at every interactive state (:focus,
 *      :focus-visible, :active). The .border-0 utility class on the
 *      hamburger only kills the CSS border property; Bootstrap's :focus
 *      rule applies a separate rgba(0,0,0,0.65) 0 0 0 0.25rem box-shadow
 *      that reads as a heavy black "border" on click — removed entirely
 *      per user feedback.
 *      (2) margin-right: 12px on the hamburger so it doesn't sit flush
 *      against the logo's left edge at narrow viewports — there was zero
 *      gap (hamburger right=57.89px, logo left=57.89px), causing visual
 *      crowding even without the focus ring.
 *      Cache-bust ?v=25 → ?v=26.
 * V28 figma R1 mobile alignment — two corrections from the 2026-05-12 visual
 *      diff (figma-renders/r1-mobile-{care,pathways,physicians,visit}.png vs
 *      live-mobile-*.png):
 *      (1) Section padding rhythm — mobile reflow tokens bumped to widen the
 *      vertical breathing room between sections on Care/Home/Physicians/
 *      Visit so the live pages don't read as compressed against the figma
 *      pacing. --wume-section-padding-mobile 4rem → 5rem (+25%),
 *      --wume-section-padding-phone 3rem → 4rem, --wume-hero-padding-mobile
 *      5rem 0 4rem → 6rem 0 5rem (+20%), --wume-hero-padding-phone
 *      4rem 0 3rem → 5rem 0 4rem.
 *      (2) Brand-mark band — new .wume-brand-mark class added (cream ground,
 *      full-width wume-wordmark.png) so every page can render the giant
 *      brand wordmark figma R1 places between the last content section and
 *      the brown footer. base.html.twig V31 inserts the markup once in the
 *      shared footer area so all 5 main pages (and journal/search/account/
 *      faq/404) pick it up automatically.
 *      Cache-bust ?v=26 → ?v=27.
 * V29 figma R1 mobile alignment — editorial photo bands across the 4 main
 *      pages. Adds the .wume-photo-band utility class (full-bleed via
 *      100vw + center-shift, max-height clamped at 540/420/360 by viewport
 *      so portrait photos don't dominate). Markup additions in home/care/
 *      physicians/visit templates insert 7 total photo bands (Home 1,
 *      Care 3, Physicians 2, Visit 1) at section boundaries where figma
 *      R1 shows editorial photos and live did not. Closes the cross-cutting
 *      finding from the 2026-05-12 visual diff. Cache-bust ?v=27 → ?v=28.
 * V30 two more figma R1 alignment fixes:
 *      (1) Pathways "How It Works" diagram — replaces the compass-style
 *      .wume-how-it-works-* (N/E/S/W absolute-positioned phase labels
 *      around a center label) with .wume-pathway-rings, an inline-SVG
 *      4-overlapping-circle rosette matching figma R1's concentric/
 *      overlapping-ring visualization. Brand colors via CSS custom-property
 *      tokens; viewBox-driven scaling. The prior .wume-how-it-works-* CSS
 *      block is removed entirely (no other consumer).
 *      (2) Physicians 3-up thumbnail row — adds .wume-physician-thumbnail-row
 *      (grid-template-columns: repeat(3, 1fr)) and child rules so the
 *      non-Wu physicians (Hammerman + 2 placeholder Lorem Ipsum) render as
 *      a compact inline row matching figma R1 mobile. The prior 3 stacked
 *      .wume-physician-row sections in physicians.html.twig are consolidated
 *      by template restructure. Existing .wume-physician-row CSS untouched
 *      (still in use for Dr. Wu's full-width credential card). Drops to
 *      1-up only at <360px.
 *      Cache-bust ?v=28 → ?v=29.
 * V31 corrects the V30 Pathways "How It Works" diagram — the 4-overlapping-
 *      circle rosette was a misreading of figma. The actual figma R1 mobile
 *      diagram is a brown panel with TWO cream-stroke lines: a vertical
 *      "Ongoing Care" line (with downward arrowhead) and a curved bezier
 *      "Signature Pathway" line bowing right and rejoining. .wume-pathway-rings*
 *      rules removed and replaced with .wume-pathway-flow* (background +
 *      lines + labels). Markup also restructured in pathways.html.twig V09.
 *      Cache-bust ?v=29 → ?v=30.
 * V32 invite panel full rebuild — figma R1 mobile [94:5575]. Replaces the
 *      V21 brown-on-cream override (which itself replaced the original
 *      cream-on-cream invisible-text bug) with sand-on-cream + sage-green
 *      SEND. Color story flips from dark-mode panel to light-mode:
 *      - .wume-invite-panel background: brown → sand
 *      - .wume-invite-panel color: cream → brown
 *      - Close X color: cream → brown
 *      Markup-aligned rules added: .wume-invite-panel-header (kicker + X
 *      bar), .wume-invite-panel-kicker (REQUEST/INVITATION two-line caps
 *      label), .wume-invite-panel-form-card (cream inset for the form),
 *      .wume-invite-field + .wume-invite-label + .wume-invite-input (line-
 *      underline form rows replacing Bootstrap .form-control box style),
 *      .wume-invite-fieldset + .wume-invite-check (checkbox groups for
 *      Interest + Contact Method), .wume-invite-send (sage-green full-
 *      width SEND replacing Submit/Cancel pair), .wume-invite-panel-footer
 *      (address + emails + phone block below the form card).
 *      The V07 baseline rules for .wume-invite-panel-inner h2/p/.form-
 *      control are removed (no longer applicable — different markup).
 *      Cache-bust ?v=30 → ?v=31.
 * V33 invite panel responsive layout — adds the desktop two-column card
 *      from figma [94:3447]. At <992px the panel stays as the V32 mobile
 *      stack (cream form-card inset, footer below). At ≥992px the panel
 *      becomes a 2-column grid: sand LEFT column (kicker + serif heading
 *      + subtitle + bottom contact info) and cream RIGHT column (form
 *      filling full height). Form-field pairs (firstName+lastName,
 *      email+phone) become 2-col on desktop. Checkbox groups (interest,
 *      contact-method) wrap their labels in .wume-invite-check-row so
 *      they're stacked on mobile and inline on desktop. Panel width
 *      bumped from 480px to 100vw mobile / 960px desktop. Close X moves
 *      to absolute top-right of the panel. Cache-bust ?v=31 → ?v=32.
 * V34 Home-page figma R1 desktop [94:681] high-fidelity overrides — all
 *      scoped via `body.is-home-page` so other pages stay untouched.
 *      (1) Hero text alignment flips center → left. .wume-hero gains
 *      position:relative; a new .wume-hero-content wrapper holds the title/
 *      subtitle/CTA pair at max-width 60%. The "from the practice of Dr.
 *      Jessica Wu" kicker moves out of the centered position above the
 *      heading and pins to absolute top-right of the hero band via a new
 *      .wume-hero-tagline--corner modifier. Below 992 the kicker falls back
 *      to centered/inline (figma mobile keeps centered hero so the corner
 *      pin is desktop-only).
 *      (2) Navbar background flips cream → brown on the home page, so the
 *      announcement bar + navbar + brown hero form one continuous brown
 *      chrome surface (figma R1 shows no two-tone break). Nav links + Sign
 *      In + Cart icon recolor cream so they read on the brown ground.
 *      Border-bottom changes sand → lbrown so the seam isn't visible.
 *      (3) New .wume-press-logo-grid utility (4-up real logo images,
 *      max-height 48px, contain-fit). Replaces the 6-up text-swatch grid
 *      on the home press strip. Stacks 4→2 at <992 and 2→1 at <576.
 *      Cache-bust ?v=32 → ?v=33.
 * V35 Care-page figma R1 desktop [94:1510] high-fidelity overrides — all
 *      scoped via `body.is-care-page` so other pages stay untouched.
 *      (1) Hero background flips cream → sage. Hero becomes a 2-column
 *      layout: heading + jump-links in the LEFT column, body paragraph
 *      indented to the middle-right column. New .wume-hero-body class for
 *      the right-column body paragraph (replaces the centered
 *      .wume-hero-subtitle treatment on this page).
 *      (2) Jump links on Care flip from centered to LEFT-aligned and gain
 *      a bullet/marker prefix via :before pseudo-element. Override scoped
 *      so other pages keep the centered cluster.
 *      (3) Announcement bar hidden on Care since figma shows no
 *      announcement strip above the sage-toned navbar.
 *      (4) Navbar background flips cream → sage, border-bottom darker-sage.
 *      Nav-link / Sign In / cart-icon colors stay BLACK per the brand
 *      text-on-bg rule (sage → black, page 36 binding).
 *      (5) New .wume-three-pillar-rows class for the Care 3-pillar block:
 *      3 stacked rows, each a 3-column row (small square photo LEFT +
 *      kicker MID-LEFT + body paragraph RIGHT). Distinct from
 *      .wume-three-pillar (still used by physicians.html.twig for the
 *      "Our Standard" 6-pillar grid; untouched).
 *      (6) New .wume-step-card-body-row class for the step-card LEFT
 *      half's sub-2-column treatment: narrow far-LEFT column for the
 *      "step I." kicker, wider INDENTED middle column for the body
 *      paragraph. Heading stays on top spanning the full left half.
 *      Cache-bust ?v=33 → ?v=34.
 * V36 Care-page V08-fix: forces all 4 step-card photos to the RIGHT side
 *      via body.is-care-page .wume-step-card > .wume-step-card-image
 *      { order: 2 }, overriding the existing .wume-step-card:nth-child(even)
 *      rule that only flipped even-indexed images. Figma R1 Care keeps
 *      photos on the RIGHT for all 4 steps (no alternation); the
 *      alternation pattern was unique to live and a fidelity miss in V35.
 *      Scoped to body.is-care-page so other pages that consume
 *      .wume-step-card keep their alternating behavior.
 *      Cache-bust ?v=34 → ?v=35.
 * V37 Pathways-page figma R1 desktop [94:1855] high-fidelity overrides —
 *      all scoped via `body.is-pathways-page`. Mirrors the Care V35 hero
 *      pattern but uses BROWN chrome (Pathways' existing hero is brown).
 *      (1) Announcement bar hidden on Pathways since figma shows no
 *      announcement strip above the brown-toned navbar.
 *      (2) Navbar background flips cream → brown, border-bottom darker-
 *      brown. Nav-link / Sign In / cart-icon colors flip to cream per
 *      the brand text-on-bg rule (brown → cream, page 36 binding).
 *      (3) Hero becomes a 2-column layout: heading + jump-links anchor
 *      the LEFT column, body paragraph (.wume-hero-body) indented to the
 *      middle-right column.
 *      (4) Jump links flip from centered to LEFT-aligned and gain a "□"
 *      bullet/marker prefix. Cream-text + cream-border colored via scoped
 *      selectors (replaces the inline `style="color: var(--wume-cream)"`
 *      attributes that lived on each <a> in pathways.html.twig V09).
 *      Cache-bust ?v=35 → ?v=36.
 * V38 Physicians-page figma R1 desktop [94:1992] high-fidelity overrides —
 *      all scoped via `body.is-physicians-page`. Mirrors the Care V35
 *      pattern but uses SAND chrome (warm beige) to match figma's hero
 *      tone.
 *      (1) Announcement bar hidden on Physicians.
 *      (2) Navbar background flips cream → sand, border-bottom sand →
 *      lbrown. Nav-link / Sign In / cart icon colors stay BLACK per the
 *      brand text-on-bg rule (sand → black).
 *      (3) Hero becomes a 2-column layout: heading + jump-links anchor
 *      the LEFT column, body paragraph (.wume-hero-body) indented to the
 *      middle-right column. Hero element gains class `wume-section-alt`
 *      in the template so the existing .wume-hero.wume-section-alt
 *      compound rule paints the hero sand.
 *      (4) Jump links flip from centered to LEFT-aligned and gain "□"
 *      bullet/marker prefix on each link.
 *      Cache-bust ?v=36 → ?v=37.
 * V39 Visit-page figma R1 desktop [94:2183] high-fidelity overrides — all
 *      scoped via `body.is-visit-page`. Lighter than Care/Pathways/
 *      Physicians since figma's Visit hero is CREAM (same as the navbar
 *      base) — no chrome color flip is needed; only the announcement bar
 *      is hidden so the cream surface runs continuous from page-top
 *      through the hero.
 *      (1) Announcement bar hidden on Visit.
 *      (2) Hero becomes a 2-column layout: heading + jump-links anchor
 *      the LEFT column, body paragraph (.wume-hero-body) indented to the
 *      middle-right column.
 *      (3) Jump links flip from centered to LEFT-aligned and gain "□"
 *      bullet/marker prefix on each link.
 *      Cache-bust ?v=37 → ?v=38.
 * V40 Mobile fidelity fix across all 5 pages (Home V34, Care V35,
 *      Pathways V37, Physicians V38, Visit V39). The previous mobile
 *      fallbacks wrongly re-centered the hero treatment and the jump-link
 *      cluster on <992. Figma mobile keeps:
 *        - Hero heading + body LEFT-aligned (just like desktop, but body
 *          stacks BELOW heading instead of in a right column).
 *        - Home kicker (FROM THE PRACTICE OF DR. JESSICA WU) LEFT-aligned
 *          at the TOP of the hero (above the heading), not centered.
 *        - Jump links VERTICALLY STACKED, each on its own row, LEFT-
 *          aligned with the "□" marker prefix.
 *      Changes:
 *      (1) V34 Home @media block: text-align center → left on
 *          .wume-hero and .wume-hero-tagline--corner.
 *      (2) V35 Care, V37 Pathways, V38 Physicians, V39 Visit @media
 *          blocks: .wume-jump-links justify-content:center →
 *          flex-direction:column + align-items:flex-start + gap:12px,
 *          so the jump-links stack vertically.
 *      Cache-bust ?v=38 → ?v=39.
 * V41 Physician Application form support — figma R1 [PhysicianApplication
 *      desktop + PhyisicanApplicationMobile mobile]. The new
 *      `#physicianApplicationPanel` aside uses the SAME `.wume-invite-panel`
 *      class as the patient invite panel so it inherits all V32+V33
 *      styling (sand outer + cream form card + line-underline inputs +
 *      sage SEND + 2-col responsive). Only the file upload field needs
 *      new styling — new .wume-invite-upload-btn class (cream-on-sand
 *      cube button below the field label, replaces a "choose file" file-
 *      input control). Cache-bust ?v=39 → ?v=40.
 * V42 Home bottom "Request an Invitation" CTA layout fix to match figma
 *      mobile HomeMobile.jpg bottom band:
 *      (1) Heading + subtitle left-align (text-center removed from
 *          section markup in home.html.twig V14).
 *      (2) Subtitle rule margin override: section-scoped via
 *          `body.is-home-page .wume-invite-form .wume-section-subtitle`
 *          to drop the centered `margin: 0 auto` so the subtitle
 *          left-aligns inside the container.
 *      (3) GET STARTED button on the bottom CTA flips cream-on-brown
 *          (old V09 inline style) to sage-on-cream (figma color), and
 *          becomes full-width.
 *      (4) LOGIN link stays centered below the full-width button via
 *          the existing `d-flex flex-column align-items-center` wrapper.
 *      Photo (hourglass product image figma shows above the subtitle)
 *      is deferred to a later cycle — figma hash not yet identified
 *      (REST API node-tree endpoint 429-blocked).
 *      Cache-bust ?v=40 → ?v=41.
 * V43 Footer fidelity fix to match figma desktop + mobile sage footer:
 *      (1) `.wume-footer` background flips brown → SAGE GREEN. Text and
 *          link colors flip from cream-on-brown to BLACK-on-sage per the
 *          brand text-on-bg rule (sage → black, page 36 binding).
 *          Affected rules: .wume-footer, .wume-footer a,
 *          .wume-footer-heading, .wume-footer-text,
 *          .wume-footer-newsletter-heading, .wume-footer-links a,
 *          .wume-footer-bottom, .wume-footer-bottom p,
 *          .wume-footer-newsletter .form-control (input bg + border +
 *          placeholder colors), .wume-footer .wume-btn-outline.
 *      (2) `.wume-footer-newsletter` form layout flips from stacked
 *          (input above button) to INLINE (email input on LEFT + SUBSCRIBE
 *          on RIGHT) via display:flex on the form. Mobile fallback under
 *          575.98 stacks them back vertically.
 *      Cache-bust ?v=41 → ?v=42.
 * V44 follow-up to V43 inline newsletter: hardens the rules to win over
 *      Bootstrap `.form-control { width: 100%; }` and the `mb-2` + `w-100`
 *      utility classes that were also on the input/button in the markup.
 *      Adds `!important` on flex-direction:row on the form, on width:auto
 *      on the input + button. The markup change in base.html.twig V47
 *      drops `mb-2` and `w-100` from the input/button — making the
 *      !important fallbacks belt-and-suspenders for any custom override.
 *      Cache-bust ?v=42 → ?v=43.
 * V45 Navbar fidelity pass to match figma R1 home frame [94:681]. Markup
 *      partner is base.html.twig V48 (logo no me-auto, nav-items mx-auto,
 *      hamburger moved to far right, dual-PNG wordmark, search + person
 *      icons replacing the Sign In text link, request button hidden on
 *      mobile).
 *      Scoping: most rules are body.is-home-page so other pages keep their
 *      current navbar styling. The global primitives are: .wume-logo-img
 *      defaults (cream variant hidden by default), .wume-nav-icon sizing,
 *      and the @media (max-width: 991.98) mobile margin rule.
 *      (1) Announcement bar on home flips brown → sage, text + link colors
 *          flip cream → brown.
 *      (2) `.wume-navbar` on home loses its border-bottom so the brown
 *          flows seamlessly from navbar into the brown hero.
 *      (3) Wordmark visibility — `.wume-logo-img--light` hidden by default,
 *          `.wume-logo-img--dark` visible; on body.is-home-page these flip.
 *      (4) New `.wume-nav-icon` primitive for the search / person / cart
 *          icons — uniform 38×38 hit target, color inherits, hover fades
 *          opacity to 0.7.
 *      (5) Desktop nav links on home drop the global uppercase + caps-
 *          letter-spacing and render in sentence case (figma shows "Care"
 *          not "CARE").
 *      (6) `.wume-btn-request` on home flips from solid black to cream-
 *          outline on brown (transparent fill, 1px cream border, cream
 *          text); hover inverts to cream fill + brown text.
 *      (7) Mobile (<992): `.wume-nav-right` gets margin-left:auto so the
 *          cart cluster anchors right of the (empty) middle, and the
 *          hamburger sits flush after it.
 *      Cache-bust pairs with base.html.twig V48 ?v=43 → ?v=44.
 * V46 Follow-up to V45: search + person icons rendered black on the brown
 *      home navbar because they use `color: inherit` and the navbar had
 *      no color set, so they fell back to the body's default. The cart
 *      worked because it has its own explicit home-page color rule.
 *      Hamburger also rendered in Bootstrap's default rgba(0,0,0,0.65).
 *      Fix: set `color: var(--wume-cream)` on body.is-home-page
 *      .wume-navbar (cascade) plus an explicit rule on the .navbar-toggler
 *      to override Bootstrap's dark default. Nothing else changes —
 *      existing explicit color rules on .nav-link and .wume-cart-icon
 *      remain as belt-and-suspenders.
 *      Cache-bust pairs with base.html.twig V49 ?v=44 → ?v=45.
 * V47 Fix dual-wordmark regression on non-home pages (audit item A).
 *      The V45 rule `.wume-logo-img--light { display: none; }` was
 *      being beaten in the cascade by an older `.wume-logo img
 *      { display: block; }` rule (specificity 0,1,1 vs 0,1,0), so both
 *      wordmark variants rendered side by side on Care, Pathways,
 *      Physicians, and Visit. Fix: prefix each show/hide selector with
 *      `.wume-logo ` (specificity 0,2,0) so they win the cascade. No
 *      markup change.
 * V48 Move WUME wordmark INTO the sage footer (audit item B). Pre-V48
 *      the wordmark rendered as a standalone <section class="wume-brand-
 *      mark"> band above the footer, using the original black-on-white
 *      opaque PNG — which read as a giant white-tile rectangle. Figma R1
 *      shows the large wordmark INSIDE the sage footer as one cohesive
 *      band, cream-on-sage. Changes:
 *      (1) `.wume-brand-mark` rules retired (the standalone cream-tile
 *          element no longer exists in markup).
 *      (2) New `.wume-footer-wordmark-row` + `.wume-footer-wordmark`
 *          rules render the wordmark at full container width at the top
 *          of the sage footer.
 *      (3) Markup move lives in base.html.twig V50 (section deleted,
 *          new <img> inserted as first row of `.wume-footer .container`).
 *          The img src points at the new wume-wordmark-cream.png
 *          transparent-background variant so cream letters appear
 *          directly on the sage ground.
 *      Cache-bust pairs with base.html.twig V50 ?v=45 → ?v=46.
 * V49 Bottom "Request an Invitation" CTA — photo background + brown
 *      translucent overlay (audit item C). Figma R1 shows this section
 *      as the editorial "hands holding hourglass" photo (figma image hash
 *      73f1a227e63e03c4b59e4f67d951933272caa5d6.png) with a brown
 *      ~55%-opacity tint layered on top. Live previously rendered as a
 *      flat brown band. Single-rule CSS change targeting
 *      `.wume-invite-form.wume-section-brown` — uses multi-background
 *      with a linear-gradient (overlay) above a background-image (photo).
 *      Applies globally; every page that uses this section markup picks
 *      up the treatment.
 *      Cache-bust pairs with base.html.twig V51 ?v=46 → ?v=47.
 * V50 Heading + subtitle left-alignment cascade (audit item D). Figma
 *      R1 left-aligns most section headings and supporting bodies; the
 *      live templates had `text-center` on the `<section>` markup of
 *      many sections, which Bootstrap turns into `text-align: center
 *      !important`, cascading down to the heading + subtitle inside.
 *      Fix: remove `text-center` from the targeted sections (care
 *      bottom CTA, pathways integrated-care, physicians experience +
 *      truly + practice + heading wrappers, home services strip +
 *      testimonials wrapper, visit heading wrapper) in the templates.
 *      The press-strip and tile-card centered usages stay as-is. CSS
 *      gains a `:not(.text-center)` rule on `.wume-section-subtitle`
 *      so the subtitle's `max-width: 600px; margin: 0 auto` box-
 *      centering doesn't leave a narrow centered column under a left-
 *      aligned heading.
 *      Cache-bust pairs with base.html.twig V52 ?v=47 → ?v=48.
 * V51 Extend the V50 `:not(.text-center)` subtitle rule to also cover
 *      `.wume-invite-form:not(.text-center)` so the Care bottom CTA's
 *      subtitle anchors to the container's left edge instead of staying
 *      in a 600px centered box next to the now left-aligned heading.
 *      Cache-bust pairs with base.html.twig V53 ?v=48 → ?v=49.
 * V52 Home mobile carousels (audit item 2) + sage footer 2-photo grid
 *      (audit item 4).
 *      Item 2: Home's `.wume-services-grid` (7 treatment tiles) and the
 *      "Real stories" testimonial row both stack vertically on mobile,
 *      doubling the page height vs figma's horizontal-scrolling
 *      carousels. New @media (max-width: 991.98) rules flip both to
 *      flex-row + overflow-x auto + scroll-snap-type x mandatory. Each
 *      tile takes ~75% of viewport width, each testimonial card takes
 *      ~80%, so the next tile/card peeks at the right edge as an
 *      affordance. The testimonial row gets a scoping class
 *      `wume-testimonial-row` added in home.html.twig V17 so this rule
 *      doesn't bleed onto other Bootstrap `.row` elements site-wide.
 *      Item 4: New `.wume-footer-photos` 2-col CSS grid rule for the
 *      2-photo block inside the sage footer (markup added in
 *      base.html.twig V54 between the wordmark row and the content
 *      row). Photos use the two figma Section-8 hashes already
 *      identified in the home image map memory (`3745aace…` and
 *      `9668b693…`) — portrait crops, full-width on mobile + desktop.
 *      Cache-bust pairs with base.html.twig V54 ?v=49 → ?v=50.
 * V53 Final-figma foundation: real @font-face for Rhymes Text Light (replaces
 *      the Georgia fallback for all headings); palette corrected to the
 *      design-system Color board (cream/stone #F2F0EB → #F4F1EB, sand
 *      #D4C9B0 → #E3DDCD); heading weight 400 → 300 (all headings Light);
 *      heading tracking -0.02em → -0.03em (-3%). Paired with base ?v=52.
 * V54 Home final-figma rebuild styles: .wume-hero-final + .wume-hero-band,
 *      .wume-section-sage feature band, .wume-pathway-cards (4 Signature
 *      Pathways), .wume-steps (what-happens-at-wume), .wume-img-cover,
 *      .wume-link-underline, .wume-stories-head. Pairs with home.html.twig
 *      V18 and base.html.twig ?v=53.
 * V55 Pathway-card corner icon (.wume-pathway-card-icon, bi-arrow-up-right):
 *      cards become position:relative with the up-right arrow pinned
 *      top-right. Pairs with home.html.twig V20 + base ?v=54.
 * V56 Home rebuilt to match home.png section crops: per-section bg classes
 *      (sand/stone/sage), sage/sand buttons, animated hero carousel, the
 *      editorial feature pattern (heading on top + small-caps label with
 *      indented body + side image), top-left card arrows, step-number
 *      column, brown story cards, photo-overlay CTA. Pairs with
 *      home.html.twig V21 + base ?v=55.
 * V57 Home redone with EXACT get_design_context values: 36px .wume-x
 *      container, sharp sage/sand buttons (no radius, 14px black caps),
 *      14px caps underline links, translucent cards with the real figma
 *      arrow asset + 30px label, 50/40/30px headings, real figma photos.
 *      Pairs with home.html.twig V22 + base ?v=56.
 * V58 Navbar to figma: announcement warm-brown #715434 no-underline (X hidden),
 *      nav bg sand, nav links sentence-case 16px regular, Start-With-WUME a
 *      translucent outlined box (black caps, sage on hover), 36px margins.
 *      Pairs with base ?v=57.
 * V59 Nav CTA border -> white (was dark); nav search/account/cart icons
 *      swapped to the real figma SVGs (.wume-nav-icon-img). Pairs base ?v=58.
 * V60 Section-bg selectors made specific (.wume-section.wume-bg-*) so sage +
 *      sand bands win over .wume-section; pathway tiles + stories are real
 *      auto-carousels; tiles 464px, sage on hover, arrow -38deg; what-happens
 *      label one line. Pairs home.html.twig V23 + base ?v=59.
 * V61 Home bottom + nav + footer figma fixes: Real-stories section bg
 *      stone -> sand; story cards turn sand on hover (dark text + shadow so
 *      they stay visible on the sand ground); CTA rebuilt as a frosted-glass
 *      panel over the (parallax) warm hourglass photo with a sharp top-right
 *      inset; scrolled nav gets the figma 85%-sand + blur glass; the
 *      full-page mega-menu veil (body::before) is neutralized so the glass
 *      lives on the nav, not over the page; nav-link hover is a frosted
 *      square (not underline) + nav icons fade on hover; footer WUME wordmark
 *      constrained 100% -> 440px and the 2 footer photos capped to a 440px
 *      column (were full-width). Pairs home.html.twig V25 + base ?v=60.
 * V62 Home-figma round 2: pathway arrow -> top-right corner; what-happens
 *      image stretches to the steps height (was centered with big gaps); nav
 *      scroll-glass dropped 85% sand -> 55% stone so it reads as glass;
 *      Real-stories reverted sand -> stone (so the sand card-hover shows);
 *      footer rebuilt to the figma grid (black wordmark, uppercase address
 *      mid / social right / legal row bottom, less top space). Pairs
 *      home.html.twig V26 + base ?v=61.
 * V63 Dr Wu (World) section now layers the portrait over the stone-arches
 *      background (.wume-drwu-stack/bg/fg) at 74% width, floated bottom-right
 *      with a shadow (figma "doctor floats on a background picture"); Expert
 *      image swapped to the figma 3-people wood-room shot. Pairs home V27 +
 *      base ?v=62.
 * V64 Round 3 polish: nav scroll-glass 0.55 -> 0.30 (clearly translucent);
 *      footer address lines stack (were inline), "Join the WUME world"
 *      centered with the photos; footer left column 440 -> 560px, wordmark
 *      -> 540px, photos -> 560px, legal row confined to the left column and
 *      justified to the picture edges, social pulled ~75px off the page edge;
 *      Dr Wu portrait centered over the arches. Pairs home V28 + base ?v=63.
 * V65 PIXEL-EXACT pass (measured from figma home.png @1440 = 1:1 CSS px):
 *      footer rebuilt to exact px — content x=36..1342, wordmark 560px (aligns
 *      with the 36..596 pictures), col gap 132px (address starts x=728),
 *      pictures 560px wide / aspect 274:350 (=350px tall), vertical gaps
 *      top42/wordmark->pics70(28+42)/pics->legal42/bottom13, address+social
 *      wrapped in .wume-footer-right-top (col2), news bottom-aligned with the
 *      pictures, legal justified to the picture edges. `.wume-section` padding
 *      80 -> 44px (figma inter-section gaps are 68-100px, not 160). Nav -> near
 *      -clear glass rgba(255,255,255,.10/.12)+blur at BOTH states (figma liquid
 *      glass). Pairs home V28 + base ?v=64.
 * V66 Footer row2 pinned to grid-template-rows auto/350px/auto so the news box
 *      can't inflate it — pics->legal gap back to the figma 42px (was 82).
 * V67 404 page rebuilt to figma: .wume-404 cream centered error text +
 *      .wume-404-photos full-width 6-photo band (was a broken left-aligned
 *      single backdrop image with no desktop CSS). Pairs 404.html.twig V04 +
 *      base ?v=66.
 * V68 Stage-2 desktop 404: figma photo gaps 16px + 367px tall + ~130px text->band
 *      gap, scoped @min-width:992px (mobile 404 untouched). Pairs base ?v=67.
 * V69 Navbar solid on scroll for non-home pages (home keeps brown chrome). Hero
 *      bodies un-squeezed at wide viewports: care/pathways/physicians intro moved
 *      below the heading + widened (max-width 340px -> 670/470/470). Pairs ?v=74.
 * V70 Restored figma liquid-glass: navbar translucent/frosted at the top (rgba
 *      white 0.10 + 20px blur); .is-scrolled flips it solid cream as you scroll.
 *      V69 had wrongly flattened the top to solid too. Pairs base ?v=75.
 * V71 Reverted the erroneous solid-on-scroll: .is-scrolled is translucent again
 *      (rgba 0.12 + 22px blur — content shows through). The 4 per-page navbar
 *      color overrides scoped :not(.is-scrolled) so they tint only the first
 *      screen; once scrolled the bar is translucent site-wide. Pairs base ?v=76.
 * V72 Announcement strip wired to figma R1: shown on HOME (brown band, cream
 *      text via the default) + SEARCH (sage band, dark text). Removed the wrong
 *      sage-on-home override (pixel sample: home #4D3D2D/#715434 brown, search
 *      #949B88 sage). Pairs base ?v=77.
 * V73 Mobile home announcement bar deepened from the default lbrown (#715434)
 *      to --wume-brown (#4D3D2D) — the figma mobile home frame is a shade darker
 *      than desktop. Phones only. Pairs base ?v=78.
 * V74 Feature rows made width-responsive 992-1440: photo column fixed 522px ->
 *      min(522px, 38.2%) so it scales with the viewport instead of squeezing the text;
 *      .wume-feature-media img -> width:100% + aspect-ratio 522/654 (renders 522x654 at
 *      >=1440 as figma). Below 1200 the .wume-feature-row label stacks above the body so
 *      the body keeps a readable width (was crushing to ~140px near 1024). Pairs base ?v=79.
 * V75 Care steps de-compressed: .wume-step-card photo col 1fr->min(523px,41%) + image
 *      4/3->523/654 portrait (was 618x464 landscape, crushing each step) and inter-step
 *      margin 60->151 to match the figma step pitch (~805px). Pairs base ?v=80.
 * V76 Home closing CTA section padding 96px->16px (was +165 over the figma 439px band;
 *      the frosted panel now nearly fills the photo section as in figma). Pairs base ?v=81.
 * V77 Nav button margin-left 24px so the cart-count badge (absolute on the cart icon)
 *      clears the "Start with WUME" button instead of overlapping inside it. Pairs base ?v=82.
 * V78 Home Stories section: .wume-stories-head margin-bottom 40->130 so the heading-to-
 *      cards gap matches figma (the carousel sat too close under the heading). Pairs base ?v=83.
 * V79 Home Protocols (corner feature row) scoped spacing: section padding-top 44->95 and
 *      heading->body gap 48->108 to match figma (other feature rows untouched). Pairs base ?v=84.
 * V80 Home Dr-Wu (img-left row): .wume-drwu-stack aspect 522/600->522/635 (portrait was
 *      35px short of figma) + scoped section padding 51/48. Pairs base ?v=85.
 * V81 Footer made responsive: grid 560px+fixed 132/62 gap+pad overflowed the right
 *      column (address + social links ran past the right edge) below ~1100px while the
 *      left wordmark kept its margin. Now minmax cols + clamp gap/pad + right-top wraps.
 *      Pairs base ?v=86.
 * V82 Jump links: scroll-margin-top was mobile-only AND section-only, so DESKTOP +
 *      non-section (div) targets landed under the sticky nav. Now [id] scroll-margin-top
 *      (nav 72 + 16) base + mobile, covering every in-page anchor. Pairs base ?v=88.
 * V83 What-happens steps: hover a step to cross-fade the shared photo (.wume-steps-media
 *      / .wume-steps-img, data-step 1-4) and dim the other steps (Figma note 446:7858).
 *      Desktop hover only; mobile shows Step I. Pairs base ?v=89 + home.css ?v=2.
 * V84 Site-wide motion (chunk 1): smooth scroll (reduced-motion aware), subtle button
 *      hover fade, footer-link underline-on-hover, and scroll-reveal for body>section
 *      (guarded by html.wume-js + reveal-all failsafe). Pairs base ?v=90 + wume-motion.js ?v=3.
 * V85 Scroll-zoom (chunk 2a): plain feature-media photos clip + gently scale on scroll
 *      (JS, desktop, reduced-motion aware); Dr-Wu + steps stacks excluded. Pairs base ?v=91
 *      + wume-motion.js ?v=5.
 * V86 Care "what happens" sticky-stepper (chunk 3, Figma note 446:7846): .wume-care-steps /
 *      .wume-step-panel — desktop pins each step at a staggered offset (collapse-to-label),
 *      mobile = normal stack. Old .wume-step-card rules now unused. Pairs base ?v=92.
 * V87 Fix: panel background used undefined var(--wume-stone) (transparent -> collapsed steps
 *      bled through); corrected to var(--wume-cream) so pinned panels are opaque. Pairs base ?v=93.
 * V88 Home nav "Start with WUME" button fills sage green on hover (figma callout 446:7137)
 *      instead of cream; the body.is-home-page hover override at ~4183 was winning over the
 *      global sage hover. Pairs base ?v=94.
 * V89 Mobile drawer: Astra-style slide-sideways sub-menu (figma 446:7825) replaces the
 *      +/- accordion — .wume-mobile-slider viewport + .wume-mobile-panel / .wume-mobile-subpanel
 *      transforms, .wume-mobile-back affordance + chevron indicator. Pairs base ?v=95.
 * V90 Fix: the slider used overflow:hidden and a focus() scrolled it a full panel-width, so
 *      the wrong (last) sub-panel showed. overflow:clip (non-scrollable) + focus preventScroll
 *      in base V93 so the active panel renders correctly. Pairs base ?v=96.
 * V91 Global cart drawer (figma 446:7139): the "Your Bag" panel now slides in from the right
 *      on any page via the cart icon instead of navigating to /cart. Drawer-scoped bag styling
 *      (relocated from the cart-page-only cart.css) + slide/backdrop mechanism mirroring the
 *      invite panel. Pairs base ?v=97 + cart-drawer.js.
 * V92 Footer reveal (figma 446:7835): the footer is fixed behind a new .wume-page wrapper and
 *      uncovered as the page scrolls to the bottom; a base.html.twig script reserves the
 *      footer's measured height below the page. Pairs base ?v=98.
 * V93 Footer z-index 0 -> -1 (behind ALL content, not just .wume-page) so a stale-cache
 *      HTML/CSS mismatch can't paint the footer over the page (the Chrome-cache bug). Pairs base ?v=99.
 * V94 Scroll-reveal fix: the reveal rules now also match .wume-page > section (the footer-reveal
 *      wrapper nested the content sections a level deeper, so body > section stopped matching).
 *      Pairs base ?v=11. + wume-motion.js V05.
 * V95 Nav sibling-dimming (figma 446:7137): hovering one top nav item now fades the other
 *      top items (.wume-nav-items:hover .nav-link:not(:hover):not(:focus) -> opacity 0.4),
 *      so the hovered item stands out. Opacity-based, so it layers over every page's nav
 *      colour scheme without per-page duplication. Pairs base ?v=11..
 * V96 Legal-page + cookie-consent styling: .wume-legal-* prose column for the /privacy,
 *      /terms, /cookie-policy skeleton pages, and .wume-cookie-* for the site-wide consent
 *      banner (brown band, sage Accept, cream outlines). Pairs base ?v=11. / V100.
 * V97 Two fixes: (a) nav "Start with WUME" button gets white-space:nowrap so the label stays
 *      on one line at the top, not only when scrolled. (b) Stories carousel is now click-
 *      controlled — pause/highlight keyed off .is-paused/.is-selected (set by the home script)
 *      instead of :hover; the :hover cue is guarded to (hover:hover) so it can't stick on touch,
 *      and .wume-story-card gets cursor:pointer. Pairs base ?v=11. / V101.
 * V98 .wume-photo-band overflow fix: full-bleed no longer uses left:50%+translateX(-50%) (the
 *      site-wide scroll-reveal transform overwrote it, shoving the band ~500px right -> horizontal
 *      overflow -> tablet shrink-to-fit). Now width:100vw + max-width:100% + margin:0 auto, so it
 *      centres via margin and can never exceed its container. Pairs base ?v=5.
 * V99 Mega-menu overview link (.wume-megamenu-overview): each panel now leads with a prominent serif
 *      link to its top page (spans the grid, above the columns) — fixes the nav gap where the
 *      Care/Pathways/Physicians/Visit/Shop overview pages had no obvious menu entry. Pairs base ?v=6.
 * V100 Explicit typography fundamentals: body gains font-weight var(--wume-w-body,400) + font-size
 *      1rem (weight previously fell through to the Bootstrap CDN body rule — the same silent
 *      dependency fixed on the Sylius side in wume-sylius.css V04), and b/strong pinned to Medium
 *      500 — no 700-weight file ships (Unica77 Regular+Medium only), so 'bolder' made browsers
 *      synthesize a fake bold. Pairs base ?v=7.
 * V101 Mega-menu overview hover underline scoped to the label span (.wume-megamenu-overview-label,
 *      base.html.twig V109): underlining the inline-flex anchor also drew the line under the arrow
 *      flex item; underlining only the text span can never touch the arrow. Pairs base ?v=8.
 * V102 Two mega-menu readability fixes: force .wume-megamenu-panel text dark (the home
 *      navbar sets color:cream, inherited by the panels; the "Featured" paragraphs had no
 *      own colour and rendered cream-on-cream), and restore the outline buttons' cream-on-
 *      black hover (the panel link-hover rule out-specified .wume-btn-outline:hover). Pairs base ?v=9.
 * V103 (1) Dr-Wu desktop foreground shrunk 72/82 -> 66/71 to match the mobile portrait size
 *      and give the parallax (wume-motion.js V06) more background to drift against. (2) Grey
 *      glass: .wume-navbar--on-white (toggled by base V116 when a near-white bg is under the
 *      bar) gets a translucent grey background so the bar + text stay legible where the white
 *      glass would vanish. (3) Mobile sub-panel title styled for its new <a> form (no underline).
 *      Pairs base ?v=11.
 * V104 Dr-Wu desktop foreground shrunk a further 10% to 59/64 (matches home.css V04). Pairs base ?v=12.
 * V105 Dr-Wu desktop foreground increased 10% to 73/78 (matches home.css V05). Pairs base ?v=13.
 * V106 The generic .wume-feature-media img rule (max-width:522px + aspect-ratio) no longer applies to
 *      the Dr-Wu layered stack — added :not(.wume-drwu-stack), matching the exclusion line 868 already
 *      has. The 522px cap froze the bg + fg on WIDE mobile viewports (unfolded foldables ~640-880px),
 *      so the background could not fill the stack and the portrait spilled outside it. Pairs base ?v=14.
 * V107 What-happens steps: the label, photo and steps are now three direct children of
 *      .wume-feature--steps (was label+steps wrapped together, photo a sibling after). Desktop uses
 *      grid-template-areas "label photo" / "steps photo" so label+steps stay left and the photo spans
 *      the right column exactly as before; mobile (home.css V08) stacks them label -> photo -> steps to
 *      match figma (photo was previously dumped below the last step on phones). Pairs base ?v=15.
 * V108 Reveal-password toggle: .wume-pw-wrap overlays an eye button (.wume-pw-toggle) at the right edge
 *      of every password field; the button itself is injected by the site-wide script in
 *      base.html.twig V122. Also adds .wume-cookie-pref-* for the accept / decline controls now on the
 *      Cookie Policy page (cookie_policy.html.twig V02). Pairs base ?v=16.
 */

/* ── Unica 77 LL Web Fonts ── */
@font-face {
    font-family: 'Unica77';
    src: url('/fonts/Unica77LLWeb-Regular.woff2') format('woff2'),
         url('/fonts/Unica77LLWeb-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unica77';
    src: url('/fonts/Unica77LLWeb-Medium.woff2') format('woff2'),
         url('/fonts/Unica77LLWeb-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── Rhymes Text (heading family) ──
   Light is the only weight the final design uses; supplied from
   maxitype.zip, served from /fonts/. OTF is accepted by all modern
   browsers via format('opentype'). */
@font-face {
    font-family: 'Rhymes Text';
    src: url('/fonts/RhymesText-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    /* === BRAND COLOR PALETTE (Wume Brand Style Guide page 35) === */
    --wume-cream:   #F4F1EB;
    --wume-sand:    #E3DDCD;
    --wume-sage:    #949B88;
    --wume-lbrown:  #715434;
    --wume-brown:   #4D3D2D;
    --wume-black:   #000000;
    --wume-paper:   var(--wume-cream); /* Wume "white" — use anywhere CSS would normally use #ffffff */

    /* Text-on-background rule (page 36, binding) */
    --wume-text-on-cream:  var(--wume-black);
    --wume-text-on-sand:   var(--wume-black);
    --wume-text-on-sage:   var(--wume-black);
    --wume-text-on-lbrown: var(--wume-cream);
    --wume-text-on-brown:  var(--wume-cream);
    --wume-text-on-black:  var(--wume-cream);

    /* === TYPOGRAPHY === */
    --wume-font-heading: 'Rhymes Text', Georgia, 'Times New Roman', serif;
    --wume-font-body:    'Unica77', Arial, Helvetica, sans-serif;

    --wume-w-heading-display: 300; /* Rhymes Text Light, hero only */
    --wume-w-heading:         300; /* Rhymes Text Light — final figma: all headings Light */
    --wume-w-body:            400;
    --wume-w-sub:             500; /* Unica 77 Medium for ALL CAPS kicker/CTA */

    --wume-tracking-heading: -0.03em; /* final figma: -3% on headings */
    --wume-tracking-caps:    0.06em;

    /* Leading: brand strict is size+2pt (~1.13 ratio) — relaxed to 1.4 for body
       prose readability; tables/forms get the brand-strict editorial rhythm. */
    --wume-lead-body:     1.4;
    --wume-lead-clinical: 1.45;
    --wume-lead-heading:  1.13;

    /* === LAYOUT === */
    --wume-nav-height: 72px;

    /* === MOBILE REFLOW TOKENS (V25 Phase B cascade fix; V28 widened for figma rhythm) ===
       Named replacements for the 4rem / 3rem / 106px magic numbers that the
       Phase B 991.98 + 768 media blocks shared. V28 bumped section padding
       4rem → 5rem (mobile) and 3rem → 4rem (phone), and hero padding
       5rem 0 4rem → 6rem 0 5rem (mobile) and 4rem 0 3rem → 5rem 0 4rem
       (phone) so mobile sections breathe closer to figma R1 mobile rhythm.
       Section padding +25%, hero padding +20%. */
    --wume-section-padding-mobile: 5rem;       /* applied at <992 (tablet/phone) — V28: was 4rem */
    --wume-section-padding-phone:  4rem;       /* applied at <769 (phone-tighter) — V28: was 3rem */
    --wume-hero-padding-mobile:    6rem 0 5rem; /* V28: was 5rem 0 4rem */
    --wume-hero-padding-phone:     5rem 0 4rem; /* V28: was 4rem 0 3rem */
    --wume-mobile-sticky-offset: calc(var(--wume-nav-height, 64px) + 42px); /* announcement + nav */
}

/* ── Home (final figma) — EXACT values from get_design_context [446:920] ── */
/* 36px-margin content container (figma 1440 grid) */
.wume-x { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 36px; }

/* section backgrounds */
.wume-section.wume-bg-sand  { background: var(--wume-sand); }
.wume-section.wume-bg-stone { background: var(--wume-cream); }
.wume-section.wume-bg-sage  { background: var(--wume-sage); color: var(--wume-black); }

/* buttons — SHARP corners, 14px black caps, sage / sand (figma 446:983 / 446:973) */
.wume-btn-sage, .wume-btn-sand {
    display: inline-block; border: none; border-radius: 0; padding: 15px 80px;
    font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); cursor: pointer;
}
.wume-btn-sage { background: var(--wume-sage); }
.wume-btn-sand { background: var(--wume-sand); }
.wume-btn-sage:hover { background: #868d77; color: var(--wume-black); }
.wume-btn-sand:hover { background: #d6cdb6; color: var(--wume-black); }

/* links — underline at default offset, 14px black caps (figma 446:933 etc.) */
.wume-link-underline {
    display: inline-block; margin-top: 28px; font-family: var(--wume-font-body);
    font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em;
    text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 2px; color: inherit;
}

/* ── Site-wide motion, chunk 1 (Figma notes 446:7820/7828/7829 + reveal-on-load 446:7819) ── */
html { scroll-behavior: smooth; }
.wume-btn-sage, .wume-btn-sand, .wume-btn-primary, .wume-btn-outline {
    transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.wume-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* scroll-reveal: content sections fade + rise in as they enter view. Guarded by
   html.wume-js (set inline in <head> pre-paint); html.wume-reveal-all is a failsafe
   that shows everything after a timeout even if the motion script never runs. */
html.wume-js body > section,
html.wume-js .wume-page > section {
    opacity: 0; transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform;
}
html.wume-js body > section.is-revealed,
html.wume-js .wume-page > section.is-revealed,
html.wume-reveal-all body > section,
html.wume-reveal-all .wume-page > section { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.wume-js body > section,
    html.wume-js .wume-page > section { opacity: 1; transform: none; transition: none; }
}

/* HERO (sand) — centered, 50px headline, animated photo carousel */
.wume-hero-final { background: var(--wume-sand); padding: 72px 0 0; text-align: center; }
.wume-hero-final-copy { max-width: 820px; margin: 0 auto; }
.wume-hero-final-title {
    font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2;
    letter-spacing: -1.5px; margin: 0 auto; max-width: 780px;
}
.wume-hero-final-subtitle {
    font-family: var(--wume-font-body); font-weight: 400; font-size: 18px; line-height: 1.4;
    max-width: 563px; margin: 28px auto 32px;
}
.wume-hero-final .wume-btn-sage { margin: 0; }
.wume-hero-band { overflow: hidden; margin-top: 56px; }
.wume-hero-band-track { display: flex; gap: 16px; width: max-content; animation: wume-band-scroll 60s linear infinite; }
.wume-hero-band:hover .wume-hero-band-track { animation-play-state: paused; }
.wume-hero-band-track img { flex: 0 0 auto; width: 243px; height: 365px; object-fit: cover; }
@keyframes wume-band-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }

/* feature pattern: 40px heading on top, [185px label | indented 18px body] row, side image */
.wume-feature { display: grid; grid-template-columns: minmax(0, 1fr) min(522px, 38.2%); column-gap: 60px; align-items: center; }
.wume-feature--img-left { grid-template-columns: min(522px, 38.2%) minmax(0, 1fr); }
.wume-feature-title {
    font-family: var(--wume-font-heading); font-weight: 300; font-size: 40px; line-height: 1.2;
    letter-spacing: -1.2px; margin: 0 0 48px; max-width: 648px;
}
.wume-feature-row { display: grid; grid-template-columns: 230px 1fr; align-items: start; }
.wume-feature-label, .wume-feature-label--top {
    font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2;
    letter-spacing: 0.05em; text-transform: uppercase; color: inherit; margin: 0; max-width: 185px;
}
.wume-feature-label--top { margin: 0 0 28px; max-width: none; white-space: nowrap; }
.wume-feature-body { max-width: 479px; }
.wume-feature-body p { font-family: var(--wume-font-body); font-size: 18px; line-height: 1.4; margin: 0 0 10px; }
.wume-feature-media:not(.wume-drwu-stack) img { width: 100%; max-width: 522px; height: auto; aspect-ratio: 522 / 654; object-fit: cover; display: block; }
/* what-happens: image fills the steps column height so it hugs the steps (figma has little gap above/below) */
.wume-feature--steps { align-items: stretch; align-content: start; grid-template-areas: "label photo" "steps photo"; }
.wume-feature--steps > .wume-feature-label--top { grid-area: label; }
.wume-feature--steps > .wume-steps-media { grid-area: photo; }
.wume-feature--steps > .wume-steps { grid-area: steps; margin-top: 0; }
.wume-feature--steps .wume-feature-media img { height: 100%; min-height: 520px; }
/* scroll-zoom (chunk 2a, Figma note 446:7821): the main feature photos gently scale up as
   they travel through the viewport. Scoped to plain feature-media — the Dr-Wu parallax stack
   and the steps hover stack are excluded so the effects don't fight. Desktop only (JS-driven). */
.wume-feature-media:not(.wume-drwu-stack):not(.wume-steps-media) { overflow: hidden; }
.wume-feature-media:not(.wume-drwu-stack):not(.wume-steps-media) img { transform-origin: center center; will-change: transform; }
/* desktop-narrow (992-1199): stack the feature label above the body so the body keeps a
   readable width instead of squeezing into the leftover of the fixed 230px label column */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .wume-feature-row { grid-template-columns: 1fr; row-gap: 14px; }
    .wume-feature-label { max-width: none; }
}
/* Dr Wu (World) — figma floats the portrait (sketches backdrop) over the stone-arches background, smaller than the column */
.wume-drwu-stack { position: relative; aspect-ratio: 522 / 635; }
.wume-drwu-stack .wume-drwu-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wume-drwu-stack .wume-drwu-fg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 73%; height: 78%; object-fit: cover; display: block; box-shadow: 0 16px 44px rgba(0,0,0,0.32); }

/* protocols: heading + small 200px corner image */
.wume-feature--img-corner { grid-template-columns: 1fr 200px; align-items: start; column-gap: 40px; }
.wume-feature-corner-img img { width: 200px; height: 200px; object-fit: cover; display: block; }
/* Home Protocols (the corner-image feature row): figma gives it more top space and a
   larger heading->body gap than Expert/Steps. Scoped to the corner variant so the other
   feature rows (which already match figma) are untouched. */
body.is-home-page .wume-section:has(.wume-feature--img-corner) { padding-top: 95px; }
.wume-feature--img-corner .wume-feature-title { margin-bottom: 108px; }
/* Home Dr-Wu (img-left feature row): figma gives it slightly more top/bottom padding. */
body.is-home-page .wume-section:has(.wume-feature--img-left) { padding-top: 51px; padding-bottom: 48px; }

/* pathway cards — translucent panels, real arrow, 30px label, AUTO CAROUSEL, sage on hover */
.wume-pathway-cards { overflow: hidden; margin-top: 56px; }
.wume-pathway-track { display: flex; gap: 16px; width: max-content; animation: wume-cards-scroll 38s linear infinite; }
.wume-pathway-cards:hover .wume-pathway-track { animation-play-state: paused; }
@keyframes wume-cards-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
.wume-pathway-card {
    flex: 0 0 464px; display: flex; flex-direction: column; justify-content: space-between;
    height: 128px; padding: 16px 20px; background: rgba(254,254,252,0.4); text-decoration: none;
    transition: background .2s ease;
}
.wume-pathway-card:hover { background: var(--wume-sage); }
.wume-pathway-card-icon { width: 22px; height: 20px; display: block; transform: rotate(-38.41deg); align-self: flex-end; }
.wume-pathway-card-label {
    font-family: var(--wume-font-heading); font-weight: 300; font-size: 30px; line-height: 1.1;
    letter-spacing: -0.6px; color: var(--wume-black);
}

/* steps — STEP n left column, 30px title, 16px body */
.wume-steps { list-style: none; margin: 20px 0 0; padding: 0; }
.wume-steps li { display: grid; grid-template-columns: 115px 1fr; padding: 22px 0; }
.wume-step-num {
    font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); padding-top: 8px;
}
.wume-step-title {
    font-family: var(--wume-font-heading); font-weight: 300; font-size: 30px; line-height: 1.2;
    letter-spacing: -0.6px; margin: 0 0 6px; max-width: 558px;
}
.wume-step-body p { font-family: var(--wume-font-body); font-size: 16px; line-height: 1.4; margin: 0; max-width: 558px; }

/* what-happens steps: hover a step to cross-fade the shared photo + dim the other steps (Figma note 446:7858).
   Desktop hover only; on mobile (no hover) the slot simply shows the Step I photo. */
.wume-steps-media { position: relative; min-height: 520px; }
.wume-feature--steps .wume-steps-media .wume-steps-img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; min-height: 0;
    aspect-ratio: auto; object-fit: cover; display: block; opacity: 0; transition: opacity .5s ease;
}
.wume-feature--steps .wume-steps-media .wume-steps-img[data-step="1"] { opacity: 1; }
.wume-feature--steps:has(.wume-steps li:nth-child(1):hover) .wume-steps-img { opacity: 0; }
.wume-feature--steps:has(.wume-steps li:nth-child(1):hover) .wume-steps-img[data-step="1"] { opacity: 1; }
.wume-feature--steps:has(.wume-steps li:nth-child(2):hover) .wume-steps-img { opacity: 0; }
.wume-feature--steps:has(.wume-steps li:nth-child(2):hover) .wume-steps-img[data-step="2"] { opacity: 1; }
.wume-feature--steps:has(.wume-steps li:nth-child(3):hover) .wume-steps-img { opacity: 0; }
.wume-feature--steps:has(.wume-steps li:nth-child(3):hover) .wume-steps-img[data-step="3"] { opacity: 1; }
.wume-feature--steps:has(.wume-steps li:nth-child(4):hover) .wume-steps-img { opacity: 0; }
.wume-feature--steps:has(.wume-steps li:nth-child(4):hover) .wume-steps-img[data-step="4"] { opacity: 1; }
.wume-feature--steps .wume-steps li { transition: opacity .3s ease; }
.wume-feature--steps .wume-steps:hover li:not(:hover) { opacity: 0.4; }

/* stories — brown cards (quote top, name+headline bottom), horizontal scroll */
.wume-stories-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 130px; flex-wrap: wrap; }
.wume-stories-head .wume-section-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; margin: 0; }
.wume-stories-head .wume-link-underline { margin-top: 0; }
.wume-stories-cards { overflow: hidden; }
.wume-stories-track { display: flex; gap: 24px; width: max-content; animation: wume-stories-scroll 50s linear infinite; }
.wume-stories-cards.is-paused .wume-stories-track { animation-play-state: paused; }
@keyframes wume-stories-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }
.wume-story-card {
    flex: 0 0 439px; display: flex; flex-direction: column; justify-content: space-between;
    height: 398px; padding: 36px; background: var(--wume-lbrown); color: var(--wume-cream);
    cursor: pointer;
    transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
/* Click-selected tile (class set by the home stories script) — same sand highlight as hover. */
.wume-story-card.is-selected {
    background: var(--wume-sand); color: var(--wume-black);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
/* Hover cue for pointer devices only, so it can't stick on touch screens. */
@media (hover: hover) {
    .wume-story-card:hover {
        background: var(--wume-sand); color: var(--wume-black);
        box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    }
}
.wume-story-quote { font-family: var(--wume-font-heading); font-weight: 300; font-size: 30px; line-height: 1.2; letter-spacing: -0.6px; margin: 0; max-width: 362px; }
.wume-story-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.wume-story-name, .wume-story-headline { font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; }
.wume-story-headline { text-align: right; max-width: 130px; }

/* CTA — frosted-glass panel over the (blurred, parallax) warm hourglass photo + sharp inset. Figma 446:965 */
.wume-cta-final { background-size: cover; background-position: center; background-attachment: fixed; color: var(--wume-cream); padding: 16px 0; position: relative; }
.wume-cta-final::before { content: ""; position: absolute; inset: 0; background: rgba(77,61,45,0.18); pointer-events: none; }
.wume-cta-final .wume-x { position: relative; }
.wume-cta-glass {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
    padding: 56px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.28);
}
.wume-cta-inset { flex: 0 0 auto; }
.wume-cta-inset img { display: block; width: 132px; height: 168px; object-fit: cover; border: 1px solid rgba(255,255,255,0.35); }
.wume-cta-copy { max-width: 676px; }
.wume-cta-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; margin: 0 0 24px; }
.wume-cta-body { font-family: var(--wume-font-body); font-size: 18px; line-height: 1.4; max-width: 432px; margin: 0 0 32px; }
.wume-cta-actions { display: flex; align-items: center; gap: 40px; }
.wume-cta-login { color: var(--wume-cream); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-size: 14px; letter-spacing: 0.05em; font-weight: 500; }

@media (max-width: 991.98px) {
    .wume-x { padding: 0 20px; }
    .wume-cta-final { background-attachment: scroll; }
    .wume-cta-glass { flex-direction: column; padding: 32px; gap: 28px; }
    .wume-feature, .wume-feature--img-left, .wume-feature--img-corner { grid-template-columns: 1fr; row-gap: 28px; }
    .wume-feature--img-left .wume-feature-media { order: -1; }
    .wume-feature-row { grid-template-columns: 1fr; row-gap: 12px; }
    .wume-feature-media img { width: 100%; height: auto; aspect-ratio: 4/5; }
    .wume-feature-corner-img img { width: 120px; height: 120px; }
    .wume-hero-final-title { font-size: 34px; letter-spacing: -1px; }
    .wume-feature-title, .wume-cta-title, .wume-stories-head .wume-section-title { font-size: 28px; letter-spacing: -0.8px; }
    .wume-step-title, .wume-pathway-card-label, .wume-story-quote { font-size: 22px; }
    .wume-hero-band-track img { width: 160px; height: 240px; }
}

/* ── Global ── */
body {
    font-family: var(--wume-font-body);
    /* Explicit fundamentals — weight/size must never depend on the Bootstrap
       CDN body rule that loads before this file. */
    font-weight: var(--wume-w-body, 400);
    font-size: 1rem;
    background: var(--wume-cream);
    color: var(--wume-black);
    line-height: var(--wume-lead-body);
}

/* Bold elements: we ship NO 700-weight file (Unica77 Regular 400 + Medium
   500 only), so Bootstrap's b,strong{font-weight:bolder} (=700) forces a
   browser-synthesized fake bold. Pin to the real Medium cut. */
b, strong {
    font-weight: var(--wume-w-sub, 500);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    letter-spacing: var(--wume-tracking-heading);
    line-height: var(--wume-lead-heading);
}

a {
    color: inherit;
}

/* ── Announcement Bar ── */
.wume-announcement-bar {
    background: var(--wume-lbrown);
    color: var(--wume-cream);
    padding: 8px 40px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
}

.wume-announcement-link {
    color: var(--wume-cream);
    text-decoration: none;
}

.wume-announcement-link:hover {
    color: var(--wume-cream);
    text-decoration-thickness: 2px;
}

.wume-announcement-close {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--wume-cream);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.7;
}

.wume-announcement-close:hover {
    opacity: 1;
}

/* Announcement bar removed on inner pages to match the figma standard (no
   top invitation strip). Left in the DOM so the sticky-offset JS still
   resolves #announcement-bar; simply not rendered. */
#announcement-bar {
    display: none;
}
/* ...except HOME + SEARCH, whose figma keeps the "Read our latest doctoral
   digest" strip (brown band on home, sage band on search). */
body.is-home-page #announcement-bar,
body.is-search-page #announcement-bar {
    display: block;
}

/* ── Navigation ── */
.wume-navbar {
    background: rgba(255, 255, 255, 0.10);  /* figma liquid-glass: translucent/frosted at the top; .is-scrolled flips it solid */
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: none;
    padding: 0 0;
    min-height: var(--wume-nav-height);
}

/* Brand spec page 60: logo CENTERED with nav flanking. The Bootstrap
   navbar is reordered via .order-* utilities in base.html.twig.
   This .wume-logo class wraps the SVG mark, never typeset text. */
.wume-logo {
    display: inline-flex;
    align-items: center;
    color: var(--wume-black);
    text-decoration: none;
}

.wume-logo svg {
    height: 36px;
    width: auto;
    display: block;
}

.wume-nav-items .nav-link {
    font-family: var(--wume-font-body);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wume-black);
    padding: 24px 18px;
    transition: text-decoration-thickness 0.15s, opacity 0.2s ease;
}

.wume-nav-items .nav-link:hover,
.wume-nav-items .nav-link:focus {
    color: var(--wume-black);
    background: rgba(254, 254, 252, 0.35);   /* figma: hover is a frosted square, not an underline */
    text-decoration: none;
    opacity: 0.9;
}

/* figma 446:7137 — hovering one top nav item dims the other top items (siblings).
   Opacity-based (not colour) so it layers over every page's nav colour scheme; the
   hovered/focused item keeps its own rule above, so it stays the brightest of the five. */
.wume-nav-items:hover .nav-link:not(:hover):not(:focus) { opacity: 0.4; }

/* nav CTA — translucent outlined box, black caps, sage on hover (figma 446:1063) */
.wume-navbar .wume-btn-request {
    background: transparent;
    border: 1px solid var(--wume-black);
    border-radius: 0;
    color: var(--wume-black);
    margin-left: 24px;             /* gap from the cart icon so the cart-count badge clears the button (figma) */
    padding: 13px 26px;
    font-family: var(--wume-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;           /* keep the 3-word label on one line in both nav states */
}
.wume-navbar .wume-btn-request:hover {
    background: var(--wume-sage);
    border-color: var(--wume-sage);
    color: var(--wume-black);
}
/* Home: the navbar sits on the brown hero, so the dark base border would
   vanish — keep a cream outline + cream caps there. */
body.is-home-page .wume-navbar .wume-btn-request {
    border-color: var(--wume-cream);
    color: var(--wume-cream);
}
.wume-nav-icon-img { height: 17px; width: auto; display: block; }
.wume-nav-icon { transition: opacity .15s ease; }
.wume-nav-icon:hover { opacity: 0.6; }   /* figma: icons get the same hover fade, no square */

.wume-dropdown {
    background: var(--wume-cream);
    border: 1px solid var(--wume-sand);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 12px 0;
    min-width: 220px;
}

.wume-dropdown .dropdown-item {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    padding: 8px 24px;
    color: var(--wume-black);
}

.wume-dropdown .dropdown-item:hover {
    background: var(--wume-sand);
    color: var(--wume-black);
}

/* ── Nav Actions (Login, Cart, Request) ── */
.wume-btn-nav-login {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    background: none;
    border: none;
    padding: 8px 12px;
}

.wume-btn-nav-login:hover {
    color: var(--wume-black);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.wume-cart-icon {
    position: relative;            /* anchor the absolute #cart-badge to the icon, not the navbar */
    color: var(--wume-black);
    font-size: 1.2rem;
    text-decoration: none;
}

.wume-cart-icon:hover {
    color: var(--wume-lbrown);
}

.wume-cart-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--wume-brown);
    color: var(--wume-cream);
    font-size: 0.65rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wume-font-body);
}

/* ── Buttons ── */
.wume-btn-primary {
    background: var(--wume-black);
    color: var(--wume-cream);
    border: 1px solid var(--wume-black);
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.wume-btn-primary:hover,
.wume-btn-primary:focus {
    background: var(--wume-brown);
    border-color: var(--wume-brown);
    color: var(--wume-cream);
}

.wume-btn-outline {
    background: transparent;
    color: var(--wume-black);
    border: 1px solid var(--wume-black);
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
}

.wume-btn-outline:hover,
.wume-btn-outline:focus {
    background: var(--wume-black);
    color: var(--wume-cream);
}

/* ── Sections ── */
.wume-section {
    padding: 44px 0;
    background: var(--wume-cream);
    color: var(--wume-text-on-cream);
}

/* Jump-link landing offset: a clicked in-page link must land the target section
   just below the sticky 72px nav, not hidden under it. (The mobile @media block
   overrides this with the taller announcement+nav offset.) */
[id] { scroll-margin-top: calc(var(--wume-nav-height) + 16px); }

.wume-section-alt {
    background: var(--wume-sand);
    color: var(--wume-text-on-sand);
}

.wume-section-sage {
    background: var(--wume-sage);
    color: var(--wume-text-on-sage);
}

.wume-section-brown {
    background: var(--wume-brown);
    color: var(--wume-text-on-brown);
}

.wume-section-lbrown {
    background: var(--wume-lbrown);
    color: var(--wume-text-on-lbrown);
}

.wume-section-title {
    font-size: 2.2rem;
    margin-bottom: 16px;
}

.wume-section-subtitle {
    font-size: 1rem;
    color: inherit; /* hierarchy via size + spacing, not color */
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.wume-section-cta {
    margin-top: 32px;
}

/* ── Hero ── */
.wume-hero {
    padding: 120px 0 100px;
    text-align: center;
    background: var(--wume-cream);
    color: var(--wume-text-on-cream);
}

.wume-hero-title {
    font-size: 3rem;
    line-height: var(--wume-lead-heading);
    margin-bottom: 20px;
}

.wume-hero-subtitle {
    font-size: 1.1rem;
    color: inherit;
    max-width: 560px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.wume-hero-tagline {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: inherit; /* kicker is black on light grounds, cream on dark — inherits per text-on-bg rule */
    margin-bottom: 16px;
}

/* ── Image Placeholders ── */
.wume-img-placeholder {
    background: var(--wume-sand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wume-black);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    min-height: 300px;
}

/* ── Editorial photo band (V29, figma R1 mobile alignment) ──
   Full-bleed photo placed between content sections to match figma's
   image-rich pacing. The 100vw + center-shift trick negates the parent
   container's max-width so the photo runs edge-to-edge regardless of
   surrounding layout. max-height clamps at 3 breakpoints (540 desktop /
   420 <992 / 360 <576) so very tall portrait photos don't dominate the
   page. */
.wume-photo-band {
    position: relative;
    width: 100vw;
    max-width: 100%;            /* never exceed the container — so the band can't overflow even when
                                   the scroll-reveal transform overrides the old translateX(-50%) */
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
.wume-photo-band img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: cover;
}
@media (max-width: 991.98px) {
    .wume-photo-band img {
        max-height: 420px;
    }
}
@media (max-width: 575.98px) {
    .wume-photo-band img {
        max-height: 360px;
    }
}

/* ── Request an Invitation Section ── */
.wume-section-invite {
    background: var(--wume-cream);
    padding: 80px 0;
}

/* V48: the separate brand-mark band (cream ground, opaque PNG) is retired —
   figma R1 puts the large WUME wordmark INSIDE the sage footer as one
   cohesive band. The new rules live with the rest of the footer styling
   below (.wume-footer-wordmark-row + .wume-footer-wordmark). */

/* ── Footer ── */
/* V43: footer background flips brown → sage, text/link colors flip
   cream → black per brand text-on-bg rule (sage → black, page 36). */
.wume-footer {
    /* Footer-reveal (figma 446:7835, ref Eagle's Nest): pinned to the bottom edge
       behind the page, uncovered as the page scrolls up past it. z-index:-1 keeps it
       BEHIND all content (not just .wume-page), so a stale-cache HTML/CSS mismatch can
       never paint the footer over the page. */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: var(--wume-sage);
    color: var(--wume-black);
    padding: 42px 0 13px;
}

/* The page rides on an opaque layer above the fixed footer; a script in base.html.twig
   reserves exactly the footer's height below it so the footer uncovers at the scroll
   bottom and not before. min-height keeps short pages from revealing it too early. */
.wume-page {
    position: relative;
    z-index: 1;
    background: var(--wume-cream);
    min-height: 100vh;
    min-height: 100dvh;
}

.wume-footer a {
    color: var(--wume-black);
}

/* V48 — Large WUME wordmark at the top of the sage footer band. Replaces
   the retired .wume-brand-mark cream-tile element. Uses the cream-on-
   transparent variant so cream letters sit directly on the sage ground. */
.wume-footer-wordmark-row {
    padding: 16px 0 32px;
}
.wume-footer-wordmark {
    display: block;
    width: 560px;
    max-width: 100%;
    height: auto;
}
/* ── Figma footer grid: black wordmark + photos (left), address (mid), social (right), newsletter (mid), legal row (bottom) ── */
.wume-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    grid-template-rows: auto 350px auto;
    grid-template-areas:
        "brand   top"
        "photos  news"
        "legal   .";
    column-gap: clamp(48px, 9.2vw, 132px);
    row-gap: 42px;
    align-items: start;
    padding-right: clamp(16px, 4.3vw, 62px);
}
.wume-footer-brand     { grid-area: brand; display: block; margin-bottom: 28px; }
.wume-footer-right-top { grid-area: top; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.wume-footer-social    { list-style: none; margin: 0; padding: 0; }
.wume-footer-photos    { grid-area: photos; }
.wume-footer-news      { grid-area: news; align-self: end; max-width: 100%; }
.wume-footer-legal     { grid-area: legal; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.wume-footer-address p,
.wume-footer-social li a {
    font-family: var(--wume-font-body); font-size: 13px; font-weight: 400;
    letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.7;
    color: var(--wume-black); text-decoration: none; display: inline-block;
}
.wume-footer-address p { margin: 0 0 16px; display: block; }
.wume-footer-social li { margin-bottom: 10px; }
.wume-footer-news-text { font-family: var(--wume-font-body); font-size: 16px; line-height: 1.4; margin: 0 0 18px; color: var(--wume-black); }
.wume-footer-legal span,
.wume-footer-legal a { font-family: var(--wume-font-body); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); text-decoration: none; }

/* 404 — figma: cream centered error text + a full-width band of 6 photos at the bottom */
.wume-404 { background: var(--wume-cream); padding-top: 72px; }
.wume-404-inner { text-align: center; max-width: 640px; margin: 0 auto; padding-bottom: 64px; }
.wume-404-kicker { font-family: var(--wume-font-body); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); margin: 0 0 20px; }
.wume-404-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; color: var(--wume-black); margin: 0 0 16px; }
.wume-404-subtitle { font-family: var(--wume-font-body); font-size: 18px; line-height: 1.4; color: var(--wume-black); margin: 0 0 22px; }
.wume-404-path { margin-top: 32px; font-size: 12px; color: rgba(0,0,0,0.4); }
.wume-404-photos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.wume-404-photos img { width: 100%; height: 360px; object-fit: cover; display: block; }
/* V68 Stage-2 desktop: figma 404 has ~16px gaps between the 6 photos, 367px tall,
   and ~130px between the error text and the photo band. Desktop-only so the
   verified mobile 404 stays untouched. */
@media (min-width: 992px) {
  .wume-404-inner { padding-bottom: 130px; }
  .wume-404-photos { gap: 16px; }
  .wume-404-photos img { height: 367px; }
}
@media (max-width: 991.98px) {
    .wume-footer-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "brand" "top" "photos" "news" "legal"; row-gap: 24px; padding-right: 0; column-gap: 0; }
    .wume-footer-brand { margin-bottom: 0; }
    .wume-footer-right-top { flex-direction: column; gap: 18px; }
    .wume-footer-wordmark { width: 300px; }
}

.wume-footer-heading {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.75rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 16px;
}

.wume-footer-text {
    font-size: 0.85rem;
    color: var(--wume-black);
    line-height: 1.7;
}

.wume-footer-newsletter-heading {
    font-family: var(--wume-font-heading);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--wume-black);
    margin: 0 0 12px;
}

.wume-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wume-footer-links li {
    margin-bottom: 8px;
}

.wume-footer-links a {
    color: var(--wume-black);
    text-decoration: none;
    font-size: 0.85rem;
    transition: text-decoration-thickness 0.15s;
}

.wume-footer-links a:hover {
    color: var(--wume-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wume-footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: 20px;
    margin-top: 40px;
}

.wume-footer-bottom p {
    font-size: 0.78rem;
    color: var(--wume-black);
}

/* ── Card Style ── */
.wume-card {
    border: 1px solid var(--wume-sand);
    border-radius: 0;
    background: var(--wume-cream);
    padding: 40px;
    transition: box-shadow 0.3s;
}

.wume-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.wume-card-title {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.wume-card-text {
    font-size: 0.92rem;
    color: var(--wume-black);
}

/* ── Two Column Layout ── */
.wume-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ── V24 Phase B universal mobile reflow ──
   Single 991.98 umbrella applies to every page. Spec section 3.1:
   multi-col grids → 1fr; flex rows → column; section padding compresses;
   hero headline scales; sticky-offset for jump-link landing positions. */
@media (max-width: 991.98px) {
    /* Spec 3.1.1 — .wume-split (used on every page's hero/intro split) collapses. */
    .wume-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* Spec 3.1.2 — section padding compresses. V25 uses named tokens. */
    .wume-section {
        padding: var(--wume-section-padding-mobile) 0;
    }
    .wume-hero {
        padding: var(--wume-hero-padding-mobile);
    }
    /* Spec 3.1.3 — hero headline scales down with viewport-relative cap. */
    .wume-hero-title {
        font-size: clamp(2rem, 7vw, 2.75rem);
    }
    .wume-section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    }
    /* Spec 3.1.5 — jump-link sticky offset. Token = nav-height + 42px
       announcement bar; default nav-height fallback 64px on phone where the
       desktop --wume-nav-height (72px) is shorter in practice. */
    [id] {
        scroll-margin-top: var(--wume-mobile-sticky-offset);
    }

    /* Spec 3.1.1 — Bootstrap col-md-* / col-lg-* columns inside .wume-section
       also collapse to 1-up. Bootstrap's md breakpoint is 768 (already
       collapses at <769) but its lg breakpoint is 992; the 769–991px slice
       needs an explicit override so a `col-md-6 col-lg-3` row that desktop
       renders as 4-up does not stay multi-column on tablet portrait. The
       selector is scoped to .wume-section so we don't inadvertently flatten
       Bootstrap rows in components (cart, checkout, navbar) that have their
       own mobile state. */
    .wume-section .row > [class*="col-md-"],
    .wume-section .row > [class*="col-lg-"],
    .wume-section .row > [class*="col-sm-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Spec 3.2.2 — Care comparison block: the two .wume-card columns inside
       the .wume-section-alt before the brown CTA stack with a slim sand
       divider between them. The :first-child of .row gets the bottom
       divider; the row's gap is preserved by .mb-4 on each col. */
    .wume-section-alt .row > [class*="col-md-6"]:first-child .wume-card {
        margin-bottom: 1.5rem;
    }

    /* Spec 3.1.4 — image responsive backstop. Some inline-styled
       .wume-img-placeholder containers (Visit FAQ split, About-Dr-Wu hero,
       Care intro split) carry aspect-ratio 4/5 but no width cap, so the
       intrinsic image width (often 800-1200px) overflows the 390px viewport.
       Cap to container width on mobile. The min-width: 0 reset is required
       because .wume-split is display:grid and grid items default to
       min-width: min-content (image natural width), defeating the
       max-width: 100% cap on its own. */
    .wume-img-placeholder {
        max-width: 100%;
        min-width: 0;
        min-height: auto;
    }
    .wume-img-placeholder img {
        max-width: 100%;
        height: auto;
    }
    .wume-split > * {
        min-width: 0;
    }
}

/* ── V25 Phase B cascade fix — phone-tighter overrides ──
   This 768 block is positioned AFTER the 991.98 umbrella block above so
   that source-order tiebreak grants its declarations to <769px viewports.
   Every rule here MUST be strictly tighter than its 991.98 counterpart —
   otherwise it defeats responsive scaling. The previous V24 values
   (font-size: 2.2rem literal, 60px / 80px padding) sat BEFORE 991.98 in
   source order and so were silently dead at <769 (991.98 always won the
   cascade). Now: titles use clamp() with smaller floors so phones still
   scale, padding uses --wume-*-phone tokens (3rem / 4rem 0 3rem) that are
   tighter than --wume-*-mobile (4rem / 5rem 0 4rem), and units are rem
   throughout for cascade-comparison consistency. */
@media (max-width: 768px) {
    .wume-hero-title {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
    }

    .wume-section-title {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    .wume-section {
        padding: var(--wume-section-padding-phone) 0;
    }

    .wume-hero {
        padding: var(--wume-hero-padding-phone);
    }

    /* Mobile navbar: monogram fits where the wordmark cannot. */
    .wume-logo svg {
        height: 28px;
    }
}

/* ── Cart Page ── */
.wume-cart-empty {
    text-align: center;
    padding: 80px 0;
}

.wume-cart-empty i {
    font-size: 3rem;
    color: var(--wume-brown);
    margin-bottom: 16px;
}

/* ── Request-Invitation Placeholder Modal ── */
.wume-invite-modal {
    background: var(--wume-cream);
    border: 1px solid var(--wume-brown);
    border-radius: 0;
    color: var(--wume-text-on-cream);
}

.wume-invite-modal .modal-header {
    background: var(--wume-cream);
    border-bottom: 1px solid var(--wume-sand);
}

.wume-invite-modal .modal-title {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    letter-spacing: var(--wume-tracking-heading);
}

.wume-invite-badge {
    display: inline-block;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    background: var(--wume-lbrown);
    color: var(--wume-cream);
    padding: 6px 14px;
    border-radius: 0;
}

/* ── Press Logo Placeholder Grid (Home, Visit) ── */
.wume-press-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 30px auto 0;
    max-width: 1000px;
}

.wume-press-logo {
    flex: 0 0 auto;
    width: 150px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wume-cream);
    border: 1px solid var(--wume-black);
    color: var(--wume-black);
    font-size: 0.75rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
}

/* ── Pathways Featured Distinct Pathways Accordion ── */
.wume-pathway-accordion .accordion-button {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    letter-spacing: var(--wume-tracking-heading);
    background: var(--wume-cream);
    color: var(--wume-black);
    border-radius: 0;
    box-shadow: none;
}

.wume-pathway-accordion .accordion-button:not(.collapsed) {
    background: var(--wume-sage);
    color: var(--wume-text-on-sage);
}

.wume-pathway-accordion .accordion-button:focus {
    box-shadow: 0 0 0 2px var(--wume-black);
}

.wume-pathway-accordion .accordion-item {
    border: 1px solid var(--wume-sand);
    border-radius: 0;
    margin-bottom: 8px;
}

.wume-pathway-accordion .accordion-body {
    background: var(--wume-cream);
    color: var(--wume-text-on-cream);
    line-height: var(--wume-lead-body);
}

/* ── Hero Subtitle / Jump-to Link Cluster (Physicians, Pathways, Visit) ── */
.wume-jump-links {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.wume-jump-link {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    text-decoration: none;
    border-bottom: 1px solid var(--wume-black);
    padding-bottom: 2px;
    transition: border-bottom-width 0.15s;
}

.wume-jump-link:hover {
    color: var(--wume-black);
    border-bottom-width: 2px;
}

/* ── Footer newsletter form (V43 sage footer) ──
   Inline layout: email input on LEFT, SUBSCRIBE link on RIGHT — matches
   figma's single-row newsletter pattern. Input is a line-underline style
   (no box / border) on sage background; SUBSCRIBE is minimal text-only
   with underline (NOT a Bootstrap btn box). */
.wume-footer-newsletter {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end;
    gap: 16px;
    border-bottom: 1px solid var(--wume-black);
    padding-bottom: 4px;
}
.wume-footer-newsletter .form-control {
    background: transparent;
    border: 0;
    color: var(--wume-black);
    border-radius: 0;
    font-size: 0.85rem;
    flex: 1 1 0 !important;       /* basis 0 so the flex algorithm fills remaining space, not initial content size */
    width: auto !important;       /* override Bootstrap's .form-control { width: 100%; } */
    min-width: 0;                 /* prevent intrinsic min-width from blocking shrink */
    padding: 8px 0;
    margin: 0 !important;         /* override Bootstrap `mb-2` etc */
    box-shadow: none;
}
.wume-footer-newsletter .form-control:focus {
    box-shadow: none;
    background: transparent;
    color: var(--wume-black);
}
.wume-footer-newsletter .form-control::placeholder {
    color: rgba(0, 0, 0, 0.55);
}

/* The .wume-btn-outline class in the footer becomes a minimal black-text
   link with underline (figma SUBSCRIBE pattern). Other footer btn-outline
   consumers retain the box appearance via the base .wume-btn-outline rule
   defined elsewhere. */
.wume-footer .wume-btn-outline {
    background: transparent;
    color: var(--wume-black);
    border: 0;
    padding: 8px 0;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
    flex: 0 0 auto;
    width: auto;
}

.wume-footer .wume-btn-outline:hover,
.wume-footer .wume-btn-outline:focus {
    background: transparent;
    color: var(--wume-black);
    text-decoration-thickness: 2px;
}

/* The Bootstrap `w-100` utility class on the SUBSCRIBE <button> wins over
   the `width: auto` in .wume-footer .wume-btn-outline above (because of
   `!important` on the utility). Override it here so the button stays at
   its natural text width in the inline form. */
.wume-footer-newsletter .wume-btn-outline.w-100 {
    width: auto !important;
}

/* ── Tables and forms — clinical leading override per brand allowance ── */
table,
.form-control,
.form-label,
.form-check-label {
    line-height: var(--wume-lead-clinical);
}

/* ── Desktop mega-menu backdrop (brand page 63) ──
   When any nav dropdown is open on desktop, the page content behind
   the navbar dims with a subtle blur. Activated by a body class added
   from base.html.twig's dropdown listeners. */
body::before {
    content: "";
    position: fixed;
    inset: var(--wume-nav-height) 0 0 0;
    background: transparent;            /* page veil removed — figma keeps the submenu at 100% opacity and puts the glass on the nav, not over the page */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 1019;
}

body.wume-menu-open::before {
    opacity: 1;
}

/* Lift dropdown menus above the backdrop. */
.wume-navbar {
    position: relative;
    z-index: 1020;
}

.wume-dropdown.dropdown-menu {
    z-index: 1030;
}

/* ── Mobile accordion drawer (R0 figma) ──
   Replaces the brand-page-63 brown full-screen overlay with a top-sheet
   accordion drawer per R0 figma file. Bootstrap collapse drives open/close;
   per-row +/− toggles drive sub-list expansion (single-expand). */
@media (max-width: 991.98px) {
    /* Suppress the desktop megamenu backdrop on mobile — drawer replaces it. */
    body.wume-menu-open::before {
        display: none;
    }

    /* Keep navbar above the drawer overlay so the toggler stays clickable. */
    .wume-navbar {
        z-index: 1050;
    }

    /* V23 — compact "Request" CTA for the mobile top bar (spec section 2.1.3).
       The desktop button reads "Request an Invitation" with default brand
       padding/font; on mobile we render the short label "Request" with
       reduced padding, font-size, and letter-spacing so the right-side
       cluster (cart icon + Request CTA) does not crowd the centered logo
       at 375/390/414 viewports. The two responsive labels are toggled by
       Bootstrap's d-inline / d-inline-block / d-lg-* helper classes in the
       template. */
    .wume-btn-request {
        font-size: 0.72rem;
        padding: 6px 10px;
        letter-spacing: 0.04em;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Drawer container — top-sheet style, sits below the announcement+top bar.
       The --wume-drawer-top custom property is set by JS in base.html.twig V25
       on show.bs.collapse to the actual bottom-of-navbar pixel position so the
       drawer stays flush under the navbar when scrolled (announcement bar has
       scrolled away) or unscrolled (announcement bar still visible). Falls
       back to --wume-nav-height (72px) if JS hasn't run yet. */
    .wume-navbar .navbar-collapse.show,
    .wume-navbar .navbar-collapse.collapsing {
        position: fixed !important;
        top: var(--wume-drawer-top, var(--wume-nav-height, 72px)) !important;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - var(--wume-drawer-top, var(--wume-nav-height, 72px))) !important;
        max-height: none !important;
        background: var(--wume-cream);
        z-index: 1040;
        display: block !important;
        padding: 24px 20px 40px;
        overflow-y: auto;
    }

    /* The drawer's inner list — full-bleed rows, no list bullets. */
    .wume-mobile-drawer {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .wume-mobile-row {
        border-bottom: 1px solid rgba(77, 61, 45, 0.18);
    }
    .wume-mobile-row:first-child {
        border-top: 1px solid rgba(77, 61, 45, 0.18);
    }

    /* Row toggle button — full-width, label left, +/− right. */
    .wume-mobile-row-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 4px;
        background: transparent;
        border: 0;
        color: var(--wume-brown);
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 1.05rem;
        text-align: left;
        cursor: pointer;
    }
    .wume-mobile-row-toggle:hover,
    .wume-mobile-row-toggle:focus-visible {
        background: rgba(77, 61, 45, 0.04);
    }

    .wume-mobile-row-label {
        flex: 1 1 auto;
    }
    /* Indicator: a right chevron (›) signalling the row slides to a sub-screen
       (V89 — Astra-style slide replaces the old +/− accordion, figma 446:7825). */
    .wume-mobile-row-indicator {
        font-size: 0;
        line-height: 1;
        flex: 0 0 auto;
        margin-left: 12px;
    }
    .wume-mobile-row-indicator::before {
        content: "\203A";   /* › */
        font-size: 1.5rem;
        color: var(--wume-brown);
    }

    /* Flat row variant — Shop, Login. No toggle, anchor takes full width. */
    .wume-mobile-row--flat .wume-mobile-flat-link {
        display: block;
        padding: 18px 4px;
        color: var(--wume-brown);
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 1.05rem;
        text-decoration: none;
    }
    .wume-mobile-row--flat .wume-mobile-flat-link:hover,
    .wume-mobile-row--flat .wume-mobile-flat-link:focus-visible {
        background: rgba(77, 61, 45, 0.04);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* Sub-list — now lives inside a sliding sub-panel (V89), so it is always
       fully visible; the panel slide handles show/hide, not a max-height accordion. */
    .wume-mobile-sublist {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .wume-mobile-sublist li {
        display: block;
    }
    .wume-mobile-sublist a {
        display: block;
        padding: 10px 4px;
        color: var(--wume-brown);
        font-family: var(--wume-font-body);
        font-size: 0.98rem;
        text-decoration: none;
    }
    .wume-mobile-sublist a:hover,
    .wume-mobile-sublist a:focus-visible {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* ── Slide-sideways two-level drawer (V89, figma 446:7825, ref Astra) ──
       The fixed full-height drawer holds a slider that clips horizontal
       movement. Level-1 (main list) and level-2 (sub-panels) each fill the
       drawer and scroll vertically on their own; tapping a row slides level-1
       out left and the matching sub-panel in from the right. The panels carry
       the drawer padding now (moved off #wumeNav so the slide is edge-to-edge). */
    #wumeNav.navbar-collapse.show,
    #wumeNav.navbar-collapse.collapsing {
        padding: 0;
    }
    .wume-mobile-slider {
        position: absolute;
        inset: 0;
        overflow: hidden;   /* fallback for browsers without overflow:clip */
        overflow: clip;      /* clip WITHOUT a scroll container, so a focus/scroll can't
                                shift the translated panels sideways into view (V90 fix) */
    }
    .wume-mobile-panel,
    .wume-mobile-subpanel {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px 20px 40px;
        background: var(--wume-cream);
        transition: transform 0.3s ease;
    }
    .wume-mobile-panel {
        transform: translateX(0);
    }
    .wume-mobile-slider.is-sub-open .wume-mobile-panel {
        transform: translateX(-100%);
    }
    .wume-mobile-subpanel {
        transform: translateX(100%);
    }
    .wume-mobile-subpanel.is-active {
        transform: translateX(0);
    }

    /* Back affordance + sub-panel title — brown-on-cream, matching the drawer type. */
    .wume-mobile-back {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 4px 4px 16px;
        background: transparent;
        border: 0;
        color: var(--wume-brown);
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        text-align: left;
        cursor: pointer;
    }
    .wume-mobile-back::before {
        content: "\2039";   /* ‹ */
        font-size: 1.5rem;
        line-height: 1;
    }
    .wume-mobile-back:hover,
    .wume-mobile-back:focus-visible {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    .wume-mobile-subpanel-title {
        display: block;
        text-decoration: none;
        margin: 0 0 4px;
        padding: 0 4px 12px;
        border-bottom: 1px solid rgba(77, 61, 45, 0.18);
        color: var(--wume-brown);
        font-family: var(--wume-font-body);
        font-weight: var(--wume-w-sub);
        font-size: 1.05rem;
    }

    /* In-drawer close X is hidden visually — the navbar hamburger toggler
       (which swaps to bi-x on drawer open per JS in base.html.twig V25)
       already serves as the close affordance per spec section 2.1.1. The
       in-drawer X stays in the DOM for fallback / older Bootstrap-collapse
       paths but is not visually presented to avoid overlap with the first
       row's +/− indicator. */
    .wume-mobile-menu-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        background: transparent;
    }

    /* Hamburger toggler icon swap — JS toggles bi-list ↔ bi-x on drawer
       open/close. CSS keeps the icon flush sized at the same dimensions
       so the navbar height does not jump when the icon swaps. */
    .navbar-toggler .bi-list,
    .navbar-toggler .bi-x {
        font-size: 1.5rem;
        line-height: 1;
    }

    /* Suppress Bootstrap's default 4px box-shadow focus ring on the
       hamburger (and the sr-only in-drawer close X) — the user wants
       no visible "border" in any state. The bare `.border-0` utility
       class only kills the CSS border property; Bootstrap's :focus rule
       applies a separate 0.25rem box-shadow that reads as a heavy black
       outline at click. Removed at all interactive states. */
    .wume-navbar .navbar-toggler,
    .wume-navbar .navbar-toggler:focus,
    .wume-navbar .navbar-toggler:focus-visible,
    .wume-navbar .navbar-toggler:active,
    .wume-navbar .navbar-toggler.focus,
    .wume-mobile-menu-close,
    .wume-mobile-menu-close:focus,
    .wume-mobile-menu-close:focus-visible,
    .wume-mobile-menu-close:active {
        box-shadow: none !important;
        outline: 0 !important;
    }

    /* Spacing between hamburger and the centered logo. Without this the
       hamburger's right edge sits flush against the logo's left edge —
       even with the focus ring suppressed, they read as visually glued.
       12px gives enough breathing room without unbalancing the three-
       region top bar at narrow viewports. */
    .wume-navbar .navbar-toggler {
        margin-right: 12px;
    }

    /* Body scroll lock — already toggled by JS via .wume-mobile-open class. */
    body.wume-mobile-open {
        overflow: hidden;
    }
}

/* On desktop, hide the mobile-only close X. */
@media (min-width: 992px) {
    .wume-mobile-menu-close {
        display: none;
    }
}

/* ── Modal backdrop blur (brand page 64) ──
   Bootstrap's default backdrop is solid black at 50% opacity.
   Brand wants brown semi-opaque with backdrop-filter blur so the
   page content remains visible-but-de-emphasized beneath the dialog. */
.modal-backdrop {
    background-color: var(--wume-brown);
}

.modal-backdrop.show {
    opacity: 0.55;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* The modal panel itself sits cleanly atop the blurred backdrop —
   already brand-styled via .wume-invite-modal (cream surface, brown 1px). */

/* ── Inline-bottom pop-up panel (brand page 64) ──
   For non-dialog pop-ups: newsletter signup, cookie notice, in-page CTA.
   Sits at viewport bottom rather than centered modal. Brown semi-opaque
   with blur. Toggle via .is-open class from page-level JS. */
.wume-popup-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(77, 61, 45, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--wume-cream);
    padding: 24px 40px;
    z-index: 1045;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.wume-popup-panel.is-open {
    transform: translateY(0);
}

.wume-popup-panel .wume-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: 0;
    color: var(--wume-cream);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
}

.wume-popup-panel .wume-popup-close:hover {
    opacity: 0.8;
}

.wume-popup-panel-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.wume-popup-panel-title {
    font-family: var(--wume-font-heading);
    font-size: 1.2rem;
    margin: 0;
    flex: 0 1 auto;
}

.wume-popup-panel-form {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 1 1 320px;
    min-width: 280px;
}

.wume-popup-panel-form .form-control {
    flex: 1;
    background: rgba(242, 240, 235, 0.12);
    border: 1px solid rgba(242, 240, 235, 0.3);
    color: var(--wume-cream);
    border-radius: 0;
    padding: 8px 12px;
}

.wume-popup-panel-form .form-control::placeholder {
    color: rgba(242, 240, 235, 0.6);
}

.wume-popup-panel-form .form-control:focus {
    background: rgba(242, 240, 235, 0.18);
    border-color: var(--wume-cream);
    box-shadow: none;
    color: var(--wume-cream);
}

.wume-popup-panel-form .wume-btn-primary {
    background: var(--wume-cream);
    color: var(--wume-brown);
    border-color: var(--wume-cream);
}

.wume-popup-panel-form .wume-btn-primary:hover {
    background: transparent;
    color: var(--wume-cream);
    border-color: var(--wume-cream);
}

@media (max-width: 575.98px) {
    .wume-popup-panel {
        padding: 20px 24px 24px;
    }

    .wume-popup-panel-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .wume-popup-panel-form {
        flex-direction: column;
    }
}

/* ── Unified 3-column mega-menu (brand page 63) ──
   Replaces per-item dropdowns with a single shared panel that drops down
   below the navbar. Hover any [data-megamenu-trigger] group or the panel
   itself to reveal it. Body class wume-menu-open simultaneously activates
   the desktop blur backdrop from item 3. */
.wume-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--wume-cream);
    border-top: 1px solid var(--wume-sand);
    border-bottom: 1px solid var(--wume-sand);
    padding: 48px 0 56px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1;
    pointer-events: none;
}

.wume-megamenu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wume-megamenu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto;
}

.wume-megamenu-col h6,
.wume-megamenu-col .wume-megamenu-heading {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    border-bottom: 1px solid var(--wume-sand);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.wume-megamenu-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wume-megamenu-col li {
    margin-bottom: 12px;
}

.wume-megamenu-col a {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.18rem;
    color: var(--wume-black);
    text-decoration: none;
    line-height: 1.3;
    display: inline-block;
    transition: text-decoration-thickness 0.15s;
}

.wume-megamenu-col a:hover,
.wume-megamenu-col a:focus {
    color: var(--wume-black);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

@media (max-width: 991.98px) {
    /* Mega-menu is desktop-only; mobile uses the full-screen overlay menu. */
    .wume-megamenu {
        display: none !important;
    }
}

/* ==========================================================================
   V16 ADDITIONS — Missing classes required by current page templates
   ========================================================================== */

/* ── Logo: <img> selector (HEAD only had .wume-logo svg) ────────────────── */
.wume-logo img {
    height: 36px;
    width: auto;
    display: block;
}
@media (max-width: 768px) {
    .wume-logo img { height: 28px; }
}

/* ── Sticky navbar + scroll-state ────────────────────────────────────────── */
.wume-navbar {
    position: sticky;
    top: 0;
    transition: min-height 0.25s ease, box-shadow 0.25s ease;
}
.wume-navbar.is-scrolled {
    min-height: 56px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.12);           /* translucent clear-glass on scroll — content shows through, site-wide */
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* Grey glass — applied ONLY when the JS scroll handler (base.html.twig) detects a
   near-white background under the bar and adds .wume-navbar--on-white. The default
   white glass has nothing to frost over white, so the bar and its text disappear; a
   translucent grey keeps a visible light-grey bar with legible text, without giving
   up the glass look. Every other background keeps the white glass untouched. The
   .is-scrolled variant carries an extra class so it outranks the white-glass scroll
   rule above regardless of source order. */
.wume-navbar.wume-navbar--on-white,
.wume-navbar.is-scrolled.wume-navbar--on-white {
    background: rgba(84, 86, 90, 0.42);
}
.wume-logo img,
.wume-logo svg { transition: height 0.25s ease; }
.wume-navbar.is-scrolled .wume-logo img,
.wume-navbar.is-scrolled .wume-logo svg { height: 28px; }
.wume-nav-items .nav-link { transition: padding 0.25s ease; }
.wume-navbar.is-scrolled .wume-nav-items .nav-link { padding-top: 18px; padding-bottom: 18px; }

/* ── Per-section mega-menu panels (V13: replaces single .wume-megamenu) ── */
.wume-megamenu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--wume-cream);
    border-top: 1px solid var(--wume-sand);
    border-bottom: 1px solid var(--wume-sand);
    padding: 48px 0 56px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1;
    pointer-events: none;
}
.wume-megamenu-panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* V102 — Two mega-menu readability fixes (live panels + the on-page editor alike):
   1. Force the panel's own text colour dark. On the home page the navbar sets
      color:var(--wume-cream), which every descendant panel inherits; links and headings
      set their own dark colour but the "Featured" paragraphs did not, so they rendered
      cream-on-cream (invisible). The panel background is always cream, so its text must
      always be dark. An explicit colour here overrides the inherited cream for any panel
      text that does not set its own.
   2. .wume-megamenu-col a:hover (dark text) also matched the outline "Learn More" /
      "About Dr. Wu" buttons and out-specified .wume-btn-outline:hover, so on hover the
      label stayed black while the fill turned black (black-on-black). Restore the
      button's intended cream-on-black hover. */
.wume-megamenu-panel { color: var(--wume-black); }
.wume-megamenu-col a.wume-btn-outline:hover,
.wume-megamenu-col a.wume-btn-outline:focus { color: var(--wume-cream); }
.wume-megamenu-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 56px;
    max-width: 1100px;
    margin: 0 auto;
}
.wume-megamenu-col h6,
.wume-megamenu-col .wume-megamenu-heading {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    border-bottom: 1px solid var(--wume-sand);
    padding-bottom: 14px;
    margin-bottom: 20px;
}
.wume-megamenu-col ul { list-style: none; padding: 0; margin: 0; }
.wume-megamenu-col li { margin-bottom: 12px; }
.wume-megamenu-col a {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.18rem;
    color: var(--wume-black);
    text-decoration: none;
    line-height: 1.3;
    display: inline-block;
    transition: text-decoration-thickness 0.15s;
}
.wume-megamenu-col a:hover,
.wume-megamenu-col a:focus {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Mega-menu overview link — leads each panel with a clear route to its top page (fixes the nav gap
   where the Care/Pathways/Physicians/Visit/Shop overview pages had no obvious menu entry). Spans the
   full grid width, above the columns. */
.wume-megamenu-overview {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: -24px;
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--wume-black);
    text-decoration: none;
}
.wume-megamenu-overview-arrow { display: inline-block; font-size: 1.3rem; transition: transform 0.2s ease; }
.wume-megamenu-overview:hover .wume-megamenu-overview-label,
.wume-megamenu-overview:focus .wume-megamenu-overview-label { text-decoration: underline; text-underline-offset: 6px; }
.wume-megamenu-overview:hover .wume-megamenu-overview-arrow { transform: translateX(5px); }

@media (max-width: 991.98px) {
    .wume-megamenu-panel { display: none !important; }
}

/* ── Right-side slide-in invite panel (V07 baseline, V33 responsive layout) ──
   Panel base (positioning + slide motion + dimensions). Content layout
   inside (single-col mobile vs 2-col desktop card) is handled by the
   V32/V33 figma-aligned rules below. */
.wume-invite-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;            /* mobile: full viewport */
    max-width: 100vw;
    background: var(--wume-cream);
    color: var(--wume-text-on-cream);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1060;
    overflow-y: auto;
    padding: 0;              /* padding now lives on left/right column children */
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}
@media (min-width: 992px) {
    .wume-invite-panel { width: 960px; }
}
.wume-invite-panel.is-open { transform: translateX(0); }
.wume-invite-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(77, 61, 45, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1055;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.wume-invite-panel-overlay.is-open { opacity: 1; pointer-events: auto; }
.wume-invite-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: 0;
    color: var(--wume-brown);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    z-index: 10;
}
/* V07 baseline rules for .wume-invite-panel-inner h2/p/.form-control
   removed in V32 — the figma R1 rebuild uses a different markup
   structure (kicker + heading + cream form-card + line-underline inputs).
   See the V32 block below for the replacement rules. */
body.wume-panel-open { overflow: hidden; }

/* ══ Global cart drawer (figma "Cart" 446:7139) ═══════════════════════════
   The "Your Bag" panel slides in from the right on any page when the cart icon
   is tapped, mirroring the invite-panel drawer. Bag styling relocated here
   (drawer-scoped, global) from the former cart-page-only cart.css; slide +
   backdrop added. Desktop = 600px; mobile = full-width. cart-drawer.js fills it. */
.wume-cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(40, 32, 24, 0.45);
    z-index: 1990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.wume-cart-backdrop.is-open { opacity: 1; visibility: visible; }

.wume-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 600px;
    max-width: 100vw;
    background: var(--wume-cream);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.14);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 30px 40px 0;
}
.wume-cart-drawer.is-open { transform: translateX(0); }

.wume-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--wume-sand);
}
.wume-cart-head h1 {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading-display);
    font-size: 1.6rem;
    color: var(--wume-black);
    margin: 0;
}
.wume-cart-close {
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wume-black);
    cursor: pointer;
}

.wume-cart-items {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 8px;
}

.wume-cart-line {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--wume-sand);
}
.wume-cart-line-thumb {
    width: 80px;
    height: 104px;
    object-fit: cover;
    background: var(--wume-sand);
    flex: 0 0 80px;
}
.wume-cart-line-body { flex: 1 1 auto; min-width: 0; }
.wume-cart-line-name {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.18rem;
    color: var(--wume-black);
    margin: 0 0 4px;
    line-height: 1.25;
}
.wume-cart-line-brand {
    text-transform: uppercase;
    letter-spacing: var(--wume-tracking-caps);
    font-size: 0.72rem;
    color: var(--wume-lbrown);
    margin: 0 0 6px;
}
.wume-cart-line-price {
    font-size: 0.95rem;
    color: var(--wume-black);
    margin: 0 0 14px;
}
.wume-cart-line-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wume-cart-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #78716B;
    border-radius: 2px;
}
.wume-cart-stepper button {
    background: none;
    border: 0;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    color: var(--wume-black);
    cursor: pointer;
    line-height: 1;
}
.wume-cart-stepper span {
    min-width: 34px;
    text-align: center;
    font-size: 0.9rem;
}
.wume-cart-trash {
    background: none;
    border: 0;
    color: var(--wume-black);
    font-size: 1rem;
    cursor: pointer;
    padding: 6px;
}

.wume-cart-foot {
    border-top: 1px solid var(--wume-lbrown);
    padding: 22px 0 30px;
}
.wume-cart-subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.wume-cart-subtotal-label {
    font-family: var(--wume-font-heading);
    font-size: 1.35rem;
    color: var(--wume-black);
}
.wume-cart-subtotal-amount {
    font-size: 0.95rem;
    color: var(--wume-black);
}
.wume-cart-taxnote {
    font-size: 0.82rem;
    color: var(--wume-lbrown);
    margin: 0 0 18px;
}
.wume-cart-checkout {
    display: block;
    width: 100%;
    padding: 17px;
    background: var(--wume-brown);
    color: var(--wume-cream);
    border: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--wume-tracking-caps);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}
.wume-cart-checkout:hover { background: var(--wume-black); color: var(--wume-cream); }

.wume-cart-empty { text-align: left; padding: 40px 0; }

@media (max-width: 991.98px) {
    .wume-cart-drawer {
        width: 100%;
        max-width: 100%;
        padding: 22px 24px 0;
    }
    .wume-cart-head { padding-bottom: 18px; }
    .wume-cart-head h1 { font-size: 1.5rem; }
    .wume-cart-close { padding: 0; font-size: 1.6rem; }
    .wume-cart-foot { padding: 20px 0 28px; margin-top: 6px; }
    .wume-cart-subtotal-label { font-size: 1.25rem; }
    .wume-cart-taxnote { margin: 0 0 16px; }
    .wume-cart-checkout {
        padding: 16px;
        background: var(--wume-sage);
        color: var(--wume-black);
    }
    .wume-cart-empty { text-align: center; padding: 48px 24px; }
}

/* ── Editorial photo carousel (Home, V07/V10) ──────────────────────────── */
.wume-collage-carousel {
    width: 100%;
    overflow: hidden;
    margin: 0 -15px;
}
.wume-collage-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: wume-scroll-leftward 60s linear infinite;
}
.wume-collage-carousel:hover .wume-collage-track { animation-play-state: paused; }
.wume-collage-carousel-item {
    flex: 0 0 auto;
    width: 240px;
    height: 320px;
    overflow: hidden;
}
.wume-collage-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes wume-scroll-leftward {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Static asymmetric collage (legacy fallback) ────────────────────────── */
.wume-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.wume-collage > * { aspect-ratio: 4/5; overflow: hidden; }

/* ── Services tile grid (Home/Care) ────────────────────────────────────── */
.wume-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.wume-services-tile {
    background: var(--wume-paper);
    border: 1px solid var(--wume-sand);
    text-align: center;
    overflow: hidden;
}
.wume-services-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.wume-services-tile-kicker {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    padding: 12px 12px 4px;
}
.wume-services-tile-label {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.15rem;
    color: var(--wume-black);
    padding: 0 12px 16px;
    line-height: 1.3;
}
/* V25 Phase B cascade fix 2026-05-06: design mandates 1-up at <992. The
   prior 768 `repeat(2, 1fr)` rule has been deleted (was a Phase B leftover
   that contradicted the spec); 991.98's plain `1fr` now wins the cascade
   without needing !important. */
@media (max-width: 991.98px) {
    .wume-services-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ── Step-card (Care 4-step process) ───────────────────────────────────── */
.wume-step-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(523px, 41%);
    gap: 60px;
    align-items: center;
    margin-bottom: 151px;
}
.wume-step-card:nth-child(even) > .wume-step-card-image { order: 2; }
.wume-step-card-image { aspect-ratio: 523/654; overflow: hidden; }
.wume-step-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wume-step-card-kicker {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 8px;
}
.wume-step-card-title {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 2rem;
    margin-bottom: 16px;
}
.wume-step-card-body { font-size: 1rem; line-height: 1.6; }
/* V24 Phase B audit: bump 768 → 991.98 so the Care 4-step process stacks
   under the design's umbrella. Original 768 block kept for the 'order:0'
   override on small phones (a no-op once 991.98 already stacks). */
@media (max-width: 991.98px) {
    .wume-step-card { grid-template-columns: 1fr; gap: 24px; }
    .wume-step-card:nth-child(even) > .wume-step-card-image { order: 0; }
}

/* ── Care "what happens" — functionhealth-style sticky-stacking stepper (Figma note 446:7846) ──
   Base (mobile) = a normal stacked list; desktop pins each step at a staggered offset so a
   completed step collapses to its label bar while the active step shows full. CSS-only. */
.wume-care-steps { position: relative; }
.wume-step-panel { padding: 0 0 40px; }
.wume-step-panel-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.wume-step-panel-num { font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-brown); white-space: nowrap; }
.wume-step-panel-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: -0.6px; margin: 0; }
.wume-step-panel-body { margin-top: 20px; }
.wume-step-panel-copy p { font-family: var(--wume-font-body); font-size: 16px; line-height: 1.6; margin: 0; max-width: 640px; }
.wume-step-panel-media { margin-top: 20px; aspect-ratio: 523 / 380; overflow: hidden; }
.wume-step-panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 992px) {
    body.is-care-page .wume-step-panel {
        position: sticky;
        background: var(--wume-cream);
        border-top: 1px solid rgba(77, 61, 45, 0.14);
        border-radius: 16px 16px 0 0;
        padding: 26px 40px 46px;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
    }
    body.is-care-page .wume-step-panel:nth-child(1) { top: calc(var(--wume-nav-height) + 8px); }
    body.is-care-page .wume-step-panel:nth-child(2) { top: calc(var(--wume-nav-height) + 72px); }
    body.is-care-page .wume-step-panel:nth-child(3) { top: calc(var(--wume-nav-height) + 136px); }
    body.is-care-page .wume-step-panel:nth-child(4) { top: calc(var(--wume-nav-height) + 200px); }
    body.is-care-page .wume-step-panel-title { font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.is-care-page .wume-step-panel-body { display: grid; grid-template-columns: 1fr min(523px, 41%); gap: 48px; align-items: start; margin-top: 26px; }
    body.is-care-page .wume-step-panel-media { margin-top: 0; aspect-ratio: 523 / 430; }
}

/* ── Three-pillar block (Care) ─────────────────────────────────────────── */
.wume-three-pillar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.wume-three-pillar-image { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 16px; }
.wume-three-pillar-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wume-three-pillar-kicker {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 12px;
}
/* V24 Phase B audit: bump 768 → 991.98 so the Care 3-pillar row and
   Physicians "Our Standard" 6-pillar grid (which reuses .wume-three-pillar
   via Bootstrap row col grid in physicians.html.twig:218 onward) stack
   under the design's umbrella. */
@media (max-width: 991.98px) {
    .wume-three-pillar { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Pathway pills (Pathways comparison) ───────────────────────────────── */
.wume-pathway-pill-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
}
.wume-pathway-pill {
    background: var(--wume-paper);
    border: 1px solid var(--wume-sand);
    padding: 32px 48px;
    text-align: center;
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.4rem;
    line-height: 1.2;
    min-width: 220px;
}
.wume-pathway-pill-kicker {
    display: block;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.7rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 12px;
}
/* V24 Phase B — Pathways comparison pills stack on mobile. */
@media (max-width: 991.98px) {
    .wume-pathway-pill-row {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    .wume-pathway-pill {
        min-width: 0;
        width: 100%;
        max-width: 320px;
        padding: 24px 32px;
    }
}

/* ── Pathway flow SVG diagram (V31, Pathways "How It Works") ──
   Brown panel with a thin cream vertical line (Ongoing Care, continuous
   flow with a downward arrowhead) and a curved bezier line bowing right
   (Signature Pathway as a deviation that rejoins). Matches figma R1
   mobile [94:4293] precisely — two cream strokes on a brown rectangle,
   small-caps labels at line endpoints and the curve apex. Replaces the
   prior 4-overlapping-circle "rosette" (.wume-pathway-rings) which was a
   misreading of figma. */
.wume-pathway-flow {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
}
.wume-pathway-flow-bg {
    fill: var(--wume-brown);
}
.wume-pathway-flow-line {
    stroke: var(--wume-cream);
    stroke-width: 1;
    fill: none;
}
.wume-pathway-flow-label {
    fill: var(--wume-cream);
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 11px;
    letter-spacing: 0.16em;
}
@media (max-width: 991.98px) {
    .wume-pathway-flow { max-width: 340px; }
}
@media (max-width: 375px) {
    .wume-pathway-flow { max-width: 300px; }
}

/* ── Physician row (Physicians page) ───────────────────────────────────── */
.wume-physician-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.wume-physician-row-image { aspect-ratio: 3/4; overflow: hidden; }
.wume-physician-row-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wume-physician-row-credentials {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 8px;
}
.wume-physician-row-name {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 2rem;
    margin-bottom: 16px;
}
/* V24 Phase B audit: bump 768 → 991.98 so the 4-physician 2x2 grid stacks
   under the design's umbrella. Tighten name font for narrower viewports. */
@media (max-width: 991.98px) {
    .wume-physician-row { grid-template-columns: 1fr; gap: 24px; }
    .wume-physician-row-name { font-size: 1.75rem; }
}

/* ── Physician thumbnail row (V30, Physicians page) ──
   Compact 3-up grid for the non-Wu physicians (Hammerman + 2 placeholder
   Lorem Ipsum). Replaces the prior 3 stacked .wume-physician-row sections
   so the inline figma R1 mobile layout is honored. Stays 3-up across
   desktop/tablet/phone; the portraits compress with the viewport but the
   row stays horizontal because figma shows it at 393px width with all 3
   thumbnails visible. */
.wume-physician-thumbnail-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.wume-physician-thumbnail-image {
    aspect-ratio: 3/4;
    overflow: hidden;
    margin-bottom: 14px;
}
.wume-physician-thumbnail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wume-physician-thumbnail-credentials {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 6px;
}
.wume-physician-thumbnail-name {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.2rem;
    margin-bottom: 0;
}
@media (max-width: 991.98px) {
    .wume-physician-thumbnail-row { gap: 12px; }
    .wume-physician-thumbnail-credentials { font-size: 0.62rem; }
    .wume-physician-thumbnail-name { font-size: 0.92rem; }
}
@media (max-width: 360px) {
    .wume-physician-thumbnail-row { grid-template-columns: 1fr; gap: 24px; }
    .wume-physician-thumbnail-name { font-size: 1.2rem; }
}

/* ── Architectural band (full-bleed image with overlay text) ───────────── */
.wume-architectural-band {
    position: relative;
    height: 320px;
    overflow: hidden;
}
.wume-architectural-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wume-architectural-band-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wume-cream);
    font-family: var(--wume-font-heading);
    font-size: 2rem;
    background: rgba(77, 61, 45, 0.4);
    text-align: center;
    padding: 0 20px;
}
/* V24 Phase B — architectural band shorter on mobile, smaller overlay text. */
@media (max-width: 991.98px) {
    .wume-architectural-band {
        height: 220px;
    }
    .wume-architectural-band-overlay {
        font-size: 1.4rem;
    }
}

/* ── Doctoral Digest grid (Home/Visit) ─────────────────────────────────── */
.wume-doctor-digest-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.wume-doctor-digest-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.wume-doctor-digest-card:hover { color: var(--wume-lbrown); }
.wume-doctor-digest-card-image {
    aspect-ratio: 3/4;
    overflow: hidden;
    margin-bottom: 16px;
}
.wume-doctor-digest-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.wume-doctor-digest-card:hover .wume-doctor-digest-card-image img { transform: scale(1.04); }
.wume-doctor-digest-card-date {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 6px;
}
.wume-doctor-digest-card-title {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--wume-black);
}
/* V25 Phase B cascade fix 2026-05-06: design mandates 1-up at <992. The
   prior 768 `repeat(2, 1fr)` rule has been deleted; 991.98's plain `1fr`
   now wins the cascade without !important. */
@media (max-width: 991.98px) {
    .wume-doctor-digest-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ── Contact panels (Visit) ────────────────────────────────────────────── */
.wume-contact-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.wume-contact-panel {
    background: var(--wume-brown);
    color: var(--wume-cream);
    padding: 48px 32px;
    text-decoration: none;
    transition: background 0.2s;
    border-right: 1px solid rgba(242, 240, 235, 0.18);
}
.wume-contact-panel:last-child { border-right: 0; }
.wume-contact-panel:hover { background: var(--wume-lbrown); color: var(--wume-cream); }
.wume-contact-panel-kicker {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-cream);
    margin-bottom: 12px;
}
.wume-contact-panel-title {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.5rem;
    color: var(--wume-cream);
    margin-bottom: 12px;
}
.wume-contact-panel-detail { color: var(--wume-cream); font-size: 0.95rem; }
/* V24 Phase B — Email/Phone/Office contact panels stack with bottom border
   separator (was right border in 3-up desktop). V25 cascade fix: redundant
   768 duplicate of this block deleted. */
@media (max-width: 991.98px) {
    .wume-contact-panel-grid { grid-template-columns: 1fr; }
    .wume-contact-panel {
        border-right: 0;
        border-bottom: 1px solid rgba(242, 240, 235, 0.18);
        padding: 32px 24px;
    }
    .wume-contact-panel:last-child { border-bottom: 0; }
}

/* ── Press swatch grid (Visit/Home, replaces .wume-press-grid) ─────────── */
.wume-press-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 32px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.wume-press-swatch {
    background: var(--wume-brown);
    color: var(--wume-cream);
    aspect-ratio: 2/1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.7rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    padding: 6px;
}
.wume-press-wall .wume-press-swatch { aspect-ratio: 3/2; }
/* V25 Phase B cascade fix 2026-05-06: spec section 3.2.5 wants 6 → 2 at
   <992 and 2 → 1 at <576. The conflicting 768 `repeat(3, 1fr)` rule has
   been deleted; 991.98 + 575.98 now form a clean monotonic cascade with
   no !important. */
@media (max-width: 991.98px) {
    .wume-press-swatch-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 575.98px) {
    .wume-press-swatch-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Testimonial cards (Home) ──────────────────────────────────────────── */
.wume-testimonial-card {
    background: var(--wume-paper);
    border: 1px solid var(--wume-sand);
    padding: 32px;
    height: 100%;
}
.wume-testimonial-card-name {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 4px;
}
.wume-testimonial-card-headline {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    margin-bottom: 16px;
}
.wume-testimonial-card-body { font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
.wume-testimonial-card-quote {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.4rem;
    line-height: 1.3;
}

/* ── In-page invite form (Home, Care) ──────────────────────────────────── */
.wume-invite-form {
    background: var(--wume-brown);
    color: var(--wume-cream);
    padding: 80px 0;
}
.wume-invite-form .wume-section-title { color: var(--wume-cream); }
.wume-invite-form .wume-section-subtitle { color: var(--wume-cream); }
.wume-invite-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 600px;
    margin: 32px auto 0;
}
.wume-invite-form-fields .full-width { grid-column: 1 / -1; }
.wume-invite-form-fields .form-control {
    background: rgba(242, 240, 235, 0.12);
    border: 1px solid rgba(242, 240, 235, 0.3);
    color: var(--wume-cream);
    border-radius: 0;
    padding: 12px 14px;
}
.wume-invite-form-fields .form-control::placeholder { color: rgba(242, 240, 235, 0.55); }
.wume-invite-form-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}
.wume-invite-form .wume-btn-primary,
.wume-invite-form .wume-btn-outline {
    background: var(--wume-cream);
    color: var(--wume-brown);
    border-color: var(--wume-cream);
}
.wume-invite-form .wume-btn-outline {
    background: transparent;
    color: var(--wume-cream);
    border-color: var(--wume-cream);
}

/* ── Account split (Account page) ──────────────────────────────────────── */
.wume-account-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}
.wume-account-split-pane { padding: 80px 60px; }
.wume-account-split-pane--brown { background: var(--wume-brown); color: var(--wume-cream); }
.wume-account-form .form-control {
    border-radius: 0;
    border: 1px solid var(--wume-sand);
    background: var(--wume-paper);
    margin-bottom: 12px;
}
/* V26 Phase C — Account split breakpoint moved 768 → 991.98 to align with the
   umbrella mobile breakpoint. Form pane is first in DOM, so it naturally
   stacks above the brown invite pane on mobile (no explicit `order: -1`
   needed — the spec's sidebar-above-content intent is already satisfied by
   DOM order). At <769 the panes get tighter padding so they don't dominate
   small phones. */
@media (max-width: 991.98px) {
    .wume-account-split { grid-template-columns: 1fr; }
    .wume-account-split-pane { padding: 60px 32px; }
}
@media (max-width: 768px) {
    .wume-account-split-pane { padding: 48px 24px; }
}

/* ── FAQ category headings (FAQ standalone page) ───────────────────────── */
.wume-faq-category { margin-bottom: 40px; }
.wume-faq-category-heading {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.85rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-black);
    border-bottom: 1px solid var(--wume-sand);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

/* ── Article body (Journal Detail) ─────────────────────────────────────── */
.wume-article-body { font-size: 1.05rem; line-height: 1.7; max-width: 720px; margin: 0 auto; }
.wume-article-body p { margin-bottom: 1.2em; }
.wume-article-pullquote {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 1.6rem;
    line-height: 1.3;
    border-left: 3px solid var(--wume-brown);
    padding-left: 24px;
    margin: 32px 0;
}
/* V26 Phase C — Journal Detail mobile reflow. The reading column already
   caps at 720px on desktop; on mobile we need horizontal breathing room so
   copy doesn't hug the viewport edge, and the pull-quote indent + size
   compress so the rule line doesn't dominate. */
@media (max-width: 991.98px) {
    .wume-article-body {
        padding: 0 1.25rem;
        font-size: 1rem;
    }
    .wume-article-pullquote {
        font-size: clamp(1.2rem, 4.5vw, 1.5rem);
        padding-left: 16px;
        margin: 24px 0;
    }
}

/* ── Misc collective/journal section wrappers ──────────────────────────── */
.wume-collective { padding: 80px 0; }
.wume-journal { padding: 80px 0; }
.wume-model { padding: 80px 0; }

/* ════════════════════════════════════════════════════════════════════════
   V26 Phase C — Extrapolated-pages mobile reflow
   journal-index pill row, search input row + suggestions, FAQ category
   spacing, 404 band scaling. No figma reference — pattern extrapolation
   per spec section 3.3. The relevant selectors render with no desktop CSS
   today (Bootstrap defaults + inline styles); these rules only apply at
   <992 so desktop visual stays untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Journal index — filter pill row flex-wraps with tighter gap; pills
       scale down so 6 pills fit at 375 without horizontal overflow. */
    .wume-pill-row {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .wume-pill {
        font-size: 0.85rem;
        padding: 8px 14px;
    }

    /* Search — input row stacks (input above button) so the field gets
       full viewport width; suggestion pills flex-wrap. */
    .wume-search-input-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .wume-search-input-row .form-control {
        font-size: 1rem;
    }
    .wume-search-input-row .btn {
        align-self: flex-start;
    }
    .wume-search-suggestions {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    .wume-search-suggestion {
        font-size: 0.85rem;
    }
    .wume-search-empty {
        text-align: center;
        padding: 0 1.25rem;
    }

    /* FAQ — accordion already vertical; tighter category margin so 6
       categories don't push the footer too far. The .wume-section padding
       compression from the Phase B universal rule already shrinks vertical
       chrome around each category. */
    .wume-faq-category {
        margin-bottom: 28px;
    }

    /* 404 — band already centered single-element; .wume-hero-tagline +
       .wume-hero-title scaling from the Phase B universal rules already
       applies. Add slight vertical-padding compression and constrain the
       backdrop image so it doesn't paint past the band on small viewports. */
    .wume-404 { padding-top: 48px; }
    .wume-404-title { font-size: 32px; letter-spacing: -0.8px; }
    .wume-404-photos { grid-template-columns: repeat(3, 1fr); }
    .wume-404-photos img { height: 220px; }
}

/* ========================================================================
   V21 — Color-token compound overrides + Request-an-Invitation panel restyle
   ======================================================================== */

/* Hero background variants — compound selectors win over the base
   .wume-hero { background: cream } rule by specificity (2 classes vs 1).
   Without these, declaring class="wume-hero wume-section-brown" still
   rendered cream because .wume-hero comes after .wume-section-brown
   in source order with equal specificity. */
.wume-hero.wume-section-brown  { background: var(--wume-brown);  color: var(--wume-text-on-brown); }
.wume-hero.wume-section-sage   { background: var(--wume-sage);   color: var(--wume-text-on-sage); }
.wume-hero.wume-section-alt    { background: var(--wume-sand);   color: var(--wume-text-on-sand); }
.wume-hero.wume-section-lbrown { background: var(--wume-lbrown); color: var(--wume-text-on-lbrown); }

/* ── Right-side invite panel — V32 figma R1 rebuild, V33 responsive ──
   Mobile figma [94:5575]: single-column stack — sand outer with cream
   form-card inset, brown text, sage-green SEND button, contact info on
   sand below the form-card.
   Desktop figma [94:3447]: two-column card — sand LEFT column (kicker,
   heading, subtitle, contact-info at bottom) + cream RIGHT column (form
   filling full height). The structural switch happens at min-width 992. */
.wume-invite-panel {
    background: var(--wume-sand);
    color: var(--wume-brown);
}
.wume-invite-panel-close {
    color: var(--wume-brown);
}

/* Body wrapper: flex column on mobile (left → right → footer order),
   2-col grid with grid-template-areas on desktop (left at top of col 1,
   footer at bottom of col 1, right spans both rows of col 2). The
   desktop bg uses a linear-gradient to give left half sand and right
   half cream without coloring each child explicitly. */
.wume-invite-panel-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
@media (min-width: 992px) {
    .wume-invite-panel-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "left   right"
            "footer right";
        gap: 0;
        min-height: 100vh;
        background: linear-gradient(to right, var(--wume-sand) 50%, var(--wume-cream) 50%);
    }
}

/* Left column (sand bg via panel ground). Contains kicker + title + subtitle. */
.wume-invite-panel-left {
    padding: 48px 24px 8px;
}
@media (min-width: 992px) {
    .wume-invite-panel-left {
        grid-area: left;
        padding: 64px 48px 24px;
        background: transparent; /* gradient on body shows through */
    }
}

/* Right column. Mobile: transparent (form-card holds the cream). Desktop:
   transparent too (gradient on body provides cream half). Padding goes
   on the form-card mobile and on the column directly on desktop. */
.wume-invite-panel-right {
    padding: 16px 16px 24px;
}
@media (min-width: 992px) {
    .wume-invite-panel-right {
        grid-area: right;
        padding: 64px 48px 48px;
        background: transparent;
    }
}

.wume-invite-panel-kicker {
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.72rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-brown);
    line-height: 1.4;
    margin: 0 0 24px;
}

/* Title + subtitle. */
.wume-invite-panel-inner h2 {
    font-family: var(--wume-font-heading);
    font-weight: var(--wume-w-heading);
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--wume-brown);
}
@media (min-width: 992px) {
    .wume-invite-panel-inner h2 { font-size: 2.5rem; }
}
.wume-invite-panel-inner > p {
    font-family: var(--wume-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 24px;
    color: var(--wume-brown);
}

/* Mobile form-card: cream inset with surrounding sand visible.
   Desktop: no separate card — the right column is fully cream. */
.wume-invite-panel-form-card {
    background: var(--wume-cream);
    padding: 28px 24px;
    margin: 0 0 28px;
}
@media (min-width: 992px) {
    .wume-invite-panel-form-card {
        background: transparent;
        padding: 0;
        margin: 0;
    }
}

/* Field-pair: stacked mobile, 2-col desktop. */
.wume-invite-field-pair {
    display: block;
}
@media (min-width: 992px) {
    .wume-invite-field-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* Checkbox row inside fieldset: stacked mobile, inline desktop. */
.wume-invite-check-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 992px) {
    .wume-invite-check-row {
        flex-direction: row;
        gap: 24px;
        flex-wrap: wrap;
    }
}

/* Line-underline form field — label above, underlined input below. */
.wume-invite-field {
    margin: 0 0 20px;
}
.wume-invite-label {
    display: block;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.7rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-brown);
    margin: 0 0 8px;
}
.wume-invite-input {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--wume-brown);
    border-radius: 0;
    padding: 4px 0 6px;
    font-family: var(--wume-font-body);
    font-size: 1rem;
    color: var(--wume-brown);
    outline: none;
    box-shadow: none;
}
.wume-invite-input:focus {
    border-bottom-width: 2px;
}

/* Checkbox group fieldset (Interest, Contact Method). */
.wume-invite-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}
.wume-invite-fieldset legend {
    padding: 0;
    margin-bottom: 10px;
}
.wume-invite-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wume-brown);
    margin: 0 0 8px;
    cursor: pointer;
}
.wume-invite-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--wume-brown);
    margin: 0;
}

/* Sage-green full-width SEND button. */
.wume-invite-send {
    display: block;
    width: 100%;
    background: var(--wume-sage);
    color: var(--wume-cream);
    border: 0;
    border-radius: 0;
    padding: 18px 24px;
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.85rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 8px;
}
.wume-invite-send:hover {
    background: var(--wume-brown);
    color: var(--wume-cream);
}

/* Contact info block. Mobile: below the form-card on sand panel
   (third item in flex column). Desktop: bottom of LEFT column via
   grid-area: footer. */
.wume-invite-panel-footer {
    font-family: var(--wume-font-body);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    color: var(--wume-brown);
    line-height: 1.6;
    padding: 0 24px 32px;
}
@media (min-width: 992px) {
    .wume-invite-panel-footer {
        grid-area: footer;
        padding: 0 48px 48px;
        font-size: 0.7rem;
    }
}
.wume-invite-panel-footer p {
    margin: 0 0 14px;
}
.wume-invite-panel-footer a {
    color: var(--wume-brown);
    text-decoration: none;
}
.wume-invite-panel-footer a:hover {
    text-decoration: underline;
}

/* ========================================================================
   V34 — Home-page figma R1 desktop [94:681] high-fidelity overrides
   ======================================================================== */

/* Hero: left-aligned heading/subtitle/CTAs at max-width 60%, with kicker
   pinned to the upper-right corner of the hero band. Scoped via
   body.is-home-page so the centered .wume-hero base rule remains the default
   for every other page. */
body.is-home-page .wume-hero {
    text-align: left;
    position: relative;
}
body.is-home-page .wume-hero .container {
    position: relative;
}
body.is-home-page .wume-hero-content {
    max-width: 60%;
}
body.is-home-page .wume-hero-title {
    margin-left: 0;
    margin-right: 0;
}
body.is-home-page .wume-hero-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}
body.is-home-page .wume-hero-tagline--corner {
    position: absolute;
    top: 32px;
    right: var(--bs-gutter-x, 1.5rem);
    margin: 0;
    text-align: right;
}

/* Mobile fallback (<992): hero content widens to full container, kicker
   returns to inline position (no longer absolute corner). LEFT-align is
   preserved — figma mobile keeps the hero left-aligned just like desktop
   (V40 corrected from a prior incorrect "re-center" reset). */
@media (max-width: 991.98px) {
    body.is-home-page .wume-hero {
        text-align: left;
    }
    body.is-home-page .wume-hero-content {
        max-width: 100%;
    }
    body.is-home-page .wume-hero-tagline--corner {
        position: static;
        text-align: left;
        margin-bottom: 16px;
    }
}

/* Navbar: continuous brown chrome from page-top through hero on the home
   page. The cream-on-cream base rules become cream-on-brown here. */
body.is-home-page .wume-navbar:not(.is-scrolled) {
    background: var(--wume-brown);
    border-bottom-color: var(--wume-lbrown);
}
body.is-home-page .wume-nav-items .nav-link,
body.is-home-page .wume-nav-items .nav-link:hover,
body.is-home-page .wume-nav-items .nav-link:focus {
    color: var(--wume-cream);
}
body.is-home-page .wume-btn-nav-login,
body.is-home-page .wume-btn-nav-login:hover {
    color: var(--wume-cream);
}
body.is-home-page .wume-cart-icon {
    color: var(--wume-cream);
}

/* Press logo grid: 4-up real logo images replacing the 6-up text swatch
   boxes. The container element ensures the logos line up on a baseline,
   stay vertically centered, and shrink-fit inside their cell at max-height
   48px (matches figma R1 logo treatment). */
.wume-press-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: center;
    justify-items: center;
    margin: 32px auto 0;
    max-width: 1100px;
}
.wume-press-logo-grid img {
    max-height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
@media (max-width: 991.98px) {
    .wume-press-logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (max-width: 575.98px) {
    .wume-press-logo-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   V35 — Care-page figma R1 desktop [94:1510] high-fidelity overrides
   ======================================================================== */

/* Chrome: hide the brown announcement bar and flip the navbar to sage so
   the top of the page reads as one continuous sage surface from page-top
   through the sage hero. */
body.is-care-page #announcement-bar {
    display: none;
}
body.is-care-page .wume-navbar:not(.is-scrolled) {
    background: var(--wume-sage);
    border-bottom-color: var(--wume-lbrown);
}
/* Sage → black per brand text-on-bg rule. Nav links + Sign In + cart icon
   already default to black; explicit re-statement keeps overrides safe if
   future site-wide changes flip those defaults. */
body.is-care-page .wume-nav-items .nav-link,
body.is-care-page .wume-nav-items .nav-link:hover,
body.is-care-page .wume-nav-items .nav-link:focus,
body.is-care-page .wume-btn-nav-login,
body.is-care-page .wume-cart-icon {
    color: var(--wume-black);
}

/* Hero: 2-column layout — heading + jump-links anchor the LEFT column,
   .wume-hero-body paragraph occupies the indented middle-right column.
   .wume-hero rule has text-align:center by default; override scoped to
   .is-care-page flips the section to left-align inside the LEFT column
   while leaving the .wume-hero-body free to float into its own column. */
body.is-care-page .wume-hero {
    background: var(--wume-sage);
    color: var(--wume-text-on-sage);
    text-align: left;
}
body.is-care-page .wume-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 267px) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
}
body.is-care-page .wume-hero-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 36px;
    max-width: 100%;
}
body.is-care-page .wume-hero-body {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    max-width: 670px;
    font-size: 0.95rem;
    line-height: 1.6;
}
body.is-care-page .wume-hero-jumps {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 64px;
}

/* Jump-link cluster on Care: LEFT-aligned, with a "□" marker prefix on
   each link via :before. Other pages keep the centered .wume-jump-links
   cluster as defined in the global rule. */
body.is-care-page .wume-jump-links {
    justify-content: flex-start;
    gap: 32px;
}
body.is-care-page .wume-jump-link::before {
    content: "\25A1";  /* WHITE SQUARE U+25A1 — matches figma's outlined-square marker */
    margin-right: 8px;
    font-size: 0.85em;
}

/* Hero mobile fallback (<992): collapse the 2-col grid back to a single
   column so the body paragraph sits BELOW the heading and jump-links
   re-center. */
@media (max-width: 991.98px) {
    body.is-care-page .wume-hero .container {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    body.is-care-page .wume-hero-body {
        grid-column: 1;
        grid-row: 2;
        max-width: 100%;
    }
    body.is-care-page .wume-hero-jumps {
        grid-row: 3;
        margin-top: 24px;
    }
    body.is-care-page .wume-jump-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* Step-card LEFT-half sub-2-column row: narrow far-LEFT column for the
   "step I." kicker, wider middle column for the body paragraph. The
   step-card heading remains above this row spanning the full left half. */
.wume-step-card-body-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    column-gap: 24px;
    align-items: start;
}
.wume-step-card-body-row .wume-step-card-kicker {
    margin: 0;
    padding-top: 2px;
}
.wume-step-card-body-row .wume-step-card-body {
    margin: 0;
}
@media (max-width: 991.98px) {
    .wume-step-card-body-row {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
}

/* 3-pillar ROW layout (Care figma R1): 3 stacked rows, each row a
   3-column grid (small square photo LEFT + kicker MID-LEFT + body
   paragraph RIGHT). Distinct from .wume-three-pillar which is the
   3-COLUMN grid still used by physicians.html.twig for the "Our
   Standard" 6-pillar grid. */
.wume-three-pillar-rows {
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.wume-three-pillar-rows > .wume-three-pillar-row {
    display: grid;
    grid-template-columns: 220px 220px 1fr;
    column-gap: 40px;
    align-items: start;
}
.wume-three-pillar-rows .wume-three-pillar-image {
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
}
.wume-three-pillar-rows .wume-three-pillar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wume-three-pillar-rows .wume-three-pillar-kicker {
    margin: 0;
    max-width: 180px;
}
.wume-three-pillar-rows .wume-three-pillar-body {
    margin: 0;
    max-width: 460px;
    font-size: 0.95rem;
    line-height: 1.6;
}
@media (max-width: 991.98px) {
    .wume-three-pillar-rows > .wume-three-pillar-row {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    .wume-three-pillar-rows .wume-three-pillar-image {
        aspect-ratio: 4 / 3;
    }
    .wume-three-pillar-rows .wume-three-pillar-kicker,
    .wume-three-pillar-rows .wume-three-pillar-body {
        max-width: 100%;
    }
}

/* ========================================================================
   V36 — Care-page V08-fix: lock all step-card photos to the RIGHT
   ======================================================================== */

/* Override the .wume-step-card:nth-child(even) > .wume-step-card-image
   { order: 2 } alternation rule. On Care, ALL step-cards put their photo
   on the RIGHT (text on LEFT), matching figma R1 [94:1510]. */
body.is-care-page .wume-step-card > .wume-step-card-image {
    order: 2;
}

/* ========================================================================
   V37 — Pathways-page figma R1 desktop [94:1855] high-fidelity overrides
   ======================================================================== */

/* Chrome: hide the brown announcement bar and flip the navbar to brown so
   the top of the page reads as one continuous brown surface from page-top
   through the brown hero. */
body.is-pathways-page #announcement-bar {
    display: none;
}
body.is-pathways-page .wume-navbar:not(.is-scrolled) {
    background: var(--wume-brown);
    border-bottom-color: var(--wume-lbrown);
}
/* Brown → cream per brand text-on-bg rule. Nav links + Sign In + cart icon
   need explicit cream because they default to black. */
body.is-pathways-page .wume-nav-items .nav-link,
body.is-pathways-page .wume-nav-items .nav-link:hover,
body.is-pathways-page .wume-nav-items .nav-link:focus,
body.is-pathways-page .wume-btn-nav-login,
body.is-pathways-page .wume-btn-nav-login:hover,
body.is-pathways-page .wume-cart-icon {
    color: var(--wume-cream);
}

/* Hero: 2-column layout — heading + jump-links anchor the LEFT column,
   .wume-hero-body paragraph occupies the indented middle-right column.
   Mirrors the Care V35 hero pattern. */
body.is-pathways-page .wume-hero {
    text-align: left;
}
body.is-pathways-page .wume-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
}
body.is-pathways-page .wume-hero-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 36px;
    max-width: 100%;
}
body.is-pathways-page .wume-hero-body {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    max-width: 470px;
    font-size: 0.95rem;
    line-height: 1.6;
}
body.is-pathways-page .wume-hero-jumps {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 64px;
}

/* Jump-link cluster on Pathways: LEFT-aligned, cream text on brown ground,
   with a "□" marker prefix on each link. Replaces the inline cream
   color/border attributes that lived on each <a> in V09. */
body.is-pathways-page .wume-jump-links {
    justify-content: flex-start;
    gap: 32px;
}
body.is-pathways-page .wume-jump-link {
    color: var(--wume-cream);
    border-color: var(--wume-cream);
}
body.is-pathways-page .wume-jump-link:hover {
    color: var(--wume-cream);
    border-color: var(--wume-cream);
}
body.is-pathways-page .wume-jump-link::before {
    content: "\25A1";
    margin-right: 8px;
    font-size: 0.85em;
}

/* Hero mobile fallback (<992): collapse the 2-col grid back to a single
   column so the body paragraph sits BELOW the heading and jump-links
   re-center. */
@media (max-width: 991.98px) {
    body.is-pathways-page .wume-hero .container {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    body.is-pathways-page .wume-hero-body {
        grid-column: 1;
        grid-row: 2;
        max-width: 100%;
    }
    body.is-pathways-page .wume-hero-jumps {
        grid-row: 3;
        margin-top: 24px;
    }
    body.is-pathways-page .wume-jump-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ========================================================================
   V38 — Physicians-page figma R1 desktop [94:1992] high-fidelity overrides
   ======================================================================== */

/* Chrome: hide the brown announcement bar and flip the navbar to sand so
   the top of the page reads as one continuous sand surface from page-top
   through the sand hero. */
body.is-physicians-page #announcement-bar {
    display: none;
}
body.is-physicians-page .wume-navbar:not(.is-scrolled) {
    background: var(--wume-sand);
    border-bottom-color: var(--wume-lbrown);
}
/* Sand → black per brand text-on-bg rule. Nav links + Sign In + cart
   default to black; explicit re-statement keeps overrides safe. */
body.is-physicians-page .wume-nav-items .nav-link,
body.is-physicians-page .wume-nav-items .nav-link:hover,
body.is-physicians-page .wume-nav-items .nav-link:focus,
body.is-physicians-page .wume-btn-nav-login,
body.is-physicians-page .wume-cart-icon {
    color: var(--wume-black);
}

/* Hero: 2-column layout — heading + jump-links anchor the LEFT column,
   .wume-hero-body paragraph occupies the indented middle-right column.
   Mirrors the Care V35 hero pattern. */
body.is-physicians-page .wume-hero {
    text-align: left;
}
body.is-physicians-page .wume-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
}
body.is-physicians-page .wume-hero-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 36px;
    max-width: 100%;
}
body.is-physicians-page .wume-hero-body {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    max-width: 460px;
    font-size: 0.95rem;
    line-height: 1.6;
}
body.is-physicians-page .wume-hero-jumps {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 64px;
}

/* Jump-link cluster on Physicians: LEFT-aligned, black text on sand
   ground, with "□" marker prefix on each link. */
body.is-physicians-page .wume-jump-links {
    justify-content: flex-start;
    gap: 32px;
}
body.is-physicians-page .wume-jump-link::before {
    content: "\25A1";
    margin-right: 8px;
    font-size: 0.85em;
}

/* Hero mobile fallback (<992): collapse 2-col → 1-col, re-center the
   jump-link cluster. */
@media (max-width: 991.98px) {
    body.is-physicians-page .wume-hero .container {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    body.is-physicians-page .wume-hero-body {
        grid-column: 1;
        grid-row: 2;
        max-width: 100%;
    }
    body.is-physicians-page .wume-hero-jumps {
        grid-row: 3;
        margin-top: 24px;
    }
    body.is-physicians-page .wume-jump-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ========================================================================
   V39 — Visit-page figma R1 desktop [94:2183] high-fidelity overrides
   ======================================================================== */

/* Chrome: hide the brown announcement bar so the cream navbar + cream
   hero form one continuous cream surface. No navbar color flip needed
   here — both default to cream. */
body.is-visit-page #announcement-bar {
    display: none;
}

/* Hero: 2-column layout — heading + jump-links anchor the LEFT column,
   .wume-hero-body paragraph occupies the indented middle-right column.
   Mirrors the Care V35 hero pattern. */
body.is-visit-page .wume-hero {
    text-align: left;
}
body.is-visit-page .wume-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 60px;
    align-items: start;
}
body.is-visit-page .wume-hero-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 16px;
    max-width: 100%;
}
body.is-visit-page .wume-hero-body {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    max-width: 340px;
    font-size: 0.95rem;
    line-height: 1.6;
}
body.is-visit-page .wume-hero-jumps {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 64px;
}

/* Jump-link cluster on Visit: LEFT-aligned, black text on cream ground,
   with "□" marker prefix on each link. */
body.is-visit-page .wume-jump-links {
    justify-content: flex-start;
    gap: 32px;
}
body.is-visit-page .wume-jump-link::before {
    content: "\25A1";
    margin-right: 8px;
    font-size: 0.85em;
}

/* Hero mobile fallback (<992): collapse 2-col → 1-col, re-center the
   jump-link cluster. */
@media (max-width: 991.98px) {
    body.is-visit-page .wume-hero .container {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    body.is-visit-page .wume-hero-body {
        grid-column: 1;
        grid-row: 2;
        max-width: 100%;
    }
    body.is-visit-page .wume-hero-jumps {
        grid-row: 3;
        margin-top: 24px;
    }
    body.is-visit-page .wume-jump-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ========================================================================
   V41 — Physician Application form (CV upload field styling)
   ======================================================================== */

/* CV/Resume Upload field: a label row + a cream-on-sand cube "UPLOAD"
   button below the label. The native file input is visually hidden but
   keyboard/screen-reader accessible. When a file is chosen, the JS
   handler in base.html.twig writes the filename into the .wume-invite-
   upload-filename span on the right of the UPLOAD button. */
.wume-invite-upload-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.wume-invite-upload-btn {
    display: inline-block;
    background: var(--wume-sand);
    color: var(--wume-brown);
    font-family: var(--wume-font-body);
    font-weight: var(--wume-w-sub);
    font-size: 0.78rem;
    letter-spacing: var(--wume-tracking-caps);
    text-transform: uppercase;
    padding: 16px 32px;
    border: 0;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.15s;
}
.wume-invite-upload-btn:hover,
.wume-invite-upload-btn:focus {
    background: var(--wume-sage);
    color: var(--wume-cream);
}
.wume-invite-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.wume-invite-upload-filename {
    font-family: var(--wume-font-body);
    font-size: 0.85rem;
    color: var(--wume-brown);
    margin-top: 4px;
    word-break: break-all;
}

/* ========================================================================
   V42 — Home bottom "Request an Invitation" CTA layout fix
   ======================================================================== */

/* Section: left-align heading + body inside the brown band. The
   text-center class has been removed from the section markup; this rule
   drops the centered `margin: 0 auto` from .wume-section-subtitle so the
   subtitle anchors to the container's left edge instead of centering. */
body.is-home-page .wume-invite-form .wume-section-title {
    text-align: left;
}
body.is-home-page .wume-invite-form .wume-section-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    text-align: left;
}

/* GET STARTED button on this bottom CTA: figma uses a sage-green button
   (matches the invite-panel SEND button color), full-width. The cream-
   on-brown inline style on the <button> in home.html.twig V13 is removed
   in V14; the sage color comes from this scoped rule instead. */
body.is-home-page .wume-invite-form .js-request-invite {
    background: var(--wume-sage);
    color: var(--wume-cream);
    border-color: var(--wume-sage);
    width: 100%;
    padding: 16px 24px;
}
body.is-home-page .wume-invite-form .js-request-invite:hover,
body.is-home-page .wume-invite-form .js-request-invite:focus {
    background: var(--wume-brown);
    color: var(--wume-cream);
    border-color: var(--wume-sage);
}

/* ========================================================================
   V45 — Navbar fidelity pass (figma R1 home frame [94:681])
   Markup partner: base.html.twig V48 navbar rewrite.
   ======================================================================== */

/* Wordmark dual-img: default shows the dark (black-on-transparent)
   variant; on body.is-home-page the cream variant takes over. */
.wume-logo-img {
    height: 36px;
    width: auto;
    display: inline-block;
}
.wume-logo .wume-logo-img--light {
    display: none;
}
body.is-home-page .wume-logo .wume-logo-img--dark {
    display: none;
}
body.is-home-page .wume-logo .wume-logo-img--light {
    display: inline-block;
}

/* Mobile wordmark shrinks per the existing rule at line ~1730 — these
   class-scoped rules track it so both variants behave the same way. */
@media (max-width: 991.98px) {
    .wume-logo-img {
        height: 28px;
    }
}
.wume-navbar.is-scrolled .wume-logo-img {
    height: 28px;
}

/* Right-group icon primitive: shared sizing/spacing for search, person,
   cart. Color inherits from the navbar text color (cream on brown,
   black on cream). */
.wume-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: inherit;
    text-decoration: none;
    font-size: 1.1rem;
    transition: opacity 0.15s;
}
.wume-nav-icon:hover,
.wume-nav-icon:focus {
    color: inherit;
    opacity: 0.7;
}

/* Mobile flex margin: the right group hugs the right edge so the cart
   cluster sits there, and the hamburger sits flush after it. */
@media (max-width: 991.98px) {
    .wume-nav-right {
        margin-left: auto;
    }
    .wume-navbar .navbar-toggler {
        margin-left: 4px;
        margin-right: 0;
    }
}

/* Announcement strip colors per figma R1 (pixel-sampled): HOME = brown band +
   cream text — the default .wume-announcement-bar (lbrown + cream) already
   supplies this, so no home override. SEARCH = sage band + dark text. (An
   earlier build wrongly tinted home sage; the figma shows home brown
   #4D3D2D/#715434 and only search sage #949B88.) */
body.is-search-page .wume-announcement-bar {
    background: var(--wume-sage);
    color: var(--wume-black);
}
body.is-search-page .wume-announcement-link {
    color: var(--wume-black);
}
body.is-search-page .wume-announcement-link:hover {
    color: var(--wume-black);
}

/* Home: the figma MOBILE home bar is the darker --wume-brown (#4D3D2D); the
   default lbrown (#715434) matches the desktop figma, so deepen it on phones. */
@media (max-width: 991.98px) {
    body.is-home-page .wume-announcement-bar { background: var(--wume-brown); }
}

/* Home navbar: kill the bottom divider line so the brown navbar reads
   as one continuous surface with the brown hero below it. V46 — also
   sets text color to cream so every descendant that uses `color: inherit`
   (search/person nav icons, hamburger glyph) renders in cream rather
   than the body-default black. */
body.is-home-page .wume-navbar {
    border-bottom: 0;
    color: var(--wume-cream);
}
body.is-home-page .wume-navbar .navbar-toggler {
    color: var(--wume-cream);
}

/* Home nav links: drop the default uppercase + caps-letter-spacing and
   render in sentence case (figma R1 desktop home shows "Care", "Pathways",
   not "CARE", "PATHWAYS"). */
body.is-home-page .wume-nav-items .nav-link {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
}

/* Home Request-button: cream outline on brown — transparent fill, 1px
   cream border, cream text. Overrides the global .wume-btn-primary
   solid-black default. */
body.is-home-page .wume-nav-right .wume-btn-request,
body.is-home-page .wume-nav-right .wume-btn-request:focus {
    background: transparent;
    color: var(--wume-cream);
    border: 1px solid var(--wume-cream);
    text-transform: uppercase;
    letter-spacing: var(--wume-tracking-caps);
}
/* Hover = sage green (figma callout 446:7137: "the button turns green on hover").
   This home-only override (specificity 0,4,1) beats the global sage hover at ~1064,
   so the green must be set here too; matches the black-on-sage treatment the
   non-home nav button already uses. */
body.is-home-page .wume-nav-right .wume-btn-request:hover {
    background: var(--wume-sage);
    color: var(--wume-black);
    border-color: var(--wume-sage);
}

/* ========================================================================
   V49 — Bottom "Request an Invitation" CTA: photo background + overlay
   (audit item C). The `.wume-invite-form.wume-section-brown` selector
   (specificity 0,2,0) beats the plain `.wume-section-brown` rule so the
   photo + overlay layered backgrounds take precedence. The linear-
   gradient layer paints a brown ~55%-opacity tint over the hourglass
   photo behind it. Applies globally to every page using this section.
   ======================================================================== */
.wume-invite-form.wume-section-brown {
    background-color: var(--wume-brown);
    background-image:
        linear-gradient(rgba(77, 61, 45, 0.55), rgba(77, 61, 45, 0.55)),
        url('../img/figma/73f1a227e63e03c4b59e4f67d951933272caa5d6.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--wume-cream);
}

/* ========================================================================
   V50 — Heading + subtitle left-alignment cascade (audit item D).
   When a `.wume-section` (or `.wume-section-alt`) does NOT carry the
   `text-center` modifier, the heading inherits `text-align: left` from
   the document default, but the subtitle's `max-width: 600px; margin:
   0 auto` would still box-center it, leaving a narrow centered column
   under a left-aligned heading. This rule anchors the subtitle to the
   container's left edge in that case.
   ======================================================================== */
.wume-section:not(.text-center) .wume-section-subtitle,
.wume-section-alt:not(.text-center) .wume-section-subtitle,
.wume-invite-form:not(.text-center) .wume-section-subtitle {
    max-width: 720px;
    margin-left: 0;
    margin-right: 0;
}

/* ========================================================================
   V52 — Home mobile carousels (audit item 2) + footer 2-photo grid (item 4)
   ======================================================================== */

/* Mobile horizontal carousel for the home services grid (7 treatment
   tiles) and the home testimonial row. Both use native scroll-snap so
   touch-scroll snaps each tile/card to the start of the viewport. */
@media (max-width: 991.98px) {
    .wume-services-grid {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
    }
    .wume-services-grid > .wume-services-tile {
        flex: 0 0 75%;
        scroll-snap-align: start;
    }

    /* Testimonial row uses a scoping class added in home.html.twig V17
       so this rule doesn't apply to other Bootstrap rows. */
    .wume-testimonial-row {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        gap: 16px;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
    }
    .wume-testimonial-row > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: start;
    }
}

/* Footer 2-photo grid — figma R1 places two portrait crops inside the
   sage footer, between the WUME wordmark row and the content columns.
   Markup added in base.html.twig V54. */
.wume-footer-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 40px;
    max-width: 560px;
}
.wume-footer-photos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 274 / 350;
    object-fit: cover;
}

/* ── Legal / policy skeleton pages (privacy, terms, cookie-policy) — V96 ── */
.wume-legal { max-width: 760px; }
.wume-legal-kicker {
    font-family: var(--wume-font-body);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wume-lbrown);
    margin: 0 0 12px;
}
.wume-legal-title { margin: 0 0 8px; }
.wume-legal-updated {
    font-family: var(--wume-font-body);
    font-size: 13px;
    color: var(--wume-lbrown);
    margin: 0 0 32px;
}
.wume-legal-body p {
    font-family: var(--wume-font-body);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 20px;
}
.wume-legal-body h2 {
    font-family: var(--wume-font-heading);
    font-size: 1.5rem;
    margin: 36px 0 12px;
}
.wume-legal-body a { color: var(--wume-black); text-decoration: underline; }

/* ── Cookie consent banner (base.html.twig; site-wide, shown once) — V96 ── */
.wume-cookie-banner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: var(--wume-brown);
    color: var(--wume-cream);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
.wume-cookie-banner.is-visible { display: block; }
.wume-cookie-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.wume-cookie-text {
    margin: 0;
    flex: 1 1 340px;
    font-family: var(--wume-font-body);
    font-size: 14px;
    line-height: 1.55;
}
.wume-cookie-text a { color: var(--wume-cream); text-decoration: underline; }
.wume-cookie-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.wume-cookie-btn {
    font-size: 0.72rem;
    padding: 10px 22px;
    white-space: nowrap;
}
.wume-cookie-banner .wume-btn-primary {
    background: var(--wume-sage);
    border-color: var(--wume-sage);
    color: var(--wume-black);
}
.wume-cookie-banner .wume-btn-primary:hover,
.wume-cookie-banner .wume-btn-primary:focus {
    background: var(--wume-cream);
    border-color: var(--wume-cream);
    color: var(--wume-black);
}
.wume-cookie-banner .wume-btn-outline {
    background: transparent;
    border-color: var(--wume-cream);
    color: var(--wume-cream);
}
.wume-cookie-banner .wume-btn-outline:hover,
.wume-cookie-banner .wume-btn-outline:focus {
    background: var(--wume-cream);
    color: var(--wume-brown);
}
@media (max-width: 700px) {
    .wume-cookie-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 20px;
    }
    .wume-cookie-actions { width: 100%; }
    .wume-cookie-btn { flex: 1 1 auto; text-align: center; }
}

/* ── Reveal-password toggle (injected by the base.html.twig V122 script) ──
   The script wraps each password field in .wume-pw-wrap and appends an eye
   button. It covers every password box on the customer site — the wume-styled
   sign-in / checkout fields and the stock Sylius form-control inputs alike.
   The input's own bottom margin collapses through the block wrapper, so the
   wrapper is exactly the input's height and the button centres on it. The
   padding-right !important beats the higher-specificity form rules so the
   plain-text password never runs under the eye. */
.wume-pw-wrap {
    position: relative;
    display: block;
}
.wume-pw-wrap > input {
    padding-right: 44px !important;
}
.wume-pw-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #7a7875;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.wume-pw-toggle:hover,
.wume-pw-toggle:focus-visible {
    color: var(--wume-black);
}

/* ── Cookie-preference controls on the Cookie Policy page (cookie_policy.html.twig) ──
   The same accept / decline choice the banner and the account page use, exposed to
   non-account visitors. */
.wume-cookie-pref-current {
    margin: 4px 0 18px;
}
.wume-cookie-pref-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.wume-cookie-pref-option input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.wume-cookie-pref-save {
    margin-top: 8px;
}
.wume-cookie-pref-saved {
    margin-left: 12px;
    color: var(--wume-sage);
}