/* ==========================================================================
   CSS Variables & Base Resets
   ========================================================================== */
:root {
    --mmbb-blue: #003070;
    --mmbb-gold: #FFAF00;
    --mmbb-btn-bg: #FFAF00;
    --mmbb-btn-border: #FFAF00;
    --mmbb-btn-hover: #e59d00;
    --text-dark: #1f2937;
    --text-muted: #4B5563;

    --font-sans: 'Open Sans', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-script: 'Pinyon Script', cursive;
    /* Display serif for mission headings & service titles.
       IvyPresto Display is the design spec; Playfair Display is the
       licensed alternative we ship (loaded via Google Fonts in the page). */
    --font-display: 'Playfair Display', Georgia, serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Page Layout — Sticky Footer + Fixed-Header Offset
   ========================================================================== */
.campaign-v2-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.campaign-v2-main {
    flex: 1 0 auto; /* grows to fill space so the footer sticks to the bottom on short pages */
    padding-top: 4rem; /* clears the position: fixed .hero-top-bar */
    display: flex;
    flex-direction: column;
}

/* Any non-hero first child gets pushed to fill the available space inside
   main, so short content (e.g. the thank-you blocks) doesn't sit cramped at
   the very top under the header. */
.campaign-v2-main > *:last-child {
    flex-grow: 1;
}

/* On normal landing pages the hero block bleeds back under the fixed header
   so the background image reaches the top of the viewport. Its inner padding
   still keeps the title below the header.
   Pages with the solid-header doc type flag opt out — content always sits
   cleanly below the header, no bleed. */
.campaign-v2-page:not(.campaign-v2-page--solid) .campaign-v2-main > .hero-section:first-child {
    margin-top: -4rem;
}

.campaign-v2-page > .newsletter-strip,
.campaign-v2-page > .footer {
    flex-shrink: 0;
}

/* ==========================================================================
   Script Font Utility
   Applies Pinyon Script to inline runs of text. The font is visually smaller
   than Playfair/Open Sans at the same size, so the utility bumps the size
   ~30% to compensate and aligns the baseline with the surrounding text.
   ========================================================================== */
.script,
.font-script {
    font-family: var(--font-script);
    font-weight: 400;
    font-style: normal;
    /* Pinyon Script has a much smaller visual size than the surrounding
       sans-serif; the 1.3em compensates and the +2px adds a small optical
       nudge for balance, matching the .display-font rule. */
    font-size: calc(1.3em + 2px);
    line-height: 1;
    vertical-align: baseline;
}

/* Script Heading — block-level heading selectable from the TinyMCE Styles
   dropdown in any rich text field. Used for elegant campaign titles. */
.script-heading,
h2.script-heading,
h1.script-heading,
h3.script-heading {
    font-family: var(--font-script);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin: 0 0 1rem 0;
}

/* ==========================================================================
   Display Font Utility (Playfair Display)
   Selectable from TinyMCE Styles dropdown as "Display Font" (inline span)
   or "Display Heading" (block h2).
   ========================================================================== */
.display-font {
    font-family: var(--font-display);
    font-weight: inherit;
    /* Playfair Display has a slightly smaller x-height than the surrounding
       sans-serif, so bump inline runs by 2px for optical balance. */
    font-size: calc(1em + 2px);
}

.display-heading,
h1.display-heading,
h2.display-heading,
h3.display-heading {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1rem 0;
}

/* Screen Reader Only Utility (Accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    position: relative;
    /* Background image is applied inline via Razor for correct path resolution */
    background-size: cover;
    background-position: center;
    height: 60vh;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem 0;
}

.hero-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    z-index: 100;
    transition: background-color 0.3s ease;
}

.hero-top-bar.scrolled {
    background-color: var(--mmbb-blue);
}

.hero-top-bar--solid {
    background-color: var(--mmbb-blue);
    transition: none;
}

.hero-logo-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.hero-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.hero-logo-link:hover,
.hero-logo-link:focus {
    opacity: 0.85;
}

.hero-logo-img {
    height: 1.5rem;
    display: block;
}

.hero-contact {
    font-size: 0.875rem;
    font-weight: 300;
    display: none;
    align-items: center;
    gap: 0.5rem;
}

.hero-contact-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-contact-link:hover,
.hero-contact-link:focus {
    color: var(--mmbb-gold);
    text-decoration: underline;
}

.hero-contact-sep {
    opacity: 0.6;
}

@media (min-width: 640px) {
    .hero-logo-img { height: 2rem; }
    .hero-contact { display: flex; }
}

.hero-content {
    max-width: 56rem;
    margin: 3rem auto 0;
    color: white;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    margin: 0;
}

@media (min-width: 768px) {
    .hero-title { font-size: 3.75rem; }
    .hero-subtitle { font-size: 1.5rem; }
}

/* ==========================================================================
   Gold Banner
   ========================================================================== */
.gold-banner {
    background-color: var(--mmbb-gold);
    padding: 1rem;
    text-align: center;
}

.gold-banner-text {
    color: var(--mmbb-blue);
    font-size: 1.375rem;
    font-weight: 500;
    margin: 0;
}

.gold-banner-text p,
.gold-banner-text > * {
    font-size: inherit;
}

.gold-banner-text > *:first-child { margin-top: 0; }
.gold-banner-text > *:last-child  { margin-bottom: 0; }

.gold-banner-text span {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
}

@media (min-width: 768px) {
    .gold-banner-text { font-size: 1.625rem; }
}

/* ==========================================================================
   Form Section
   ========================================================================== */
.form-section {
    background-color: var(--mmbb-blue);
    padding: 3rem 1rem;
}

.form-container {
    max-width: 64rem;
    margin: 0 auto;
}

.form-header {
    color: white;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
}

.form-header > *:first-child { margin-top: 0; }
.form-header > *:last-child  { margin-bottom: 0; }

.form-subheader {
    color: white;
    text-align: center;
    font-size: 1.125rem;
    margin: 0 0 2rem 0;
}

@media (min-width: 768px) {
    .form-header { font-size: 1rem; }
}

/* Radio Buttons */
.radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    padding: 0;
}

@media (min-width: 1024px) {
    .radio-group {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
        font-size: 0.875rem;
    }
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: color 0.2s;
}

.radio-label:hover {
    color: var(--mmbb-gold);
}

.form-section input[type="radio"] {
    appearance: none;
    background-color: white;
    margin: 0;
    font: inherit;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--mmbb-gold);
    border-radius: 0.125rem;
    display: grid;
    place-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.form-section input[type="radio"]::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    background-color: var(--mmbb-gold);
    border-radius: 1px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
}

.form-section input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Input Fields */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.form-inline-group {
    display: flex;
    gap: 1rem;
}

.input-city { width: 100%; }
.input-state { width: 33.33%; }
.input-zip { width: 33.33%; }

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .form-col-span-2 {
        grid-column: span 2;
    }
}

.glass-input {
    width: 100%;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    color: white;
    outline: none;
    transition: border-color 0.2s;
}

.glass-input:focus {
    border-color: var(--mmbb-gold);
}

.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Submit Button */
.form-submit-wrapper {
    text-align: center;
    margin-top: 2rem;
}

.btn-submit {
    background-color: var(--mmbb-btn-bg);
    border: 1px solid var(--mmbb-btn-border);
    color: var(--mmbb-blue);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.625rem 2.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background-color: var(--mmbb-btn-hover);
}

.formCampaignV2Success,
.form-section label.error {
    color: #fff;
}

/* ==========================================================================
   Mission & Services Section
   ========================================================================== */
.mission-section {
    padding: 5rem 1rem;
    background-color: white;
}

.mission-container {
    max-width: 72rem;
    margin: 0 auto;
}

.cross-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.cross-icon-wrapper::before,
.cross-icon-wrapper::after {
    content: '';
    flex: 1;
    max-width: 300px;
    height: 2px;
    background-color: var(--mmbb-gold);
}

.cross-icon {
    height: 3rem;
    width: 3rem;
    object-fit: contain;
}

.mission-intro-container {
    text-align: center;
    max-width: 80rem; /* widened so each RTE paragraph of the headline fits on one line on desktop */
    margin: 0 auto clamp(2rem, 6vw, 4rem) auto;
}

.mission-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    line-height: 1.1;
    color: var(--mmbb-blue);
    margin: 0 0 clamp(1rem, 3vw, 1.5rem) 0;
}

.mission-headline p {
    margin: 0;
    text-wrap: balance;
}

.mission-highlight {
    font-style: italic;
    font-weight: 700;
}

.mission-body-text {
    color: #000;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 56rem; /* keep the body text at a comfortable reading width */
}

.divider {
    border: 0;
   margin: 0 0 4rem 0;
}

.services-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: left; /* Ensuring left-alignment on all screens */
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 2.1vw, 2.25rem);
    color: #000;
    margin: 0 0 1rem 0;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: normal;
    border-top: 2px solid var(--mmbb-gold);
    padding-top: 1.5rem;
    white-space: nowrap;
}

.service-title__initial {
    font-family: var(--font-script);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15em;
    text-transform: none;
    line-height: 0;
    margin-right: 0.1em;
}

/* Letters with wide right-side flourishes in Pinyon Script */
.service-title__initial[data-initial="I"],
.service-title__initial[data-initial="F"],
.service-title__initial[data-initial="J"],
.service-title__initial[data-initial="T"] {
    margin-right: 0.35em;
}

.service-title__subtitle {
    font-family: var(--font-display);
    text-transform: none;
    color: #000;
    font-weight: 500;
    font-size: 1.25rem;
    display: block;
    white-space: normal;
    margin-top: 0.5rem;
    letter-spacing: normal;
}

.service-desc {
    color: #000;
    font-size: 0.95rem;
    line-height: 1.625;
    margin: 0;
}

/* ==========================================================================
   Testimonial Section
   ========================================================================== */
.testimonial-section {
    background-color: var(--mmbb-gold);
    padding: 5rem 1rem;
}

.testimonial-container {
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .testimonial-container {
        flex-direction: row;
    }
}

.testimonial-img-wrapper {
    flex-shrink: 0;
}

.testimonial-img {
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.testimonial-content {
    position: relative;
    padding: 0 1rem 0 1.5rem;
    margin: 0;
}

.testimonial-text {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--mmbb-blue);
    font-weight: 500;
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.625;
    margin: 0 0 1.5rem 0;
}

.testimonial-text__body {
    flex: 1;
    min-width: 0; /* allow the flex item to shrink on narrow screens */
}

.quote-icon {
    width: 1.75rem;
    height: auto;
    opacity: 1; /* defensive override — Bootstrap's global .close rule sets opacity: .5 */
}

/* Open quote sits in its own column to the left of the text so the body
   copy stays left-aligned as a clean block with a hanging-indent feel. */
.quote-icon--open {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* Close quote stays inline at the end of the last line of the quote body. */
.quote-icon--close {
    display: inline-block;
    margin: 0 0 -0.25rem 0.4rem;
    vertical-align: bottom;
}

.testimonial-text span {
    font-weight: 700;
}

/* TinyMCE wraps the quote in <p> tags. Render them inline so the quote icons
   hug the first and last characters of the text instead of sitting above and
   below the paragraph block. */
.testimonial-text p {
    display: inline;
    margin: 0;
}

.testimonial-author {
    display: block;
    font-weight: 700;
    color: var(--mmbb-blue);
    margin: 0;
    /* Indent by (open quote width 1.75rem + flex gap 0.75rem) so the author
       lines up with the first character of the quote body, not with the open
       quote icon in its left column. */
    padding-left: 2.5rem;
    white-space: pre-line; /* render \n from the textarea as visible line breaks */
}

.testimonial-swiper {
    padding-bottom: 4rem !important;
}

.testimonial-swiper .swiper-pagination {
    bottom: 0;
}

.testimonial-swiper .swiper-pagination-bullet {
    width: 0.75rem;
    height: 0.75rem;
    background-color: #fff;
    opacity: 1;
}

.testimonial-swiper .swiper-pagination-bullet-active {
    background-color: var(--mmbb-blue);
    opacity: 1;
}

/* ==========================================================================
   Newsletter Strip
   ========================================================================== */
.newsletter-strip {
    background-color: var(--mmbb-blue);
    border-top: 3px solid var(--mmbb-gold);
    padding: 3rem 1rem;
    color: white;
}

.newsletter-strip__inner {
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.newsletter-strip__copy {
    max-width: 36rem;
}

.newsletter-strip__title {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: white;
    line-height: 1.2;
}

.newsletter-strip__subtitle {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
}

.newsletter-strip__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 32rem;
    align-items: stretch;
}

.newsletter-strip__field {
    position: relative;
    flex: 1;
    margin: 0;
}

.newsletter-strip__input {
    width: 100%;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 0.85rem 1.25rem;
    color: white;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.newsletter-strip__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-strip__input:focus {
    border-color: var(--mmbb-gold);
}

.newsletter-strip__error {
    position: absolute;
    left: 0;
    bottom: -1.25rem;
    font-size: 0.75rem;
    color: var(--mmbb-gold);
}

.newsletter-strip__button {
    background-color: var(--mmbb-gold);
    border: 1px solid var(--mmbb-gold);
    color: var(--mmbb-blue);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.85rem 2rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.newsletter-strip__button:hover,
.newsletter-strip__button:focus {
    background-color: #e59d00;
}

.newsletter-strip__success,
.newsletter-strip__success * {
    color: white !important;
}

.newsletter-strip__success {
    display: none;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 1.5rem 2rem;
    border: 2px solid var(--mmbb-gold);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.08);
    max-width: 40rem;
    margin: 0 auto;
}

.newsletter-strip__success::before {
    content: "✓";
    display: block;
    font-size: 2rem;
    color: var(--mmbb-gold);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

/* When success is showing, collapse the copy + form side */
.newsletter-strip__inner--success {
    justify-content: center;
}

.newsletter-strip__inner--success .newsletter-strip__copy {
    display: none;
}

@media (min-width: 640px) {
    .newsletter-strip__form {
        flex-direction: row;
        align-items: center;
        max-width: 40rem;
    }

    .newsletter-strip__button {
        flex-shrink: 0;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background-color: var(--mmbb-blue);
    color: white;
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer p {
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.footer__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__link:hover,
.footer__link:focus {
    color: var(--mmbb-gold);
    text-decoration: underline;
}

.footer__sep {
    opacity: 0.6;
}

.footer__logo {
    height: 2rem;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}