/*
 Theme Name:   MMM — Outshine
 Theme URI:    https://matchmarketing.ai
 Description:  GeneratePress child theme — Outshine Media LLC (MMM 2.0, First Light generation). Built from the JH/HLF First Light lineage for the 2026 outshine.io rebrand.
 Author:       MatchMarketing™
 Template:     generatepress
 Version:      1.0.2-OM

 ============================================================
 TABLE OF CONTENTS
 ============================================================
  1.  FONTS (Space Grotesk display + Public Sans UI, self-hosted variable)
  2.  TOKENS — OUTSHINE (petrol field / sun gold / teal / paper)
  3.  BASE
  4.  TYPOGRAPHY (Space Grotesk display, Public Sans UI)
  5.  LINKS
  6.  HEADER (single-row petrol band + brand lockup)
  7.  NAVIGATION (in-header nav, gold CTA pill, dropdown machinery)
  8.  BUTTONS
  9.  FORMS (base)
 10.  CONTENT SPACING / ALIGNFULL / FLUSH PAGES
 11.  UTILITIES
 11c. CONTACT PAGE (card + map embed)
 12.  FOOTER (site-info band: company line + links + legal)
 13.  MOBILE STICKY CTA (email + consultation — no phone)
 14.  UTILITY BAR
 15.  SECTION HELPERS
 16.  HERO BAND (base, reusable across pages)
 17.  CONSULT CARD (hero right column)
 18.  TRUST BAR (homepage, between hero and services)
 19.  PROGRAM CARDS (homepage, Core / Match / Boost + service cards)
 20.  PROMISE PILLARS (homepage, 4 stats)
 21.  ISSUES TRACK (homepage, practice pain-point cards)
 22.  HOW IT WORKS (homepage, 3 numbered steps)
 23.  RESULTS (homepage, factual acquisition results strip)
 24.  REVIEWS (homepage, score + 3 cards)
 25.  SERVICE AREA (homepage, copy + map)
 26.  FAQ (homepage, details/summary accordion)
 27.  FINAL CTA (reusable closer band)
 28.  TRUST STRIP (reusable 4-icon component, light bg)
 29.  (retired 1.0.2-OM — header restyle folded into §6 and §7)
 30.  FORMINATOR FORMS (universal)
 31.  (retired 1.0.2-OM — custom footer folded into §12)
 32.  HORIZON DIVIDER (First Light signature rule, teal)
 33.  ACCENT LINE (Space Grotesk 500, First Light register)
 34.  CARDS (image-top .mm-card system, First Light contract)
 35.  FOUNDER BAND (.mm-atty anatomy, homepage/Founder page)
 36.  DARK-BAND LINK COLOR (links in petrol band body text)

 ============================================================
 1.0.2-OM CHANGELOG (2026-08-22 — consolidation pass; visual
 output preserved except the two hairline fixes noted below)
 - Ordering: all 1.0.1-era appended addenda folded into their
   home sections. §6c lockup + header parts of §29 -> §6;
   §29b right-aligned nav + menu-item CTA pill and §29c petrol
   nav colors -> §7; §10b grid-container release + §11 flush
   addenda -> §10; the appended footer band + §5b -> §12/§7.
   Section numbers NOT renumbered: §16-§35 component references
   in the tracker and SOPs stay valid; §29/§31 kept as fold notes.
 - NAV HAIRLINE FIX (the flagged border issue): the old white-
   header-era border-top/border-bottom (--mm-line) on
   .main-navigation removed at the source. The §5b override is
   gone because the rule it fought no longer exists.
 - CTA PILL CORNER FIX: §16's .mm-header-cta__btn background/
   shadow rule removed — the CTA class now sits on the menu <li>
   (§29b-era), so that rule painted a square gold box behind the
   rounded anchor pill.
 - Dead CSS removed (verified absent from live markup 2026-08-22):
   §12 GP widget-footer system (~300 lines; footer widget areas
   are disabled in functions.php via generate_footer_widgets -> 0,
   #footer-widgets no longer renders, incl. service-area stub);
   §31 4-col custom footer grid (__grid/__b1/__b2/__brand/__nap/
   __col/__bottom — superseded by the shipped single-band footer);
   §29 absolute .mm-header-cta slot + phone-pill anatomy and
   §6c .mm-header-right (both retired from the header markup;
   the AI-answered intake number gets a fresh slot when it goes
   live rather than resurrecting the old anatomy).
 - Duplicate :root CTA token block in §16 removed (canonical §2).
 - .mm-lede consolidated in §15 at 19px (the cascade winner);
   §4 keeps .has-large-font-size only.
 - Duplicate universal .alignfull rule in §10 removed (kept once).
 - .site-info / .copyright-bar consolidated around the shipped
   legal line; the old faint hairline borders around the
   copyright row removed (same cleanup as the nav hairlines).
 - Latent fix: submenu links on the white dropdown explicitly
   petrol — the scoped paper link color would otherwise inherit
   into future dropdowns (no dropdowns in menu 16 today).

 ============================================================
 1.0.0-OM CHANGELOG (lineage: JH 1.0.0-JH stylesheet / HLF First
 Light 4.0.5 — new mmm-outshine child theme for the outshine.io
 rebrand)
 - Folder mmm-outshine (per Child Theme Adaptation SOP); fresh
   theme_mods namespace, fresh changelog. All First Light
   machinery carried forward: §10 flush-page + reading-measure
   system, §30 Forminator skin, custom footer, §32-§36 component
   library.
 - FONTS: Fraunces dropped. Space Grotesk (display/brand face,
   variable, Latin subset — NO italic master exists) + Public
   Sans (UI/body, normal + italic), self-hosted woff2 in /fonts/.
   @font-face src URLs are root-absolute to mmm-outshine
   (FlyingPress inlining requirement — do not make relative).
 - §2 TOKENS: Outshine sunset palette from the locked brand
   tokens. Petrol field #14424F doubles as ink (black retired
   brand-wide). New tokens: --mm-paper (warm page background),
   --mm-teal (brand accent), --mm-cta / --mm-cta-hover /
   --mm-cta-ink (sun-gold conversion CTA with petrol text —
   gold + white fails contrast, so CTA text is petrol).
   Renames from JH: --mm-green-cta* becomes --mm-cta*,
   --mm-blue-on-dark becomes --mm-light-on-dark.
 - NO PHONE CTAs anywhere (Outshine contact policy: written
   first). §13 mobile sticky = Email + Consultation buttons.
 - JH §11b (reusable-block UID override) removed — JH-specific
   GB container IDs, not applicable here.
 - Header stays petrol: the round full-color badge floats on
   the field, which is the approved brand composition.
 - §33 accent line recut to Space Grotesk 500 normal (no italic
   master); light gold on dark bands.
 - §35 .mm-atty repurposed as the founder band (same anatomy,
   Chris photo + direct-access copy).
 ============================================================
*/

/* ============================================================
   1. FONTS — self-hosted VARIABLE woff2
   Files live in /fonts/ inside this child theme
   (/wp-content/themes/mmm-outshine/fonts/):
     space-grotesk-latin-wght-normal.woff2
     public-sans-latin-wght-normal.woff2
     public-sans-latin-wght-italic.woff2
   (Space Grotesk has no italic master: body italics resolve to
   Public Sans italic; avoid italics in Space Grotesk display
   contexts.)

   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.

   Space Grotesk = display/brand (H1, H2, .display, accent
   lines, display numerals). Public Sans = UI + body.
   ============================================================ */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/wp-content/themes/mmm-outshine/fonts/space-grotesk-latin-wght-normal.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-outshine/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-outshine/fonts/public-sans-latin-wght-italic.woff2') format('woff2-variations');
}

/* ============================================================
   2. TOKENS — OUTSHINE
   Brand: petrol field + sun gold + teal + warm paper. The field
   doubles as ink (black is retired brand-wide). Locked 2026-08-21.
   ============================================================ */
:root {
    --mm-brand: #14424F; /* petrol field — dark bands, ink */
    --mm-brand-hover: #0F343D;
    --mm-brand-2: #2E7690; /* actionable teal (links, primary buttons on light) — AA on paper/white */
    --mm-brand-2-hover: #245D72;
    --mm-brand-3: #3F8CA3; /* secondary teal (secondary buttons, badges) */
    --mm-brand-3-hover: #2E7690;
    --mm-teal: #519FB5; /* brand teal accent — icons, rules, dots, numerals on light */
    --mm-cta: #F4AF4A; /* sun gold — conversion CTA background */
    --mm-cta-hover: #E9992B;
    --mm-cta-ink: #14424F; /* CTA text — gold + white fails contrast */
    --mm-ink: #14424F;
    --mm-muted: #5C6E74;
    --mm-chrome: #ffffff;
    --mm-paper: #FBF7F0; /* warm page background */
    --mm-surface: #F1F7F8;
    --mm-surface-2: #E3EEF0;
    --mm-line: #D9E5E7;
    --mm-line-strong: #C2D6DA;
    --mm-focus: #2E7690;
    --mm-light-on-dark: #A9D6E2; /* light teal — accents/links on petrol bands */
    --mm-radius: 10px; /* soft radius system (10-16px) */
    --mm-radius-lg: 16px;
    --mm-radius-pill: 999px;
    /* GeneratePress token mapping */
    --accent: var(--mm-brand-2);
    --contrast: var(--mm-ink);
    --contrast-2: var(--mm-muted);
    --base: var(--mm-paper);
    --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", Arial, sans-serif;
    color: var(--mm-ink);
    background: var(--mm-paper);
    line-height: 1.65;
    accent-color: var(--mm-brand-2);
}

/* ============================================================
   4. TYPOGRAPHY
   Mobile-first type ramp. H2 is always visibly smaller than H1.
   Sizes scale up at 768px and 1024px breakpoints.

   Sitewide font-size ladder (mobile -> desktop):
     H1   30px -> 44px
     H2   22px -> 30px
     H3   19px -> 22px
     H4   17px -> 18px
     P    16px -> 17px (body default)
     lede 19px (.mm-lede lives in §15; .has-large-font-size 18 -> 22)
   ============================================================ */
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;
}

    /* First Light register, Outshine cut: Space Grotesk carries H1, H2,
   .display and any .mm-serif moment (class name retained from the
   lineage; here it means "brand face"); Public Sans carries H3-H6,
   UI, buttons. */
    h1, h2,
    .display, h1.display, h2.display,
    .mm-serif {
        font-family: 'Space Grotesk', 'Public Sans', Arial, sans-serif;
    }

h1 {
    color: var(--mm-ink);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 0.5em;
}

h2 {
    color: var(--mm-brand);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 1.4em 0 0.5em;
}

h3 {
    color: var(--mm-brand);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 1.4em 0 0.5em;
}

h4 {
    color: var(--mm-brand);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    margin: 1.3em 0 0.4em;
}

h5, h6 {
    color: var(--mm-brand);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1.2em 0 0.4em;
}

@media (min-width: 768px) {
    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 44px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 22px;
    }
}

/* The .display utility is for hero/section-head headlines that should
   render larger than the body ramp. Keep this opt-in via class. */
.display, h1.display, h2.display {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

p, li {
    color: var(--mm-ink);
    font-size: 16px;
    line-height: 1.65;
}

@media (min-width: 768px) {
    p, li {
        font-size: 17px;
    }
}

/* Large-paragraph block style. (.mm-lede is defined once, in §15.) */
.has-large-font-size {
    font-size: 18px;
    line-height: 1.55;
    color: var(--mm-muted);
    font-weight: 400;
}

@media (min-width: 768px) {
    .has-large-font-size {
        font-size: 22px;
    }
}

small, .has-small-font-size {
    color: var(--mm-muted);
}

/* ============================================================
   5. LINKS
   ============================================================ */
a {
    color: var(--mm-brand-2);
    text-decoration: none;
    transition: color 160ms ease;
}

    a:hover, a:focus {
        color: var(--mm-brand);
    }

:focus-visible {
    outline: 2px solid var(--mm-focus);
    outline-offset: 2px;
}

/* ============================================================
   6. HEADER — single-row petrol band (consolidated 1.0.2-OM;
   absorbs the 1.0.1 §6c lockup and the header parts of §29)
   GP layout: the nav renders INSIDE the header band (§7). The
   round full-color badge floats on the petrol field — approved
   brand composition, the header MUST stay dark. Anatomy: badge +
   wordmark + descriptor lockup left, nav + gold CTA pill right.
   Header bg matches the hero family so there is no visible seam
   when the hero band sits flush below.
   The 1.0.1 right block (.mm-header-right) and the old absolute
   CTA slot (.mm-header-cta + phone pill) are retired from the
   markup; when the AI-answered intake number goes live it gets a
   fresh slot rather than the old anatomy.
   ============================================================ */
.site-header {
    background: var(--mm-brand-hover);
    border-bottom: none;
    padding: 10px 0;
    position: relative;
}

/* GP's main.min.css defaults .inside-header to `padding: 20px 40px`
   and the customizer forces its own display; flex must win for the
   single-row lockup, so the !important stays. padding-block is
   zeroed so band height is driven by the logo + .site-header
   padding alone, not GP's hidden vertical chrome. */
.site-header .inside-header {
    display: flex !important;
    align-items: center;
    gap: 18px;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 48px);
    padding-block: 0;
    text-align: left;
}

.site-logo {
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

    .site-logo img,
    .site-header .header-image.is-logo-image {
        /* Renders at the file's natural size up to this cap. If the served
       bytes are smaller than the cap, the image displays at its native
       size (sharp); CSS doesn't upscale. To get a larger displayed logo,
       re-upload at higher resolution and/or purge any CDN-cached variant. */
        max-height: 78px;
        width: auto;
        height: auto;
        display: inline-block;
    }

.site-branding, .site-title, .main-title {
    display: none;
}

/* Brand lockup: badge + wordmark + descriptor */
.mm-brand-lockup {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-decoration: none;
}

.mm-brand-lockup__name {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(21px, 2.1vw, 27px);
    line-height: 1.05;
    color: var(--mm-paper);
    letter-spacing: .01em;
}

.mm-brand-lockup__desc {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mm-light-on-dark);
}

a.mm-brand-lockup:hover .mm-brand-lockup__name {
    color: #fff;
}

@media (max-width: 1024px) {
    .site-logo img,
    .site-header .header-image.is-logo-image {
        max-height: 64px;
    }
}

@media (max-width: 820px) {
    .mm-brand-lockup__desc {
        display: none;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 8px 0;
    }

        .site-logo img,
        .site-header .header-image.is-logo-image {
            max-height: 56px;
        }
}

/* ============================================================
   6b. HEADER TWO-ROW (2026-08-22): the Start the conversation
   pill moved ABOVE the menu (per Chris) so the nav row has room
   to grow as vertical pages join. The pill is a hooked element
   (functions.php §7), no longer a menu item. Desktop only;
   mobile keeps the single-row band + drawer + sticky CTA.
   ============================================================ */
.mm-header-cta2 {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background-color: var(--mm-cta);
    background-image: linear-gradient(rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%);
    color: var(--mm-brand);
    border-radius: 8px;
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(8,30,38,.18);
}

    .mm-header-cta2:hover {
        background-color: var(--mm-cta);
        color: var(--mm-brand);
        filter: brightness(1.05);
    }

@media (min-width: 1025px) {
    .site-header .inside-header {
        display: grid !important;
        grid-template-columns: auto auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        row-gap: 4px;
        column-gap: 18px;
    }

    .site-header .site-logo {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .site-header .mm-brand-lockup {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .mm-header-cta2 {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .site-header .main-navigation {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .main-navigation .main-nav ul li a {
        padding: 10px 16px;
    }
}

/* ============================================================
   7. NAVIGATION — in-header nav (consolidated 1.0.2-OM; absorbs
   the nav parts of §29 plus the 1.0.1 §29b/§29c addenda)
   The nav sits inside the petrol header band: transparent on
   petrol, light links, gold CTA pill as a menu item
   (li.mm-header-cta__btn in the Outshine 2026 Primary menu).
   The white-header-era --mm-line top/bottom borders are GONE —
   that was the flagged hairline box around the nav.
   Dropdowns stay white chrome with multi-column machinery for
   long menus (unused by menu 16 today, kept for the library).
   ORDER-SENSITIVE: the color rules below are specificity-matched
   against GP's customizer inline CSS — keep their order.
   ============================================================ */
.main-navigation,
.main-navigation ul ul {
    border: 0;
    box-shadow: none;
}

.site-header .main-navigation {
    background: transparent;
    margin-left: auto;
    box-shadow: none;
}

    /* Specificity note: GP's main.min.css sets
   `.main-navigation .inside-navigation { justify-content: space-between }`
   (0,2,0). We match it with .main-navigation .inside-navigation so our
   layout wins without !important. */
    .main-navigation .inside-navigation {
        max-width: 1240px;
        margin-inline: auto;
        padding-inline: clamp(16px, 3vw, 48px);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 18px;
    }

    .main-navigation .main-nav {
        margin: 0;
        margin-left: auto;
    }

        .main-navigation .main-nav > ul {
            display: flex;
            gap: 6px;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            background: transparent;
            padding: 0;
            margin: 0;
        }

        .main-navigation .main-nav ul li {
            background: transparent;
        }

            /* Structural link rule; colors live in the scoped petrol
               rules further down. */
            .main-navigation .main-nav ul li a {
                padding: 16px 18px;
                font-family: 'Public Sans', sans-serif;
                font-size: 14px;
                letter-spacing: 0.04em;
                line-height: 1;
                position: relative;
                transition: color 160ms ease;
            }

                .main-navigation .main-nav ul li a::after {
                    content: "";
                    position: absolute;
                    left: 18px;
                    right: 18px;
                    bottom: 6px;
                    height: 2px;
                    background: var(--mm-brand-2);
                    transform: scaleX(0);
                    transform-origin: left;
                    transition: transform 180ms ease;
                }

            /* Underline is hover/focus only (per Chris 2026-08-22:
               no resting underline on the current page item). */
            .main-navigation .main-nav ul li:hover > a::after,
            .main-navigation .main-nav ul li:focus-within > a::after {
                transform: scaleX(1);
            }

            /* Never show the underline inside the gold CTA pill. */
            .main-navigation .main-nav li.mm-header-cta__btn > a::after {
                display: none;
            }

            /* Specificity note: GP outputs an inline rule at (0,4,3) like
   `.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a`
   which sets color to var(--base-3) = #ffffff. We match the :not()
   specificity so hover color never falls back to GP's value. The scoped
   petrol rules below then win on top of this (later, equal-or-higher
   specificity). Covers .sfHover (Superfish JS class) and :focus, like
   GP does. */
            .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
            .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
            .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a,
            .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
            .main-navigation .main-nav ul li.current-menu-item > a,
            .main-navigation .main-nav ul li[class*="current-menu-"] > a {
                color: var(--mm-brand-2);
            }

/* -------- Petrol single-row colors (scoped to beat GP's inline
   customizer rules) -------- */
.site-header .main-navigation .main-nav ul li > a {
    color: var(--mm-paper);
    font-weight: 600;
}

.site-header .main-navigation .main-nav ul li > a:hover,
.site-header .main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--mm-cta);
}

/* -------- Header CTA pill: menu item li.mm-header-cta__btn -------- */
.main-navigation .main-nav li.mm-header-cta__btn > a {
    background-color: var(--mm-cta);
    background-image: linear-gradient(rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%);
    color: var(--mm-brand);
    border-radius: 8px;
    font-weight: 700;
    line-height: 1;
    padding: 14px 22px;
    margin-left: 14px;
    box-shadow: 0 4px 12px rgba(8,30,38,.18);
}

.main-navigation .main-nav li.mm-header-cta__btn > a:hover {
    background-color: var(--mm-cta);
    color: var(--mm-brand);
    filter: brightness(1.05);
}

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

/* -------- Submenus --------
   Long dropdowns flow into 2 or 3 columns so they don't run below the
   viewport. Auto-triggered by item count via :has() (Chrome 105+, FF 121+,
   Safari 15.4+). Manual override via .menu-cols-2 / .menu-cols-3 added to
   the parent nav item in WP Admin > Appearance > Menus > CSS Classes.

   GP positions submenus `left: 0` relative to the parent <li>. For wide
   dropdowns near the right edge, GP's own JS shifts them; we don't need to
   handle that here. Just keep widths sane so they don't trigger overflow.
*/
.main-navigation ul ul {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    box-shadow: 0 12px 28px rgba(8, 25, 31, 0.12);
    padding: 8px 0;
    /* default single-column width */
    min-width: 240px;
}

    .main-navigation ul ul li a {
        padding: 9px 18px !important;
        font-size: 13px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        /* lets long labels wrap */
    }

        .main-navigation ul ul li a::after {
            display: none;
        }

    /* Latent fix (1.0.2-OM): the scoped paper link color above matches
       submenu anchors too — on the white dropdown that would be paper
       on white. Force petrol at higher specificity. No dropdowns exist
       in menu 16 today; this protects future menus. */
    .site-header .main-navigation .main-nav ul ul li > a {
        color: var(--mm-brand);
    }

        .site-header .main-navigation .main-nav ul ul li > a:hover {
            color: var(--mm-brand-2);
        }

/* ----- 2-column dropdown -----
   Triggered automatically when a top-level item has 8+ children, or
   manually via .menu-cols-2 on the parent <li>. ~480px wide. */
.main-navigation .main-nav ul > li.menu-cols-2 > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 480px;
    min-width: 480px;
    column-gap: 0;
    padding: 10px 0;
}

/* ----- 3-column dropdown -----
   Triggered automatically when a top-level item has 16+ children, or
   manually via .menu-cols-3 on the parent <li>. ~700px wide.
   `.menu-cols-3` selector is written second so it can override the auto
   2-col rule if both somehow apply. */
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul,
.main-navigation .main-nav ul > li.menu-cols-3 > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 700px;
    min-width: 700px;
    column-gap: 0;
    padding: 10px 0;
}

    /* Submenu items inside a grid dropdown — make sure each <li> behaves as
   a grid cell, not a stacked block. GP's default <li> styling has
   `position: relative` which works fine inside grid. */
    .main-navigation .main-nav ul > li.menu-cols-2 > ul > li,
    .main-navigation .main-nav ul > li.menu-cols-3 > ul > li,
    .main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul > li,
    .main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul > li {
        width: auto;
        border-bottom: 0;
    }

        .main-navigation .main-nav ul > li.menu-cols-2 > ul > li > a,
        .main-navigation .main-nav ul > li.menu-cols-3 > ul > li > a,
        .main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul > li > a,
        .main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul > li > a {
            padding: 8px 18px !important;
        }

/* Edge-overflow guard: if a wide dropdown sits under a nav item close to
   the right edge of the nav, shift it leftward so it stays in the
   viewport. GP also tries to do this with JS; this is belt-and-braces. */
.main-navigation .main-nav ul > li.menu-cols-3:nth-last-child(-n+2) > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)):nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
}

.main-navigation .main-nav ul > li.menu-cols-2:nth-last-child(-n+2) > ul,
.main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)):nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
}

@media (max-width: 900px) {
    /* On narrower viewports, collapse multi-col dropdowns back to single
       column so they don't overflow. The full mobile menu uses GP's
       slide-out drawer pattern below this breakpoint anyway. */
    .main-navigation .main-nav ul > li.menu-cols-2 > ul,
    .main-navigation .main-nav ul > li.menu-cols-3 > ul,
    .main-navigation .main-nav ul > li:has(> ul > li:nth-child(8)) > ul,
    .main-navigation .main-nav ul > li:has(> ul > li:nth-child(16)) > ul {
        display: block;
        width: auto;
        min-width: 0;
    }
}

/* Mobile toggle — transparent on petrol, paper glyph */
.main-navigation .menu-toggle {
    background: transparent;
    border: 0;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.site-header .menu-toggle,
.site-header .menu-toggle:hover,
.site-header .main-navigation.toggled .menu-toggle {
    background: transparent;
    color: var(--mm-paper);
}

/* Search icon in nav, if present */
.main-navigation .navigation-search {
    flex-shrink: 0;
}

    .main-navigation .navigation-search input[type="search"] {
        border-radius: 10px;
    }

/* -------- Responsive -------- */
@media (max-width: 1024px) {
    .main-navigation .main-nav ul li a {
        padding: 14px 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .site-header .main-navigation .main-nav {
        background: var(--mm-brand);
    }
}

/* ============================================================
   8. BUTTONS
   Soft 10px radius (calm, professional). Primary = actionable teal.
   Secondary (.is-secondary) = secondary teal. Conversion moments use
   the sun-gold CTA treatment (see §16 hero and the §7 header pill).
   ============================================================ */
.button,
.wp-block-button__link,
button,
input[type="submit"] {
    background: var(--mm-brand-2);
    border: 1px solid var(--mm-brand-2);
    color: #fff;
    border-radius: 10px;
    padding: 0.75em 1.2em;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

    .button:hover,
    .wp-block-button__link:hover,
    button:hover,
    input[type="submit"]:hover {
        background: var(--mm-brand);
        border-color: var(--mm-brand);
        color: #fff;
    }

    .is-style-outline .wp-block-button__link,
    .button.button-outline {
        background: transparent;
        border-color: var(--mm-line-strong);
        color: var(--mm-brand);
    }

        .is-style-outline .wp-block-button__link:hover,
        .button.button-outline:hover {
            background: var(--mm-surface);
            border-color: var(--mm-brand-2);
            color: var(--mm-brand);
        }

    .button.is-secondary,
    .wp-block-button.is-secondary .wp-block-button__link {
        background: var(--mm-brand-3);
        border-color: var(--mm-brand-3);
        color: #fff;
    }

        .button.is-secondary:hover,
        .wp-block-button.is-secondary .wp-block-button__link:hover {
            background: var(--mm-brand-3-hover);
            border-color: var(--mm-brand-3-hover);
            color: #fff;
        }

    .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;
}

/* ============================================================
   9. FORMS (base — see Section 30 for Forminator overrides)
   ============================================================ */
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: 10px;
    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 / FLUSH PAGES
   (consolidated 1.0.2-OM: absorbs the 10b grid-container release
   and the flush-page addenda that lived under §11)
   IMPORTANT: do NOT re-add padding to .site-content, .entry-content,
   .inside-article, or .site-main — GP defaults create a 34px gap below
   the header that breaks full-bleed bands.
   ============================================================ */
/* Alignfull works everywhere — that part is universal. */
.no-sidebar .entry-content .alignfull,
.entry-content > .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

/* ---------- FLUSH PAGES (homepage and custom-built landing pages) ----------
   Strip all default GP padding so .alignfull hero bands can sit flush
   against the header. Opt-in via body.home, body.page-id-6, or by adding
   the class `mm-flush-page` to a page (via the Page block editor sidebar:
   Advanced > Additional CSS Class) when building a fully custom layout.
   NOTE: page-id-6 is inherited from the lineage — rely on body.home +
   mm-flush-page on outshine.io. */
body.home .site-content,
body.page-id-6 .site-content,
body.mm-flush-page .site-content,
body.home .site-main,
body.page-id-6 .site-main,
body.mm-flush-page .site-main,
body.home .inside-article,
body.page-id-6 .inside-article,
body.mm-flush-page .inside-article,
body.home .entry-content,
body.page-id-6 .entry-content,
body.mm-flush-page .entry-content {
    padding: 0;
    margin: 0;
}

/* Flush pages: release GP's #page.site.grid-container width cap so the
   section bands go full width; .mm-section-inner keeps content contained.
   (10b, 1.0.1-OM) */
body.home .site.grid-container,
body.page-id-6 .site.grid-container,
body.mm-flush-page .site.grid-container {
    max-width: 100%;
}

/* Classic-theme group wrapper pass-through: restores direct-child
   contracts on flush pages */
body.home .wp-block-group__inner-container,
body.page-id-6 .wp-block-group__inner-container,
body.mm-flush-page .wp-block-group__inner-container {
    display: contents;
}

/* Flush single posts — hide post furniture. */
body.mm-flush-page.single .entry-footer,
body.mm-flush-page.single footer.entry-meta,
body.mm-flush-page.single .post-navigation,
body.mm-flush-page.single nav.post-navigation {
    display: none;
}

/* ---------- REGULAR CONTENT PAGES (posts, standard pages, archives) ----------
   Restore sensible vertical breathing room between the nav bar and the H1,
   plus a comfortable reading column width. GP's `one-container` layout
   wraps everything in .grid-container.container which already caps width
   at ~1200px by default; we add inner padding so content doesn't kiss the
   container edge on tablets. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .inside-article {
    padding: 48px clamp(20px, 4vw, 56px) 64px;
}

/* Reading-measure cap, WordPress block-editor style:
   - Default text blocks (p, h2, h3, ul, ol, blockquote, native headings,
     plain images) cap to ~820px and center, so prose stays readable.
   - .alignwide breaks out to ~1100px.
   - .alignfull (universal rule above), wp-block-columns, gb-container,
     gb-grid-wrapper, and anything aligned wide/full keep their full
     width — these are the blocks that NEED room (two-column layouts,
     hero strips, CTAs that span edge-to-edge).
   Applies only on regular content pages; flush pages keep full width. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > p:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h1:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h2:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h3:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h4:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h5:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h6:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > ul:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > ol:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > blockquote:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > figure:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-image:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-paragraph:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-heading:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-list:not(.alignwide):not(.alignfull),
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-quote:not(.alignwide):not(.alignfull) {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* .alignwide gets a slightly wider cap. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .alignwide {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Multi-column / GenerateBlocks layouts span the full container — these
   are the layouts where the page author has already decided on width via
   GB. Do not cap them. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-columns,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .gb-container,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .gb-grid-wrapper,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > .wp-block-group {
    max-width: none;
    width: 100%;
}

/* Hide the post header/footer block ONLY on pages that build their own
   header inside a GenerateBlocks hero (homepage and other custom-built
   landing pages). Blog posts and standard pages keep .entry-header so
   their titles render normally. Add the body class `mm-no-entry-header`
   (or the broader `mm-flush-page`) to any other page you build with a
   custom hero. */
body.home .entry-header,
body.page-id-6 .entry-header,
body.mm-no-entry-header .entry-header,
body.mm-flush-page .entry-header,
body.home .entry-footer,
body.page-id-6 .entry-footer,
body.mm-no-entry-header .entry-footer,
body.mm-flush-page .entry-footer {
    display: none !important;
}

/* When .entry-header IS present (blog posts), give it room to breathe
   from the surrounding content. The title sits inside .entry-header > h1,
   and post meta (date, author, etc.) typically follows. The entry-header
   itself sits in the reading column. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-header {
    max-width: 820px;
    margin: 0 auto 28px;
}

    body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-header .entry-title {
        margin: 0 0 12px;
        /* Typography (size, color, weight, line-height) comes from the
       Section 4 type ramp. Only layout/spacing overrides here. */
    }

body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-meta {
    font-size: 13px;
    color: var(--mm-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-meta a {
        color: var(--mm-muted);
    }

        body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-meta a:hover {
            color: var(--mm-brand-2);
        }

/* When the H1 is inside .entry-content as a Gutenberg block
   (<h1 class="wp-block-heading">), make sure it gets the reading-column
   cap and the spacing below it without duplicating the Section 4
   typography ramp. */
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h1.wp-block-heading,
body:not(.home):not(.page-id-6):not(.mm-flush-page) .entry-content > h1 {
    margin: 0 auto 28px;
    max-width: 820px;
}

@media (max-width: 768px) {
    .gb-grid-wrapper > .gb-grid-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body:not(.home):not(.page-id-6):not(.mm-flush-page) .inside-article {
        padding: 32px clamp(16px, 4vw, 24px) 48px;
    }
}

/* ============================================================
   11. UTILITIES
   ============================================================ */
.mm-muted {
    color: var(--mm-muted);
}

.mm-surface {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: 16px;
}

.mm-surface-dark {
    background: var(--mm-brand);
    color: #fff;
    border-radius: 16px;
}

    .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: #fff;
    }

    .mm-surface-dark a {
        color: var(--mm-light-on-dark);
    }

    /* §11 addendum (2026-08-22): make .mm-surface-dark work with the
       §15 section-head pattern and body copy — the section-head h2
       (ink) and default p/li (ink) otherwise win on the petrol band. */
    .mm-surface-dark p,
    .mm-surface-dark li {
        color: rgba(251, 247, 240, 0.85);
    }

    .mm-surface-dark .mm-section-head h2 {
        color: var(--mm-chrome);
    }

    .mm-surface-dark .mm-sub {
        color: rgba(251, 247, 240, 0.8);
    }

    .mm-surface-dark .mm-eyebrow {
        color: var(--mm-light-on-dark);
    }

        .mm-surface-dark .mm-eyebrow::before,
        .mm-surface-dark .mm-eyebrow--center::after {
            background: var(--mm-light-on-dark);
        }

/* ============================================================
   11c. CONTACT PAGE — card + map embed
   Lightweight styles for the contact page. The contact-card
   sits in the right column with a soft surface treatment; the map
   embed below the form gets a rounded frame.
   ============================================================ */
.mm-contact-card {
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-line);
    border-radius: 16px !important;
}

    .mm-contact-card .wp-block-separator {
        border: 0;
        border-top: 1px solid var(--mm-line);
        background: transparent;
        height: 0;
        opacity: 1;
    }

    .mm-contact-card a {
        color: var(--mm-brand);
    }

        .mm-contact-card a:hover {
            color: var(--mm-brand-2);
        }

.mm-map-embed {
    border-radius: 12px;
    overflow: hidden;
    background: var(--mm-surface);
    /* Maintain aspect ratio if iframe height attribute is missing */
    min-height: 320px;
}

    .mm-map-embed iframe {
        display: block;
        width: 100%;
        border: 0;
        border-radius: 12px;
    }

/* §11c addendum (2026-08-22): standalone contact-page layout.
   Two columns on desktop, form first when stacked on mobile. The
   card carries its own padding here because the §11c card contract
   assumed a padded GB container. */
.mm-contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: start;
}

    .mm-contact-grid .mm-contact-card {
        padding: 30px 28px;
    }

@media (max-width: 900px) {
    .mm-contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* ============================================================
   12. FOOTER — .site-info band (consolidated 1.0.2-OM)
   The shipped footer is the single petrol band hooked in
   functions.php (§36 there): company line + links row, then the
   legal line via the generate_copyright filter. GP structure:
   the hooked .mm-footer and the .copyright-bar both render
   inside .site-info > .inside-site-info. GP's footer WIDGET
   areas are disabled in functions.php (generate_footer_widgets
   -> 0), so the old §12 widget-footer system and the §31 4-col
   grid are gone from this stylesheet.
   NO PHONE in the footer until the AI-answered intake number is
   live and tested.
   ============================================================ */
/* GP footer wrapper: on this GP build it CONTAINS .site-info, so it
   must stay visible — it carries the footer band. (1.0.2 fix: the
   lineage display:none here hid the whole footer.) Widgets are
   disabled in functions.php, so it holds nothing else. */
.site-footer {
    display: block;
    background: var(--mm-brand);
    border-top: 0;
}

.mm-footer {
    background: var(--mm-brand);
    color: var(--mm-paper);
    padding: 42px 0 26px;
}

.mm-footer__inner {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 48px);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    align-items: baseline;
    justify-content: space-between;
}

.mm-footer__company {
    margin: 0;
    font-size: 15px;
    /* §4 sets p to ink; recolor for the petrol band. */
    color: var(--mm-paper);
}

.mm-footer__name {
    font-weight: 700;
}

.mm-footer__sep {
    opacity: .55;
    margin: 0 .5em;
}

.mm-footer__email,
.mm-footer__links a {
    color: var(--mm-light-on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mm-footer__email:hover,
.mm-footer__links a:hover {
    color: var(--mm-cta);
}

.mm-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: 15px;
}

/* Copyright row joins the band (GP .site-info wraps the whole footer) */
.site-info {
    background: var(--mm-brand);
    color: var(--mm-light-on-dark);
    border-top: 0;
    padding: 0 0 36px;
    font-size: 13px;
    text-align: center;
}

    .site-info .inside-site-info {
        /* GP flexes this row; block-stack the band above the legal line. */
        display: block;
        max-width: 1240px;
        margin-inline: auto;
        padding-inline: clamp(20px, 4vw, 48px);
        text-align: center;
    }

    .site-info .copyright-bar {
        padding: 0;
        margin: 0;
        border: 0;
    }

    .site-info .mm-footer__legal {
        display: block;
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
        line-height: 1.6;
        opacity: .85;
    }

    .site-info a {
        color: var(--mm-light-on-dark);
    }

        .site-info a:hover {
            color: var(--mm-chrome);
        }

/* ============================================================
   13. MOBILE STICKY CTA — fixed-bottom on phones
   Email (teal) + Consultation (sun gold). NO PHONE — Outshine
   contact policy is written first. A call CTA to the AI-answered
   intake line may be added only after that agent goes live.
   Markup: .mm-cta--email = mailto:chris@outshine.io,
   .mm-cta--consult = anchor to the intake form.
   ============================================================ */
.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-brand);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
        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: 10px;
        font-family: 'Public Sans', Arial, sans-serif;
        font-size: 15px;
        font-weight: 700;
        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--email {
        background: var(--mm-brand-2);
        color: #fff;
    }

        .mm-cta--email:hover, .mm-cta--email:focus, .mm-cta--email:active {
            background: var(--mm-brand-2-hover);
            color: #fff;
        }

    .mm-cta--consult {
        background: var(--mm-cta);
        color: var(--mm-cta-ink);
    }

        .mm-cta--consult:hover, .mm-cta--consult:focus, .mm-cta--consult:active {
            background: var(--mm-cta-hover);
            color: var(--mm-cta-ink);
        }
}

/* ============================================================
   14. UTILITY BAR — top hooked element
   Calm, factual: "Written first • Serving practices since 2008 •
   One honest number". No urgency theater — off-brand.
   ============================================================ */
.mm-util-bar {
    background: var(--mm-brand);
    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;
    color: rgba(255, 255, 255, 0.9);
}

    .mm-util-bar__item svg {
        opacity: 0.85;
    }

.mm-util-bar__item--accent {
    color: #fff;
    font-weight: 600;
}

.mm-util-bar__right {
    display: flex;
    gap: 16px;
}

.mm-util-bar a {
    color: inherit;
}

    .mm-util-bar a:hover {
        color: var(--mm-light-on-dark);
    }

@media (max-width: 720px) {
    .mm-util-bar .mm-hide-sm {
        display: none;
    }
}

/* ============================================================
   15. SECTION HELPERS
   ============================================================ */
.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: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-brand-2);
    margin: 0 0 16px;
}

    .mm-eyebrow::before {
        content: "";
        width: 32px;
        height: 2px;
        background: var(--mm-brand-2);
        flex-shrink: 0;
        margin-top: 0.55em;
    }

.mm-eyebrow--center {
    justify-content: center;
}

    .mm-eyebrow--center::after {
        content: "";
        width: 32px;
        height: 2px;
        background: var(--mm-brand-2);
        flex-shrink: 0;
        margin-top: 0.55em;
    }

/* Lede / large-paragraph styling for hero subtitles or intro
   paragraphs sitting just below an H1. Single definition (the §4
   duplicate was removed at 1.0.2-OM; this 19px value is the one
   that was winning the cascade). */
.mm-lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--mm-muted);
    font-weight: 400;
}

.mm-section-head {
    margin-bottom: 50px;
}

    .mm-section-head h2 {
        font-size: clamp(32px, 4.5vw, 52px);
        color: var(--mm-ink);
        max-width: 800px;
        margin: 0 0 16px;
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.08;
    }

    .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. HERO BAND (base, reusable)
   Deep petrol with corner glow, warm gold cast, edge vignette,
   and a scrim under the text column. Headline is white on the
   scrim; accent line is light gold. Primary CTA is the sun-gold
   conversion treatment with petrol text. Tune knobs: scrim
   alpha .45, glow alpha .42, vignette end #0C2C38.
   (CTA tokens live in §2; the duplicate :root block that sat
   here was removed at 1.0.2-OM.)
   ============================================================ */
.mm-hero {
    background-color: var(--mm-brand);
    background-image: radial-gradient(ellipse 165% 135% at 30% 12%, #1B586C 0%, #16495B 45%, #113A49 80%, #0C2C38 100%);
    background-repeat: no-repeat;
    color: var(--mm-chrome);
    position: relative;
    overflow: hidden;
    padding: 80px 0 100px;
}

    .mm-hero > .gb-grid-wrapper,
    .mm-hero > [class*="gb-grid-wrapper"],
    .mm-hero > .mm-section-inner {
        max-width: 1240px;
        margin-inline: auto;
        padding-inline: clamp(16px, 3vw, 48px);
    }

    /* one overlay stack: glow high in the corner (clear of the
       headline), faint gold cast, then the scrim that keeps the
       text column on a dark ground and fades before the form card */
    .mm-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 820px 520px at 6% -12%, rgba(116, 178, 196, 0.42) 0%, rgba(116, 178, 196, 0) 58%),
            radial-gradient(ellipse 520px 320px at 0% 0%, rgba(244, 175, 74, 0.12) 0%, rgba(244, 175, 74, 0) 55%),
            linear-gradient(90deg, rgba(8, 30, 38, 0.45) 0%, rgba(8, 30, 38, 0.38) 44%, rgba(8, 30, 38, 0) 62%);
        pointer-events: none;
    }

    /* stacked layouts: scrim becomes a full-width vertical wash */
    @media (max-width: 1024px) {
        .mm-hero::before {
            background:
                radial-gradient(ellipse 820px 520px at 6% -12%, rgba(116, 178, 196, 0.42) 0%, rgba(116, 178, 196, 0) 58%),
                linear-gradient(180deg, rgba(8, 30, 38, 0.42) 0%, rgba(8, 30, 38, 0.20) 100%);
        }
    }

    .mm-hero > *,
    .mm-hero .mm-hero__grid,
    .mm-hero > .wp-block-group__inner-container > * {
        position: relative;
        z-index: 2;
    }

    .mm-hero h1, .mm-hero h2, .mm-hero h3 {
        color: var(--mm-chrome);
    }

    .mm-hero h1 {
        text-shadow: 0 2px 28px rgba(6, 24, 30, 0.45);
    }

    .mm-hero p {
        color: rgba(251, 247, 240, 0.85);
    }

    .mm-hero h1.display {
        font-size: clamp(38px, 5.5vw, 72px);
        line-height: 1.06;
        margin: 0 0 24px;
        font-weight: 700;
        letter-spacing: -0.015em;
    }

    .mm-hero h1 .accent {
        color: var(--mm-light-on-dark);
        display: block;
    }

    html body .mm-hero .mm-accent-line {
        color: #F6CD8B;
    }

    .mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
        background-color: var(--mm-cta);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
        box-shadow: 0 8px 20px rgba(8, 30, 38, 0.4);
        color: var(--mm-cta-ink);
        border-color: var(--mm-cta);
    }

        .mm-hero .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
            background-color: var(--mm-cta-hover);
            background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
            color: var(--mm-cta-ink);
            border-color: var(--mm-cta-hover);
        }

    .mm-hero .is-style-outline .wp-block-button__link {
        background: transparent;
        border-color: var(--mm-chrome);
        border-width: 2px;
        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);
        }

/* consult-card badge tracks the CTA gold */
.mm-consult-card .mm-consult-card__badge {
    background-color: var(--mm-cta);
    color: var(--mm-cta-ink);
}

.mm-hero-trust {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 26px;
    margin-top: 8px;
    border-top: 1px solid rgba(251, 247, 240, 0.15);
}

.mm-hero-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(251, 247, 240, 0.85);
    font-weight: 500;
}

    .mm-hero-trust__item .stars {
        display: flex;
        gap: 1px;
        color: var(--mm-light-on-dark);
    }

    .mm-hero-trust__item strong {
        font-family: 'Space Grotesk', 'Public Sans', sans-serif;
        font-weight: 700;
        font-size: 21px;
        color: var(--mm-chrome);
        letter-spacing: -0.01em;
    }

    .mm-hero-trust__item svg {
        color: var(--mm-light-on-dark);
        flex-shrink: 0;
    }

.mm-hero-cta-row {
    margin: 8px 0 38px;
    gap: 14px;
}

@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;
        }
}

.mm-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

/* ============================================================
   17. CONSULT CARD (hero right column)
   White card sitting on the petrol hero. Written-first intake
   framing. Soft 16px radius (matches surface utility). Tone is
   composed — no tilted badge.
   ============================================================ */
.mm-consult-card {
    background: var(--mm-chrome);
    color: var(--mm-ink);
    padding: 36px;
    position: relative;
    box-shadow: 0 24px 60px rgba(15, 52, 61, 0.35);
    border-radius: 16px;
}

    .mm-consult-card h3 {
        color: var(--mm-brand);
        font-family: 'Public Sans', sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 1.2;
        margin: 0 0 8px;
        letter-spacing: -0.01em;
    }

    .mm-consult-card p {
        color: var(--mm-muted);
        font-size: 14.5px;
        margin: 0 0 22px;
    }

.mm-consult-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mm-brand-2);
    color: #fff;
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 18px;
}

.mm-consult-card p.mm-consult-card__badge {
    color: var(--mm-cta-ink);
}

/* ============================================================
   18. TRUST BAR (between hero and content)
   Dark petrol strip flush against the hero bottom. 4 short signals.
   ============================================================ */
.mm-trust-bar {
    background: var(--mm-brand-hover);
    color: var(--mm-chrome);
    border-top: 1px solid rgba(251, 247, 240, 0.08);
    padding: 0 clamp(16px, 3vw, 48px);
}

.mm-trust-bar__row {
    max-width: 1240px;
    margin-inline: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 18px 0;
    gap: 16px 28px;
}

.mm-trust-bar__pill {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(251, 247, 240, 0.9);
}

    .mm-trust-bar__pill svg {
        color: var(--mm-light-on-dark);
        flex-shrink: 0;
    }

/* ============================================================
   19. PROGRAM CARDS (homepage)
   Cool surface. Card grid for the three programs (Core,
   MatchMarketing™, BoostMarketing™) plus service tiles.
   Class names retained from the lineage (.mm-practice-*).
   ============================================================ */
.mm-practice-section {
    background: var(--mm-surface);
    padding: 90px 0;
}

.mm-practice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}

.mm-practice-card {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    padding: 28px 24px 24px;
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    color: var(--mm-ink);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

    .mm-practice-card:hover {
        transform: translateY(-4px);
        border-color: var(--mm-brand-2);
        box-shadow: 0 18px 40px rgba(20, 66, 79, 0.15);
        color: var(--mm-ink);
    }

.mm-practice-card__icon {
    width: 56px;
    height: 56px;
    background: var(--mm-brand);
    color: #fff;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.mm-practice-card h3 {
    font-family: 'Public Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mm-brand);
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.mm-practice-card p {
    font-size: 14.5px;
    color: var(--mm-muted);
    margin: 0 0 18px;
    flex-grow: 1;
}

.mm-practice-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-brand-2);
    transition: gap 0.2s, color 0.2s;
}

.mm-practice-card:hover .mm-practice-card__cta {
    gap: 10px;
    color: var(--mm-brand);
}

.mm-practice-mini-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.mm-practice-mini {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    transition: all 0.2s;
    color: var(--mm-ink);
    text-decoration: none;
    display: block;
}

    .mm-practice-mini:hover {
        border-color: var(--mm-brand-2);
        background: var(--mm-brand);
        color: #fff;
    }

.mm-practice-mini__ico {
    width: 32px;
    height: 32px;
    margin: 0 auto 10px;
    color: var(--mm-brand);
    transition: color 0.2s;
    display: block;
}

.mm-practice-mini:hover .mm-practice-mini__ico {
    color: #fff;
}

.mm-practice-mini__nm {
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    display: block;
    letter-spacing: 0.01em;
}

.mm-practice-seeall {
    text-align: center;
    margin-top: 36px;
}

@media (max-width: 1000px) {
    .mm-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mm-practice-mini-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 540px) {
    .mm-practice-grid {
        grid-template-columns: 1fr;
    }

    /* Single column: release the desktop equal-height minimum
       so cards hug their content (mobile pass 2026-08-22). */
    .mm-practice-card {
        min-height: 0;
    }

    .mm-practice-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mm-practice-section {
        padding: 60px 0;
    }
}

/* ============================================================
   20. PROMISE PILLARS (homepage)
   Dark petrol band, 4 stats. Since 2008 / One Honest Number /
   Founder On Every Account / The Whole System.
   ============================================================ */
.mm-promise {
    background: var(--mm-brand);
    color: var(--mm-chrome);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

    .mm-promise::before {
        content: "";
        position: absolute;
        top: 0;
        right: -200px;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(81, 159, 181, 0.45), transparent 60%);
        pointer-events: none;
    }

    .mm-promise > .mm-section-inner {
        position: relative;
        z-index: 1;
    }

    .mm-promise .mm-section-head h2 {
        color: var(--mm-chrome);
    }

    .mm-promise .mm-section-head .mm-sub {
        color: rgba(251, 247, 240, 0.8);
    }

.mm-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.mm-pillar {
    border-left: 3px solid var(--mm-light-on-dark);
    padding: 6px 0 6px 22px;
}

.mm-pillar__num {
    font-family: 'Space Grotesk', 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 48px;
    color: var(--mm-light-on-dark);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    display: block;
}

.mm-pillar h4 {
    font-family: 'Public Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mm-chrome);
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.mm-pillar p {
    color: rgba(251, 247, 240, 0.75);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .mm-pillars {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 24px;
    }
}

@media (max-width: 540px) {
    .mm-pillars {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .mm-promise {
        padding: 60px 0;
    }
}

/* ============================================================
   21. ISSUES TRACK (homepage)
   Alt cool surface. Header + issue cards for practice pain points
   (few leads, no reporting clarity, vendor sprawl, slow site, etc.).
   No urgency badges — tone is calm and informative.
   ============================================================ */
.mm-issues {
    background: var(--mm-surface-2);
    padding: 90px 0;
}

.mm-issues-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 50px;
}

    .mm-issues-head h2 {
        font-family: 'Space Grotesk', 'Public Sans', sans-serif;
        font-weight: 700;
        font-size: clamp(32px, 4.5vw, 52px);
        line-height: 1.1;
        letter-spacing: -0.015em;
        color: var(--mm-ink);
        margin: 0;
    }

.mm-issues-head__copy p {
    color: var(--mm-ink);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.mm-issues-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.mm-issue-card {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    border-radius: 14px;
    padding: 24px 20px;
    transition: all 0.25s;
    color: var(--mm-ink);
    text-decoration: none;
    display: block;
}

    .mm-issue-card:hover {
        background: var(--mm-brand);
        border-color: var(--mm-brand);
        transform: translateY(-3px);
        color: var(--mm-chrome);
    }

.mm-issue-card__ico {
    width: 44px;
    height: 44px;
    color: var(--mm-brand);
    margin-bottom: 16px;
    transition: color 0.2s;
    display: block;
}

.mm-issue-card:hover .mm-issue-card__ico {
    color: var(--mm-light-on-dark);
}

.mm-issue-card h4 {
    font-family: 'Public Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mm-brand);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    transition: color 0.2s;
}

.mm-issue-card:hover h4 {
    color: var(--mm-chrome);
}

.mm-issue-card p {
    font-size: 13px;
    color: var(--mm-muted);
    margin: 0;
    line-height: 1.5;
    transition: color 0.2s;
}

.mm-issue-card:hover p {
    color: rgba(251, 247, 240, 0.78);
}

.mm-issues-cta {
    margin-top: 40px;
    background: var(--mm-brand);
    color: var(--mm-chrome);
    border-radius: 16px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
}

.mm-issues-cta__left strong {
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--mm-chrome);
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.mm-issues-cta__left span {
    color: rgba(251, 247, 240, 0.75);
    font-size: 14px;
}

@media (max-width: 1000px) {
    .mm-issues-head {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
    }

    .mm-issues-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .mm-issues-cta {
        padding: 24px;
    }
}

/* ============================================================
   22. HOW IT WORKS (homepage)
   Cool surface. 3 numbered steps: Write → Review → Build.
   Written-first framing on step 1.
   ============================================================ */
.mm-how-it-works {
    background: var(--mm-surface);
    padding: 90px 0;
}

.mm-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.mm-step {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    padding: 36px 32px;
    position: relative;
}

.mm-step__num {
    position: absolute;
    top: -22px;
    left: 32px;
    background: var(--mm-brand);
    color: #fff;
    font-family: 'Public Sans', sans-serif;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 4px solid var(--mm-surface);
}

.mm-step h4 {
    font-family: 'Public Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mm-brand);
    margin: 22px 0 12px;
    letter-spacing: -0.01em;
}

.mm-step p {
    color: var(--mm-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.mm-step__duration {
    margin-top: 18px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-brand-2);
    display: block;
}

@media (max-width: 900px) {
    .mm-steps {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}

@media (max-width: 540px) {
    .mm-how-it-works {
        padding: 60px 0;
    }
}

/* ============================================================
   23. RESULTS (homepage)
   Deep petrol band, factual acquisition results strip. Compliance:
   results are factual references only, no guarantees. Section sub
   carries "every practice is different" framing.
   ============================================================ */
.mm-results {
    background: var(--mm-brand);
    background-image: radial-gradient(ellipse at top right, rgba(81, 159, 181, 0.35), transparent 50%), linear-gradient(135deg, var(--mm-brand), var(--mm-brand-hover));
    color: var(--mm-chrome);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

    .mm-results > .mm-section-inner {
        position: relative;
        z-index: 1;
    }

    .mm-results .mm-section-head h2 {
        color: var(--mm-chrome);
    }

    .mm-results .mm-section-head .mm-sub {
        color: rgba(251, 247, 240, 0.8);
    }

.mm-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.mm-result {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    transition: all 0.25s;
    color: var(--mm-chrome);
    display: flex;
    flex-direction: column;
}

    .mm-result:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: var(--mm-light-on-dark);
        transform: translateY(-4px);
    }

.mm-result__amount {
    font-family: 'Space Grotesk', 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: var(--mm-light-on-dark);
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.mm-result__type {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(251, 247, 240, 0.75);
    margin: 0 0 10px;
}

.mm-result p {
    font-size: 14.5px;
    color: rgba(251, 247, 240, 0.9);
    line-height: 1.55;
    margin: 0;
}

.mm-results-fineprint {
    margin: 36px 0 0;
    font-size: 13.5px;
    color: rgba(251, 247, 240, 0.65);
    text-align: center;
    line-height: 1.6;
    font-style: italic;
}

@media (max-width: 900px) {
    .mm-results-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

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

.mm-results .mm-section-inner > p:not(.mm-results-fineprint),
.mm-results .wp-block-group__inner-container > p:not(.mm-results-fineprint) {
    color: rgba(251, 247, 240, 0.85);
    max-width: 68ch;
}

/* ============================================================
   24. REVIEWS (homepage)
   Cool surface. Score header (rating + total + Google) + 3 review cards.
   ============================================================ */
.mm-reviews {
    background: var(--mm-surface);
    padding: 90px 0;
}

.mm-reviews-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--mm-line);
    margin-bottom: 44px;
}

.mm-reviews-score {
    display: flex;
    align-items: center;
    gap: 22px;
}

.mm-reviews-score__big {
    font-family: 'Space Grotesk', 'Public Sans', sans-serif;
    font-weight: 700;
    font-size: 64px;
    color: var(--mm-brand);
    line-height: 1;
    letter-spacing: -0.02em;
}

.mm-reviews-score__stars {
    display: flex;
    gap: 2px;
    color: var(--mm-brand-2);
    margin-bottom: 4px;
}

.mm-reviews-score__meta {
    font-size: 14px;
    color: var(--mm-muted);
}

    .mm-reviews-score__meta strong {
        color: var(--mm-ink);
    }

.mm-reviews-google {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--mm-muted);
    font-weight: 600;
}

.mm-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mm-review {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    padding: 26px 24px;
}

.mm-review__stars {
    color: var(--mm-brand-2);
    display: flex;
    gap: 1px;
    margin-bottom: 14px;
}

.mm-review__text {
    font-size: 15px;
    color: var(--mm-ink);
    line-height: 1.6;
    margin: 0 0 16px;
}

.mm-review__author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--mm-line);
}

.mm-review__ava {
    width: 38px;
    height: 38px;
    background: var(--mm-brand);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.mm-review__nm {
    font-weight: 700;
    font-size: 14px;
    color: var(--mm-ink);
    display: block;
}

.mm-review__src {
    font-size: 12px;
    color: var(--mm-muted);
    display: block;
}

@media (max-width: 900px) {
    .mm-reviews-grid {
        grid-template-columns: 1fr;
    }

    .mm-reviews-score__big {
        font-size: 48px;
    }
}

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

/* ============================================================
   25. SERVICE AREA (homepage)
   Dark petrol band: copy left + map right. Jupiter FL primary chip
   (footer-tier geography only), national framing in copy.
   ============================================================ */
.mm-area {
    background: var(--mm-brand);
    color: var(--mm-surface);
    padding: clamp(48px, 8vw, 96px) 0;
}

    .mm-area .mm-section-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 clamp(20px, 4vw, 48px);
    }

    .mm-area .display,
    .mm-area h2 {
        color: var(--mm-surface);
    }

    .mm-area .mm-sub {
        color: rgba(251, 247, 240, 0.8);
        margin: 0 0 24px;
    }

.mm-area-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mm-area-right {
    min-height: 420px;
}

.mm-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(251, 247, 240, 0.15);
}

    .mm-map iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

@media (max-width: 768px) {
    .mm-area-right, .mm-map {
        min-height: 320px;
    }
}

.mm-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.mm-city-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(251, 247, 240, 0.25);
    background: transparent;
    color: var(--mm-surface);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.mm-city-chip--primary {
    background: var(--mm-brand-2);
    color: #fff;
    border-color: var(--mm-brand-2);
    font-weight: 600;
}

/* ============================================================
   26. FAQ (homepage)
   Deeper cool surface. Native details/summary accordion.
   Mirrors high-intent natural-language queries.
   ============================================================ */
.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-family: 'Space Grotesk', 'Public Sans', sans-serif;
        font-size: 19px;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: var(--mm-ink);
        line-height: 1.4;
        position: relative;
    }

        .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: 'Space Grotesk', 'Public Sans', sans-serif;
            font-weight: 400;
            font-size: 28px;
            line-height: 1;
            color: var(--mm-brand);
        }

    .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;
    }
}

/* ============================================================
   27. FINAL CTA — reusable closer band
   Petrol background, paired CTAs (email + form). Used at the bottom
   of conversion pages. "You work with the founder" reinforced through
   copy in markup, not styling.
   ============================================================ */
.mm-final-cta {
    background: var(--mm-brand);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

    .mm-final-cta .mm-section-inner {
        padding-block: 0;
    }

    .mm-final-cta h2 {
        font-family: 'Space Grotesk', 'Public Sans', sans-serif;
        font-weight: 700;
        font-size: clamp(32px, 5vw, 56px);
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: #fff;
        margin: 0 0 20px;
    }

    .mm-final-cta p {
        font-size: 19px;
        line-height: 1.55;
        max-width: 620px;
        margin: 0 auto 32px;
        color: rgba(255, 255, 255, 0.9);
    }

.mm-final-cta__ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.mm-final-cta .button,
.mm-final-cta .wp-block-button__link {
    background: var(--mm-cta);
    color: var(--mm-cta-ink);
    border-color: var(--mm-cta);
}

    .mm-final-cta .button:hover,
    .mm-final-cta .wp-block-button__link:hover {
        background: var(--mm-cta-hover);
        color: var(--mm-cta-ink);
        border-color: var(--mm-cta-hover);
    }

.mm-final-cta .is-style-outline .wp-block-button__link {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

    .mm-final-cta .is-style-outline .wp-block-button__link:hover {
        background: #fff;
        color: var(--mm-brand);
        border-color: #fff;
    }

.mm-final-cta .button.button-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

    .mm-final-cta .button.button-outline:hover {
        background: #fff;
        color: var(--mm-brand);
    }

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

/* ============================================================
   28. TRUST STRIP — reusable 4-icon component (light bg)
   For interior pages (Founder, program hubs). Different pattern than
   the homepage .mm-trust-bar.
   ============================================================ */
.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);
        margin-bottom: 12px;
        flex-shrink: 0;
    }

    .mm-trust-item h4 {
        font-family: 'Public Sans', sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        color: var(--mm-brand);
        margin: 0 0 6px;
        letter-spacing: -0.01em;
    }

    .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;
    }
}

/* ============================================================
   29. (retired 1.0.2-OM)
   The header restyle that lived here is folded into §6 (header
   band + lockup) and §7 (nav, CTA pill, dropdowns). The absolute
   .mm-header-cta slot and phone-pill anatomy were removed with
   the markup; a fresh slot gets built when the AI-answered
   intake number goes live.
   ============================================================ */

/* ============================================================
   30. FORMINATOR FORMS (universal)
   Plugin uses inline + heavy specificity; !important is unavoidable.
   ============================================================ */
.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.06em !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: 10px !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: #fff !important;
        border: 0 !important;
        border-radius: 10px !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;
        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) !important;
        }

.mm-form-success {
    background: var(--mm-surface);
    border-left: 4px solid var(--mm-brand-3);
    border-radius: 10px;
    padding: 18px 22px;
}

    .mm-form-success strong {
        display: block;
        font-family: 'Public Sans', sans-serif;
        font-weight: 700;
        font-size: 20px;
        color: var(--mm-brand);
        margin-bottom: 6px;
        letter-spacing: -0.01em;
    }

    .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;
    }

/* §30 addendum — consent links inside the consult card (override §36 dark-band link color; wins on specificity) */
.mm-consult-card .forminator-consent__label a {
    color: var(--mm-brand-2);
    text-decoration: underline;
}

/* ============================================================
   31. (retired 1.0.2-OM)
   The 4-column custom footer that lived here is superseded by the
   shipped single-band footer, consolidated in §12.
   ============================================================ */

/* ============================================================
   32. HORIZON DIVIDER — First Light signature rule (Outshine tint)
   A thin gradient rule that fades in from the left, peaks in
   teal, and fades out. Use between major page sections instead
   of a plain <hr>. Markup:
     <div class="mm-horizon" aria-hidden="true"></div>
   On petrol bands use the --dark variant. A --gold variant is
   available for the rare sunrise moment.
   ============================================================ */
.mm-horizon {
    height: 2px;
    width: min(320px, 60%);
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--mm-brand-2) 50%, transparent);
    border: 0;
}

.mm-horizon--left {
    margin: 0;
    background: linear-gradient(90deg, var(--mm-brand-2), transparent);
}

.mm-horizon--dark {
    background: linear-gradient(90deg, transparent, var(--mm-light-on-dark) 50%, transparent);
    opacity: 0.7;
}

.mm-horizon--gold {
    background: linear-gradient(90deg, transparent, var(--mm-cta) 50%, transparent);
}

/* Native separator block picks up the same treatment so editors
   don't have to remember the custom class. */
hr.wp-block-separator {
    height: 2px;
    width: min(320px, 60%);
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, var(--mm-brand-2) 50%, transparent);
    border: 0;
    opacity: 1;
}

/* ============================================================
   33. ACCENT LINE — Space Grotesk 500 (First Light register,
   Outshine cut: no italic master exists for Space Grotesk, so
   the accent line is upright, weight 500, and carries the beat
   through color instead of slant)
   A short line that sits directly under an H1 or section H2
   ("Rankings are not revenue. Clicks are not clients."). Pattern:
   separate <p> immediately after the heading, never inline in
   the heading itself.
     <p class="mm-accent-line">…</p>
   Actionable teal on light backgrounds; light gold on petrol
   bands (scoped automatically inside the known dark sections).
   ============================================================ */
.mm-accent-line {
    font-family: 'Space Grotesk', 'Public Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--mm-brand-2);
    margin: 0 0 20px;
}

.mm-hero .mm-accent-line,
.mm-promise .mm-accent-line,
.mm-results .mm-accent-line,
.mm-area .mm-accent-line,
.mm-final-cta .mm-accent-line,
.mm-surface-dark .mm-accent-line {
    color: #F6CD8B;
}

/* ============================================================
   34. CARDS — image-top .mm-card contract (First Light, Outshine tint)
   General-purpose linked card with an image cap: program grids,
   who-we-serve cards, hub tiles. Anatomy:
     <a class="mm-card" href="…">
       <div class="mm-card__media"><img …></div>
       <div class="mm-card__body">
         <div class="mm-card__rule" aria-hidden="true"></div>
         <h3>MatchMarketing™</h3>
         <p>Short supporting line.</p>
         <span class="mm-card__cta">Learn more</span>
       </div>
     </a>
   Wrap a set in .mm-card-grid (3-up desktop, 2-up tablet,
   1-up mobile). Cards are equal height via flex.
   ============================================================ */
.mm-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mm-card {
    background: var(--mm-chrome);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--mm-ink);
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

    .mm-card:hover {
        transform: translateY(-4px);
        border-color: var(--mm-brand-2);
        box-shadow: 0 18px 40px rgba(20, 66, 79, 0.15);
        color: var(--mm-ink);
    }

.mm-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--mm-surface-2);
    overflow: hidden;
}

    .mm-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

.mm-card:hover .mm-card__media img {
    transform: scale(1.04);
}

/* Petrol wash anchors the image to the brand and keeps mixed
   photography reading as one family. */
.mm-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 66, 79, 0.08), rgba(20, 66, 79, 0.28));
    pointer-events: none;
}

.mm-card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mm-card__rule {
    width: 36px;
    height: 3px;
    background: var(--mm-brand-2);
    border-radius: var(--mm-radius-pill);
    margin: 0 0 14px;
}

.mm-card__body h3 {
    font-family: 'Public Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--mm-brand);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}

.mm-card__body p {
    font-size: 14.5px;
    color: var(--mm-muted);
    line-height: 1.55;
    margin: 0 0 16px;
    flex-grow: 1;
}

.mm-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mm-brand-2);
    transition: gap 0.2s, color 0.2s;
}

.mm-card:hover .mm-card__cta {
    gap: 10px;
    color: var(--mm-brand);
}

@media (max-width: 1000px) {
    .mm-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .mm-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   35. FOUNDER BAND — .mm-atty anatomy (homepage/Founder page)
   Two-column band: founder photo card left, direct-access copy
   right. Reinforces "you work with the founder" — the
   anti-account-manager pillar. Class names retained from the
   lineage. Anatomy:
     <div class="mm-atty"> (GB container / columns)
       <figure class="mm-atty-photo">
         <img …>
         <figcaption>Chris Grau · Founder</figcaption>
       </figure>
       <div class="mm-atty-text">
         <p class="mm-atty-lede">…</p>
         <ul class="mm-atty-list"><li>…</li></ul>
       </div>
     </div>
   ============================================================ */
.mm-atty-photo {
    margin: 0;
    position: relative;
}

    .mm-atty-photo img {
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        display: block;
        border-radius: 14px;
        border: 1px solid var(--mm-line);
    }

    .mm-atty-photo figcaption {
        position: absolute;
        left: 16px;
        bottom: 16px;
        background: var(--mm-brand);
        color: var(--mm-chrome);
        font-family: 'Public Sans', sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.3;
        padding: 10px 16px;
        border-radius: var(--mm-radius);
        box-shadow: 0 8px 24px rgba(15, 52, 61, 0.25);
    }

.mm-atty-lede {
    font-family: 'Space Grotesk', 'Public Sans', sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--mm-ink);
    margin: 0 0 20px;
}

.mm-atty-text p {
    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 26px;
        font-size: 16px;
        line-height: 1.55;
        color: var(--mm-ink);
    }

        ul.mm-atty-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.95em;
            width: 14px;
            height: 3px;
            background: var(--mm-brand-2);
            border-radius: var(--mm-radius-pill);
        }

.mm-atty__grid {
    display: grid;
    grid-template-columns: 0.42fr 0.58fr;
    gap: 56px;
    align-items: center;
}

@media (max-width: 1024px) {
    .mm-hero__grid,
    .mm-atty__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ============================================================
   36. DARK-BAND LINK COLOR
   Links inside body text on petrol bands: default teal links
   vanish against petrol. Recolor to light teal with a visible
   underline; hover lifts to white. Scoped to the known dark
   sections so light-band links keep the Section 5 default.
   (Footer links have their own treatment in §12.)
   ============================================================ */
.mm-hero p a,
.mm-promise p a,
.mm-results p a,
.mm-area p a,
.mm-final-cta p a,
.mm-issues-cta a,
.mm-surface-dark p a {
    color: var(--mm-light-on-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

    .mm-hero p a:hover,
    .mm-promise p a:hover,
    .mm-results p a:hover,
    .mm-area p a:hover,
    .mm-final-cta p a:hover,
    .mm-issues-cta a:hover,
    .mm-surface-dark p a:hover {
        color: var(--mm-chrome);
    }