/* =========================================================
   MAID IN MARYLAND — FINAL RESPONSIVE SAFETY LAYER
   Loaded after all shared and page-specific styles.
   Purpose: protect 320px phones through large desktop screens
   without redesigning the existing visual system.
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
}

body.menu-open {
    overflow: hidden;
}

main,
section,
.container,
.hero-grid,
.hero-text,
.hero-image,
.contact-grid,
.contact-info,
.contact-form,
.booking-grid,
.booking-widget,
.footer-grid,
.footer-col,
.modal-box,
.step-body,
.step-footer {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* Keep long addresses, emails and legal text inside their columns. */
.footer-col p,
.info-box p,
.policy-card,
.contact-form,
.booking-info,
.faq-item {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* All primary controls remain comfortably tappable. */
.btn,
.footer-btn,
.call-banner-btn,
.licence-btn,
.bbb-btn,
.stripe-btn,
.commercial-tab-btn {
    min-height: 44px;
}

/* Semantic burger button reset. */
.menu-toggle {
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

/* Calendly must never impose its historical 320px minimum on the page. */
.booking-widget {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.calendly-inline-widget {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Quote modal remains inside the usable viewport on short and narrow screens. */
.modal-overlay {
    overscroll-behavior: contain;
}

.modal-box {
    max-width: min(520px, 100%);
}

/* =========================================================
   TABLET / MOBILE NAVIGATION
========================================================= */
@media (max-width: 960px) {
    .nav-links {
        height: 100vh;
        height: 100dvh;
        min-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding:
            max(24px, env(safe-area-inset-top))
            20px
            max(24px, env(safe-area-inset-bottom));
    }

    .nav-links > a:not(.mobile-menu-btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 24px;
    }

    .mobile-menu-btn {
        min-height: 48px;
    }

    .hero-grid,
    .contact-grid,
    .booking-grid {
        min-width: 0;
    }

    .hero-image,
    .hero-image img {
        width: 100%;
    }

    .hero-image img {
        object-fit: cover;
    }

    .booking-widget {
        margin-inline: auto;
    }
}

/* =========================================================
   PHONES
========================================================= */
@media (max-width: 600px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    section {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .hero,
    .contact-hero,
    .booking-hero {
        padding-top: 40px;
        padding-bottom: 36px;
    }

    .hero h1,
    .contact-hero h1,
    .booking-hero h1,
    .policy-hero h1 {
        font-size: clamp(1.9rem, 9vw, 2.25rem);
        line-height: 1.08;
        letter-spacing: -1px;
        overflow-wrap: anywhere;
    }

    .hero p,
    .contact-hero p,
    .booking-hero p {
        font-size: 1rem !important;
        line-height: 1.6;
    }

    .badge,
    .mini-title {
        max-width: 100%;
        white-space: normal;
        line-height: 1.35;
    }

    .hero-actions,
    .contact-buttons {
        width: 100%;
    }

    .hero-actions .btn,
    .contact-buttons .btn {
        width: 100%;
        min-height: 46px;
    }

    /* Forms: 16px prevents unwanted iOS zoom on focus. */
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .modal-box input,
    .modal-box select,
    .modal-box textarea {
        width: 100%;
        font-size: 16px;
    }

    .contact-form input,
    .contact-form select,
    .modal-box input,
    .modal-box select {
        min-height: 46px;
    }

    .contact-form form {
        padding: 20px 18px;
    }

    .form-image {
        height: clamp(150px, 48vw, 190px);
    }

    .modal-overlay {
        padding: 10px;
        align-items: center;
    }

    .modal-box {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        padding: 18px 16px;
        border-radius: 14px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        top: 8px;
        right: 8px;
    }

    .modal-box > h2 {
        padding-right: 48px;
        line-height: 1.25;
    }

    .service-row {
        gap: 14px;
    }

    .service-row span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .service-row input {
        flex: 0 0 20px;
    }

    .step-footer {
        gap: 10px;
    }

    .step-footer .btn,
    .step-footer button,
    .step-footer a {
        min-height: 44px;
    }

    .booking-widget {
        padding: 0;
        box-shadow: none;
    }

    .booking-steps {
        gap: 10px;
    }

    .booking-steps div {
        flex: 1 1 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* Commercial comparison remains readable without forcing the page wider. */
    .commercial-tab-wrapper {
        max-width: 100%;
    }

    .commercial-table td,
    .commercial-table th {
        overflow-wrap: anywhere;
    }

    .whatsapp-float {
        width: 54px;
        height: 54px;
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        font-size: 25px;
    }

    .footer-grid {
        gap: 34px;
    }

    .footer-col > a:not(.footer-btn),
    .footer-legal-inner a {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

/* =========================================================
   VERY SMALL PHONES — 320–380px
========================================================= */
@media (max-width: 380px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .navbar {
        height: 66px;
    }

    .logo img,
    .logo svg {
        height: 44px;
        max-width: 190px;
    }

    .hero-actions,
    .contact-buttons {
        gap: 10px;
    }

    .contact-form form {
        padding: 18px 14px;
    }

    .modal-overlay {
        padding: 8px;
    }

    .modal-box {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        padding: 16px 14px;
    }

    .step-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .step-footer > *,
    .step-footer .btn,
    .step-footer button,
    .step-footer a {
        width: 100%;
    }

    .footer-socials {
        gap: 10px;
    }
}

/* =========================================================
   LARGE DESKTOPS
========================================================= */
@media (min-width: 1440px) {
    .container {
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* Respect reduced-motion preferences without changing layout. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}