@charset "UTF-8";
/* ==========================================================================
   MoveMate Australia — theme stylesheet

   Self-contained: no Bootstrap, no icon font, no vendor CSS. The previous theme
   loaded eleven stylesheets from a purchased template; this is the only one.

   Order: tokens → reset → grid shim → utilities → elements → chrome → sections.

   The grid shim reproduces the small Bootstrap subset the page templates already
   use (container/row/col-*/g-*, plus a handful of spacing and flex helpers).
   Rewriting thirteen templates to a new grid would have risked their markup for
   no visible gain, so the class names stay and the implementation is ours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   2. Tokens
   The four brand colours are overridden inline by the layout from the settings
   table, so changing a colour in the admin restyles the site. Everything else
   here derives from them.
   -------------------------------------------------------------------------- */
:root {
    --mm-blue: #045CB8;
    --mm-blue-alt: #046BC9;
    --mm-blue-light: #69B2FD;
    --mm-orange: #FF9305;
    --mm-ink: #0A2540;
    --mm-navy: #0E1B2C;

    --mm-orange-dark: #E67F00;
    --mm-blue-dark: #034A94;

    --mm-body: #5B6B82;
    --mm-muted: #7C8AA0;
    --mm-line: #E4EAF3;
    --mm-tint: #EFF5FD;
    --mm-tint-deep: #E2EDFB;
    --mm-surface: #FFFFFF;
    --mm-canvas: #F7FAFE;

    --mm-radius: 14px;
    --mm-radius-sm: 10px;
    --mm-radius-lg: 20px;

    --mm-shadow-sm: 0 1px 2px rgba(10, 37, 64, .04), 0 4px 14px rgba(10, 37, 64, .05);
    --mm-shadow: 0 2px 6px rgba(10, 37, 64, .05), 0 14px 40px rgba(10, 37, 64, .09);
    --mm-shadow-lg: 0 8px 20px rgba(10, 37, 64, .08), 0 28px 70px rgba(10, 37, 64, .16);

    --mm-container: 1200px;
    --mm-gutter: 20px;
    /**
     * Vertical rhythm for every band. Applied as padding top AND bottom, so the visible gap
     * between two adjacent sections is twice this — at the old 88px that was 176px of empty
     * space, and around a shallow band like the stat bar it read as a hole in the page.
     * 64px keeps the sections distinct while halving the dead space.
     */
    --mm-section-y: 64px;

    --mm-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mm-header-h: 84px;
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
    margin: 0;
    font-family: var(--mm-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--mm-body);
    background: var(--mm-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    font-weight: 700;
    line-height: 1.22;
    color: var(--mm-ink);
    letter-spacing: -.015em;
}
h1 { font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }
h6 { font-size: .92rem; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--mm-blue); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--mm-orange); }

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.15rem; }
figure { margin: 0; }
strong, b { font-weight: 600; color: var(--mm-ink); }
small { font-size: .82em; }
hr { border: 0; border-top: 1px solid var(--mm-line); margin: 2rem 0; }

:focus-visible { outline: 3px solid var(--mm-blue-light); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--mm-blue); color: #fff; }

.mm-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mm-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--mm-blue); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.mm-skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. Grid shim  (Bootstrap-compatible subset)
   -------------------------------------------------------------------------- */
.container, .mm-container {
    width: 100%;
    max-width: var(--mm-container);
    margin-inline: auto;
    padding-inline: var(--mm-gutter);
}
.container-fluid { width: 100%; padding-inline: var(--mm-gutter); }
.container-fluid.p-0 { padding-inline: 0; }

.row {
    --mm-gx: 1.5rem; --mm-gy: 0;
    display: flex; flex-wrap: wrap;
    margin-top: calc(-1 * var(--mm-gy));
    margin-inline: calc(-.5 * var(--mm-gx));
}
.row > * {
    flex-shrink: 0; width: 100%; max-width: 100%;
    padding-inline: calc(var(--mm-gx) * .5);
    margin-top: var(--mm-gy);
}
.g-0 { --mm-gx: 0; --mm-gy: 0; }
.g-2 { --mm-gx: .5rem;  --mm-gy: .5rem; }
.g-3 { --mm-gx: 1rem;   --mm-gy: 1rem; }
.g-4 { --mm-gx: 1.5rem; --mm-gy: 1.5rem; }
.g-5 { --mm-gx: 3rem;   --mm-gy: 3rem; }

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-12 { width: 100%; }
.col-6  { width: 50%; }

@media (min-width: 576px) {
    .col-sm-4 { width: 33.3333%; } .col-sm-6 { width: 50%; } .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) {
    .col-md-3 { width: 25%; } .col-md-4 { width: 33.3333%; } .col-md-5 { width: 41.6667%; }
    .col-md-6 { width: 50%; } .col-md-7 { width: 58.3333%; } .col-md-8 { width: 66.6667%; }
    .col-md-12 { width: 100%; }
    .text-md-end { text-align: right; }
}
@media (min-width: 992px) {
    .col-lg-2 { width: 16.6667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; }
    .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; }
    .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.3333%; }
    .col-lg-12 { width: 100%; }
    .text-lg-end { text-align: right; }
    .ps-lg-5 { padding-left: 3rem; }
    .mt-lg-0 { margin-top: 0; }
}
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-start { align-items: flex-start; }

/* --------------------------------------------------------------------------
   5. Utilities
   -------------------------------------------------------------------------- */
.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }
.d-inline-block { display: inline-block; }
.flex-wrap { wrap: wrap; flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.position-relative { position: relative; }
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.text-theme { color: var(--mm-orange) !important; }
.w-100 { width: 100%; }
.img-fluid { max-width: 100%; height: auto; }
.rounded-4 { border-radius: var(--mm-radius-lg); }
.opacity-75 { opacity: .75; }
.fs-4 { font-size: 1.3rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-1 { margin-top: .25rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mx-4 { margin-inline: 1.5rem; }
.ms-3 { margin-left: 1rem; }
.me-1 { margin-right: .25rem; }
.gap-2 { gap: .5rem; } .gap-3 { gap: 1rem; } .gap-4 { gap: 1.5rem; }
.list-inline { list-style: none; padding: 0; margin: 0; }
.list-inline-item { display: inline-block; }
.list-unstyled { list-style: none; padding: 0; }
@media (max-width: 991.98px) { .d-lg-none { display: block; } }
@media (min-width: 992px) { .d-lg-none { display: none !important; } }

/* --------------------------------------------------------------------------
   6. Buttons
   .themeht-btn / primary-btn / secondary-btn are kept as aliases because the
   inner page templates still emit them.
   -------------------------------------------------------------------------- */
.mm-btn, .themeht-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 26px;
    font-family: inherit; font-size: .93rem; font-weight: 600; line-height: 1;
    border: 2px solid transparent; border-radius: 9px;
    cursor: pointer; text-align: center; white-space: nowrap;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.mm-btn:hover, .themeht-btn:hover { transform: translateY(-2px); }
.mm-btn svg, .themeht-btn svg { flex-shrink: 0; }

.mm-btn--accent, .themeht-btn.primary-btn {
    background: var(--mm-orange); border-color: var(--mm-orange); color: #fff;
    box-shadow: 0 8px 22px rgba(255, 147, 5, .32);
}
.mm-btn--accent:hover, .themeht-btn.primary-btn:hover {
    background: var(--mm-orange-dark); border-color: var(--mm-orange-dark); color: #fff;
    box-shadow: 0 12px 28px rgba(255, 147, 5, .42);
}
.mm-btn--primary {
    background: var(--mm-blue); border-color: var(--mm-blue); color: #fff;
    box-shadow: 0 8px 22px rgba(4, 92, 184, .28);
}
.mm-btn--primary:hover { background: var(--mm-blue-dark); border-color: var(--mm-blue-dark); color: #fff; }

.mm-btn--ghost, .themeht-btn.secondary-btn {
    background: #fff; border-color: var(--mm-line); color: var(--mm-ink);
}
.mm-btn--ghost:hover, .themeht-btn.secondary-btn:hover {
    border-color: var(--mm-blue); color: var(--mm-blue); background: #fff;
}
.mm-btn--on-dark {
    background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff;
}
.mm-btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--mm-ink); }

.mm-btn--lg { padding: 16px 30px; font-size: 1rem; }
.mm-btn--sm { padding: 10px 18px; font-size: .84rem; }
.mm-btn--block, .themeht-btn.w-100 { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   7. Section scaffolding + section title
   -------------------------------------------------------------------------- */
.mm-section, .themeht-section { padding: var(--mm-section-y) 0; }
.mm-section--tight { padding: calc(var(--mm-section-y) * .66) 0; }
/* Introductory copy sitting directly above another section: its bottom padding
   would stack on that sections top padding and open a large empty gap. */
.mm-section--flush-bottom { padding-bottom: 0; }
/* Body copy that should run the full container width rather than the reading
   measure the location pages use. */
.mm-prose--wide { max-width: none; }
.mm-section--tint, .themeht-section.light-bg { background: var(--mm-tint); }
.mm-section--canvas { background: var(--mm-canvas); }
.mm-section--dark, .themeht-section.dark-bg { background: var(--mm-navy); color: rgba(255, 255, 255, .76); }
.mm-section--dark h1, .mm-section--dark h2, .mm-section--dark h3,
.mm-section--dark h4, .mm-section--dark h5, .mm-section--dark h6,
.themeht-section.dark-bg h1, .themeht-section.dark-bg h2, .themeht-section.dark-bg h3,
.themeht-section.dark-bg h4, .themeht-section.dark-bg h5 { color: #fff; }

.mm-eyebrow {
    display: inline-block;
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--mm-blue); margin-bottom: 12px;
}
.mm-section--dark .mm-eyebrow, .mm-eyebrow--light { color: var(--mm-blue-light); }

.mm-title { position: relative; margin-bottom: 14px; }
/* The blueprint underscores every section heading with a short orange rule. */
.mm-title::after {
    content: ''; display: block; width: 54px; height: 3px; border-radius: 3px;
    background: var(--mm-orange); margin-top: 16px;
}
.mm-section-head--center .mm-title::after { margin-inline: auto; }
.mm-section-head--no-rule .mm-title::after { display: none; }
.mm-section-head--no-rule .mm-title { margin-bottom: 10px; }
.mm-section-head--center { text-align: center; max-width: 720px; margin-inline: auto; }
.mm-lead { font-size: 1.02rem; color: var(--mm-body); margin: 0; }
.mm-section--dark .mm-lead { color: rgba(255, 255, 255, .72); }
.mm-section-head { margin-bottom: 46px; }
.mm-muted { color: var(--mm-muted); }

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.mm-header {
    position: sticky; top: 0; z-index: 200;
    background: #fff;
    border-bottom: 1px solid var(--mm-line);
    transition: box-shadow .2s ease;
}
.mm-header.is-stuck { box-shadow: 0 6px 24px rgba(10, 37, 64, .09); }
.mm-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: var(--mm-header-h);
}
.mm-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.mm-logo img { height: 46px; width: auto; max-width: 200px; object-fit: contain; }

/* The blueprint centres the navigation between the logo and the CTA. */
.mm-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; }
.mm-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mm-nav > ul > li { position: relative; }
.mm-nav > ul > li > a {
    display: flex; align-items: center; gap: 5px;
    padding: 12px 14px;
    font-size: .93rem; font-weight: 500; color: var(--mm-ink);
    border-radius: 8px;
}
.mm-nav > ul > li > a:hover { color: var(--mm-blue); background: var(--mm-tint); }
.mm-nav > ul > li.is-current > a { color: var(--mm-blue); font-weight: 600; }
/* The active item gets a short underline rather than a filled pill, matching the blueprint. */
.mm-nav > ul > li.is-current > a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px;
    height: 2px; border-radius: 2px; background: var(--mm-blue);
}
.mm-nav__caret { transition: transform .18s ease; }
.mm-nav li:hover > .mm-nav__caret, .mm-nav li:hover .mm-nav__caret { transform: rotate(180deg); }

.mm-nav .sub-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    display: block; min-width: 240px; padding: 8px;
    background: #fff; border: 1px solid var(--mm-line); border-radius: 12px;
    box-shadow: var(--mm-shadow);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.mm-nav li:hover > .sub-menu, .mm-nav li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mm-nav .sub-menu li { width: 100%; }
.mm-nav .sub-menu a {
    display: block; padding: 10px 14px; border-radius: 8px;
    font-size: .89rem; color: var(--mm-ink);
}
.mm-nav .sub-menu a:hover { background: var(--mm-tint); color: var(--mm-blue); }

.mm-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mm-header__call { display: flex; align-items: center; gap: 10px; color: var(--mm-ink); }
.mm-header__call-icon {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--mm-tint); color: var(--mm-blue); flex-shrink: 0;
}
.mm-header__call span { display: block; font-size: .72rem; color: var(--mm-muted); line-height: 1.3; }
.mm-header__call strong { font-size: .92rem; font-weight: 600; }

.mm-burger {
    display: none; width: 44px; height: 44px; border: 1px solid var(--mm-line);
    background: #fff; border-radius: 10px; color: var(--mm-ink); cursor: pointer;
    place-items: center;
}

/* Mobile drawer */
.mm-drawer-backdrop {
    position: fixed; inset: 0; z-index: 300; background: rgba(10, 37, 64, .5);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.mm-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.mm-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 310;
    width: min(360px, 88vw); background: #fff; padding: 20px;
    overflow-y: auto; transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    display: flex; flex-direction: column; gap: 6px;
}
.mm-drawer.is-open { transform: translateX(0); }
.mm-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mm-drawer__close {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--mm-line);
    background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--mm-ink);
}
.mm-drawer ul { list-style: none; margin: 0; padding: 0; }
.mm-drawer a { display: block; padding: 12px 14px; border-radius: 9px; color: var(--mm-ink); font-weight: 500; }
.mm-drawer a:hover { background: var(--mm-tint); color: var(--mm-blue); }
/**
 * Drawer sub-menus are collapsed until their disclosure button opens them.
 *
 * Vertical rhythm is padding, never margin: max-height clips padding (box-sizing is
 * border-box site-wide) but margin always sits outside the clip, so a margin here would
 * leave a stranded gap under a closed section. The open height is set inline by theme.js
 * from the measured scrollHeight.
 */
.mm-drawer .has-children > .sub-menu {
    margin: 0 0 0 14px;
    padding: 2px 0 6px 12px;
    border-left: 2px solid var(--mm-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
}
.mm-drawer .sub-menu a { font-size: .9rem; color: var(--mm-body); padding: 9px 12px; }

/* A grouping label with no destination: the whole row is the disclosure button. */
.mm-drawer__parent {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 14px;
    border: 0; border-radius: 9px; background: none;
    font: inherit; font-weight: 500; color: var(--mm-ink);
    text-align: left; cursor: pointer;
}
/* A parent that is also a real page: the label navigates, the caret alone expands. */
.mm-drawer__row { display: flex; align-items: center; gap: 2px; }
.mm-drawer__row > a { flex: 1 1 auto; min-width: 0; }
.mm-drawer__toggle {
    flex: 0 0 auto; width: 42px; height: 42px;
    border: 0; border-radius: 9px; background: none;
    display: grid; place-items: center; cursor: pointer; color: var(--mm-ink);
}
.mm-drawer__parent:hover, .mm-drawer__toggle:hover { background: var(--mm-tint); color: var(--mm-blue); }
.mm-drawer__parent:focus-visible, .mm-drawer__toggle:focus-visible {
    outline: 2px solid var(--mm-blue); outline-offset: -2px;
}

/* The caret is the only state cue in the drawer, so it has to turn. */
.mm-drawer .mm-nav__caret { flex-shrink: 0; transition: transform .25s ease; }
.mm-drawer .has-children.is-open > .mm-drawer__parent .mm-nav__caret,
.mm-drawer .has-children.is-open > .mm-drawer__row .mm-nav__caret { transform: rotate(180deg); }
.mm-drawer__cta { margin-top: 14px; }

@media (max-width: 1199.98px) {
    .mm-nav, .mm-header__call { display: none; }
    .mm-burger { display: grid; }
}
@media (max-width: 575.98px) {
    .mm-header__actions .mm-btn { display: none; }
}

/* --------------------------------------------------------------------------
   9. Hero
   Three columns on wide screens — copy, photograph, quote card — collapsing to
   two (the photograph is decorative and drops first) and then to one.
   -------------------------------------------------------------------------- */
.mm-hero {
    position: relative;
    background: linear-gradient(115deg, #0B2B52 0%, #0A2545 45%, var(--mm-navy) 100%);
    color: rgba(255, 255, 255, .8);
    overflow: hidden;
    padding: 52px 0 60px;
}
/* Skyline + route decoration, drawn rather than shipped as an image. */
.mm-hero::before {
    content: ''; position: absolute; inset: auto 0 0 0; height: 55%;
    background:
        radial-gradient(ellipse at 78% 100%, rgba(105, 178, 253, .22), transparent 62%),
        radial-gradient(ellipse at 20% 100%, rgba(4, 92, 184, .30), transparent 60%);
    pointer-events: none;
}
.mm-hero::after {
    content: ''; position: absolute; top: -120px; right: -120px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 147, 5, .16), transparent 68%);
    pointer-events: none;
}
/**
 * Two columns — copy and quote card — with the photograph floated between them rather
 * than given a column of its own. A third column squeezed the headline into ~380px at
 * 1280px, which is not what the blueprint shows: there the copy holds roughly 45% of the
 * width and the truck sits behind the card's left edge.
 */
.mm-hero__grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center;
}
@media (min-width: 992px) {
    .mm-hero__grid { grid-template-columns: minmax(0, 1fr) 348px; gap: 40px; }
}
.mm-hero__copy { max-width: 620px; }
.mm-hero__aside { position: relative; z-index: 3; }

/**
 * The hero headline is set smaller than the global h1 scale. The live copy is ~57
 * characters against the blueprint's 44, and at the global size it ran to four lines,
 * which stretched the section tall enough to push the photograph out of view.
 */
.mm-hero h1 {
    color: #fff; margin-bottom: 16px;
    font-size: clamp(1.85rem, 1.15rem + 2.1vw, 2.7rem);
    line-height: 1.14;
}
.mm-hero h1 .mm-hero__accent { color: var(--mm-orange); }
.mm-hero__lead { font-size: 1rem; color: rgba(255, 255, 255, .78); max-width: 44ch; margin-bottom: 24px; }
.mm-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* Four across on desktop — auto-fit was dropping to three and wrapping the fourth. */
.mm-hero__trust {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px;
    padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14);
}
@media (min-width: 640px) { .mm-hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Below 640px these badges wrap into a stacked 2x2 block that pushes the quote card
   down the page for no real gain, so the row is dropped on phones. The 4-across
   layout above that width is unaffected. */
@media (max-width: 639.98px) { .mm-hero__trust { display: none; } }
.mm-hero__trust-item { display: flex; flex-direction: column; gap: 6px; }
.mm-hero__trust-icon { color: var(--mm-orange); display: flex; align-items: center; gap: 2px; }
.mm-hero__trust-icon svg { width: 17px; height: 17px; }
.mm-hero__trust-label { font-size: .76rem; color: rgba(255, 255, 255, .74); line-height: 1.35; }

/**
 * The photograph floats between the copy and the card, bottom-aligned to the hero and
 * tucked behind the card's left edge — the overlap the blueprint shows. Positioned against
 * .mm-hero (not the grid) so it can sit on the section's bottom edge.
 */
/**
 * The media column spans the hero's full height with the photograph bottom-aligned inside
 * it, so the truck sits on the section's lower edge while the reviews badge can still ride
 * near the top — the arrangement the blueprint shows. Anchoring the whole element to
 * `bottom: 0` instead dragged the badge down with it.
 */
.mm-hero__media { display: none; }
@media (min-width: 1100px) {
    .mm-hero__media {
        display: flex; align-items: flex-end;
        position: absolute; z-index: 1;
        left: 46%; width: min(540px, 38%); top: 0; bottom: 0;
    }
}
.mm-hero__media img {
    width: 100%; border-radius: var(--mm-radius-lg);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}
.mm-hero__reviews {
    position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: inline-flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 999px; padding: 8px 18px;
    box-shadow: var(--mm-shadow); white-space: nowrap;
}
.mm-hero__reviews-g { flex-shrink: 0; display: block; }
.mm-hero__reviews-score { font-weight: 800; color: var(--mm-ink); font-size: .95rem; }
.mm-hero__reviews-stars { color: #FFB400; display: inline-flex; gap: 1px; }
.mm-hero__reviews small { color: var(--mm-muted); font-size: .74rem; display: block; }

/* --------------------------------------------------------------------------
   9b. Hero with a full-bleed banner

   The banner already carries its own navy-to-scene gradient, so the job here is
   to extend that navy under the copy without a visible join. Both the section
   colour and the scrim are painted in --mm-hero-tint, which PHP samples from the
   artwork's own left edge — so they are the same colour by construction rather
   than by eye.

   These rules come after the plain-hero block on purpose: `.mm-hero--banner::before`
   and `.mm-hero::before` have equal specificity, so source order decides.
   -------------------------------------------------------------------------- */
.mm-hero--banner {
    background-color: var(--mm-hero-tint, #0B2149);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    min-height: clamp(500px, 44vw, 660px);
    display: flex;
    align-items: center;
    padding: 56px 0;
}
.mm-hero--banner .mm-hero__grid { width: 100%; }

/* Readability scrim: opaque over the copy, gone before the truck. */
.mm-hero--banner::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
        rgb(var(--mm-hero-tint-rgb, 11, 33, 73)) 0%,
        rgb(var(--mm-hero-tint-rgb, 11, 33, 73)) 22%,
        rgba(var(--mm-hero-tint-rgb, 11, 33, 73), .88) 36%,
        rgba(var(--mm-hero-tint-rgb, 11, 33, 73), .40) 50%,
        rgba(var(--mm-hero-tint-rgb, 11, 33, 73), 0) 64%);
    height: auto;
}
/* The plain hero's orange glow would sit on top of the photograph. */
.mm-hero--banner::after { display: none; }
.mm-hero--banner .mm-hero__media { display: none; }

/* Badges ride over the artwork, clear of the quote card. Taken out of flow so the
   wrapper cannot become a flex item alongside the content grid. */
.mm-hero__badges { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mm-hero__badges > * { pointer-events: auto; }
@media (min-width: 1280px) { .mm-hero__badges { display: block; } }
.mm-hero--banner .mm-hero__reviews {
    top: 34px; left: 58%; transform: translateX(-50%); z-index: 3;
}

@media (max-width: 1279.98px) {
    /* Pan the artwork so the truck stays in frame as the copy takes more width. */
    .mm-hero--banner { background-position: 74% center; }
    .mm-hero--banner::before {
        background: linear-gradient(90deg,
            rgb(var(--mm-hero-tint-rgb, 11, 33, 73)) 0%,
            rgba(var(--mm-hero-tint-rgb, 11, 33, 73), .93) 46%,
            rgba(var(--mm-hero-tint-rgb, 11, 33, 73), .74) 100%);
    }
}
@media (max-width: 991.98px) {
    /* Single column: the scene sits behind everything, so the scrim covers the frame. */
    .mm-hero--banner {
        background-position: 68% center;
        min-height: 0;
        padding: 44px 0 52px;
        display: block;
    }
    .mm-hero--banner::before {
        background: linear-gradient(180deg,
            rgba(var(--mm-hero-tint-rgb, 11, 33, 73), .93) 0%,
            rgba(var(--mm-hero-tint-rgb, 11, 33, 73), .88) 55%,
            rgba(var(--mm-hero-tint-rgb, 11, 33, 73), .96) 100%);
    }
}
@media (max-width: 575.98px) {
    .mm-hero--banner { padding: 34px 0 42px; }
}

/* --------------------------------------------------------------------------
   10. Quote card (hero aside + reused in the quote band)
   -------------------------------------------------------------------------- */
.mm-quote-card {
    background: #fff; border-radius: var(--mm-radius-lg); padding: 26px;
    box-shadow: var(--mm-shadow-lg);
}
.mm-quote-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mm-quote-card__icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; background: var(--mm-blue); color: #fff;
}
.mm-quote-card__head h3 { margin: 0; font-size: 1.15rem; }
.mm-quote-card__head .mm-muted { font-size: .78rem; }
.mm-quote-card__foot {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 12px; font-size: .78rem; color: var(--mm-muted);
}
.mm-quote-card__foot svg { color: #1E7E34; }

/* Compact spacing inside the hero card so it finishes above the fold, as in the blueprint. */
.mm-quote-card .mm-field { margin-bottom: 11px; }
.mm-quote-card .mm-field label { font-size: .78rem; margin-bottom: 5px; }
.mm-quote-card .mm-input { padding: 11px 14px; }
.mm-quote-card .mm-field--icon .mm-input { padding-left: 40px; }
.mm-quote-card .mm-field--icon > svg { left: 13px; }
.mm-quote-card .mm-btn { margin-top: 4px; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.mm-field { margin-bottom: 14px; }
.mm-field label {
    display: block; font-size: .8rem; font-weight: 600; color: var(--mm-ink); margin-bottom: 6px;
}
.mm-input, .mm-select, .mm-textarea {
    width: 100%; padding: 13px 15px;
    font-family: inherit; font-size: .92rem; color: var(--mm-ink);
    background: #fff; border: 1px solid var(--mm-line); border-radius: 9px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.mm-input:focus, .mm-select:focus, .mm-textarea:focus {
    outline: none; border-color: var(--mm-blue); box-shadow: 0 0 0 3px rgba(4, 92, 184, .13);
}
.mm-input::placeholder, .mm-textarea::placeholder { color: #9AA7B8; }
.mm-textarea { resize: vertical; min-height: 110px; }
.mm-field--icon { position: relative; }
.mm-field--icon .mm-input { padding-left: 44px; }
.mm-field--icon > svg {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--mm-blue); pointer-events: none;
}
.mm-field--icon.has-label > svg { top: calc(50% + 12px); }
.mm-grid { display: grid; gap: 0 14px; }
.mm-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .mm-grid--2 { grid-template-columns: 1fr 1fr; } }

/**
 * Honeypot. Moved off-screen rather than display:none — a bot that skips hidden inputs
 * would sail past the trap, and a *visible* trap is worse than none: a real visitor who
 * fills it in has their enquiry rejected as spam.
 */
.mm-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.mm-form-message { display: none; margin: 4px 0 12px; padding: 11px 14px; border-radius: 9px; font-size: .86rem; }
.mm-form-message.is-error { display: block; background: rgba(220, 53, 69, .1); color: #C42B39; }
.mm-form-message.is-success { display: block; background: rgba(30, 126, 52, .1); color: #1E7E34; }

/* --------------------------------------------------------------------------
   12. Stats bar
   Pulled up over the hero, exactly as the blueprint shows it.
   -------------------------------------------------------------------------- */
.mm-stats { position: relative; z-index: 5; margin-top: -46px; }
.mm-stats__inner {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    background: #fff; border-radius: var(--mm-radius); box-shadow: var(--mm-shadow);
    overflow: hidden;
}
.mm-stat { display: flex; align-items: center; gap: 15px; padding: 26px 24px; }
.mm-stat + .mm-stat { border-left: 1px solid var(--mm-line); }
@media (max-width: 767.98px) {
    .mm-stat + .mm-stat { border-left: 0; border-top: 1px solid var(--mm-line); }
}
.mm-stat__icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--mm-tint); color: var(--mm-blue);
}
.mm-stat__value { font-size: 1.5rem; font-weight: 800; color: var(--mm-ink); line-height: 1.1; }
.mm-stat__label { font-size: .8rem; color: var(--mm-muted); }

/* --------------------------------------------------------------------------
   13. Service cards
   -------------------------------------------------------------------------- */
.mm-cards {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Every card the same height, not just the ones sharing a row. Grid stretches within
       a row but sizes each row to its own tallest card, so the second row — whose blurbs
       run a line longer — rendered 20px taller, and its photos came out at a visibly
       different crop from the first row's. The blueprint's six cards are identical. */
    grid-auto-rows: 1fr;
}
.mm-service-card {
    display: flex; align-items: stretch; gap: 0;
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mm-service-card:hover {
    transform: translateY(-4px); box-shadow: var(--mm-shadow); border-color: transparent;
}
.mm-service-card__media { width: 42%; flex-shrink: 0; background: var(--mm-tint); overflow: hidden; }
.mm-service-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-service-card__media--icon { display: grid; place-items: center; color: var(--mm-blue); }
.mm-service-card__body { padding: 20px; display: flex; flex-direction: column; gap: 7px; }
.mm-service-card__body h3 { font-size: 1.02rem; margin: 0; }
.mm-service-card__body h3 a { color: var(--mm-ink); }
.mm-service-card:hover .mm-service-card__body h3 a { color: var(--mm-blue); }
.mm-service-card__body p { font-size: .84rem; margin: 0; line-height: 1.6; }
.mm-service-card__link {
    margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 600; color: var(--mm-blue);
}
.mm-service-card__link svg { transition: transform .18s ease; }
.mm-service-card:hover .mm-service-card__link svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   14. How it works
   -------------------------------------------------------------------------- */
.mm-steps {
    display: grid; gap: 34px 26px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    position: relative;
    list-style: none; margin: 0; padding: 0;
}
.mm-step { text-align: center; position: relative; }

/* Dashed connector, aligned to the centre of the numbered circles. */
@media (min-width: 992px) {
    .mm-step:not(:last-child)::after {
        content: ''; position: absolute; top: 23px;
        left: calc(50% + 36px); right: calc(-50% + 36px);
        border-top: 2px dashed rgba(4, 92, 184, .28);
    }
}

.mm-step__num {
    width: 46px; height: 46px; margin: 0 auto 18px;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--mm-blue); color: #fff; font-weight: 700; font-size: 1rem;
    /* Halo ring, as in the reference — a flat disc reads as an afterthought beside the art. */
    box-shadow: 0 0 0 6px rgba(4, 92, 184, .09), 0 8px 18px rgba(4, 92, 184, .28);
    position: relative; z-index: 2;
}

/**
 * The illustration sits on a large white disc, not a small rounded square. The step art is
 * drawn at 48px, so the disc has to be big enough for it to read as an illustration rather
 * than a UI glyph.
 */
.mm-step__icon {
    --mm-step-fill: #E8F1FD;
    width: 96px; height: 96px; margin: 0 auto 18px;
    border-radius: 50%; display: grid; place-items: center;
    background: #fff;
    box-shadow: 0 12px 30px rgba(4, 92, 184, .14), 0 2px 6px rgba(10, 37, 64, .05);
    transition: transform .22s ease, box-shadow .22s ease;
}
.mm-step__icon svg { width: 46px; height: 46px; display: block; }
.mm-step:hover .mm-step__icon {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(4, 92, 184, .2), 0 2px 6px rgba(10, 37, 64, .05);
}

.mm-step h3 { font-size: 1rem; margin-bottom: 6px; }
.mm-step p { font-size: .83rem; margin: 0; max-width: 22ch; margin-inline: auto; }

@media (max-width: 575.98px) {
    .mm-step__icon { width: 84px; height: 84px; }
    .mm-step__icon svg { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   15. Why choose
   -------------------------------------------------------------------------- */
.mm-why { display: grid; gap: 48px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .mm-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mm-why__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 26px; }
.mm-feature { display: flex; gap: 13px; }
.mm-feature__icon {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
    display: grid; place-items: center; background: var(--mm-blue); color: #fff;
}
.mm-feature h3 { font-size: .95rem; margin: 0 0 3px; }
.mm-feature p { font-size: .81rem; margin: 0; line-height: 1.55; }

.mm-why__media { position: relative; }
/* The photo is swappable from the admin, so the slot — not the file — owns the shape.
   Without this, the width/height attributes on the <img> hold the box at the old file's
   ratio and squash anything with different proportions. */
.mm-why__media img {
    width: 100%; height: auto; aspect-ratio: 640 / 520; object-fit: cover;
    border-radius: var(--mm-radius-lg); display: block;
}
.mm-why__badge {
    position: absolute; right: 18px; bottom: 18px;
    background: var(--mm-blue); color: #fff; border-radius: var(--mm-radius);
    padding: 16px 20px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 16px 40px rgba(4, 92, 184, .4); max-width: 74%;
}
.mm-why__badge strong { color: #fff; font-size: 1.28rem; display: block; line-height: 1.1; }
.mm-why__badge span { font-size: .76rem; opacity: .9; line-height: 1.3; display: block; }

/* --------------------------------------------------------------------------
   16. Volume-calculator promo
   -------------------------------------------------------------------------- */
.mm-calcpromo { display: grid; gap: 44px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .mm-calcpromo { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.mm-calcpromo__note {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    font-size: .84rem; font-weight: 500; color: var(--mm-ink);
}
.mm-calcpromo__note svg { color: #1E7E34; }

/* Static preview of the calculator UI. */
.mm-calcpreview {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow); overflow: hidden;
}
.mm-calcpreview__head { padding: 16px 20px; border-bottom: 1px solid var(--mm-line); }
.mm-calcpreview__head h3 { margin: 0; font-size: 1rem; }
.mm-calcpreview__tabs { display: flex; gap: 8px; padding: 14px 20px 0; flex-wrap: wrap; }
.mm-calcpreview__tab {
    font-size: .74rem; font-weight: 600; padding: 7px 13px; border-radius: 7px;
    background: var(--mm-tint); color: var(--mm-muted); white-space: nowrap;
}
.mm-calcpreview__tab.is-active { background: var(--mm-blue); color: #fff; }
.mm-calcpreview__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 640px) { .mm-calcpreview__body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.mm-calcpreview__items { padding: 16px 20px 20px; }
.mm-calcpreview__row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--mm-line); font-size: .8rem;
}
.mm-calcpreview__row:last-child { border-bottom: 0; }
.mm-calcpreview__row-name { flex: 1; color: var(--mm-ink); font-weight: 500; }
.mm-calcpreview__qty {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--mm-line); border-radius: 7px; padding: 3px 8px;
    font-size: .74rem; color: var(--mm-muted);
}
.mm-calcpreview__qty b { color: var(--mm-ink); }
.mm-calcpreview__vol { width: 52px; text-align: right; color: var(--mm-muted); font-size: .74rem; }
.mm-calcpreview__side { background: var(--mm-tint); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.mm-calcpreview__stat span { font-size: .72rem; color: var(--mm-muted); display: block; }
.mm-calcpreview__stat strong { font-size: 1.5rem; color: var(--mm-blue); line-height: 1.1; }
.mm-calcpreview__truck { display: flex; align-items: center; gap: 10px; }
.mm-calcpreview__truck-icon { color: var(--mm-blue); flex-shrink: 0; }
.mm-calcpreview__truck-art { width: 64px; height: auto; flex-shrink: 0; }
.mm-calcpreview__truck strong { display: block; font-size: .92rem; color: var(--mm-ink); }
.mm-calcpreview__fit {
    background: #fff; border-radius: 9px; padding: 10px 12px;
    font-size: .74rem; color: var(--mm-muted); text-align: center;
}
.mm-calcpreview__fit b { display: block; color: var(--mm-ink); font-size: .82rem; }

/* --------------------------------------------------------------------------
   17. Service areas (dark band)
   -------------------------------------------------------------------------- */
/**
 * Three stacked layers, back to front: the generated navy texture on the section itself, the
 * vector coverage map bled off the right edge, then the copy and chips.
 *
 * The band is deliberately shorter than the site's section rhythm. In the blueprint it is a
 * wide shallow strip; at the standard 88px rhythm it rendered close to twice that height with
 * the map stranded in the middle of empty navy.
 */
.mm-areas {
    position: relative; overflow: hidden;
    padding: 60px 0;
    background-color: var(--mm-navy);
    background-size: cover; background-position: center right; background-repeat: no-repeat;
}
/* Scrim. The texture and the map both run under the headline, so the left is pulled back to
   solid navy and released toward the right — otherwise the lead copy sits on artwork. */
.mm-areas::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg,
            var(--mm-navy) 0%,
            rgba(14, 27, 44, .95) 32%,
            rgba(14, 27, 44, .58) 56%,
            rgba(14, 27, 44, .10) 100%),
        radial-gradient(ellipse at 76% 46%, rgba(4, 92, 184, .30), transparent 64%);
}
.mm-areas__inner { position: relative; z-index: 3; }
.mm-areas__copy { max-width: 560px; }
.mm-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* The chips sit above both the scrim and the map, and are allowed to run wider than the copy
   column — in the blueprint the row extends under the map rather than stopping at the text. */
.mm-areas .mm-pills { position: relative; z-index: 3; margin-top: 30px; }
/* Solid white chips on the navy band, as the blueprint shows. */
.mm-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 17px; border-radius: 999px;
    background: #fff; border: 1px solid #fff;
    color: var(--mm-ink); font-size: .82rem; font-weight: 500;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.mm-pill:hover { background: var(--mm-orange); border-color: var(--mm-orange); color: #fff; transform: translateY(-2px); }
.mm-pill--more { background: var(--mm-orange); border-color: var(--mm-orange); color: #fff; }

/**
 * The map layer. Below 992px it is an ordinary block under the copy; from 992px it lifts out
 * of the flow, pins to the right edge and is sized by *height* so it fills the band and runs
 * off the side, which is what makes it read as a background rather than an illustration in a
 * box. `right: -3%` is the bleed; `overflow: hidden` on the section does the trimming.
 */
.mm-areas__map { position: relative; z-index: 2; margin-top: 34px; }
.mm-areas__map svg { width: 100%; height: auto; display: block; }
@media (min-width: 992px) {
    .mm-areas__map {
        position: absolute; top: 50%; right: -2%; bottom: auto; left: auto;
        margin-top: 0; transform: translateY(-50%);
        height: 104%; display: flex; align-items: center; justify-content: flex-end;
        pointer-events: none;
        /* Soft left edge. `overflow: hidden` on the band would otherwise slice the state off
           with a hard vertical line where it passes behind the copy; this dissolves it
           instead, which is how the blueprint blends map into navy. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
                mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
    }
    .mm-areas__map svg { width: auto; height: 100%; }
}
.mm-areas__marker {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--mm-orange); color: #fff; padding: 8px 15px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
    box-shadow: 0 12px 30px rgba(255, 147, 5, .5);
}

/* --------------------------------------------------------------------------
   18. Testimonials
   -------------------------------------------------------------------------- */
.mm-quotes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.mm-quote {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    padding: 26px; display: flex; flex-direction: column; gap: 15px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mm-quote:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow); }
.mm-quote__stars { color: #FFB400; display: flex; gap: 2px; }
.mm-quote__text { font-size: .89rem; color: var(--mm-body); line-height: 1.7; margin: 0; flex: 1; }
.mm-quote__author { display: flex; align-items: center; gap: 12px; padding-top: 15px; border-top: 1px solid var(--mm-line); }
.mm-quote__avatar {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: var(--mm-tint);
}
.mm-quote__avatar--initial {
    display: grid; place-items: center;
    background: var(--mm-blue); color: #fff; font-weight: 700; font-size: 1rem;
}
.mm-quote__name { font-weight: 600; color: var(--mm-ink); font-size: .88rem; line-height: 1.3; }
.mm-quote__meta { font-size: .76rem; color: var(--mm-muted); }

/* Pagination dots under the testimonial row. Decorative — the cards are all rendered. */
.mm-dots { display: flex; justify-content: center; gap: 7px; margin-top: 30px; }
.mm-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mm-blue); opacity: .25;
}
.mm-dots span.is-active { opacity: 1; width: 22px; border-radius: 999px; }

/* --------------------------------------------------------------------------
   19. FAQ
   -------------------------------------------------------------------------- */
.mm-faq { display: grid; gap: 44px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .mm-faq { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.mm-faq__item {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm);
    margin-bottom: 10px; overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.mm-faq__item.is-open { border-color: var(--mm-blue); box-shadow: var(--mm-shadow-sm); }
.mm-faq__question {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    padding: 15px 18px; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: .89rem; font-weight: 500; color: var(--mm-ink); text-align: left;
}
.mm-faq__item.is-open .mm-faq__question { color: var(--mm-blue); font-weight: 600; }
.mm-faq__question-icon {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px;
    display: grid; place-items: center; background: var(--mm-tint); color: var(--mm-blue);
    transition: transform .22s ease, background-color .18s ease;
}
.mm-faq__item.is-open .mm-faq__question-icon { transform: rotate(45deg); background: var(--mm-blue); color: #fff; }
.mm-faq__answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mm-faq__answer-inner { padding: 0 18px 17px; font-size: .86rem; line-height: 1.7; }
/* --------------------------------------------------------------------------
   19a. Move-type choices + consent row

   Chips rather than bare radios: a 44px-tall target that wraps cleanly down to
   320px, where a five-option radio row would otherwise overflow.
   -------------------------------------------------------------------------- */
.mm-field__legend {
    display: block; margin-bottom: 8px;
    font-size: .82rem; font-weight: 500; color: var(--mm-ink);
}
.mm-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.mm-choice {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 15px; min-height: 44px;
    border: 1px solid var(--mm-line); border-radius: 999px;
    background: #fff; cursor: pointer;
    font-size: .84rem; color: var(--mm-ink);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.mm-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mm-choice:hover { border-color: var(--mm-blue); }
.mm-choice:has(input:checked) {
    background: var(--mm-blue); border-color: var(--mm-blue); color: #fff; font-weight: 500;
}
/* :has() is widely supported, but keyboard focus must be visible regardless. */
.mm-choice:focus-within { outline: 3px solid var(--mm-blue-light); outline-offset: 2px; }

.mm-consent {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    font-size: .82rem; line-height: 1.6; color: var(--mm-body);
}
.mm-consent input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mm-blue); }

/* --------------------------------------------------------------------------
   19b. Address autocomplete

   Rendered by site.js into the field wrapper rather than into <body>, so it
   inherits the form's own styling and cannot be orphaned by scrolling.
   -------------------------------------------------------------------------- */
.mm-field--ac { position: relative; }
.mm-ac {
    display: none;
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    margin: 0; padding: 5px; list-style: none;
    background: #fff; border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm); box-shadow: var(--mm-shadow);
    max-height: 244px; overflow-y: auto;
}
.mm-ac.is-open { display: block; }
.mm-ac__item {
    padding: 9px 12px; border-radius: 6px; cursor: pointer;
    font-size: .85rem; color: var(--mm-ink); line-height: 1.35;
}
.mm-ac__item:hover, .mm-ac__item.is-active { background: var(--mm-tint); color: var(--mm-blue); }

/* The hero quote card clips its own corners, which would cut the list off at the
   card edge — let it overflow while the list is open. */
.mm-quote-card { overflow: visible; }

.mm-faq__media { text-align: center; }
/* No panel and no border-radius: the artwork is a genuine cut-out (transparent PNG, produced
   by tools/cutout_bg.php), so it sits on the section the way the blueprint's does. */
.mm-faq__media img {
    width: 100%; height: auto; max-width: 470px;
    display: block; margin-inline: auto;
}

/* --------------------------------------------------------------------------
   20. CTA band
   -------------------------------------------------------------------------- */
.mm-cta {
    position: relative; overflow: hidden;
    background: linear-gradient(115deg, #0B2B52, var(--mm-navy));
    border-radius: var(--mm-radius-lg);
    color: rgba(255, 255, 255, .78);
}
.mm-cta::after {
    content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 147, 5, .2), transparent 70%);
}
.mm-cta__grid {
    position: relative; z-index: 2;
    display: grid; gap: 32px; align-items: center; grid-template-columns: minmax(0, 1fr);
    padding: 44px;
}
@media (min-width: 768px) { .mm-cta__grid { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 1200px) { .mm-cta__grid { grid-template-columns: 250px minmax(0, 1fr) auto; } }
.mm-cta__media { display: none; }
@media (min-width: 1200px) { .mm-cta__media { display: block; } }
.mm-cta__media img {
    border-radius: var(--mm-radius); display: block;
    width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover;
}
.mm-cta h2 { color: #fff; margin-bottom: 10px; }
.mm-cta p { margin-bottom: 22px; color: rgba(255, 255, 255, .76); }
.mm-cta__checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mm-cta__checks li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: .89rem; font-weight: 500; }
.mm-cta__checks svg { color: #4ADE80; flex-shrink: 0; }
@media (max-width: 575.98px) { .mm-cta__grid { padding: 32px 24px; } }

/* --------------------------------------------------------------------------
   21. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.mm-pagehero {
    position: relative; overflow: hidden;
    background: linear-gradient(115deg, #0B2B52 0%, var(--mm-navy) 100%);
    color: rgba(255, 255, 255, .78);
    padding: 64px 0;
}
/**
 * Same overlay as the home page hero, deliberately.
 *
 * The inner hero used to dim its photograph twice: the image itself at `opacity: .5`, and
 * then a diagonal scrim that only ever reached 72% transparent — so the picture stayed
 * uniformly muted and never came through, which is why these banners did not look like the
 * home page's. The image now runs at full strength and the scrim alone does the work:
 * opaque navy under the copy, gone by the time it reaches the artwork.
 *
 * The tint is declared as the same custom property the home hero uses, so if a per-page
 * sampled tint is ever added the gradient below picks it up with no further change.
 */
.mm-pagehero--image { --mm-hero-tint-rgb: 11, 33, 73; }
.mm-pagehero--image::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    /**
     * Same left-to-right shape as the home banner, with two adjustments the inner pages
     * need. The stops clear later (72% rather than 64%) because the copy column here runs
     * wider — the lead and the trust facts reach further right than the home page's do. And
     * it settles on a 10% floor instead of full transparency: the home banner is art-directed
     * with navy baked into its left edge, whereas these use whatever photograph the page
     * carries, and on a bright one (about-us is mostly white) a scrim that cleared entirely
     * left the lead text unreadable.
     */
    background: linear-gradient(90deg,
        rgb(var(--mm-hero-tint-rgb)) 0%,
        rgb(var(--mm-hero-tint-rgb)) 24%,
        rgba(var(--mm-hero-tint-rgb), .90) 40%,
        rgba(var(--mm-hero-tint-rgb), .58) 56%,
        rgba(var(--mm-hero-tint-rgb), .20) 72%,
        rgba(var(--mm-hero-tint-rgb), .10) 100%);
}
.mm-pagehero--image { background-color: rgb(var(--mm-hero-tint-rgb)); }
.mm-pagehero__bg {
    position: absolute; inset: 0; background-size: cover;
    /* Right-anchored like the home banner, so the subject sits clear of the copy. */
    background-position: right center;
}
/**
 * Inner-page hero now carries the same quote card as the home page, so the band is a
 * two-column grid rather than a single 820px text column. The card keeps the fixed 348px
 * the home hero gives it so both read as the same component; below 992px it drops under
 * the copy, and the copy gets its old max-width back so the measure stays readable.
 */
.mm-pagehero__grid {
    position: relative; z-index: 2;
    display: grid; gap: 40px; align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
    .mm-pagehero__grid { grid-template-columns: minmax(0, 1fr) 348px; gap: 48px; }
}
.mm-pagehero__grid--solo { grid-template-columns: minmax(0, 1fr) !important; }
.mm-pagehero__grid--solo .mm-pagehero__inner { max-width: 820px; }
.mm-pagehero__inner { position: relative; z-index: 2; max-width: 820px; }
@media (min-width: 992px) { .mm-pagehero__grid .mm-pagehero__inner { max-width: none; } }
.mm-pagehero h1 { color: #fff; margin-bottom: 14px; }
.mm-pagehero__lead { color: rgba(255, 255, 255, .78); font-size: 1.02rem; }
.mm-crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; font-size: .82rem; }
.mm-crumbs li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .6); }
.mm-crumbs li:not(:last-child)::after { content: '/'; color: rgba(255, 255, 255, .3); }
.mm-crumbs a { color: rgba(255, 255, 255, .85); }
.mm-crumbs a:hover { color: var(--mm-orange); }
.mm-pagehero__facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; padding: 0; list-style: none; }
.mm-pagehero__fact { display: flex; align-items: center; gap: 11px; }
.mm-pagehero__fact svg { color: var(--mm-orange); flex-shrink: 0; }
.mm-pagehero__fact strong { display: block; color: #fff; font-size: .92rem; }
.mm-pagehero__fact small { color: rgba(255, 255, 255, .62); font-size: .76rem; }

/* --------------------------------------------------------------------------
   22. Prose, sidebar, links, blog, pagination
   -------------------------------------------------------------------------- */
.mm-prose { color: var(--mm-body); }
.mm-prose h2 { font-size: 1.55rem; margin: 2rem 0 .8rem; }
.mm-prose h3 { font-size: 1.24rem; margin: 1.7rem 0 .7rem; }
.mm-prose h4 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; }
.mm-prose ul, .mm-prose ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.mm-prose li { margin-bottom: .5rem; }
.mm-prose img { border-radius: var(--mm-radius); margin: 1.2rem 0; }
.mm-prose a { text-decoration: underline; text-underline-offset: 2px; }
.mm-prose blockquote {
    margin: 1.6rem 0; padding: 18px 24px; border-left: 3px solid var(--mm-orange);
    background: var(--mm-tint); border-radius: 0 var(--mm-radius-sm) var(--mm-radius-sm) 0;
    font-style: italic;
}
.mm-prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .9rem; }
.mm-prose th, .mm-prose td { padding: 11px 14px; border: 1px solid var(--mm-line); text-align: left; }
.mm-prose th { background: var(--mm-tint); color: var(--mm-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   22b. Location page body

   All 59 imported location pages share one shape — four <h2> sections, each
   followed by paragraphs or a bullet list, plus a single photograph after the
   first heading. What they do NOT share is which sections use lists and which
   use prose, and the source images range from 292x354 portraits to 1200x800
   landscapes. Left as plain prose that read as a ragged wall of text whose
   blocks started and ended at different heights on every page.

   These rules impose the rhythm structurally rather than per page: every
   section opens the same way, every list becomes the same two-column check
   grid, and every photograph is cropped to the same 16:9 frame. The result is
   identical page furniture across all 59 regardless of what the source content
   happened to contain.
   -------------------------------------------------------------------------- */
.mm-prose--location > h2 {
    font-size: 1.42rem;
    line-height: 1.3;
    color: var(--mm-ink);
    margin: 2.6rem 0 1.1rem;
    padding-top: 2.6rem;
    border-top: 1px solid var(--mm-line);
}

/* The accent bar is what makes each block read as a deliberate section. */
.mm-prose--location > h2::before {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: var(--mm-orange);
    margin-bottom: 15px;
}

.mm-prose--location > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.mm-prose--location p { margin: 0 0 1.05rem; line-height: 1.75; }
.mm-prose--location > *:last-child { margin-bottom: 0; }

/* One fixed frame for every page's photograph, whatever its source ratio. */
.mm-prose--location > img,
.mm-prose--location > figure {
    display: block;
    width: 100%;
    margin: 0 0 1.6rem;
}

.mm-prose--location > img,
.mm-prose--location > figure > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--mm-radius);
    margin: 0;
}

/* Bullet lists become the same check grid the rest of the site uses. */
.mm-prose--location ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 28px;
}

.mm-prose--location ul li {
    position: relative;
    margin: 0;
    padding-left: 30px;
    font-size: .92rem;
    line-height: 1.6;
}

.mm-prose--location ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mm-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23045CB8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* Ordered lists keep their numbers but match the same measure. */
.mm-prose--location ol { padding-left: 1.2rem; margin: 0 0 1.4rem; }
.mm-prose--location ol li { margin-bottom: .55rem; line-height: 1.6; }

/* The two related-link blocks close every location page at equal height. */
.mm-crosslinks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 2.8rem;
}

.mm-crosslinks__card {
    background: var(--mm-canvas);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 22px 24px;
}

.mm-crosslinks__card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: var(--mm-ink);
    margin: 0 0 15px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--mm-line);
}

/* The icon sits in a tinted tile so the two cards read as a matched pair. */
.mm-crosslinks__card h2 svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 7px;
    border-radius: 9px;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    color: var(--mm-orange);
}

/* Service pages carry only the "other services" block — let it use the full width
   rather than leave a conspicuous empty half. */
.mm-crosslinks__card:only-child { grid-column: 1 / -1; }
.mm-crosslinks__card:only-child .mm-links {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* --------------------------------------------------------------------------
   22c. Service areas index

   One card per suburb, the suburb's landing pages inside it as a three-across
   button grid. Cards run full width rather than two-up: at two cards per row
   the buttons inside would land six across and read as a wall of chips.
   -------------------------------------------------------------------------- */
/* `.mm-area-list`, not `.mm-areas`: that class is the navy map band in
   components/service-areas.php and carries a ::before scrim, which was
   washing over these cards and greying the buttons out. */
.mm-area-list { display: grid; gap: 20px; }

.mm-area-card {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-lg);
    padding: 24px 26px 26px;
    box-shadow: var(--mm-shadow-sm);
}

.mm-area-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--mm-line);
}

.mm-area-card__pin {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--mm-tint);
    color: var(--mm-orange);
}

.mm-area-card__head h3 { margin: 0 0 2px; font-size: 1.12rem; color: var(--mm-ink); }
.mm-area-card__meta { display: block; font-size: .76rem; color: var(--mm-muted); }

/* How many pages this suburb has — turns the card head into a scannable index. */
.mm-area-card__count {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--mm-tint);
    color: var(--mm-blue);
    font-size: .78rem;
    font-weight: 600;
}

.mm-area-card__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.mm-area-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius-sm);
    background: var(--mm-canvas);
    color: var(--mm-ink);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.mm-area-btn svg { flex: 0 0 auto; color: var(--mm-orange); transition: transform .18s ease, color .18s ease; }

.mm-area-btn:hover {
    background: var(--mm-blue);
    border-color: var(--mm-blue);
    color: #fff;
    transform: translateY(-2px);
}

.mm-area-btn:hover svg { color: #fff; transform: translateX(2px); }

@media (max-width: 991.98px) {
    .mm-area-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .mm-area-card { padding: 20px; }
    .mm-area-card__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .mm-prose--location ul { grid-template-columns: 1fr; }
    .mm-crosslinks { grid-template-columns: 1fr; }
    .mm-prose--location > h2 { font-size: 1.26rem; margin-top: 2.1rem; padding-top: 2.1rem; }
}

.mm-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--mm-header-h) + 20px); }
.mm-sidebar__card {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 24px;
}
.mm-sidebar__card--accent { background: var(--mm-tint); border-color: transparent; }
.mm-sidebar__phone { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.mm-sidebar__phone svg { color: var(--mm-blue); flex-shrink: 0; }
.mm-sidebar__phone span { display: block; font-size: .75rem; color: var(--mm-muted); }
.mm-sidebar__phone strong { font-size: 1.02rem; }
.mm-sidebar__list { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 11px; }
.mm-sidebar__list li { display: flex; align-items: flex-start; gap: 9px; font-size: .86rem; }
.mm-sidebar__list svg { color: #1E7E34; flex-shrink: 0; margin-top: 3px; }

.mm-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mm-links a { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--mm-ink); }
.mm-links a:hover { color: var(--mm-blue); }

/* Nearby-suburbs card: two-across instead of one long column, so a capped list of
   12 still reads as a compact block rather than a tall single-file list. */
.mm-links--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
}
.mm-links--grid a { font-size: .84rem; }

.mm-links__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mm-line);
    font-size: .84rem;
    font-weight: 600;
    color: var(--mm-blue);
}
.mm-links__more:hover { color: var(--mm-orange); }
.mm-links__more svg { transition: transform .18s ease; }
.mm-links__more:hover svg { transform: translateX(2px); }

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

/**
 * The marker is a drawn icon, not a typed character.
 *
 * This rule used to set a right-arrow character via `content`, and the file had at some point
 * been saved through a Windows-1252 round trip: the arrow's three UTF-8 bytes each became
 * their own character, so every link in every list rendered three bytes of Latin-1 gibberish
 * instead of an arrow. An SVG in a data URI cannot fail that way — it is pure ASCII, so no
 * encoding step can corrupt it — and it gives the chevron a real hover state that a text
 * glyph never could.
 *
 * Keep it that way: no non-ASCII character belongs in a `content` value in this file.
 */
.mm-links a::before {
    content: '';
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--mm-tint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23045CB8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    transition: background-color .18s ease, transform .18s ease;
}

.mm-links a:hover::before {
    background-color: var(--mm-orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    transform: translateX(2px);
}

.mm-postcard {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    overflow: hidden; display: flex; flex-direction: column; height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mm-postcard:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow); }
.mm-postcard__media { aspect-ratio: 16 / 10; background: var(--mm-tint); overflow: hidden; }
.mm-postcard__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-postcard__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mm-postcard__meta { font-size: .74rem; color: var(--mm-muted); }
.mm-postcard__body h3 { font-size: 1rem; margin: 0; }
.mm-postcard__body h3 a { color: var(--mm-ink); }
.mm-postcard:hover h3 a { color: var(--mm-blue); }
.mm-postcard__body p { font-size: .84rem; margin: 0; }

.mm-pagination { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 40px; }
.mm-pagination a, .mm-pagination span {
    min-width: 40px; height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mm-line); border-radius: 9px;
    font-size: .87rem; font-weight: 600; color: var(--mm-ink); background: #fff;
}
.mm-pagination a:hover { border-color: var(--mm-blue); color: var(--mm-blue); }
.mm-pagination .is-current { background: var(--mm-blue); border-color: var(--mm-blue); color: #fff; }

/* Ratings strip */
.mm-ratings {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 34px;
    padding: 22px 0;
}
.mm-ratings__item { display: flex; align-items: center; gap: 10px; }
.mm-ratings__item img { height: 26px; width: auto; object-fit: contain; }
.mm-ratings__score { font-weight: 700; color: var(--mm-ink); font-size: .92rem; }
.mm-ratings__stars { color: #FFB400; display: inline-flex; }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.mm-footer { background: var(--mm-navy); color: rgba(255, 255, 255, .66); padding-top: 70px; }
.mm-footer__grid {
    display: grid; gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding-bottom: 52px;
}
@media (min-width: 992px) { .mm-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.mm-footer__logo { display: inline-block; margin-bottom: 16px; }
/* Sized to read, not just to fit. At 46px the three-part lockup — mark, wordmark and the
   small tagline beneath it — collapsed into an illegible 74px-wide smudge. */
.mm-footer__logo img { height: 72px; width: auto; max-width: 240px; object-fit: contain; }
/* Last-resort silhouette, only when no light logo artwork is configured. It flattens the
   brand colours, so `tools/make_light_logo.php` produces a proper variant instead. */
.mm-footer__logo img.is-knockout { filter: brightness(0) invert(1); }
.mm-footer p { font-size: .86rem; line-height: 1.7; max-width: 34ch; }
.mm-footer h4 {
    color: #fff; font-size: .95rem; margin-bottom: 20px;
    position: relative; padding-bottom: 12px;
}
.mm-footer h4::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 34px; height: 2px; border-radius: 2px; background: var(--mm-orange);
}
.mm-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
/* Link text was set at 66% white. That clears contrast on paper, but against a 6-item column
   on near-black it reads as disabled — the blueprint's footer links are plainly legible. */
.mm-footer ul a { color: rgba(255, 255, 255, .82); font-size: .86rem; }
.mm-footer ul a:hover { color: var(--mm-orange); }

/* The blueprint marks every footer link with a short orange rule. Drawn as a pseudo-element
   rather than a list-style so the hover shift moves marker and label together. */
.mm-footer__grid ul:not(.mm-footer__contact) li { display: flex; align-items: baseline; gap: 10px; }
.mm-footer__grid ul:not(.mm-footer__contact) li::before {
    content: ''; flex-shrink: 0;
    width: 7px; height: 2px; border-radius: 2px;
    background: var(--mm-orange); opacity: .85;
    transform: translateY(-3px);
    transition: width .18s ease;
}
.mm-footer__grid ul:not(.mm-footer__contact) li:hover::before { width: 13px; opacity: 1; }

/* The areas list sits under the brand column, so it runs two-up to stay compact. */
.mm-footer__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.mm-footer__h4--tight { margin-top: 28px; }
.mm-footer__contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; }
.mm-footer__contact svg { color: var(--mm-orange); flex-shrink: 0; margin-top: 4px; }
.mm-footer__contact a { color: rgba(255, 255, 255, .66); }

.mm-socials { display: flex; gap: 9px; margin-top: 22px; }
/* The blueprint shows these already in brand colour, not grey until hover. */
.mm-socials a {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); color: #fff;
    transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mm-socials a:hover { transform: translateY(-3px); color: #fff; filter: brightness(1.12); }
.mm-socials a[data-net="facebook"]  { background: #1877F2; }
.mm-socials a[data-net="instagram"] { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.mm-socials a[data-net="google"]    { background: #EA4335; }
.mm-socials a[data-net="linkedin"]  { background: #0A66C2; }
.mm-socials a[data-net="youtube"]   { background: #FF0000; }
.mm-socials a[data-net="whatsapp"]  { background: #25D366; }

.mm-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    font-size: .82rem;
}
.mm-footer__bar ul { display: flex; flex-wrap: wrap; gap: 20px; }

/* --------------------------------------------------------------------------
   24. Floating buttons + scroll-to-top
   -------------------------------------------------------------------------- */
.mm-floats { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: flex; flex-direction: column; gap: 10px; }
.mm-floats a, .mm-float-top {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; box-shadow: var(--mm-shadow); border: 0; cursor: pointer;
    transition: transform .18s ease;
}
.mm-floats a:hover, .mm-float-top:hover { transform: translateY(-3px); color: #fff; }
.mm-floats__call { background: var(--mm-blue); }
.mm-floats__wa { background: #25D366; }
.mm-float-top { background: var(--mm-ink); opacity: 0; visibility: hidden; }
.mm-float-top.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   25. Modal (calculator lead capture)
   -------------------------------------------------------------------------- */
.mm-modal-backdrop {
    position: fixed; inset: 0; z-index: 400; background: rgba(10, 37, 64, .6);
    display: none; align-items: center; justify-content: center; padding: 20px;
    overflow-y: auto;
}
.mm-modal-backdrop.is-open { display: flex; }
.mm-modal {
    background: #fff; border-radius: var(--mm-radius-lg); padding: 32px;
    width: 100%; max-width: 560px; position: relative; box-shadow: var(--mm-shadow-lg);
    margin: auto;
}
.mm-modal .close {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--mm-line);
    background: #fff; font-size: 1.3rem; line-height: 1; color: var(--mm-ink); cursor: pointer;
}

/* --------------------------------------------------------------------------
   26. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    :root { --mm-section-y: 48px; }
    .mm-hero { padding: 48px 0 56px; }
    .mm-stats { margin-top: -32px; }
    .mm-sidebar { position: static; }
}
@media (max-width: 575.98px) {
    :root { --mm-section-y: 40px; --mm-gutter: 16px; }
    body { font-size: 15px; }
    .mm-service-card { flex-direction: column; }
    .mm-service-card__media { width: 100%; aspect-ratio: 16 / 9; }

    /**
     * Hero CTAs share one row on phones rather than stacking full-width — two
     * full-bleed bars pushed the trust row and the quote card below the fold.
     * They flex to equal halves and are allowed to wrap internally, so the longer
     * label degrades to two lines instead of overflowing on a 320px screen.
     * The descendant selector outranks .mm-btn--lg, which sets the desktop padding.
     */
    .mm-hero__actions { flex-wrap: nowrap; gap: 10px; }
    .mm-hero__actions .mm-btn {
        width: auto; flex: 1 1 0; min-width: 0;
        padding: 12px 10px; gap: 6px;
        font-size: .8rem; line-height: 1.25;
        white-space: normal; text-align: center;
    }
    .mm-hero__actions .mm-btn svg { width: 16px; height: 16px; }
    .mm-why__badge { position: static; max-width: none; margin-top: 14px; }
    .mm-quote-card { padding: 20px; }
    .mm-footer__bar { flex-direction: column; text-align: center; }
}

/* --------------------------------------------------------------------------
   27. Compatibility layer

   Class names the inner page templates still emit. Restyling them here rather
   than editing thirteen templates keeps that markup untouched and gives every
   page the new look in one place.
   -------------------------------------------------------------------------- */
.h-100 { height: 100%; }
.fw-bold { font-weight: 700; color: var(--mm-ink); }
.display-1 { font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; color: var(--mm-blue); line-height: 1; }

/* Native form controls used by the contact and quote pages. */
.form-control, .form-select {
    width: 100%; padding: 13px 15px;
    font-family: inherit; font-size: .92rem; color: var(--mm-ink);
    background: #fff; border: 1px solid var(--mm-line); border-radius: 9px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--mm-blue); box-shadow: 0 0 0 3px rgba(4, 92, 184, .13);
}
.contact-form-box {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    padding: 30px; box-shadow: var(--mm-shadow-sm);
}

/* Contact channel tiles. */
.featured-item {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    padding: 26px 22px; height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.featured-item:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow); border-color: transparent; }
.featured-icon {
    width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px;
    display: grid; place-items: center; background: var(--mm-tint); color: var(--mm-blue);
}
.featured-title h4 { font-size: 1rem; margin-bottom: 5px; }
.featured-desc p { font-size: .84rem; margin: 0; }
.featured-desc a { font-weight: 600; }

/* Blog listing cards. */
.post-card {
    background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    overflow: hidden; height: 100%; display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow); }
.post-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mm-tint); }
.post-image img { width: 100%; height: 100%; object-fit: cover; }
.post-desc { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-title h4, .post-title h3 { font-size: 1.02rem; margin: 0; }
.post-title a { color: var(--mm-ink); }
.post-card:hover .post-title a { color: var(--mm-blue); }
.posted-on, .entry-date { font-size: .75rem; color: var(--mm-muted); }
.post-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mm-line); }

.step-icon {
    width: 58px; height: 58px; border-radius: 16px; margin-bottom: 14px;
    display: grid; place-items: center; background: var(--mm-tint); color: var(--mm-blue);
}

/* Print: drop the chrome, keep the content readable. */
@media print {
    .mm-header, .mm-footer, .mm-floats, .mm-float-top, .mm-cta, .mm-drawer, .mm-drawer-backdrop { display: none !important; }
    body { color: #000; }
    a { color: #000; text-decoration: underline; }
}