/* Site-wide visual refresh built from the Agent Referral and Available Properties design language. */

:root {
    --mpm-navy: #23346d;
    --mpm-navy-dark: #152044;
    --mpm-navy-soft: #334985;
    --mpm-gold: #f1c768;
    --mpm-cream: #f8f6f0;
    --mpm-ink: #2d3140;
    --mpm-muted: #5c6270;
    --mpm-border: #e0dcd3;
    --mpm-white: #ffffff;
    --mpm-shadow: 0 18px 45px rgba(35, 52, 109, 0.1);
    --mpm-shadow-soft: 0 10px 30px rgba(35, 52, 109, 0.08);
    --mpm-radius: 16px;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background: var(--mpm-white);
    color: var(--mpm-ink);
    line-height: 1.5;
}

body::selection {
    background: var(--mpm-navy);
    color: var(--mpm-white);
}

main {
    display: block;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(35, 52, 109, 0.28);
    outline-offset: 3px;
}

/* Shared editorial hero used by the informational pages. */
.site-page-hero,
.site-home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    padding: clamp(4.5rem, 9vw, 7rem) 1.25rem;
    background:
        linear-gradient(132deg, rgba(21, 32, 68, 0.98), rgba(35, 52, 109, 0.91)),
        url("../images/dillon-kydd-pvdx8c6Y5BY-unsplash.png") center 58% / cover;
    color: var(--mpm-white);
    text-align: center;
}

/* Home keeps the photography natural; a neutral charcoal wash preserves text contrast. */
.page-home .site-home-hero {
    background:
        linear-gradient(132deg, rgba(22, 22, 20, 0.78), rgba(12, 12, 11, 0.56)),
        url("../images/dillon-kydd-pvdx8c6Y5BY-unsplash.png") center 58% / cover;
}

.site-page-hero::before,
.site-page-hero::after,
.site-home-hero::before,
.site-home-hero::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    content: "";
}

.site-page-hero::before,
.site-home-hero::before {
    width: 22rem;
    height: 22rem;
    top: -14rem;
    left: -7rem;
}

.site-page-hero::after,
.site-home-hero::after {
    width: 28rem;
    height: 28rem;
    right: -12rem;
    bottom: -22rem;
    box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.035);
}

.site-page-hero__inner,
.site-home-hero__inner {
    position: relative;
    z-index: 1;
    width: min(100%, 880px);
    margin: 0 auto;
}

.site-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1rem;
    color: var(--mpm-white);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
}

.site-eyebrow::before,
.site-eyebrow::after {
    width: 2.5rem;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: 0.58;
}

.site-page-hero h1,
.site-home-hero h1 {
    margin: 0 !important;
    color: var(--mpm-white) !important;
    font-size: clamp(2.7rem, 6vw, 5rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.04em;
    text-transform: none !important;
    text-shadow: none !important;
}

.site-page-hero__lead,
.site-home-hero__lead {
    width: min(100%, 700px);
    margin: 1.15rem auto 0 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: clamp(1rem, 2vw, 1.2rem) !important;
    line-height: 1.7 !important;
}

.site-page-hero__accent,
.site-home-hero__accent {
    display: block;
    margin: 0.7rem 0 0;
    color: var(--mpm-gold);
    font-family: "Shippori Mincho", serif;
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    font-style: italic;
    line-height: 1.45;
}

.site-page-hero__action,
.site-home-hero__action {
    display: inline-flex;
    min-height: 3rem;
    margin-top: 1.65rem;
    padding: 0.2rem 1.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    color: var(--mpm-white);
    font-weight: 800;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
}

.site-page-hero__action:hover,
.site-page-hero__action:focus-visible,
.site-home-hero__action:hover,
.site-home-hero__action:focus-visible {
    background: var(--mpm-white);
    color: var(--mpm-navy);
}

/* Home page: retain the familiar property image while using the new hero hierarchy. */
.page-home .site-home-hero {
    min-height: min(640px, 70vh);
    display: grid;
    height: auto !important;
    place-items: center;
}

.page-home .site-home-hero h2 {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.page-home .site-home-hero h2 a {
    color: inherit;
}

/* Consistent section rhythm, typography, and card surfaces. */
.services-section,
.content-area,
.help-section,
.site-section {
    box-sizing: border-box;
    padding: clamp(3.75rem, 8vw, 6rem) 1.25rem;
}

.services-section {
    background: linear-gradient(180deg, var(--mpm-white) 0%, var(--mpm-cream) 100%);
}

.services-section + .services-section {
    background: var(--mpm-white);
}

.section-title,
.services-title,
.site-section-title {
    max-width: 900px;
    margin: 0 auto clamp(2.25rem, 5vw, 3.5rem) !important;
    color: var(--mpm-navy) !important;
    font-size: clamp(2rem, 4.5vw, 3.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
}

.services-grid {
    gap: 1.25rem;
}

.service-card {
    box-sizing: border-box;
    padding: clamp(1.75rem, 4vw, 2.6rem) !important;
    background: var(--mpm-white);
    border: 1px solid var(--mpm-border);
    border-top: 4px solid var(--mpm-navy);
    border-bottom: 1px solid var(--mpm-border);
    border-radius: var(--mpm-radius);
    box-shadow: var(--mpm-shadow-soft);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.service-card:hover {
    border-color: rgba(35, 52, 109, 0.34);
    box-shadow: var(--mpm-shadow);
    transform: translateY(-4px);
}

.service-icon {
    display: inline-grid;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 1.2rem;
    place-items: center;
    background: var(--mpm-cream);
    border: 1px solid var(--mpm-border);
    border-radius: 50%;
    font-size: 1.65rem;
}

.service-card h3 {
    margin-top: 0;
    font-size: 1.3rem;
    line-height: 1.35;
}

.service-card p {
    color: var(--mpm-muted);
    line-height: 1.7;
}

.content-panel,
.help-card,
.maintenance-container,
.site-surface {
    box-sizing: border-box;
    width: min(100%, 1000px);
    margin: 0 auto !important;
    padding: clamp(1.5rem, 5vw, 3.5rem) !important;
    background: var(--mpm-white) !important;
    border: 1px solid var(--mpm-border) !important;
    border-top: 5px solid var(--mpm-navy) !important;
    border-radius: var(--mpm-radius) !important;
    box-shadow: var(--mpm-shadow) !important;
}

.help-card {
    width: min(100%, 760px);
}

.help-card h2,
.content-panel > h2,
.maintenance-container > h2 {
    color: var(--mpm-navy);
}

.content-panel p,
.content-panel li,
.maintenance-container p,
.maintenance-container li {
    line-height: 1.72;
}

/* Pricing page. */
.pricing-overview {
    min-height: 0;
    background: linear-gradient(180deg, var(--mpm-white), var(--mpm-cream));
}

.pricing-overview .fee-box {
    box-sizing: border-box;
    max-width: 880px;
    margin: 0 auto 1.5rem !important;
    padding: clamp(2rem, 5vw, 3.5rem) !important;
    background: var(--mpm-white) !important;
    border: 1px solid var(--mpm-border) !important;
    border-top: 5px solid var(--mpm-navy) !important;
    border-radius: var(--mpm-radius) !important;
    box-shadow: var(--mpm-shadow) !important;
}

.pricing-overview .guarantee-card {
    box-sizing: border-box;
    max-width: 700px;
    margin: 0 auto !important;
    padding: clamp(2rem, 5vw, 3.25rem) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--mpm-radius);
    box-shadow: 0 18px 42px rgba(21, 32, 68, 0.22);
}

.pricing-form-section,
.contact-form-section,
.referral-form-section {
    background: linear-gradient(180deg, var(--mpm-cream), var(--mpm-white)) !important;
}

/* Contact page. */
.page-contact .slideshow-section {
    background: var(--mpm-navy-dark);
}

.page-contact .carousel-container {
    min-height: min(620px, 68vh);
    height: auto;
}

.page-contact .carousel-overlay {
    box-sizing: border-box;
    padding: 4rem 1.25rem;
    background: linear-gradient(132deg, rgba(21, 32, 68, 0.92), rgba(35, 52, 109, 0.73));
    pointer-events: auto;
}

.page-contact .carousel-overlay__inner {
    width: min(100%, 820px);
    margin: 0 auto;
    text-align: center;
}

.page-contact .carousel-overlay h1 {
    margin: 0;
    color: var(--mpm-white);
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
    text-transform: none;
    text-shadow: none;
}

.contact-details {
    padding: clamp(3.75rem, 8vw, 6rem) 1.25rem;
    background: var(--mpm-white);
    text-align: center;
}

.contact-details__inner {
    width: min(100%, 900px);
    margin: 0 auto;
}

.contact-details h2 {
    margin: 0 0 1rem !important;
    color: var(--mpm-navy) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
}

.contact-details p {
    color: var(--mpm-muted);
    font-size: 1.08rem !important;
    line-height: 1.75;
}

/* FAQ page. */
.faq-content-section {
    background: linear-gradient(180deg, var(--mpm-cream), var(--mpm-white));
}

.page-faq .content-panel {
    width: min(100%, 1050px);
}

.page-faq .content-panel > h1,
.page-faq .content-panel > .subtitle {
    display: none;
}

.page-faq .accordion {
    box-sizing: border-box;
    min-height: 62px;
    margin-bottom: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--mpm-white);
    color: var(--mpm-navy);
    border: 1px solid var(--mpm-border);
    border-left: 4px solid var(--mpm-navy);
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(35, 52, 109, 0.045);
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.page-faq .accordion:hover,
.page-faq .accordion.active {
    background: var(--mpm-navy);
    color: var(--mpm-white);
    border-color: var(--mpm-navy);
}

.page-faq .panel {
    box-sizing: border-box;
    margin-top: -0.75rem;
    margin-bottom: 1rem;
    background: var(--mpm-cream);
    border-left: 4px solid var(--mpm-gold);
}

.page-faq .why-choose-us {
    margin-top: 3rem;
    padding: clamp(1.5rem, 5vw, 3rem);
    background: var(--mpm-navy);
    color: var(--mpm-white);
    border: 0;
    border-radius: var(--mpm-radius);
    box-shadow: 0 18px 42px rgba(21, 32, 68, 0.2);
}

.page-faq .why-choose-us h2,
.page-faq .why-choose-us p,
.page-faq .why-choose-us li,
.page-faq .why-choose-us .mission-statement {
    color: var(--mpm-white);
}

.page-faq .why-choose-us li::before {
    color: var(--mpm-gold);
}

/* Rental qualifications and long-form information. */
.qualification-content-section,
.management-intro-section,
.management-closing-section,
.maintenance-content-section {
    background: linear-gradient(180deg, var(--mpm-cream), var(--mpm-white));
}

.page-qualifications .content-panel > h1,
.page-qualifications .content-panel > .subtitle,
.page-management .content-panel > h1,
.page-management .content-panel > .subtitle,
.page-maintenance .maintenance-container > h1,
.page-maintenance .maintenance-container > h3:first-of-type,
.page-maintenance .maintenance-container > p:first-of-type {
    display: none;
}

.page-qualifications .content-panel h3 {
    margin-top: 2.5rem;
    padding-bottom: 0.65rem;
    color: var(--mpm-navy);
    border-bottom: 1px solid var(--mpm-border);
    font-size: 1.35rem;
}

.page-qualifications .alert-box {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    background: #fff8dc;
    border: 1px solid #ead894;
    border-left: 5px solid #d7a818;
    border-radius: 8px;
}

.page-qualifications .fee-badge {
    padding: 0.55rem 1rem;
    background: var(--mpm-navy);
    border-radius: 999px;
}

/* Management services page. */
.page-management main.content-area,
.page-maintenance main.content-area {
    min-height: 0;
    padding: 0;
}

.page-management .management-intro-section,
.page-management .management-closing-section {
    padding-block: clamp(3.75rem, 8vw, 6rem) !important;
}

.page-management .services-grid-wrapper {
    box-sizing: border-box;
    margin: 0 auto !important;
    padding: clamp(3.75rem, 8vw, 6rem) 1.25rem !important;
    background: var(--mpm-white);
}

.page-management .contact-highlight {
    display: block;
    width: min(100%, 680px);
    margin: 2rem auto 0;
    padding: 1.1rem 1.25rem;
    background: var(--mpm-cream);
    border: 1px solid var(--mpm-border);
    border-left: 5px solid var(--mpm-navy);
    border-radius: 8px;
}

.page-management .areas-list {
    padding: 1.5rem;
    background: var(--mpm-cream);
    border: 1px solid var(--mpm-border);
    border-radius: 10px;
    line-height: 1.9;
}

/* Maintenance page. */
.page-maintenance .maintenance-content-section {
    padding: clamp(3.75rem, 8vw, 6rem) 1.25rem;
}

.page-maintenance .maintenance-container {
    width: min(100%, 1050px);
}

.maintenance-table {
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--mpm-border);
    border-radius: 12px;
    box-shadow: var(--mpm-shadow-soft);
}

.maintenance-table th,
.maintenance-table td {
    border: 0;
    border-bottom: 1px solid var(--mpm-border);
    padding: 1rem 1.15rem;
}

.maintenance-table th {
    background: var(--mpm-navy);
}

.maintenance-table tr:last-child td {
    border-bottom: 0;
}

.page-maintenance .info-section {
    padding: 1.5rem;
    background: var(--mpm-cream);
    border: 1px solid var(--mpm-border);
    border-left: 5px solid var(--mpm-navy);
    border-radius: 10px;
}

.page-maintenance .video-links {
    display: grid;
    gap: 0.75rem;
}

.page-maintenance .video-links a {
    box-sizing: border-box;
    margin: 0;
    padding: 1rem 1.15rem;
    background: var(--mpm-white);
    border: 1px solid var(--mpm-border);
    border-radius: 8px;
    text-decoration: none;
}

.page-maintenance .video-links a:hover {
    border-color: var(--mpm-navy);
    text-decoration: none;
}

/* Areas cards shared by the home, pricing, and legacy areas route. */
.service-area-section {
    background: var(--mpm-white) !important;
}

.service-area-section .content-panel {
    width: min(100%, 980px);
}

.service-area-scope {
    box-shadow: 0 16px 34px rgba(35, 52, 109, 0.2);
}

.service-area-list,
.areas-list,
.u-125ce855a3 {
    box-sizing: border-box;
    padding: 1.25rem !important;
    background: var(--mpm-cream) !important;
    border: 1px solid var(--mpm-border) !important;
    border-radius: 10px !important;
}

/* Forms mirror the polished referral form. */
.form-group {
    margin-bottom: 1.25rem;
}

label {
    margin-bottom: 0.45rem;
    color: var(--mpm-navy);
}

input,
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.85rem;
    background: var(--mpm-white);
    border: 1px solid #c9cdd6;
    border-radius: 7px;
    color: var(--mpm-ink);
    font: inherit;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

textarea {
    min-height: 130px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--mpm-navy);
    box-shadow: 0 0 0 3px rgba(35, 52, 109, 0.11);
    outline: none;
}

form button,
.center-btn-container button {
    min-height: 50px;
    background: var(--mpm-navy);
    border-radius: 7px;
    transition: background-color 180ms ease, transform 180ms ease;
}

form button:hover,
.center-btn-container button:hover {
    background: var(--mpm-navy-dark);
    transform: translateY(-1px);
}

/* Dark footer gives every page the same confident closing treatment. */
footer {
    position: relative;
    padding: clamp(3rem, 7vw, 5rem) 1.25rem;
    background: var(--mpm-navy-dark);
    color: rgba(255, 255, 255, 0.8);
    border-top: 0;
    line-height: 1.6;
}

footer::before {
    display: block;
    width: 4rem;
    height: 3px;
    margin: 0 auto 2rem;
    background: var(--mpm-gold);
    border-radius: 999px;
    content: "";
}

footer p:first-of-type {
    margin-top: 0;
    color: var(--mpm-white);
    font-weight: 800;
}

footer img {
    box-sizing: content-box;
    margin: 0.75rem 0.2rem;
    padding: 0.45rem;
    background: var(--mpm-white);
    border-radius: 6px;
}

footer a,
footer a.blue {
    color: var(--mpm-white);
    text-underline-offset: 3px;
}

footer a:hover {
    color: var(--mpm-gold);
}

@media (max-width: 700px) {
    .site-page-hero,
    .site-home-hero {
        padding-block: 4.25rem;
    }

    .site-eyebrow::before,
    .site-eyebrow::after {
        width: 1.35rem;
    }

    .service-card:hover,
    form button:hover,
    .center-btn-container button:hover {
        transform: none;
    }

    .maintenance-table,
    .maintenance-table tbody,
    .maintenance-table tr,
    .maintenance-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .maintenance-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .maintenance-table tr {
        border-bottom: 1px solid var(--mpm-border);
    }

    .maintenance-table tr:last-child {
        border-bottom: 0;
    }

    .maintenance-table td {
        border-bottom: 0;
    }

    .maintenance-table td:first-child {
        padding-bottom: 0.35rem;
        color: var(--mpm-navy);
    }

    .maintenance-table td:last-child {
        padding-top: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}