.mm-cta-band {
    padding: clamp(3rem, 4vw + 1rem, 5rem) 0;
    text-align: center;
}
.mm-cta-band--align-left           { text-align: left; }
.mm-cta-band--align-left .mm-cta-band__inner { margin-left: 0; }
.mm-cta-band--align-left .mm-cta-band__subtext { margin-left: 0; margin-right: auto; }
.mm-cta-band--align-left .mm-cta-band__actions { justify-content: flex-start; }

/* When user picks 0% overlay opacity, hide the gradient pseudo entirely so
   the photo shows unmodified. Text color falls back to the "text_color"
   override (white/navy) since we can't know the photo's contrast. */
.mm-cta-band--bg-cover.mm-cta-band--overlay-clear::before {
    display: none;
}

/* Manual text color overrides (used when overlay is clear and we can't
   guess what color reads against the user's photo). */
.mm-cta-band--text-white,
.mm-cta-band--text-white .mm-cta-band__headline,
.mm-cta-band--text-white .mm-cta-band__subtext,
.mm-cta-band--text-white .mm-section-eyebrow { color: var(--wp--preset--color--mist-0); }
.mm-cta-band--text-navy,
.mm-cta-band--text-navy .mm-cta-band__headline,
.mm-cta-band--text-navy .mm-cta-band__subtext { color: var(--wp--preset--color--primary); }
.mm-cta-band--text-navy .mm-section-eyebrow   { color: var(--wp--preset--color--mist-6); }
.mm-cta-band--bg-gradient   { background: var(--wp--preset--gradient--hero-navy); color: var(--wp--preset--color--mist-0); }
.mm-cta-band--bg-navy       { background: var(--wp--preset--color--primary);      color: var(--wp--preset--color--mist-0); }
.mm-cta-band--bg-orange     { background: var(--wp--preset--color--orange);       color: var(--wp--preset--color--mist-0); }
.mm-cta-band--bg-light-grey { background: var(--wp--preset--color--light-grey); }
.mm-cta-band--bg-white      { background: var(--wp--preset--color--mist-0); }

/* Cover variant: full-bleed image + gradient overlay */
.mm-cta-band--bg-cover {
    color: var(--wp--preset--color--mist-0);
    background-image: var(--mm-cta-bg-image, none);
    background-size: cover;
    background-position: center;
    position: relative;
    isolation: isolate;
}
.mm-cta-band--bg-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: var(--mm-cta-overlay-opacity, 0.9);
    /* Default overlay: navy → orange. Was navy → red before the brand refresh. */
    background: linear-gradient(135deg, #16243F 0%, #E05300 100%);
}
/* All overlay variants now resolve to the brand navy → orange gradient.
   Migration HTML still passes legacy slugs like "navy-red" — we honor the
   intent (a warm brand gradient) but use the correct brand colors. */
.mm-cta-band--overlay-navy-red::before    { background: linear-gradient(135deg, #16243F 0%, #E05300 100%); }
.mm-cta-band--overlay-navy-orange::before { background: linear-gradient(135deg, #16243F 0%, #E05300 100%); }
.mm-cta-band--overlay-navy-solid::before  { background: #16243F; opacity: 1; }
.mm-cta-band--overlay-red-orange::before  { background: linear-gradient(135deg, #16243F 0%, #E05300 100%); }

.mm-cta-band--bg-cover .mm-cta-band__headline { color: var(--wp--preset--color--mist-0); }
.mm-cta-band--bg-cover .mm-cta-band__subtext  { color: rgba(255,255,255,0.92); }
.mm-cta-band--bg-cover .mm-section-eyebrow    { color: rgba(255,255,255,0.85); }

.mm-cta-band__inner {
    max-width: 720px;
    text-align: center;
}
.mm-cta-band__headline {
    font-family: var(--wp--preset--font-family--azo-sans);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    line-height: 1.15;
    margin: 0 0 0.625rem;
    color: inherit;
}
.mm-cta-band__subtext {
    font-size: 1rem;
    opacity: 0.92;
    max-width: 480px;
    margin: 0 auto 1.5rem;
    color: inherit;
}
.mm-cta-band__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Secondary CTA on dark backgrounds — transparent with white border/text.
   Matches the hero cover secondary so the two contexts read as the same
   button family. */
.mm-cta-band--bg-gradient .mm-button--outline,
.mm-cta-band--bg-navy     .mm-button--outline,
.mm-cta-band--bg-cover    .mm-button--outline {
    background: transparent;
    color: var(--wp--preset--color--mist-0);
    border-color: var(--wp--preset--color--mist-0);
}
.mm-cta-band--bg-gradient .mm-button--outline:hover,
.mm-cta-band--bg-navy     .mm-button--outline:hover,
.mm-cta-band--bg-cover    .mm-button--outline:hover {
    background: transparent;
    color: var(--wp--preset--color--mist-0);
    border-color: var(--wp--preset--color--orange-deep);
}
.mm-cta-band--bg-navy     .mm-button--primary:hover,
.mm-cta-band--bg-gradient .mm-button--primary:hover,
.mm-cta-band--bg-cover    .mm-button--primary:hover {
    color: var(--wp--preset--color--mist-0);
}
/* Orange-bg cta-band is the special case — a transparent white outline on
   an orange field is hard to read, so this variant keeps the solid white
   secondary with navy text. */
.mm-cta-band--bg-orange   .mm-button--outline {
    background: var(--wp--preset--color--mist-0);
    color: var(--wp--preset--color--ink);
    border-color: var(--wp--preset--color--mist-0);
}
.mm-cta-band--bg-orange   .mm-button--outline:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--mist-0);
    border-color: var(--wp--preset--color--primary);
}
.mm-cta-band--bg-orange .mm-button--primary {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}
.mm-cta-band--bg-orange .mm-button--primary:hover {
    background: var(--wp--preset--color--dark-navy);
    border-color: var(--wp--preset--color--dark-navy);
}