/*
 Theme Name:   MMM — HLF
 Theme URI:    https://matchmarketing.ai
 Description:  GeneratePress child theme — The Hoffmann Law Firm rebuild (MMM 2.0, design v3 "First Light"). Staged at personalinjurylawyercaraccident.com; replaces hoffmannpersonalinjury.com at cutover.
 Author:       MatchMarketing™
 Template:     generatepress
 Version:      4.0.5-HLF

 ============================================================
 TABLE OF CONTENTS
 ============================================================
  1.  FONTS (Fraunces display + Public Sans UI, self-hosted variable)
  2.  TOKENS — HLF First Light (limestone / stone / ink / honey)
  3.  BASE
  4.  TYPOGRAPHY (Fraunces display, accent line)
  5.  LINKS
  6.  HEADER (base)
  7.  NAVIGATION (base)
  8.  BUTTONS (honey primary system)
  9.  FORMS (base)
 10.  CONTENT SPACING / ALIGNFULL
 11.  UTILITIES
 12.  FOOTER (base)
 13.  MOBILE STICKY CTA
 14.  UTILITY BAR (top hooked element)
 15.  SECTION HELPERS (eyebrow, lede, inner, head)
 16.  HLF HERO (ink band per direction B, photo layer, form card)
 17.  PROOF BAND (oversized serif numerals)
 18.  BUTTON HELPERS (icons, sizes, hero overrides)
 19.  TRUST BAR
 20.  CASE-TYPE CARDS (photo-top, honey rule)
 21.  CASE STORIES / RESULT BADGES / COMPLIANCE DISCLAIMER
 22.  BAND HELPERS + FORM BAND + DARK CTA VARIANT
 23.  LEGACY MONEY-PAGE TEMPLATE COMPAT (17 rebuilt pages)
 24.  HOMEPAGE TEMPLATE COMPAT (hero card/proof/creds, skyline)
 28.  FAQ (native details/summary accordion)
 29.  FINAL CTA
 30.  CUSTOM FOOTER (.mm-footer hooked element)
 31.  HEADER RESTYLE + MOBILE NAV DRAWER
 32.  FORMINATOR FORMS (universal)
 33.  CONTACT PAGE
 37.  TRUST STRIP (reusable)
 38.  FIRST LIGHT COMPONENTS (horizon, accent line, cards, attorney band)
 39.  NAV PHONE CTA (gold pill, menu item class mm-nav-cta)
 40.  HERO PHOTO SCRIM (legibility gradient over mm-hero__bg)

 ============================================================
 4.0.5-HLF CHANGELOG
 - NEW SECTION 40: hero photo scrim. .mm-hero__bg renders at
   .55 opacity with no overlay above it, so bright photos wash
   out the headline (surfaced by the motorcycle hero). A
   .mm-hero::after gradient now paints above the img (::after
   is last in paint order among z-auto siblings) and below
   .mm-hero__grid (z-index:1): heavier over the left text
   column, lighter to the right where the opaque form card
   carries its own contrast, with a flatter top-down ramp at
   <=1024 where text spans full width. The mm-horizon rule is
   lifted above the scrim. Applies to all mm-hero pages
   (home, truck, wrongful death, motorcycle, future pillars).

 ============================================================
 4.0.4-HLF CHANGELOG
 - NEW SECTION 39: nav phone CTA. The "2026 v2" primary menu
   (built 2026-07-09, nav v2 per decision #17) ends with a
   tel:3143614242 custom link carrying the class mm-nav-cta;
   this section renders it as the persistent gold pill from the
   approved mockup (honey field, white text, honey-dark hover)
   on desktop and as an inset gold row in the mobile drawer.
 - Menu-title gotcha recorded in the section-39 comment:
   wptexturize converts a spaced ASCII hyphen in menu item
   titles to an en dash at render (span and nbsp workarounds
   get stripped by title sanitization); the CTA label's hyphen
   is stored as the &#45; entity so the rendered label stays
   "(314) 361-4242 - Free consultation" with a literal hyphen.

 ============================================================
 4.0.3-HLF CHANGELOG
 - RESPONSIVE ROOT CAUSE (the real one): the 4.0.1 hero release
   rules sat in §23, BEFORE §24's :has() placements. Equal
   specificity means source order decides, so the shipped file
   never released the form column - it only looked fixed when
   verified via injected CSS (injected styles always sort last).
   The release block now lives in §24 AFTER the placements, and
   the hero stacks at ≤1024 to match the GP mobile menu
   breakpoint (§23 container query moved 900 -> 1024 with it).
 - §31 logo: hard 320px width removed - it was overriding the
   Customizer's 720px (higher specificity). Now min(720px, 100%)
   desktop, min(420px, 86vw) ≤1024. Brand row and nav row are
   centered (header is logo-only; CTA hook retired by Chris).
 - §31 mobile nav bar: MENU toggle is a centered pill on one
   tidy row with search (menu-bar-items) pinned right on the
   same bar - was a left-stuck full-width toggle with the
   search icon wrapping onto its own row.

 4.0.2-HLF CHANGELOG
 - §24: Recognized-by badges enlarged 58px → 96px (72px ≤600px)
   per Chris. Homepage v3 markup pairs with this file: steps
   section promoted to position 2, cities section removed
   (Service Areas live in the footer + index per #17), hero
   sub / stat-3 / attorney lede recast off the answers-every-
   call implication, steel #f6f9fc bands re-tokened to stone.

 4.0.1-HLF CHANGELOG
 - §23: the §24 :has() hero placements now RELEASE inside the
   ≤900px query. They were pinning the form column to a phantom
   column 2, so the homepage hero never stacked on phones.
   Root-caused and screenshot-verified live at 390w.
 - §38: .mm-cards / .mm-cards--4 tiered case-grid wrappers +
   h3.mm-group-label / p.mm-group-sub group headers (homepage
   tiered case section per approved mockup rev 2), and
   .mm-nav-label dropdown group headers for the nav v2 build.

 4.0-HLF CHANGELOG (from 3.2.2)
 - Full reskin to design v3 "First Light" (decision #19,
   supersedes midnight cinematic): limestone #FAF8F3 surfaces,
   warm stone #F1EDE4 alt bands, river ink #1E2E3E type/dark
   bands/footer, honey #B9862F single accent, honey wash
   #E8D9BC badges. All teal remnants from the derm base
   removed (final-CTA/contact radials, util-bar dot).
 - Fonts: Source Serif 4 / Source Sans 3 replaced by Fraunces
   (display + italic accent lines) and Public Sans (UI), four
   self-hosted VARIABLE woff2 from brand kit rev C. Upload the
   kit's fonts/ files into /wp-content/themes/mmm-hlf/fonts/
   BEFORE deploying this file.
 - §16 hero: homepage hero direction B (ruled 2026-07-08) —
   ink band with honey-dark dawn glow; scrim retinted to ink.
 - §24 proof zone: attorney photo card retired from the hero
   (jig ruling); proof simplifies to stat strip + Recognized-by
   badges in the left column. Photo img rules kept benign.
 - §21 badges: honey-wash pill + ink text; disclaimer becomes
   the gold-bordered card (2px honey, radius 12).
 - §31: repaired the unterminated comment from 3.2.2 (the
   Brandon-review note never closed and swallowed the header
   phone-number and CTA button rules); phone number ships in
   Public Sans Bold as that note intended.
 - NEW §38: gold horizon divider (core separator override),
   hero accent-line sizing, image-top .mm-card system, and the
   .mm-atty attorney band used by the homepage rebuild.
 - Copy standards in comments updated: phone label
   "(314) 361-4242 - Free consultation"; year claims are
   "since 1998" in firm voice (Est. 1998 ruling).
 ============================================================
*/

/* ============================================================
   1. FONTS — self-hosted VARIABLE woff2 (brand kit rev C)
   Files live in /fonts/ inside this child theme
   (/wp-content/themes/mmm-hlf/fonts/):
     fraunces-latin-full-normal.woff2
     fraunces-latin-full-italic.woff2
     public-sans-latin-wght-normal.woff2
     public-sans-latin-wght-italic.woff2

   Root-absolute src URLs: FlyingPress inlines used CSS into
   the page; relative url('fonts/…') then resolves against the
   page URL and every @font-face silently drops. Absolute
   paths survive inlining. Do not make these relative.

   Fraunces = display/brand (H1, H2, .display, accent lines,
   serif moments). Public Sans = UI + body.
   ============================================================ */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/wp-content/themes/mmm-hlf/fonts/fraunces-latin-full-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/wp-content/themes/mmm-hlf/fonts/fraunces-latin-full-italic.woff2') format('woff2-variations'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/wp-content/themes/mmm-hlf/fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/wp-content/themes/mmm-hlf/fonts/public-sans-latin-wght-italic.woff2') format('woff2-variations'); }

/* ============================================================
   2. TOKENS — HLF First Light
   Limestone surfaces + river ink + a single honey accent.
   Honey has exactly three jobs: primary CTA, rules/eyebrows/
   horizon lines, and badge washes. Dark bands are river ink.
   ============================================================ */
:root {
    --mm-brand:        #1E2E3E;   /* river ink — links, header, headings */
    --mm-brand-2:      #B9862F;   /* honey — CTAs, rules, accents */
    --mm-brand-2-hover:#9E7420;
    --mm-gold-dark:    #9E7420;   /* honey TEXT on limestone/stone (contrast-safe) */
    --mm-gold-on-dark: #D9B36A;   /* honey when sitting on ink */
    --mm-brand-3:      #1E2E3E;   /* ink — dark bands, headings, footer */
    --mm-brand-3-hover:#15222F;
    --mm-navy-mid:     #2A3D50;   /* media fallback / mid surfaces on dark */

    --mm-ink:          #1E2E3E;
    --mm-muted:        #3D4F60;   /* ink 2 — secondary text on light */
    --mm-ink-on-dark:  #C7D2DC;   /* chrome — body text on ink */

    --mm-chrome:       #FAF8F3;   /* limestone paper — base surface + text on ink */
    --mm-surface:      #F1EDE4;   /* warm stone alt bands */
    --mm-surface-2:    #EAE4D6;
    --mm-line:         #E7E0D0;
    --mm-line-strong:  #D8CFBA;

    --mm-wash:         #E8D9BC;   /* honey wash — badges, freetags */
    --mm-wood:         #6E5238;   /* warm accent — sparing (blockquote borders, captions) */
    --mm-disclaimer-bg:#FDFAF3;   /* compliance callout tint only */

    --mm-focus:        #B9862F;
    --mm-urgent:       #B8351F;   /* reserved for true emergencies only */

    --mm-radius:       6px;
    --mm-radius-sm:    3px;
    --mm-radius-lg:    12px;

    --accent:    var(--mm-brand);
    --contrast:  var(--mm-ink);
    --contrast-2:var(--mm-muted);
    --base:      var(--mm-chrome);
    --base-2:    #ffffff;
    --base-3:    #ffffff;
}

/* ============================================================
   3. BASE
   ============================================================ */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
}
body {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--mm-ink);
    background: var(--mm-chrome);
    line-height: 1.65;
    accent-color: var(--mm-brand-2);
}

/* ============================================================
   4. TYPOGRAPHY
   Public Sans carries body, UI, H3-H6. Fraunces carries H1,
   H2 and .display. Headings sit in ink on light surfaces.

   Accent-line pattern (decision #18, First Light register):
     <h1>St. Louis Car Accident &amp; Catastrophic Injury Lawyer</h1>
     <p class="mm-accent-line">When the injuries are serious.</p>
   .mm-accent-line = honey italic Fraunces, a SEPARATE element
   outside the h1. On light surfaces add .mm-onlight to a
   wrapper (or use .mm-accent-line--onlight) for the darker
   contrast-safe honey stop.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.site-title,
.main-title,
.button,
.wp-block-button__link {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--mm-brand-3);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1, h2,
.display,
h1.display,
h2.display,
.mm-serif {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 560;
}
.display,
h1.display,
h2.display {
    letter-spacing: -0.01em;
    line-height: 1.08;
}
.mm-accent-line {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 460;
    color: var(--mm-brand-2);
}
.mm-onlight .mm-accent-line,
.mm-accent-line--onlight {
    color: var(--mm-gold-dark);
}
p, li { color: var(--mm-ink); }
small, .has-small-font-size { color: var(--mm-muted); }

/* ============================================================
   5. LINKS
   ============================================================ */
a {
    color: var(--mm-brand);
    text-decoration: none;
    transition: color 160ms ease;
}
a:hover, a:focus { color: var(--mm-gold-dark); }
:focus-visible {
    outline: 2px solid var(--mm-focus);
    outline-offset: 2px;
}

/* ============================================================
   6. HEADER (base)
   ============================================================ */
.site-header { background: var(--mm-chrome); }
.site-logo img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================================
   7. NAVIGATION (base)
   ============================================================ */
.main-navigation,
.main-navigation ul ul {
    background: var(--mm-chrome);
    border: 0;
    box-shadow: none;
}
.main-navigation .main-nav ul li > a,
.main-navigation .menu-bar-items {
    color: var(--mm-brand);
    font-weight: 600;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--mm-gold-dark);
}
.main-navigation .menu-toggle {
    color: var(--mm-brand);
    background: transparent;
    border: 0;
}
.main-navigation ul ul { border: 1px solid var(--mm-line); }

/* ============================================================
   8. BUTTONS (honey primary system)
   Primary = honey field + white text (approved First Light
   mockup treatment; honey is deep enough at 700 weight).
   Ghost = 1.5px translucent border, inherits surface. Ink =
   solid brand-3, paper text — secondary on light surfaces.
   Phone-number buttons are primary by default sitewide.
   Copy standard: "(314) 361-4242 - Free consultation".
   ============================================================ */
.button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
    background: var(--mm-brand-2);
    color: #ffffff;
    font-weight: 700;
    border: 0;
    border-radius: var(--mm-radius);
    padding: 14px 22px;
    line-height: 1.2;
    transition: background 160ms ease, color 160ms ease;
}
.button:hover, .button:focus,
.wp-block-button__link:hover, .wp-block-button__link:focus,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--mm-brand-2-hover);
    color: #ffffff;
}
.mm-btn--ghost,
.button.mm-btn--ghost {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(250, 248, 243, 0.4);
}
.mm-btn--ghost:hover,
.button.mm-btn--ghost:hover {
    background: rgba(250, 248, 243, 0.08);
    color: #ffffff;
    border-color: rgba(250, 248, 243, 0.65);
}
.mm-onlight .mm-btn--ghost,
.mm-btn--ghost.mm-btn--ghost-navy {
    color: var(--mm-brand-3);
    border-color: var(--mm-line-strong);
}
.mm-onlight .mm-btn--ghost:hover,
.mm-btn--ghost.mm-btn--ghost-navy:hover {
    background: var(--mm-surface);
    color: var(--mm-brand-3);
    border-color: var(--mm-brand-3);
}
.mm-btn--navy,
.button.mm-btn--navy {
    background: var(--mm-brand-3);
    color: var(--mm-chrome);
}
.mm-btn--navy:hover,
.button.mm-btn--navy:hover {
    background: var(--mm-brand-3-hover);
    color: var(--mm-chrome);
}

/* ============================================================
   9. FORMS (base)
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: #fff;
    border: 1px solid var(--mm-line-strong);
    border-radius: var(--mm-radius-sm);
    color: var(--mm-ink);
    font-family: inherit;
    box-shadow: none;
}
input::placeholder,
textarea::placeholder { color: var(--mm-muted); }
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mm-brand-2);
    outline: none;
}

/* ============================================================
   10. CONTENT SPACING / ALIGNFULL
   GP defaults add 34px margin-top to .entry-content which creates
   a visible gap below the header. These selectors zero out
   top/bottom spacing for full-bleed band designs.
   ============================================================ */

/* Alignfull bleed — sections need to stretch full viewport width
   even though parent .entry-content is contained */
.no-sidebar .entry-content .alignfull,
.entry-content > .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

.one-container.no-sidebar .site-content,
.one-container .site-content,
.site-content {
    padding-top: 0;
    padding-bottom: 0;
}
.one-container.no-sidebar .site-main,
.one-container .site-main { margin: 0; }
.entry-content,
.one-container .entry-content {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.one-container .inside-article,
.inside-article { padding: 0; }

/* Hide WP page title / entry-footer — our heroes carry their own h1.
   3.0: scoped to .page — the bare .entry-header selector was nuking
   post titles globally, overriding the GP element's display rules.
   Posts keep their native entry title; entry-footer stays hidden
   everywhere (post cat/tag meta not part of this design). */
body.page .entry-header,
article .entry-footer { display: none !important; }

/* ============================================================
   11. UTILITIES
   ============================================================ */
.mm-muted { color: var(--mm-muted); }
.mm-surface {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
}
.mm-surface-dark {
    background: var(--mm-brand-3);
    color: var(--mm-chrome);
    border-radius: var(--mm-radius);
}
.mm-surface-dark h1,
.mm-surface-dark h2,
.mm-surface-dark h3,
.mm-surface-dark h4,
.mm-surface-dark h5,
.mm-surface-dark h6 { color: var(--mm-chrome); }
.mm-surface-dark a { color: var(--mm-gold-on-dark); }

/* ============================================================
   12. FOOTER (base — GP default hidden, replaced by .mm-footer)
   ============================================================ */
.site-footer { display: none; }
.site-footer,
.footer-widgets,
.site-info {
    background: var(--mm-chrome);
    color: var(--mm-muted);
    border-top: 1px solid var(--mm-line);
}
.site-info a,
.footer-widgets a { color: var(--mm-brand); }
.site-info a:hover,
.footer-widgets a:hover { color: var(--mm-gold-dark); }

/* ============================================================
   13. MOBILE STICKY CTA — fixed-bottom on phones
   Two-button bar: Call + Appointment
   ============================================================ */
.mm-mobile-cta { display: none; }

@media (max-width: 767px) {
    .mm-mobile-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 14px;
        background: var(--mm-ink);
        box-shadow: 0 -4px 20px rgba(21, 34, 47, 0.35);
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    body { padding-bottom: 72px; }

    .mm-mobile-cta .mm-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0.8rem 0.85rem;
        border-radius: var(--mm-radius);
        font-family: 'Public Sans', Arial, sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        text-decoration: none;
        transition: background-color 150ms ease, color 150ms ease;
    }
    .mm-mobile-cta .mm-cta svg {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
    }
    .mm-cta--call {
        background: var(--mm-brand-3);
        color: var(--mm-chrome);
    }
    .mm-cta--call:hover,
    .mm-cta--call:focus,
    .mm-cta--call:active {
        background: var(--mm-brand-3-hover);
        color: var(--mm-chrome);
    }
    .mm-cta--appt {
        background: var(--mm-brand-2);
        color: #fff;
    }
    .mm-cta--appt:hover,
    .mm-cta--appt:focus,
    .mm-cta--appt:active {
        background: var(--mm-brand-2-hover);
        color: #fff;
    }
}

/* ============================================================
   14. UTILITY BAR — top hooked element
   ============================================================ */
.mm-util-bar {
    background: var(--mm-ink);
    color: var(--mm-chrome);
    font-size: 13.5px;
    padding: 8px 0;
    letter-spacing: 0.02em;
}
.mm-util-bar__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.mm-util-bar__left { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.mm-util-bar__item { display: inline-flex; gap: 6px; align-items: center; }
.mm-util-bar__item svg { opacity: 0.7; }
.mm-util-bar__right { display: flex; gap: 16px; }
.mm-util-bar a { color: inherit; }
.mm-util-bar a:hover { color: var(--mm-gold-on-dark); }
@media (max-width: 720px) {
    .mm-util-bar .mm-hide-sm { display: none; }
}

/* Small pulse dot in the top-bar pill. */
.mm-util-bar__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mm-brand-2);
    box-shadow: 0 0 0 3px rgba(185, 134, 47, 0.25);
    margin-right: 2px;
}

/* ════════════════════════════════════════════════════════════
   §  CREDENTIALS LOGO BAND  (homepage — below hero)
   ════════════════════════════════════════════════════════════ */
.mm-creds-band {
    background: var(--mm-surface);
    border-block: 1px solid var(--mm-line);
    padding-block: clamp(28px, 4vw, 44px);
}

.mm-creds-band__label {
    font-family: 'Public Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mm-muted);
    margin: 0 0 clamp(20px, 2.5vw, 32px);
}

.mm-creds-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 56px);
}

.mm-creds-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mm-creds-logo img {
    display: block;
    height: clamp(38px, 5vw, 52px);
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .68;
    transition: filter .25s ease, opacity .25s ease;
}

.mm-creds-logo img:hover,
.mm-creds-logo img:focus {
    filter: grayscale(0);
    opacity: 1;
}

/* ASDS is a small 150×85 source — keep it from out-scaling the others */
.mm-creds-logo img[src*="asds-logo"] { max-width: 130px; }

/* The ACMS mark is very wide (1012×270) — let it run a touch shorter so
   it doesn't dwarf the square seals on the same row */
.mm-creds-logo img[src*="acms-logo"] { height: clamp(30px, 4vw, 42px); }

@media (max-width: 1024px) {
    .mm-creds-logos { gap: clamp(20px, 5vw, 36px); }
    .mm-creds-logo img { height: clamp(32px, 7vw, 44px); }
}

/* ============================================================
   15. SECTION HELPERS (eyebrow, lede, inner, head)
   First Light eyebrow: honey letterspaced caps, no bar — the
   gold horizon line (§38) is the rule motif now.
   ============================================================ */
.mm-section { padding: 90px 0; }
.mm-section--sm { padding: 60px 0; }

.mm-section-inner {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 48px);
}

.mm-eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Public Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-gold-dark);
    margin: 0 0 14px;
}
.mm-eyebrow--center { justify-content: center; }

.mm-lede { font-size: 19px; line-height: 1.55; }

.mm-section-head { margin-bottom: 50px; }
.mm-section-head h2 {
    font-size: clamp(36px, 5vw, 56px);
    color: var(--mm-brand);
    max-width: 820px;
    margin: 0 0 16px;
}
.mm-section-head h2.display { line-height: 1.05; }
.mm-section-head .mm-sub {
    color: var(--mm-muted);
    font-size: 18px;
    line-height: 1.55;
    max-width: 680px;
    margin: 0;
}
.mm-section-head--center { text-align: center; }
.mm-section-head--center .mm-eyebrow,
.mm-section-head--center h2,
.mm-section-head--center .mm-sub { margin-left: auto; margin-right: auto; }

/* ============================================================
   16. HLF HERO — First Light ink band (direction B, ruled
   2026-07-08). Structure unchanged from 3.x:
     .mm-hero
       img.mm-hero__bg           (optional full-bleed MJ photo)
       .mm-hero__scrim           (empty div — gradient overlay)
       .mm-hero__inner / __grid  (copy left, form card right)
   Photo is decorative: aria-hidden, empty alt.
   ============================================================ */
.mm-hero {
    position: relative;
    /* 4.0: river-ink band with a honey-dark dawn glow top-right
       and a lighter ink lift at the top edge */
    background:
        radial-gradient(760px 440px at 86% -10%, rgba(217, 179, 106, 0.16), transparent 62%),
        linear-gradient(180deg, #243748 0%, var(--mm-brand-3) 52%);
    color: var(--mm-chrome);
    overflow: hidden;
}
.mm-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.55;
}
.mm-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(30, 46, 62, 0.96) 0%,
        rgba(30, 46, 62, 0.82) 45%,
        rgba(30, 46, 62, 0.55) 100%);
}
.mm-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: clamp(48px, 7vw, 88px);
    padding-bottom: clamp(44px, 6vw, 72px);
}
.mm-hero h1,
.mm-hero .display {
    color: var(--mm-chrome);
    font-size: clamp(34px, 4.6vw, 52px);
}
.mm-hero .mm-eyebrow { color: var(--mm-ink-on-dark); }
.mm-hero .mm-accent-line { color: var(--mm-gold-on-dark); }
.mm-hero__lede {
    color: var(--mm-ink-on-dark);
    font-size: 17px;
    line-height: 1.6;
    max-width: 46ch;
    margin: 16px 0 22px;
}
.mm-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 13px;
    color: var(--mm-ink-on-dark);
}
.mm-hero-chips .mm-chip-ico { color: var(--mm-gold-on-dark); }
.mm-hero__form-card {
    background: #ffffff;
    border-top: 3px solid var(--mm-brand-2);
    border-radius: var(--mm-radius-lg);
    padding: 22px 20px;
    box-shadow: 0 18px 40px rgba(16, 26, 37, 0.35);
}
.mm-hero__form-card h2,
.mm-hero__form-card h3 {
    font-size: 21px;
    margin: 0 0 4px;
}
.mm-hero__form-card .mm-form-note {
    font-size: 12.5px;
    color: var(--mm-muted);
    margin: 0 0 12px;
}
@media (max-width: 768px) {
    .mm-hero__bg { opacity: 0.35; }
    .mm-hero__form-card { margin-top: 26px; }
}

/* ============================================================
   17. PROOF BAND — oversized serif numerals on ink
   (no dollar amounts, ever — tracker #12; numerals are
   "Since 1998" / 100% / 4.9★ class facts only)
   Markup: .mm-proof > .mm-proof__item ×3 (+ .mm-proof__div)
   ============================================================ */
.mm-proof {
    background: var(--mm-brand-3);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(18px, 4vw, 48px);
    padding: clamp(30px, 4.5vw, 52px) 20px;
    flex-wrap: wrap;
}
.mm-proof__item { text-align: center; }
.mm-proof__num {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 560;
    font-size: clamp(44px, 6vw, 64px);
    line-height: 1;
    color: var(--mm-gold-on-dark);
}
.mm-proof__label {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mm-ink-on-dark);
}
.mm-proof__div {
    width: 1px;
    background: rgba(250, 248, 243, 0.14);
}
@media (max-width: 640px) {
    .mm-proof__div { display: none; }
}

/* ============================================================
   18. BUTTON HELPERS (icons, sizes, hero overrides)
   ============================================================ */
.wp-block-button__link .mm-icon,
.button .mm-icon {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.125em;
    display: inline-block;
}
.wp-block-button.mm-btn-lg .wp-block-button__link,
a.button.mm-btn-lg {
    padding: 16px 28px;
    font-size: 15px;
}
.mm-hero-cta-row {
    margin: 8px 0 38px;
    gap: 14px;
}

/* Mobile: keep hero buttons at intrinsic width when stacked */
@media (max-width: 600px) {
    .mm-hero .wp-block-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .mm-hero .wp-block-buttons .wp-block-button { width: auto; }
    .mm-hero .wp-block-buttons .wp-block-button__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    /* GB v1 gaps = negative wrapper margin + column padding.
       Both halves must be zeroed when columns stack, or the
       grid hangs off the left edge by its gap (2.6) */
    .gb-grid-wrapper {
        margin-left: 0 !important;
    }
    .gb-grid-wrapper > .gb-grid-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Hero on dark — primary button = honey. Outline stays
   light-on-dark. */
.mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--mm-brand-2);
    color: #fff;
    border-color: var(--mm-brand-2);
}
.mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--mm-brand-2-hover);
    color: #fff;
    border-color: var(--mm-brand-2-hover);
}
.mm-hero .is-style-outline .wp-block-button__link {
    background: transparent;
    border-color: var(--mm-chrome);
    color: var(--mm-chrome);
}
.mm-hero .is-style-outline .wp-block-button__link:hover {
    background: var(--mm-chrome);
    color: var(--mm-brand);
    border-color: var(--mm-chrome);
}

/* ============================================================
   19. TRUST BAR (between hero and services) — GB-native (2.3)
   Structure lives in GenerateBlocks: container > .mm-section-inner
   > 4-col grid (25% desktop, 50% tablet/mobile = clean 2x2).
   CSS carries only the band color and pill typography.
   ============================================================ */
.mm-trust-bar {
    background: var(--mm-ink);
    border-top: 1px solid rgba(250, 248, 243, 0.08);
    padding: 16px 0;
}
.mm-trust-bar .mm-trust-pill {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(250, 248, 243, 0.85);
    margin: 0;
    padding: 5px 8px;
}
@media (max-width: 600px) {
    .mm-trust-bar { padding: 8px 0; }
    .mm-trust-bar .mm-trust-pill { font-size: 11px; padding: 3px 6px; }
}

/* ============================================================
   20. CASE-TYPE CARDS — photo-top, serif title, honey link
   Grid of pillar-page entry cards. Images are MJ or library,
   graded by the §38 card wash; .mm-case-card__media--tint adds
   a fallback ink wash for unretouched photos. Never patient/
   injury imagery (decision #9).
   ============================================================ */
.mm-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.mm-case-card {
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 160ms ease, transform 160ms ease;
}
.mm-case-card:hover {
    border-color: var(--mm-line-strong);
    transform: translateY(-2px);
}
.mm-case-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--mm-navy-mid);
}
.mm-case-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-case-card__media--tint::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(30, 46, 62, 0.24);
}
.mm-case-card__body { padding: 16px 17px 18px; }
.mm-case-card__body h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 19px;
    margin: 0 0 6px;
}
.mm-case-card__body p {
    font-size: 14px;
    color: var(--mm-muted);
    line-height: 1.55;
    margin: 0 0 10px;
}
.mm-case-card__link {
    font-weight: 600;
    font-size: 14px;
    color: var(--mm-gold-dark);
    margin-top: auto;
}
.mm-case-card__link:hover { color: var(--mm-brand-3); }

/* ============================================================
   21. CASE STORIES / RESULT BADGES / COMPLIANCE DISCLAIMER
   Story-led results, NO dollar amounts (tracker #12).
   Disclaimer LEADS the results content (compliance).
   Badges: POLICY LIMITS RECOVERED / SETTLED AFTER LITIGATION /
   RESOLVED FOR THE FAMILY — honey wash + ink text.
   ============================================================ */
.mm-disclaimer {
    border: 2px solid var(--mm-brand-2);
    border-radius: var(--mm-radius-lg);
    background: var(--mm-disclaimer-bg);
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mm-muted);
}
.mm-disclaimer strong { color: var(--mm-ink); }
.mm-story {
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-top: 2.5px solid var(--mm-brand-2);
    border-radius: 0 0 var(--mm-radius-lg) var(--mm-radius-lg);
    padding: 18px 17px;
}
.mm-story--featured {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-top: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-lg);
    padding: 24px 24px;
}
.mm-story__kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-gold-dark);
    margin: 0 0 8px;
}
.mm-story h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 8px;
}
.mm-story--featured h3 { font-size: 23px; }
.mm-story p {
    font-size: 14px;
    color: var(--mm-muted);
    line-height: 1.6;
    margin: 0 0 12px;
}
.mm-badge {
    display: inline-block;
    background: var(--mm-wash);
    color: var(--mm-ink);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 20px;
}
.mm-story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}
.mm-results-privacy {
    font-size: 13px;
    font-style: italic;
    color: var(--mm-muted);
}

/* ============================================================
   22. BAND HELPERS + FORM BAND + DARK CTA VARIANT
   Generic section bands, the below-hero form band, and the
   ink final-CTA variant. Legacy live-site class names
   (mm-freetag, __title, __fine) unified with the 3.0.1 names
   so both markup generations render. Legacy pages carry their
   own padding/width in GB attributes; classes here add only
   surface, card visuals, and type.
   NOTE: .mm-formband is retired from NEW builds (jig ruling —
   the form lives in the hero right column); rules stay for
   legacy pages until their retrofits.
   ============================================================ */
.mm-band { padding: clamp(48px, 6vw, 76px) 0; }
.mm-band--surface { background: var(--mm-surface); }
.mm-band--midnight { background: var(--mm-brand-3); }

.mm-formband { background: var(--mm-surface); }
section.mm-formband { padding-top: 40px; padding-bottom: 40px; }
.mm-formband__card {
    background: #ffffff;
    border-top: 3px solid var(--mm-brand-2);
    border-radius: var(--mm-radius-lg);
    box-shadow: 0 10px 30px rgba(30, 46, 62, 0.08);
    padding-top: 30px;
    padding-bottom: 26px;
}
.mm-formband__tag,
.mm-freetag {
    display: inline-block;
    background: var(--mm-wash);
    color: var(--mm-ink);
    font-family: 'Public Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 20px;
    margin: 0 0 10px;
}
.mm-formband__card h2,
.mm-formband__title { font-size: 26px; margin: 4px 0 4px; }
.mm-formband__sub { color: var(--mm-muted); font-size: 14.5px; margin: 0 0 14px; }
.mm-formband__fineprint,
.mm-formband__fine { color: var(--mm-muted); font-size: 12.5px; margin: 12px 0 0; }

.mm-final-cta--dark,
.mm-cta-band { background: var(--mm-brand-3); }
.mm-final-cta--dark h2,
.mm-final-cta--dark .display { color: var(--mm-chrome); }
.mm-final-cta--dark p { color: var(--mm-ink-on-dark); }
.mm-on-dark { color: var(--mm-chrome); }
.mm-on-dark-sub { color: var(--mm-ink-on-dark); }

/* Outline (secondary) buttons on dark bands - core is-style-outline */
.mm-hero .is-style-outline .wp-block-button__link,
.mm-final-cta--dark .is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--mm-chrome);
    border: 1.5px solid rgba(250, 248, 243, 0.4);
}
.mm-hero .is-style-outline .wp-block-button__link:hover,
.mm-final-cta--dark .is-style-outline .wp-block-button__link:hover {
    background: rgba(250, 248, 243, 0.08);
    color: var(--mm-chrome);
    border-color: rgba(250, 248, 243, 0.65);
}

/* ============================================================
   23. LEGACY MONEY-PAGE TEMPLATE COMPAT
   The 17 rebuilt live-site pages (April-June 2026) plus any
   salvaged rebuilds use these class contracts with sizing in
   GB attributes. This layer restyles them to First Light
   tokens with zero markup churn. Do not remove while any
   legacy-template page exists.
   ============================================================ */
.mm-hero--inner { overflow: visible; }
.mm-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 64px) 40px;
}
@media (max-width: 1024px) {
    .mm-hero__grid { grid-template-columns: 1fr; padding: 36px 20px 40px; }
}
.mm-hero__h2 {
    font-family: 'Public Sans', -apple-system, sans-serif;
    font-weight: 400;
    font-size: 17.5px;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--mm-ink-on-dark);
    margin: 14px 0 22px;
    max-width: 58ch;
}
.mm-hero__cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; }
.mm-hero__cta-note { font-size: 13px; color: var(--mm-ink-on-dark); margin: 0; }
.mm-hero__media img { border-radius: var(--mm-radius-lg); width: 100%; height: auto; box-shadow: 0 18px 40px rgba(16, 26, 37, 0.35); display: block; }
.mm-trustbar__item { color: var(--mm-chrome); font-size: 14px; font-weight: 600; margin: 0; }
.mm-accordions summary { cursor: pointer; font-weight: 600; font-size: 16.5px; }
.mm-accordions details[open] summary { margin-bottom: 8px; }

/* ============================================================
   24. HOMEPAGE TEMPLATE COMPAT
   Class contracts from the homepage build (hero with form
   card + proof row + credibility badges, skyline band, image
   helpers, warning callout), restyled to First Light.
   4.0: the attorney photo card is RETIRED from the hero (jig
   ruling, direction B) — proof zone simplifies to the stat
   strip + Recognized-by badges under the pitch; the form
   column still spans both grid rows so the proof hugs the
   copy. Benign .mm-hero__photo img rules kept in case a
   legacy page still carries one.
   ============================================================ */
.mm-hero__sub {
    font-family: 'Public Sans', -apple-system, sans-serif;
    font-weight: 400;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--mm-ink-on-dark);
    margin: 14px 0 0;
    max-width: 54ch;
}
.mm-hero__sub strong { color: var(--mm-chrome); }

.mm-hero .mm-accent-line {
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.2;
    margin: 6px 0 0;
}

.mm-hero__form-col { position: relative; }
.mm-hero__card {
    background: #ffffff;
    border-top: 3px solid var(--mm-brand-2);
    border-radius: var(--mm-radius-lg);
    box-shadow: 0 16px 40px rgba(16, 26, 37, 0.35);
    padding: 26px 24px 22px;
}
.mm-hero__card h2 { font-size: 24px; margin: 4px 0 4px; }
.mm-hero__card-sub { color: var(--mm-muted); font-size: 14px; margin: 0 0 12px; }
.mm-hero__fine { color: var(--mm-muted); font-size: 12.5px; margin: 12px 0 0; }

/* Proof zone: stat strip + "Recognized by" badges live in the
   hero's left column, directly under the pitch. The form column
   spans both grid rows so the proof row hugs the copy instead of
   dropping below the (tall) form card. Scoped with :has() so
   money-page heroes without a proof row are untouched. */
.mm-hero__grid:has(.mm-hero__proof) { grid-template-rows: auto 1fr; }
.mm-hero__grid:has(.mm-hero__proof) .mm-hero__head { grid-column: 1; grid-row: 1; }
.mm-hero__grid:has(.mm-hero__proof) .mm-hero__form-col { grid-column: 2; grid-row: 1 / span 2; }
/* 4.0.3: mobile release for the placements directly ABOVE. It must
   live AFTER them in the file: equal specificity means source order
   decides, which is why the 4.0.1 release (placed earlier, in §23)
   never took effect in the shipped file even though it verified
   when injected. ≤1024 matches the GP mobile menu breakpoint.
   Stack order = source order: head, form, proof. */
@media (max-width: 1024px) {
    .mm-hero__grid:has(.mm-hero__proof) {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .mm-hero__grid:has(.mm-hero__proof) .mm-hero__head,
    .mm-hero__grid:has(.mm-hero__proof) .mm-hero__form-col,
    .mm-hero__grid:has(.mm-hero__proof) .mm-hero__proof {
        grid-column: 1;
        grid-row: auto;
    }
}
.mm-hero__proof {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(250, 248, 243, 0.16);
}
.mm-hero__stats { display: flex; flex-wrap: wrap; gap: 12px 0; }
.mm-hero__stat { padding: 0 20px; border-left: 1px solid rgba(250, 248, 243, 0.18); }
.mm-hero__stat:first-child { padding-left: 0; border-left: 0; }
.mm-hero__stat-big {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 560;
    color: var(--mm-chrome);
    margin: 0 0 2px;
}
.mm-hero__stat-sm { font-size: 12px; color: var(--mm-ink-on-dark); margin: 0; }
/* Benign legacy rules — no page should carry a hero photo card
   after the direction-B rebuild, but if one does it renders
   sanely instead of breaking. */
.mm-hero__photo { display: block; margin: 14px 0 0; max-width: 300px; }
.mm-hero__photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(16, 26, 37, 0.45);
}
.mm-hero__creds-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ink-on-dark);
    opacity: 0.85;
    margin: 20px 0 8px;
}
.mm-hero__creds { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.mm-hero__creds figure { margin: 0; }
.mm-hero__creds img { height: 96px; width: auto; border-radius: 8px; display: block; }
@media (max-width: 600px) {
    .mm-hero__creds { gap: 10px; }
    .mm-hero__creds img { height: 72px; }
}

/* GB Pro container-link containment (3.2.1). GB 2.x compat renders the
   hidden card anchor (absolute, inset 0) but NOT GB Pro v1's parent
   position:relative rule, so every linked card's overlay resolved to
   <body> and covered the whole page; the last linked card in the DOM
   captured all hovers and clicks, including the hero. Contain each
   overlay to its own card. */
.gb-container:has(> a.gb-container-link) { position: relative; }
a.gb-container-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

.mm-skyline { background: var(--mm-brand-3); }
.mm-skyline .mm-eyebrow { color: var(--mm-gold-on-dark); }
.mm-stars { color: var(--mm-gold-dark); }
.mm-muted { color: var(--mm-muted); }
.mm-warn-ink { color: var(--mm-brand-3); }

.mm-img { margin: 0; }
.mm-img img { display: block; width: 100%; height: auto; border-radius: var(--mm-radius-lg); }
.mm-img--square img { aspect-ratio: 1 / 1; object-fit: cover; }
.mm-img--wide img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ============================================================
   28. FAQ (homepage — native details/summary accordion)
   ============================================================ */
.mm-faq {
    background: var(--mm-surface-2);
    padding: 90px 0;
}
.mm-faq-list {
    max-width: 880px;
    margin: 30px auto 0;
}
.mm-faq-item {
    border-bottom: 1px solid var(--mm-line-strong);
}
.mm-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 26px 40px 26px 0;
    font-size: 19px;
    color: var(--mm-ink);
    line-height: 1.4;
    position: relative;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.mm-faq-item summary::-webkit-details-marker { display: none; }
.mm-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Fraunces', serif;
    font-size: 28px;
    line-height: 1;
    color: var(--mm-brand-2);
    font-weight: 400;
}
.mm-faq-item[open] summary::after {
    content: "\2212";
}
.mm-faq-item__answer { padding: 0 0 28px; }
.mm-faq-item__answer p {
    font-size: 16px;
    color: var(--mm-muted);
    line-height: 1.7;
    margin: 0 0 12px;
}
.mm-faq-item__answer p:last-child { margin-bottom: 0; }

@media (max-width: 540px) {
    .mm-faq { padding: 60px 0; }
    .mm-faq-item summary { font-size: 17px; padding-right: 36px; }
}

/* ============================================================
   29. FINAL CTA (ink band, centered, two CTAs — homepage + reused)
   ============================================================ */
.mm-final-cta {
    background: var(--mm-brand-3);
    color: var(--mm-chrome);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.mm-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(217, 179, 106, 0.12), transparent 60%);
    pointer-events: none;
}
.mm-final-cta > * { position: relative; z-index: 1; }
.mm-final-cta .mm-section-inner { padding-block: 0; }
.mm-final-cta h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(36px, 5vw, 60px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--mm-chrome);
    margin: 0 0 20px;
}
.mm-final-cta p {
    font-size: 18px;
    line-height: 1.55;
    max-width: 620px;
    margin: 0 auto 32px;
    color: rgba(250, 248, 243, 0.85);
}
.mm-final-cta__ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
/* On ink bg, primary is honey. Outline becomes paper. */
.mm-final-cta .button,
.mm-final-cta .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--mm-brand-2);
    color: #fff;
    border-color: var(--mm-brand-2);
}
.mm-final-cta .button:hover,
.mm-final-cta .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    background: var(--mm-brand-2-hover);
    color: #fff;
    border-color: var(--mm-brand-2-hover);
}
.mm-final-cta .is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--mm-chrome);
    border-color: var(--mm-chrome);
}
.mm-final-cta .is-style-outline .wp-block-button__link:hover {
    background: var(--mm-chrome);
    color: var(--mm-brand);
    border-color: var(--mm-chrome);
}

@media (max-width: 540px) {
    .mm-final-cta { padding: 60px 0; }
}

/* ============================================================
   30. CUSTOM FOOTER (.mm-footer hooked element, ink, 4-col grid)
   ============================================================ */
.mm-footer {
    background: var(--mm-ink);
    color: rgba(250, 248, 243, 0.7);
    padding: 70px 0 0;
}
.mm-footer__inner {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 48px);
}
.mm-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    margin-bottom: 56px;
}

/* Footer paragraph support (2.0) — for text blocks dropped into
   footer columns (hours, notes) without dedicated classes. */
.mm-footer p { color: rgba(250, 248, 243, 0.7); }
.mm-footer__col p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
}
.mm-footer__col p a {
    color: var(--mm-gold-on-dark);
    font-weight: 700;
}
.mm-footer__col p a:hover { color: var(--mm-chrome); }

.mm-footer__b1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 26px;
    color: var(--mm-chrome);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 4px;
}
.mm-footer__b2 {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-gold-on-dark);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.mm-footer__brand p {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 18px;
    color: inherit;
}
.mm-footer__nap {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(250, 248, 243, 0.85);
}
.mm-footer__nap strong {
    color: var(--mm-chrome);
    display: block;
    margin-bottom: 4px;
}
.mm-footer__nap a {
    color: var(--mm-gold-on-dark);
    font-weight: 700;
}
.mm-footer__nap a:hover { color: var(--mm-chrome); }

.mm-footer__col h5 {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--mm-chrome);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 18px;
}
.mm-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mm-footer__col li { padding: 5px 0; }
.mm-footer__col a {
    font-size: 14px;
    color: rgba(250, 248, 243, 0.7);
    transition: color 0.2s;
}
.mm-footer__col a:hover { color: var(--mm-gold-on-dark); }

.mm-footer__bottom {
    border-top: 1px solid rgba(250, 248, 243, 0.1);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: rgba(250, 248, 243, 0.5);
}
.mm-footer__bottom a {
    color: rgba(250, 248, 243, 0.5);
    margin-right: 16px;
}
.mm-footer__bottom-links a:last-child { margin-right: 0; }
.mm-footer__bottom a:hover { color: var(--mm-gold-on-dark); }

@media (max-width: 900px) {
    .mm-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 540px) {
    .mm-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .mm-footer { padding: 50px 0 0; }
}

/* Footer site search (v12 footer). Overrides the global §8 button
   rule via higher specificity — do not simplify the selectors. */
.mm-footer__search {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}
.mm-footer__search input[type="search"] {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(250, 248, 243, 0.2);
    border-radius: var(--mm-radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--mm-chrome);
}
.mm-footer__search input[type="search"]::placeholder { color: rgba(250, 248, 243, 0.5); }
.mm-footer__search input[type="search"]:focus {
    border-color: var(--mm-brand-2);
    outline: none;
}
.mm-footer__search button {
    background: var(--mm-brand-2);
    border: 1px solid var(--mm-brand-2);
    border-radius: var(--mm-radius-sm);
    color: #fff;
    padding: 10px 16px;
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.mm-footer__search button:hover {
    background: var(--mm-brand-2-hover);
    border-color: var(--mm-brand-2-hover);
    color: #fff;
}

/* ============================================================
   31. HEADER RESTYLE (STL custom) + MOBILE NAV DRAWER (2.1)
   Markup: GP site header (.inside-header holds .site-logo +
   .mm-header-cta hook element) with the primary navigation as
   its own element BELOW the header (nav-below-header).
   Desktop: brand row (logo left / phone + Schedule right) over
   a full-width nav row separated by a hairline divider.
   Mobile (≤1024): compact brand row (smaller logo + icon phone
   + Schedule), GP drawer below. REQUIRES GP mobile menu
   breakpoint = 1024 (Customizer > Layout > Primary Navigation;
   set 2026-06-10) to match the media queries here.
   NOTE: GP's dynamic CSS paints `.site-header a` with
   var(--base-3) (white). The .site-header-scoped color rules
   below intentionally out-rank it — do not "simplify" them.
   ============================================================ */

/* --- Brand row (site header) --- */
.site-header {
    background: var(--mm-chrome);
    border-bottom: none;
    padding: 14px 0;
}
.site-header .inside-header {
    max-width: 1240px;
    margin-inline: auto;
    padding: 0 clamp(16px, 3vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center; /* 4.0.3: centered brand row (logo-only header) */
    gap: 24px;
}
.site-header .site-logo {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
.site-header .site-logo a { display: block; }
.site-header .site-logo img {
    display: block;
    /* 4.0.3: matches the Customizer logo width (720). The old hard
       320px out-specified GP's setting and silently overrode it.
       vw-based min (not 100%) - the flex parent is shrink-to-fit,
       so a %-based cap resolves circularly to the SVG's intrinsic
       width and the logo collapses. */
    width: min(720px, 92vw);
    height: auto;
    margin: 0;
}
.site-branding,
.site-title,
.main-title { display: none; }

/* --- Header CTA (brand row, right side) --- */
.inside-header > .mm-header-cta { margin-left: auto; }
.mm-header-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.site-header .mm-header-cta__phone {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--mm-brand);
    text-decoration: none;
    font-family: 'Public Sans', sans-serif;
    line-height: 1;
}
.site-header .mm-header-cta__phone:hover { color: var(--mm-gold-dark); }
.mm-header-cta__phone-icon {
    width: 36px; height: 36px;
    background: var(--mm-brand);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 160ms ease;
}
.mm-header-cta__phone:hover .mm-header-cta__phone-icon {
    background: var(--mm-brand-2);
}
.mm-header-cta__phone-text { line-height: 1.1; }
.site-header .mm-header-cta__phone-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--mm-gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    display: block;
    margin-bottom: 2px;
}
/* §31 — header CTA phone number (Brandon review, June 2026).
   Display serif was over-stylized for a functional number; the
   number ships in the body sans for clarity. 4.0 repairs the
   3.2.2 comment that never closed and swallowed these rules. */
.site-header .mm-header-cta__phone-num {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0;
    display: block;
    color: var(--mm-brand);
}
.site-header .mm-header-cta__phone:hover .mm-header-cta__phone-num { color: var(--mm-gold-dark); }
.mm-header-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--mm-brand-2);
    color: #fff;
    border-radius: var(--mm-radius);
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background 160ms ease;
}
.site-header .mm-header-cta__btn,
.site-header .mm-header-cta__btn:visited { color: #fff; }
.mm-header-cta__btn:hover {
    background: var(--mm-brand-2-hover);
    color: #fff;
}
.mm-header-cta__btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* --- Nav row (standalone element below header) --- */
nav.main-navigation {
    background: var(--mm-chrome);
    border: 0;
    border-top: 1px solid var(--mm-line);
}
.main-navigation .inside-navigation {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center; /* 4.0.3: centered nav row */
}
.main-navigation .main-nav > ul {
    display: flex;
    gap: 4px;
    align-items: center;
    background: transparent;
}
.main-navigation .main-nav ul li a {
    padding: 15px 13px;
    color: var(--mm-brand);
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    transition: color 160ms ease;
}
.main-navigation .main-nav ul li a::after {
    content: "";
    position: absolute;
    left: 13px; right: 13px; bottom: 9px;
    height: 2px;
    background: var(--mm-brand-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease;
}
.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li:focus-within > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
    transform: scaleX(1);
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--mm-brand);
}

/* Dropdown panels */
.main-navigation ul ul {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: 0 12px 28px rgba(30, 46, 62, 0.14);
    padding: 6px 0;
}
.main-navigation ul ul li a {
    padding: 10px 18px !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
}
.main-navigation ul ul li a::after { display: none; }

/* Menu toggle (drawer trigger, ≤1024) */
.main-navigation .menu-toggle {
    color: var(--mm-brand);
    background: transparent;
    border: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Mobile header (≤1024): compact brand row --- */
@media (max-width: 1024px) {
    .site-header { padding: 10px 0; }
    .site-header .inside-header {
        flex-direction: row; /* GP core mobile CSS stacks .inside-header to column ≤768 — re-assert row */
        gap: 12px;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .site-header .site-logo img { width: min(420px, 86vw); }
    .mm-header-cta { gap: 10px; margin-left: auto; }
    .mm-header-cta__phone-text { display: none; } /* icon-only phone */
    .mm-header-cta__btn { padding: 10px 14px; font-size: 12px; }
}
@media (max-width: 600px) {
    /* §13 bottom sticky bar carries Call + Schedule on phones */
    .site-header .mm-header-cta__btn { display: none; }
}

/* ------------------------------------------------------------
   MOBILE NAV — drawer (2.1)
   GP drawer below the compact header. Open/closed state is
   GP's (.toggled class + breakpoint=1024 JS); these rules only
   style the open drawer. The CTA no longer re-docks here — it
   lives in the header brand row at all widths.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .main-navigation .inside-navigation {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;      /* .main-nav is width:100%, so the open drawer wraps below the bar */
        position: relative;
        max-width: none;
        padding: 0;
    }

    .main-navigation .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        text-align: center;
        padding: 13px 18px;
    }

    /* Breakpoint guard: this block gates at 1024 but GP's own mobile
       menu breakpoint is a Customizer setting (default 768). These two
       rules make the 769-1024 band behave as a proper toggle menu even
       if the GP setting is lower - without them GP renders the full
       nav list expanded under the MENU bar in that band. */
    .main-navigation:not(.toggled) .main-nav { display: none; }
    .main-navigation.toggled .main-nav { display: block; width: 100%; }

    /* Search (menu-bar-items) rides the same bar, inline next to
       MENU - it was wrapping onto its own awkward row. */
    .main-navigation .menu-bar-items {
        display: flex;
        align-items: center;
        margin-left: 2px;
    }

    .main-navigation .main-nav { width: 100%; }

    .main-navigation.toggled .main-nav > ul {
        display: block;
        width: 100%;
        gap: 0;
    }

    .main-navigation .main-nav ul li {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--mm-line);
    }
    .main-navigation .main-nav ul li:last-child { border-bottom: 0; }

    .main-navigation .main-nav ul li a {
        display: block;
        width: 100%;
        padding: 16px clamp(16px, 4vw, 24px) !important;
        text-align: left;
        font-size: 14px;
    }

    /* Kill the desktop hover underline in the drawer */
    .main-navigation .main-nav ul li a::after { display: none !important; }

    .main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li.current-menu-item > a {
        background: var(--mm-surface);
        color: var(--mm-brand);
    }

    /* Submenu items: static, indented, on stone */
    .main-navigation .main-nav ul ul {
        position: static;
        width: 100%;
        background: var(--mm-surface);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    .main-navigation .main-nav ul ul li a {
        padding: 12px clamp(28px, 6vw, 40px) !important;
        font-size: 13px;
        color: var(--mm-muted);
    }
    .main-navigation .main-nav ul ul li a:hover { color: var(--mm-brand); }

    /* Dropdown toggle arrow */
    .main-navigation .menu-item-has-children { position: relative; }
    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        width: 32px;
        height: 32px;
    }
}

/* ============================================================
   32. FORMINATOR FORMS (universal — !important everywhere fights plugin)
   ============================================================ */
.forminator-ui,
.forminator-custom-form {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.forminator-ui .forminator-label,
.forminator-custom-form label.forminator-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--mm-muted) !important;
    margin-bottom: 4px !important;
}
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui select,
.forminator-ui textarea,
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form select,
.forminator-custom-form textarea {
    background: #fff !important;
    border: 1.5px solid var(--mm-line-strong) !important;
    border-radius: var(--mm-radius-sm) !important;
    padding: 12px 14px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    color: var(--mm-ink) !important;
    box-shadow: none !important;
}
.forminator-ui input:focus,
.forminator-ui select:focus,
.forminator-ui textarea:focus {
    border-color: var(--mm-brand-2) !important;
    outline: none !important;
}
.forminator-ui .forminator-button,
.forminator-ui button[type="submit"],
.forminator-custom-form button[type="submit"] {
    background: var(--mm-brand-2) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: var(--mm-radius) !important;
    padding: 16px 28px !important;
    font-family: 'Public Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background 160ms ease !important;
}
.forminator-ui .forminator-button:hover,
.forminator-ui button[type="submit"]:hover,
.forminator-custom-form button[type="submit"]:hover {
    background: var(--mm-brand-2-hover) !important;
    color: #ffffff !important;
}

.mm-form-success {
    background: var(--mm-surface);
    border-left: 4px solid var(--mm-brand-2);
    border-radius: var(--mm-radius-sm);
    padding: 18px 22px;
}
.mm-form-success strong {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--mm-brand);
    margin-bottom: 6px;
}
.mm-form-success p {
    margin: 0;
    font-size: 15px;
    color: var(--mm-ink);
}
.mm-form-success a {
    color: var(--mm-brand);
    font-weight: 700;
    text-decoration: underline;
}



/* ============================================================
   33. CONTACT PAGE
   ============================================================ */
.mm-contact-hero {
    background: var(--mm-brand-3);
    color: var(--mm-chrome);
    padding: 70px 0 50px;
    position: relative;
    overflow: hidden;
}
.mm-contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 78% 30%, rgba(217, 179, 106, 0.18), transparent 55%);
    pointer-events: none;
}
.mm-contact-hero > .mm-section-inner { position: relative; z-index: 1; }
.mm-contact-hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(40px, 5vw, 60px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--mm-chrome);
    margin: 0 0 16px;
    max-width: 800px;
}
.mm-contact-hero p {
    font-size: 18px;
    color: rgba(250, 248, 243, 0.85);
    margin: 0;
    max-width: 640px;
}

.mm-contact-body {
    background: var(--mm-surface);
    padding: 80px 0;
}
.mm-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: start;
}
.mm-contact-form-wrap {
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 36px;
}
.mm-contact-form-wrap h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--mm-brand);
    margin: 0 0 8px;
}
.mm-contact-form-wrap > p {
    color: var(--mm-muted);
    margin: 0 0 24px;
    font-size: 15px;
}

.mm-contact-info h3 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--mm-brand);
    margin: 0 0 12px;
}
.mm-contact-info__phone {
    background: var(--mm-brand-3);
    color: var(--mm-chrome);
    padding: 28px 26px;
    border-radius: var(--mm-radius);
    margin-bottom: 24px;
}
.mm-contact-info__phone .label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-gold-on-dark);
    margin-bottom: 8px;
}
.mm-contact-info__phone .note {
    font-size: 13px;
    color: rgba(250, 248, 243, 0.7);
    margin: 0;
}
.mm-contact-info__nap {
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 24px 26px;
    margin-bottom: 24px;
}
.mm-contact-info__nap h3 { margin-bottom: 14px; }
.mm-contact-info__nap .mm-nap-name {
    font-weight: 700;
    color: var(--mm-brand);
    margin: 0 0 4px;
    font-size: 15px;
}
.mm-contact-info__nap .mm-nap-addr {
    font-size: 15px;
    line-height: 1.65;
    color: var(--mm-ink);
    margin: 0 0 14px;
}
.mm-directions-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--mm-brand) !important;
    font-family: 'Public Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    transition: gap 0.2s, color 0.2s !important;
    box-shadow: none !important;
}
.mm-directions-btn:hover {
    color: var(--mm-gold-dark) !important;
    gap: 10px !important;
    background: transparent !important;
}

/* Phone link — big text-link variant, override default button styling */
.mm-contact-info__phone .mm-phone-link,
a.mm-phone-link {
    font-family: 'Fraunces', serif !important;
    font-weight: 500 !important;
    font-size: 36px !important;
    letter-spacing: -0.02em !important;
    color: var(--mm-chrome) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: none !important;
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    text-align: left !important;
}
.mm-contact-info__phone .mm-phone-link:hover,
a.mm-phone-link:hover {
    color: var(--mm-gold-on-dark) !important;
    background: transparent !important;
}

.mm-contact-map {
    margin-top: 24px;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: var(--mm-radius);
    border: 1px solid var(--mm-line);
}
.mm-contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 900px) {
    .mm-contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .mm-contact-form-wrap { padding: 28px; }
    .mm-contact-info__phone .mm-phone-link,
    a.mm-phone-link { font-size: 28px !important; }
}
@media (max-width: 540px) {
    .mm-contact-hero { padding: 50px 0 40px; }
    .mm-contact-body { padding: 50px 0; }
}

/* ============================================================
   37. TRUST STRIP (reusable, used on About + service pages)
   ============================================================ */
.mm-trust-strip {
    background: var(--mm-chrome);
    padding: 60px 0;
    border-top: 1px solid var(--mm-line);
    border-bottom: 1px solid var(--mm-line);
}
.mm-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}
.mm-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mm-trust-item svg {
    width: 32px;
    height: 32px;
    color: var(--mm-brand-2);
    margin-bottom: 12px;
    flex-shrink: 0;
}
.mm-trust-item h4 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--mm-brand);
    margin: 0 0 6px;
}
.mm-trust-item p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--mm-muted);
    margin: 0;
}
@media (max-width: 900px) {
    .mm-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 540px) {
    .mm-trust-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   38. FIRST LIGHT COMPONENTS (new in 4.0)
   The signature motifs and component contracts from the
   approved homepage mockup rev 2 (direction B).
   ============================================================ */

/* --- Gold horizon line (signature divider) ---
   Markup: core separator with className "mm-horizon"
   (add "mm-horizon--dark" inside ink bands). */
hr.mm-horizon,
.mm-horizon {
    height: 2px;
    border: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    opacity: 0.85;
    background: linear-gradient(90deg, transparent 0%, var(--mm-brand-2) 18%, var(--mm-brand-2) 82%, transparent 100%);
}
hr.wp-block-separator.mm-horizon {
    background: linear-gradient(90deg, transparent 0%, var(--mm-brand-2) 18%, var(--mm-brand-2) 82%, transparent 100%);
    border: 0;
    height: 2px;
}
hr.mm-horizon.mm-horizon--dark,
hr.wp-block-separator.mm-horizon.mm-horizon--dark {
    background: linear-gradient(90deg, transparent 0%, var(--mm-gold-on-dark) 18%, var(--mm-gold-on-dark) 82%, transparent 100%);
}
.mm-hero hr.mm-horizon { position: relative; z-index: 1; opacity: 0.9; }

/* --- Image-top case cards (mockup rev 2 contract) ---
   For upcoming grids: <a class="mm-card"><span class="mm-card__media">
   <img></span><span class="mm-card__body">…</span></a>. The media
   wash unifies mixed-vintage library photos on First Light. */
.mm-card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-lg);
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.mm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -24px rgba(30, 46, 62, 0.35);
}
.mm-card__media {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--mm-surface);
    overflow: hidden;
}
.mm-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 46, 62, 0.05), rgba(30, 46, 62, 0.22));
}
.mm-card__body { display: block; padding: 17px 20px 18px; }
.mm-card__rule {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--mm-brand-2);
    margin-bottom: 14px;
}
.mm-card__body h3,
.mm-card__body h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 560;
    font-size: 20px;
    margin: 0 0 5px;
}
.mm-card__body p {
    font-size: 14px;
    color: var(--mm-muted);
    line-height: 1.55;
    margin: 0;
}

/* --- Attorney band (homepage: "The attorney works your case") ---
   GB structure: full band (stone bg in attributes) > inner >
   2-col grid: .mm-atty-photo image + text column. */
.mm-atty-photo { margin: 0; }
.mm-atty-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 26px 50px -30px rgba(30, 46, 62, 0.4);
}
.mm-atty-photo figcaption {
    display: inline-block;
    background: var(--mm-brand-3);
    color: var(--mm-chrome);
    font-family: 'Public Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 1;
    padding: 9px 13px;
    border-radius: 999px;
    margin-top: 12px;
    text-align: left;
}
.mm-atty-lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--mm-muted);
    margin: 0 0 16px;
}
.mm-atty-lede strong { color: var(--mm-ink); }
ul.mm-atty-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}
ul.mm-atty-list li {
    position: relative;
    padding: 6px 0 6px 36px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--mm-muted);
}
ul.mm-atty-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--mm-brand-2);
}
ul.mm-atty-list li strong { color: var(--mm-ink); }
@media (max-width: 900px) {
    .mm-atty-photo { max-width: 380px; }
}
.mm-atty-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Tiered case grid (homepage, approved mockup rev 2) --- */
.mm-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.mm-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
    .mm-cards, .mm-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .mm-cards, .mm-cards--4 { grid-template-columns: 1fr; }
}
h3.mm-group-label {
    font-family: 'Public Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-gold-dark);
    border-bottom: 1px solid var(--mm-line);
    padding-bottom: 10px;
    margin: 40px 0 6px;
}
h3.mm-group-label:first-of-type { margin-top: 0; }
p.mm-group-sub {
    font-size: 14.5px;
    color: var(--mm-muted);
    margin: 0 0 18px;
}

/* --- Nav v2 dropdown group labels ---
   Menu items carrying the CSS class "mm-nav-label" (Screen Options >
   CSS Classes in the menu editor) render as non-clickable group
   headers inside the Case Types dropdown. */
.main-navigation .main-nav ul ul { min-width: 250px; }
.main-navigation .main-nav ul ul li.mm-nav-label > a {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--mm-gold-dark) !important;
    pointer-events: none;
    cursor: default;
}
.main-navigation .main-nav ul ul li.mm-nav-label:not(:first-child) > a {
    border-top: 1px solid var(--mm-line);
    margin-top: 4px;
}

/* ============================================================
   39. NAV PHONE CTA (nav v2 - menu item class "mm-nav-cta")
   The persistent gold phone CTA is the last item of the
   primary menu ("2026 v2"): a custom link to tel:3143614242
   carrying the CSS class mm-nav-cta. Label standard:
   "(314) 361-4242 - Free consultation". The hyphen is stored
   as &#45; in the menu item title because wptexturize turns a
   spaced ASCII hyphen in menu titles into an en dash at
   render, and span/nbsp workarounds get stripped by title
   sanitization - keep the entity if the label is ever edited.
   Desktop: honey pill at the end of the nav row (no hover
   underline). Drawer (<=1024): inset gold row, centered.
   Selectors run one class deeper than the section-31 nav rules
   on purpose - they must out-rank them at equal source risk;
   do not simplify.
   ============================================================ */
.main-navigation .main-nav ul li.mm-nav-cta > a {
    background: var(--mm-brand-2);
    color: #ffffff;
    border-radius: 999px;
    padding: 11px 20px;
    margin-left: 8px;
    transition: background 160ms ease;
}
.main-navigation .main-nav ul li.mm-nav-cta > a::after { display: none; }
.main-navigation .main-nav ul li.mm-nav-cta:hover > a,
.main-navigation .main-nav ul li.mm-nav-cta:focus-within > a {
    background: var(--mm-brand-2-hover);
    color: #ffffff;
}
@media (max-width: 1024px) {
    .main-navigation .main-nav ul li.mm-nav-cta { border-bottom: 0; }
    .main-navigation .main-nav ul li.mm-nav-cta > a {
        border-radius: var(--mm-radius);
        margin: 10px clamp(16px, 4vw, 24px);
        width: auto;
        text-align: center;
    }
    .main-navigation .main-nav ul li.mm-nav-cta:hover > a,
    .main-navigation .main-nav ul li.mm-nav-cta:focus-within > a {
        background: var(--mm-brand-2-hover);
        color: #ffffff;
    }
}

/* ============================================================
   40. HERO PHOTO SCRIM (4.0.5)
   kernel: legibility gradient over .mm-hero__bg. The img sits
   at .55 opacity with no overlay; ::after paints above it and
   below .mm-hero__grid (z-index:1). pointer-events none keeps
   the hero interactive. Horizon rule lifted above the scrim.
   ============================================================ */
.mm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(102deg,
    rgba(24, 36, 52, 0.88) 0%,
    rgba(24, 36, 52, 0.78) 40%,
    rgba(24, 36, 52, 0.46) 68%,
    rgba(24, 36, 52, 0.30) 100%);
}

.mm-hero .mm-horizon {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .mm-hero::after {
    background: linear-gradient(180deg,
      rgba(24, 36, 52, 0.86) 0%,
      rgba(24, 36, 52, 0.70) 55%,
      rgba(24, 36, 52, 0.55) 100%);
  }
}

/* ============================================================
   APPEND TO END OF style.css (after the section 40 scrim rules)
   and change the header "Version: 4.0.5" to "Version: 4.0.6".
   ============================================================ */

/* ============================================================
   41. DARK-BAND LINK COLOR (v4.0.6)
   Links inside ink-band body text (hero sub, hero card fine
   print, CTA subs) inherited the theme default link color,
   which is illegible on the navy — e.g. the tel link in the
   contact hero sub. Honey tint + underline, brighter on hover.
   Buttons (.gb-button) are unaffected.
   ============================================================ */
.mm-hero__sub a,
.mm-hero__fine a,
.mm-hero__card-sub a,
.mm-on-dark-sub a,
.mm-cta-band p a {
  color: #DFAF5B;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mm-hero__sub a:hover,
.mm-hero__fine a:hover,
.mm-hero__card-sub a:hover,
.mm-on-dark-sub a:hover,
.mm-cta-band p a:hover {
  color: #EAC77F;
}

/* ============================================================
   APPEND TO END OF style.css (after the section 40 scrim rules)
   and change the header "Version: 4.0.5" to "Version: 4.0.6".
   ============================================================ */

/* ============================================================
   41. DARK-BAND LINK COLOR (v4.0.6)
   Links inside ink-band body text (hero sub, hero card fine
   print, CTA subs) inherited the theme default link color,
   which is illegible on the navy — e.g. the tel link in the
   contact hero sub. Honey tint + underline, brighter on hover.
   Buttons (.gb-button) are unaffected.
   ============================================================ */
.mm-hero__sub a,
.mm-hero__fine a,
.mm-hero__card-sub a,
.mm-on-dark-sub a,
.mm-cta-band p a {
  color: #DFAF5B;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mm-hero__sub a:hover,
.mm-hero__fine a:hover,
.mm-hero__card-sub a:hover,
.mm-on-dark-sub a:hover,
.mm-cta-band p a:hover {
  color: #EAC77F;
}

/* ============================================================
   42. BLOG CONTEXTS — RESTORE ARTICLE PADDING (v4.0.6)
   The theme zeroes GP's .site-content / .inside-article padding
   globally so rebuilt pages can run full-bleed mm-section bands.
   Blog singles and archives use GP's default article layout and
   inherited the zeroed padding (title flush at the top of the
   content box). Scoped to blog body classes only; pages are
   unaffected. All padding lives on .inside-article: equal
   specificity with the zeroing rules, and these are later in
   the file, so source order wins (no !important needed).
   ============================================================ */
.single-post .inside-article,
.blog .inside-article,
.archive .inside-article,
.search-results .inside-article {
  padding: 48px 56px 56px;
}

/* Space between the article box and the footer */
.single-post .site-main,
.blog .site-main,
.archive .site-main,
.search-results .site-main {
  padding-top: 32px;
  padding-bottom: 64px;
}

@media (max-width: 768px) {
  .single-post .inside-article,
  .blog .inside-article,
  .archive .inside-article,
  .search-results .inside-article {
    padding: 28px 20px 32px;
  }

  .single-post .site-main,
  .blog .site-main,
  .archive .site-main,
  .search-results .site-main {
    padding-top: 16px;
    padding-bottom: 40px;
  }
}