/* ==========================================================================
   Homepage redesign theme (emerald + lime) — scoped to the elements below.
   Testimonial (.testimonial-bg, .testimonial-card, ...) and Article
   (.article-section, .myArticleSwiper, ...) styles live in main.css and are
   deliberately left untouched so those two sections keep their old look.
   ========================================================================== */

:root {
    --mp-navy: #007A55;
    --mp-navy-dark: #00593E;
    --mp-navy-soft: #059669;
    --secondary: #8DD52A;
    --secondary-dark: #72B01D;
    --mp-ink: #1c2333;
    --mp-muted: #6b7280;
    --mp-line: #e7e6df;
    --mp-cream: #f7f5ee;
}

.mp-section {
    padding: 20px 0;
}

.mp-section-tight {
    padding: 40px 0;
}

/* The solid gold pill badge above the hero heading (e.g. "MAA PROPERTY
   CARE" in the reference design) — distinct from .mp-eyebrow below, which
   is plain small gold text with no pill background, used elsewhere. */
.mp-eyebrow-badge {
    display: inline-block;
    background: var(--secondary);
    color: var(--mp-navy-dark);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 5px;
}

.mp-eyebrow {
    display: inline-block;
    color: var(--secondary-dark);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 10px;
}

.mp-heading {
    color: var(--mp-navy);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mp-heading-rule {
    display: inline-block;
    text-align: center;
}

.mp-heading-rule::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: var(--secondary);
    margin: 12px auto 0;
    border-radius: 2px;
}

.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 19px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.mp-btn:hover {
    transform: translateY(-1px);
}

.mp-btn-gold {
    background: var(--secondary);
    color: var(--mp-navy-dark);
}

.mp-btn-gold:hover {
    background: var(--secondary-dark);
    color: var(--mp-navy-dark);
}

.mp-btn-outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.mp-btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.mp-btn-navy {
    background: var(--mp-navy);
    color: #fff;
}

.mp-btn-navy:hover {
    background: var(--mp-navy-dark);
    color: #fff;
}

.mp-btn-outline-gold {
    background: transparent;
    border-color: var(--secondary);
    color: var(--mp-navy);
}

.mp-btn-outline-gold:hover {
    background: var(--secondary);
    color: var(--mp-navy-dark);
}

/* ---------------------------------------------------------------- header top bar --- */
.mp-topbar {
    background: var(--mp-navy-dark);
    color: #cfd6e6;
    font-size: 13px;
    padding: 8px 0;
}

.mp-topbar a {
    color: #fff;
    text-decoration: none;
}

.mp-topbar-phone {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}

.mp-topbar-emergency {
    color: var(--secondary);
    font-size: 11.5px;
}

.mp-navbar-navy {
    background: var(--mp-navy) !important;
}

.mp-navbar-navy > .container-fluid {
    align-items: center;
}

.mp-navbar-navy .nav-link {
    color: #e7ebf5 !important;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.mp-navbar-navy .nav-link.active,
.mp-navbar-navy .nav-link:hover {
    color: var(--secondary) !important;
}

/* Logo sits inside the navy nav strip, vertically centered against the
   menu links and the book button, so the header reads as one aligned row. */
.mp-logo-badge-wrap {
    display: flex;
    align-items: center;
    align-self: center;
    padding: 0;
    margin-right: 0;
    position: relative;
    z-index: 5;
}

.mp-logo-badge {
    display: block;
    line-height: 0;
}

.mp-logo-badge img {
    height: 60px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* Mobile top bar: same navy treatment as the desktop nav so the logo,
   phone icon and hamburger all sit inside one solid colored strip
   instead of floating on a transparent/white background. */
.mobile-header.mp-navbar-navy {
    background: var(--mp-navy) !important;
}

.mp-logo-badge-wrap-sm {
    margin-bottom: 0;
    align-self: center;
}

.mp-logo-badge-sm img {
    height: 60px;
}

.mp-navbar-navy .text-primary,
.mp-navbar-navy svg path[fill="var(--primary)"] {
    color: var(--secondary) !important;
    fill: var(--secondary) !important;
}

.mp-navbar-navy .navbar-toggler-icon,
.mp-navbar-navy .dropdown-menu {
    color: var(--mp-ink);
}

.mp-btn-book-header {
    background: var(--secondary);
    color: var(--mp-navy-dark) !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
}

.mp-btn-book-header:hover {
    background: var(--secondary-dark);
    color: var(--mp-navy-dark) !important;
}

/* ---------------------------------------------------------------------- hero --- */
.mp-hero {
    position: relative;
    background: var(--mp-navy-dark);
    overflow: hidden;
    height: 72vh;
    /* Floor, not a fight with the 72vh above — on a short viewport (a
       landscape phone, a small browser window) 72% of the height can come
       out shorter than the heading + CTAs + trust badges actually need,
       and overflow: hidden would silently crop the badges row. min-height
       only ever takes over when height:72vh would compute smaller than
       this, so normal-height screens are untouched. */
    min-height: 480px;
    display: flex;
    align-items: center;
    padding-top: var(--mp-header-height, 86px);
}

.mp-hero-bg {
    position: absolute;
    top: var(--mp-header-height, 86px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - var(--mp-header-height, 86px));
    object-fit: cover;
    object-position: center;
    z-index: 1;
}


.mp-hero-overlay {
    position: absolute;
    inset: 0;
    /* Light enough that the full banner photo actually shows through;
       just enough navy on the text side to keep the heading readable. */
    background: linear-gradient(
        100deg,
        rgba(10, 23, 48, 0.62) 15%,
        rgba(10, 23, 48, 0.12) 100%
    );
}

/* Mobile-first: base rules are the small-screen values, then each
   min-width step below opens things up for tablet / laptop / large
   desktop — so this scales by actual viewport steps instead of relying
   only on clamp()'s continuous-but-still-capped interpolation. */
.mp-hero-content {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    color: #fff;
    width: 100%;
    max-width: 460px;
}

.mp-hero-content h1 {
    font-size: clamp(26px, 7vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 14px;
}

.mp-hero-content h1 .mp-accent {
    color: var(--secondary);
}

/* Admin-authored rich text (Update Home Banner) rendered as the headline —
   free-form paragraphs, so style them like a heading regardless of the
   markup the editor produced. Inline color spans/fonts from the editor
   still win since they're more specific than these element selectors. */
.mp-hero-heading {
    font-size: clamp(34px, 10vw, 54px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.mp-hero-heading p {
    margin: 0 0 4px;
}

.mp-hero-heading .mp-accent {
    color: var(--secondary);
}

.mp-hero-content p {
    color: #cdd4e4;
    font-size: 14px;
    margin-bottom: 18px;
}

.mp-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 22px;
}

.mp-hero-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e7ebf5;
    font-size: 12.5px;
    font-weight: 600;
}

.mp-hero-badge i {
    color: var(--secondary);
    font-size: 16px;
}

/* Tablet and up: more breathing room, slightly larger type. */
@media (min-width: 576px) {
    .mp-hero-content {
        max-width: 540px;
    }

    .mp-hero-content p {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .mp-hero-badges {
        gap: 18px 22px;
        margin-top: 28px;
    }

    .mp-hero-badge {
        font-size: 13px;
    }
}

/* Laptop and up: the hero has real room now, let the copy use it instead
   of staying capped at the mobile/tablet max-width. */
@media (min-width: 992px) {
    .mp-hero-content {
        max-width: 620px;
    }

    .mp-hero-content h1,
    .mp-hero-heading {
        margin-bottom: 22px;
    }

    .mp-hero-content p {
        font-size: 16px;
        margin-bottom: 26px;
    }

    .mp-hero-badges {
        gap: 22px;
        margin-top: 34px;
    }

    .mp-hero-badge {
        font-size: 13px;
    }

    .mp-hero-badge i {
        font-size: 18px;
    }
}

/* Large desktop / wide laptop: cap the heading a little higher than the
   46px clamp ceiling so it doesn't look small against a much bigger
   canvas, and give the content column more width to match. */
@media (min-width: 1400px) {
    .mp-hero-content {
        max-width: 700px;
    }

    .mp-hero-content h1,
    .mp-hero-heading {
        font-size: 72px;
    }
}

/* -------------------------------------------------------- quick booking bar --- */
.mp-quickbook-wrap {
    position: relative;
    z-index: 3;
    margin-top: -80px;
}

.mp-quickbook {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(10, 23, 48, 0.18);
    padding: 26px 28px;
}

.mp-quickbook-title {
    color: var(--mp-navy);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-quickbook-title i {
    color: var(--secondary-dark);
}

.mp-quickbook .form-control,
.mp-quickbook .form-select {
    border: 1px solid var(--mp-line);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
}

.mp-quickbook .form-control:focus,
.mp-quickbook .form-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 0.2rem rgba(227, 168, 58, 0.18);
}

.mp-quickbook .mp-btn {
    width: 100%;
    height: 100%;
    padding: 12px 14px;
}

/* ------------------------------------------------------------- our services --- */
.mp-service-card {
    background: #fff;
    border: 1px solid var(--mp-line);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: left;
    height: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 14px;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.mp-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(16, 32, 63, 0.1);
    border-color: var(--secondary);
}

.mp-service-icon {
    flex-shrink: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--secondary-dark);
}

.mp-service-text {
    min-width: 0;
}

.mp-service-card h6 {
    color: var(--mp-navy);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 2px;
}

.mp-service-card p {
    color: var(--mp-muted);
    font-size: 12px;
    margin: 0;
    line-height: 1.35;
}

/* ---------------------------------------------------- category archive cards --- */
.mp-svc-card {
    background: #fff;
    border: 1px solid var(--mp-line);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
    box-shadow: 0 4px 14px rgba(16, 32, 63, 0.05);
}

.mp-svc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 34px rgba(16, 32, 63, 0.12);
    border-color: var(--secondary);
}

.mp-svc-card-top {
    background: linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-navy-soft) 100%);
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-svc-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(227, 168, 58, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--secondary);
    flex-shrink: 0;
}

.mp-svc-card-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.mp-svc-card-duration {
    color: #e7ebf5;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.mp-svc-card-duration i {
    color: var(--secondary);
    margin-right: 4px;
}

.mp-svc-card-body {
    padding: 22px 20px 8px;
    flex: 1;
}

.mp-svc-card-body h5 {
    color: var(--mp-navy);
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 8px;
}

.mp-svc-card-body p {
    color: var(--mp-muted);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

.mp-svc-card-footer {
    padding: 16px 20px 22px;
    border-top: 1px dashed var(--mp-line);
    margin-top: 14px;
}

.mp-svc-card-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mp-svc-card-price-label {
    color: var(--mp-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mp-svc-card-price-value {
    color: var(--mp-navy);
    font-size: 19px;
    font-weight: 800;
}

.mp-svc-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--secondary);
    color: var(--mp-navy-dark);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        transform 0.15s ease;
}

.mp-svc-card-btn:hover {
    background: var(--secondary-dark);
    color: var(--mp-navy-dark);
    transform: translateX(2px);
}

/* ---------------------------------------------------------------- packages --- */
.mp-package-card {
    background: #fff;
    border: 1px solid var(--mp-line);
    border-radius: 14px;
    padding: 30px 24px;
    height: 100%;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* Pins the CTA to the bottom edge regardless of how many included-service
   lines a card has above it, so buttons line up across a row. */
.mp-package-card > .mp-btn {
    margin-top: auto;
}

.mp-package-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.mp-package-card-link:hover {
    color: inherit;
}

.mp-package-card.mp-featured {
    border-color: var(--secondary);
    box-shadow: 0 18px 40px rgba(16, 32, 63, 0.14);
    transform: translateY(-8px);
}

.mp-package-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
    color: var(--mp-navy-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 6px 16px;
    border-radius: 999px;
    text-transform: uppercase;
}

.mp-package-name {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--mp-navy);
    font-size: 14px;
    margin-bottom: 10px;
}

.mp-package-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--mp-navy);
}

.mp-package-price span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mp-muted);
}

.mp-package-features {
    list-style: none;
    padding: 0;
    margin: 22px 0;
    text-align: left;
}

.mp-package-features li {
    padding: 7px 0;
    font-size: 14px;
    color: var(--mp-ink);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mp-package-features li i {
    color: var(--secondary-dark);
    margin-top: 3px;
}

/* ------------------------------------------------------------ service pricing --- */
.mp-pricing-card {
    background: #fff;
    border: 1px solid var(--mp-line);
    border-radius: 14px;
    padding: 22px;
    height: auto;
}

.mp-pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mp-line);
}

.mp-pricing-row:last-of-type {
    border-bottom: none;
}

.mp-pricing-row-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mp-pricing-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--mp-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-navy);
    font-size: 17px;
    flex-shrink: 0;
    overflow: hidden;
}

.mp-pricing-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-pricing-name {
    color: var(--mp-navy);
    font-weight: 700;
    font-size: 14.5px;
    margin: 0;
}

.mp-pricing-sub {
    color: var(--mp-muted);
    font-size: 12.5px;
}

/* ------------------------------------------------------- product cards --- */
.mp-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mp-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
    box-shadow: 0 4px 14px rgba(16, 32, 63, 0.05);
}

.mp-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 34px rgba(16, 32, 63, 0.12);
    border-color: var(--secondary);
    color: inherit;
}

.mp-product-card-img {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-navy-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: var(--secondary);
}

.mp-product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-product-card-body {
    padding: 14px 12px;
    text-align: center;
}

.mp-product-card-name {
    color: var(--mp-navy);
    font-weight: 700;
    font-size: 14.5px;
    margin: 0 0 4px;
}

.mp-product-card-price {
    color: var(--mp-muted);
    font-size: 12.5px;
    display: block;
}

/* -------------------------------------------------- premium page heroes --- */
/* The same navy/gold gradient hero used on the combo package details page,
   shared across every other inner-page banner (about, combo packages list,
   projects, services, blog, contact) so the whole site's hero background
   reads as one consistent premium look. `.about-us-banner.bg-primary` is
   deliberately more specific than plain `.bg-primary` (Bootstrap's own
   !important utility, loaded after this file) so it wins without having to
   strip that class from every page's markup. */
.mp-combo-hero,
.about-us-banner.bg-primary,
.mp-booking-hero {
    position: relative;
    background: radial-gradient(circle at 15% 20%, rgba(227, 168, 58, 0.16), transparent 45%),
        linear-gradient(135deg, var(--mp-navy) 0%, var(--mp-navy-dark) 100%) !important;
    color: #fff;
    overflow: hidden;
}

.mp-combo-hero {
    padding: 64px 0 20px;
}

.mp-combo-hero::after,
.about-us-banner.bg-primary::after,
.mp-booking-hero::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(227, 168, 58, 0.08);
}

.mp-combo-hero .breadcrumb a,
.mp-combo-hero .breadcrumb li,
.about-us-banner .breadcrumb a,
.about-us-banner .breadcrumb li,
.mp-booking-hero .breadcrumb a,
.mp-booking-hero .breadcrumb li {
    color: #b9c2d8 !important;
}

.mp-combo-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(227, 168, 58, 0.14);
    border: 1px solid rgba(227, 168, 58, 0.4);
    color: var(--secondary);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.mp-combo-hero-name {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 10px;
}

.mp-combo-hero-tagline {
    color: #b9c2d8;
    font-size: 15.5px;
    max-width: 560px;
    margin-bottom: 26px;
}

.mp-combo-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mp-combo-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 16px;
}

.mp-combo-hero-stat i {
    color: var(--secondary);
    font-size: 16px;
}

.mp-combo-hero-stat-value {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    display: block;
}

.mp-combo-hero-stat-label {
    color: #97a2bd;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* pulls the content grid up to overlap the hero, like the booking page's card */
.mp-combo-wrap {
    margin-top: -56px;
    padding-bottom: 80px;
}

.mp-combo-body-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(10, 23, 48, 0.08);
    padding: 34px;
}

.mp-combo-body-card + .mp-combo-body-card {
    margin-top: 24px;
}

.mp-combo-section-title {
    font-weight: 800;
    color: var(--mp-navy);
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mp-combo-section-title i {
    color: var(--secondary-dark);
}

.mp-combo-included-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--mp-line);
    border-radius: 12px;
    height: 100%;
}

.mp-combo-included-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--mp-cream);
    color: var(--mp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mp-combo-included-name {
    color: var(--mp-navy);
    font-weight: 700;
    font-size: 14.5px;
    margin: 0;
}

.mp-combo-included-sub {
    color: var(--mp-muted);
    font-size: 12.5px;
}

/* --------------------------------------------------------- sticky CTA card --- */
.mp-combo-sidebar {
    position: sticky;
    top: 100px;
}

.mp-combo-price-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(10, 23, 48, 0.1);
    padding: 30px;
    text-align: center;
    border-top: 4px solid var(--secondary);
}

.mp-combo-price-card-huge {
    font-size: 40px;
    font-weight: 800;
    color: var(--mp-navy);
    line-height: 1;
    margin: 6px 0 2px;
}

.mp-combo-price-card-huge span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mp-muted);
}

.mp-combo-trust-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    text-align: left;
}

.mp-combo-trust-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--mp-ink);
}

.mp-combo-trust-list li i {
    color: var(--secondary-dark);
    margin-top: 3px;
}

/* ------------------------------------------------------------- how it works --- */
.mp-step {
    text-align: center;
}

.mp-step-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mp-navy);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    margin: 0 auto 16px;
    position: relative;
}

.mp-step-circle span {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--secondary);
    color: var(--mp-navy-dark);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-step h6 {
    color: var(--mp-navy);
    font-weight: 700;
}

.mp-step p {
    color: var(--mp-muted);
    font-size: 13px;
    margin: 0;
}

/* --------------------------------------------------------------- emergency --- */
.mp-emergency {
    background: var(--mp-navy);
    border-radius: 14px;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    color: #fff;
}

.mp-emergency h5 {
    font-weight: 800;
    margin-bottom: 4px;
}

.mp-emergency p {
    color: #b9c2d8;
    margin: 0;
    font-size: 13.5px;
}

.mp-emergency-icon {
    font-size: 26px;
    color: #8dd52a;
    margin-right: 12px;
}

/* ------------------------------------------------------------------ projects --- */
.mp-project-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mp-line);
}

/* Before/after side by side, both frames forced to the same 3:4 box (close
   to the portrait photos technicians actually upload) so the pair always
   lines up at the same height. `contain` (not `cover`) keeps the whole
   photo visible inside that box — an image that doesn't exactly match 3:4
   is letterboxed against --mp-cream rather than cropped. */
.mp-project-frames {
    display: flex;
    flex-direction: row;
}

.mp-project-frame {
    position: relative;
    flex: 1;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--mp-cream);
}

.mp-project-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mp-project-frame-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(16, 32, 63, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}

.mp-project-title {
    padding: 14px 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-navy);
    text-align: center;
}

/* ------------------------------------------------------------- service areas --- */
.mp-area-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 24px;
}

.mp-area-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-left: -10px;
    font-size: 14px;
    color: var(--mp-ink);
    break-inside: avoid;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mp-area-list li:hover {
    background: rgba(227, 168, 58, 0.1);
}

.mp-area-list li.active {
    background: var(--mp-navy);
    color: #fff;
    font-weight: 600;
}

.mp-area-list li.active i {
    color: var(--secondary);
}

.mp-area-list li i {
    color: var(--secondary-dark);
}

.mp-map-frame {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mp-line);
    height: 100%;
    min-height: 280px;
}

.mp-map-frame iframe {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border: 0;
    display: block;
}

/* -------------------------------------------------------------- store locator --- */
.mp-locator-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 6px;
}

.mp-locator-city {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
    font-weight: 700;
    color: var(--mp-muted);
    padding: 14px 4px 6px;
}

.mp-locator-city:first-child {
    padding-top: 0;
}

.mp-locator-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--mp-line);
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mp-locator-item i {
    color: var(--secondary-dark);
    margin-top: 2px;
}

.mp-locator-item:hover {
    border-color: var(--secondary);
}

.mp-locator-item.active {
    background: var(--mp-navy);
    border-color: var(--mp-navy);
    color: #fff;
}

.mp-locator-item.active .small {
    color: #b9c2d8 !important;
}

.mp-locator-item.active i {
    color: var(--secondary);
}

.mp-locator-detail {
    background: #fff;
    border: 1px solid var(--mp-line);
    border-radius: 14px;
    padding: 20px 22px;
}

/* ------------------------------------------------------------------- app cta --- */
.mp-app-cta {
    background: var(--mp-navy);
    border-radius: 16px;
    padding: 36px;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.mp-app-cta h4 {
    font-weight: 800;
    margin-bottom: 4px;
}

.mp-app-cta .mp-eyebrow {
    color: var(--secondary);
}

.mp-app-cta ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 24px;
}

.mp-app-cta ul li {
    padding: 5px 0;
    font-size: 14px;
    color: #dfe4ef;
}

.mp-app-cta ul li i {
    color: var(--secondary);
    margin-right: 8px;
}

.mp-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mp-navy-dark);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 9px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
}

.mp-store-badge i {
    font-size: 18px;
}

.mp-store-badge:hover {
    border-color: var(--secondary);
    color: #fff;
}

/* ---------------------------------------------------------------------- footer --- */
.mp-footer {
    background: var(--mp-navy-dark);
    color: #ffffff;
    padding: 56px 0 0;
    margin-top: auto;
}

.mp-footer h6 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 14px;
}

.mp-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mp-footer ul li {
    margin-bottom: 10px;
}

.mp-footer a {
    color: #ffffff;
    text-decoration: none;
    font-size: 13.5px;
}

.mp-footer a:hover {
    color: var(--secondary);
}

.mp-footer p {
    color: #fff;
    font-size: 13.5px;
}

.mp-footer .mp-footer-logo img {
    max-height: 60px;
    margin-bottom: 14px;
}

.mp-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.mp-footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.mp-footer-social a:hover {
    background: var(--secondary);
    color: var(--mp-navy-dark);
}

.mp-footer-newsletter .form-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 8px 0 0 8px;
}

.mp-footer-newsletter .form-control::placeholder {
    color: #8a93ac;
}

.mp-footer-newsletter .btn {
    border-radius: 0 8px 8px 0;
}

.mp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding: 18px 0;
    font-size: 12.5px;
    color: #8a93ac;
    text-align: center;
}

/* ------------------------------------------------------------- booking page --- */
.mp-booking-hero {
    background: var(--mp-navy-dark);
    padding: 46px 0 30px;
    color: #fff;
    text-align: center;
}

.mp-thankyou-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--mp-navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 18px;
}

.mp-booking-hero h1 {
    font-weight: 800;
    font-size: 30px;
    margin-bottom: 6px;
}

.mp-booking-hero p {
    color: #b9c2d8;
    margin: 0;
}

.mp-booking-wrap {
    margin-top: -34px;
    padding-bottom: 70px;
}

/* -------------------------------------------------------- my subscriptions --- */
.mp-mysub-card {
    background: #fff;
    border: 1px solid var(--mp-line);
    border-left: 4px solid var(--secondary);
    border-radius: 10px;
    padding: 16px 18px;
    height: 100%;
}

.mp-mysub-card.is-ending {
    border-left-color: #e0a731;
}

.mp-mysub-card.is-inactive {
    border-left-color: var(--mp-muted);
}

.mp-mysub-card a {
    color: var(--secondary-dark);
    font-weight: 600;
    text-decoration: none;
}

.mp-mysub-card a:hover {
    text-decoration: underline;
}

.mp-booking-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(10, 23, 48, 0.1);
    padding: 30px;
}

/* Points single-service bookers toward the separate combo/subscription
   flow (user-panel pages) instead of mixing the two into one form. */
.mp-combo-callout {
    background: var(--mp-cream);
    border: 1px dashed var(--secondary);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--mp-navy);
}

.mp-combo-callout i {
    color: var(--secondary-dark);
    margin-right: 6px;
}

.mp-form label {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--mp-navy);
    margin-bottom: 6px;
}

.mp-form .form-control,
.mp-form .form-select,
.mp-form textarea.form-control {
    border: 1px solid var(--mp-line);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
}

.mp-form .form-control:focus,
.mp-form .form-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 0.2rem rgba(227, 168, 58, 0.18);
}

.mp-form-section {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--mp-line);
}

.mp-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mp-form-section-title {
    font-weight: 700;
    color: var(--mp-navy);
    font-size: 15px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-form-section-title .mp-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mp-navy);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mp-type-toggle {
    display: flex;
    gap: 10px;
}

.mp-type-toggle label {
    flex: 1;
    border: 1px solid var(--mp-line);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mp-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.mp-type-toggle input {
    accent-color: var(--secondary-dark);
}

.mp-type-toggle label.active,
.mp-type-toggle label:has(input:checked) {
    border-color: var(--secondary);
    background: var(--mp-cream);
}

.mp-summary-card {
    background: var(--mp-navy);
    border-radius: 14px;
    padding: 26px;
    color: #fff;
    position: sticky;
    top: 24px;
}

.mp-summary-card h6 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12.5px;
    color: #9fabc7;
    margin-bottom: 18px;
}

.mp-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13.5px;
}

.mp-summary-row span:first-child {
    color: #9fabc7;
}

/* The discount line sits on the dark summary card, so it uses the bright
   accent green rather than Bootstrap's .text-success (#198754), which is
   almost invisible against this background. Both spans are set, since the
   rule above would otherwise mute the label. */
.mp-summary-row.mp-summary-discount span,
.mp-summary-row.mp-summary-discount span:first-child {
    color: var(--secondary);
}

.mp-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 800;
    font-size: 20px;
    color: var(--secondary);
}

.mp-summary-note {
    font-size: 12px;
    color: #9fabc7;
    margin-top: 14px;
}

@media (max-width: 767.98px) {
    .mp-quickbook-wrap {
        margin-top: -50px;
    }

    .mp-hero {
        padding-bottom: 110px;
    }

    .mp-area-list {
        columns: 1;
    }
    .mp-logo-badge img {
        height: 40px;
    }
}

/* Narrow, targeted exception to the "testimonial styles stay in main.css"
   rule above: main.css's own mobile breakpoint fixes .testimonial-card-design
   at 223px wide and centers it, leaving empty space either side instead of
   filling the row. This stretches it to the full row width at phone sizes
   without touching main.css's cascade. */
@media (max-width: 575.98px) {
    .testimonial-card-design,
    .testimonial-card-design:hover {
        width: 100%;
        flex: 0 0 100%;
        box-sizing: border-box;
    }
}

/* "Save ৳N" badge on the dark hero band and summary card, where Bootstrap's
   .text-success / .bg-success-subtle pair has too little contrast. */
.mp-price-save-dark {
    background: rgba(141, 213, 42, 0.16);
    color: var(--secondary);
}