@media(max-width:900px){


/* =====================
   GENERAL
===================== */

.container {

    padding:0 20px;

}


/* =====================
   HERO
===================== */

.hero {

    padding:50px 0;

}

@media(max-width:900px){
.hero-container {

    flex-direction:column;
    gap:40px;
    min-height:0;
}


.hero-content {
  
    width:100%;
    padding-bottom:30px;
}


.hero-image {

    width:100%;
    height:300px;
    

  

}


.before-after-container {

    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;

}


.after-image,
.before-image {

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}


.before-image-wrapper {

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    overflow:hidden;

}



h1 {

    font-size:40px;

}


.hero-text {

    font-size:18px;

}


.hero-buttons {

    flex-direction:column;

}


.hero-buttons a {

    width:fit-content;
    text-align:center;

}


.trust-list {

    flex-direction:column;
    gap:15px;

}

}

/* =====================
   SERVICES
===================== */


.service-grid {

    grid-template-columns:1fr;

}


.section-header h2 {

    font-size:32px;

}



/* =====================
   WHY US
===================== */


.why-container {

    flex-direction:column;

}


.why-image,
.why-content {

    width:100%;

}


.why-image img {

    width:100%;
    height:350px;
    object-fit:cover;

}



/* =====================
   CONTACT
===================== */


#contact-form {

    width:100%;

}



/* =====================
   NAVIGATION
===================== */


.menu-toggle {

    display:block;

}


#nav-menu {

    position:absolute;

    top:90px;
    left:0;

    width:100%;

    background:white;

    display:none;

    flex-direction:column;

}


#nav-menu.active {

    display:flex;

}



.nav-buttons {

    display:none;

}



.quote-button,
.phone-button {

    width:auto;

    padding:12px 20px;

    font-size:16px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}



/* =====================
   FLOATING BUTTONS
===================== */


.floating-buttons {

    position:fixed;

    bottom:20px;
    right:20px;

    display:flex;

    flex-direction:column;

    gap:15px;

    z-index:9999;

}



.floating-buttons a {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:160px;

    padding:15px 20px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    box-shadow:0 5px 20px rgba(0,0,0,0.2);

}



.floating-call {

    background:var(--primary);

    color:white;

}



.floating-estimate {

    background:var(--accent);

    color:black;

}



/* =====================
   FOOTER
===================== */


.footer-container {

    grid-template-columns:1fr;

    width:100%;

}


.footer {

    width:100%;

    overflow:hidden;

}



/* =====================
   REVIEWS
===================== */


.reviews-box {

    padding:30px 20px;

}


.stars {

    font-size:32px;

}


}

@media(max-width:900px){

    .hero-image {
        height:350px !important;
        width:100%;
    }


    .before-after-container {
        height:350px !important;
        width:100%;
        position:relative;
        overflow:hidden;
    }


    .after-image,
    .before-image {
        position:absolute;
        top:0;
        left:0;

        width:100%;
        height:350px !important;

        object-fit:cover;
    }


    .before-image-wrapper {

        position:absolute;

        top:0;
        left:0;

        width:100%;
        height:350px !important;

        overflow:hidden;

        z-index:2;

    }


    .slider-line {

        z-index:3;

    }

}

@media(max-width:900px){

    .hero {
        position:relative;
        overflow:hidden;
    }

    .hero-container {
        display:flex;
        flex-direction:column;
    }

    .hero-image {
        position:relative;
        inset:auto;
        width:100%;
        height:350px;
        order:2;
    }

    .hero-content {
        order:1;
        width:100%;
    }

    .before-after-container {
        position:relative;
        width:100%;
        height:100%;
    }

    .after-image,
    .before-image {
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .before-image {
        width:100%;
        height:100%;
    }

}

@media (max-width: 900px) {
    .why-image .section-media {
        width: 100%;
        height: 360px;
        object-fit: cover;
    }
}

@media (max-width: 600px) {
    .why-image .section-media {
        height: 300px;
    }
}


/* =========================================================
   LAYOUT RESCUE — RESPONSIVE RHYTHM
   Keep this block at the END of responsive.css.
========================================================= */

@media (max-width: 900px) {

    .services {
        padding: 84px 0 92px;
    }

    .section-header {
        margin-bottom: 46px;
        padding: 0;
    }

    .section-header h2 {
        font-size: clamp(32px, 8vw, 42px);
    }

    .section-header > p:not(.small-title) {
        font-size: 17px;
        line-height: 1.65;
    }

    .services-container {
        max-width: 760px;
        padding: 0 20px;
        gap: 38px;
    }

    .service-box {
        min-height: 330px;
        padding: 48px 34px;
        border-radius: 20px;
    }

    .service-box h2 {
        font-size: clamp(29px, 7vw, 38px);
        margin-bottom: 16px;
    }

    .service-box p {
        font-size: 17px;
        line-height: 1.6;
    }

    .service-box p + p {
        margin-top: 26px;
    }

    .why-us {
        padding: 92px 0;
    }

    .why-container {
        gap: 46px;
    }

    .why-image,
    .why-content {
        width: 100%;
    }

    .why-image .section-media,
    .why-image img {
        height: 400px;
        border-radius: 20px;
    }

    .why-content h2 {
        font-size: clamp(32px, 8vw, 42px);
    }

    .reviews,
    .faq,
    .contact {
        padding: 88px 0;
    }

    .service-area-banner {
        padding: 78px 22px;
    }

    .contact-header {
        margin-bottom: 42px;
    }

    #contact-form {
        max-width: 100%;
        padding: 30px 24px;
    }
}


@media (max-width: 600px) {

    .services {
        padding: 70px 0 76px;
    }

    .section-header {
        margin-bottom: 36px;
    }

    .services-container {
        padding: 0 16px;
        gap: 28px;
    }

    .service-box {
        min-height: 300px;
        padding: 40px 24px;
        border-radius: 18px;
    }

    .service-box h2 {
        font-size: 29px;
    }

    .service-box p {
        font-size: 16px;
    }

    .service-box p + p {
        margin-top: 22px;
    }

    .why-us {
        padding: 72px 0;
    }

    .why-container {
        gap: 34px;
    }

    .why-image .section-media,
    .why-image img {
        height: 300px;
        border-radius: 18px;
    }

    .why-content > p {
        font-size: 17px;
        line-height: 1.65;
        margin-bottom: 30px;
    }

    .reviews,
    .faq,
    .contact {
        padding: 72px 0;
    }

    .service-area-banner {
        padding: 66px 20px;
    }

    #contact-form {
        padding: 24px 18px;
        border-radius: 18px;
    }
}



/* =========================================================
   SOURCE-AWARE OPTIONAL SECTIONS — RESPONSIVE
========================================================= */

@media (max-width: 1000px) {
    .process-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .coverage-layout {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .map-card,
    .map-card iframe {
        height: 430px;
        min-height: 430px;
    }

    .footer-rich {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .process-section,
    .project-gallery,
    .coverage-section {
        padding: 76px 0;
    }

    .process-card {
        padding: 32px 26px;
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-card {
        height: 290px;
    }

    .coverage-copy h2 {
        font-size: 34px;
    }

    .map-card,
    .map-card iframe {
        height: 350px;
        min-height: 350px;
        border-radius: 18px;
    }

    .footer-rich {
        grid-template-columns: 1fr;
    }

    .footer-brand-column {
        max-width: none;
    }

    .footer-lower {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-legal-links {
        justify-content: flex-start;
    }
}

/* =========================================================
   CONVERSION HERO — RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .conversion-hero {
        min-height: 0;
    }

    .conversion-hero-container {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
        gap: 42px;
        padding-top: 48px;
        padding-bottom: 58px;
    }

    .conversion-hero-copy h1 {
        font-size: clamp(44px, 6vw, 60px);
    }
}

@media (max-width: 900px) {
    .conversion-hero {
        padding-top: 90px;
    }

    .conversion-hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(7,25,39,.90) 0%,
            rgba(8,31,47,.82) 52%,
            rgba(11,31,51,.68) 100%
        );
    }

    .conversion-hero-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 38px;
        padding-top: 52px;
        padding-bottom: 54px;
    }

    .conversion-hero-copy {
        max-width: 760px;
    }

    .conversion-hero-copy h1 {
        font-size: clamp(42px, 9vw, 60px);
    }

    .conversion-hero-text {
        font-size: 18px;
    }

    .hero-lead-card {
        max-width: 720px;
        justify-self: auto;
        align-self: center;
    }

    .conversion-proof-inner {
        padding-top: 16px;
        padding-bottom: 16px;
        gap: 13px 28px;
    }
}

@media (max-width: 600px) {
    .conversion-hero-container {
        padding-top: 38px;
        padding-bottom: 42px;
    }

    .conversion-eyebrow {
        margin-bottom: 18px;
        font-size: 13px;
    }

    .conversion-hero-copy h1 {
        margin-bottom: 19px;
        font-size: clamp(36px, 11vw, 48px);
        line-height: 1.06;
    }

    .conversion-hero-text {
        margin-bottom: 25px;
        font-size: 16px;
        line-height: 1.65;
    }

    .conversion-trust-grid {
        grid-template-columns: 1fr;
        gap: 11px;
        margin-bottom: 28px;
    }

    .conversion-hero-actions {
        flex-direction: column;
    }

    .conversion-hero-actions .quote-button,
    .conversion-hero-actions .phone-button {
        width: 100%;
    }

    .hero-lead-card {
        border-radius: 19px;
    }

    .hero-lead-card-header {
        padding: 24px 21px 21px;
    }

    .hero-lead-card-header h2 {
        font-size: 26px;
    }

    .hero-lead-form {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 18px 14px;
    }

    .hero-form-field:nth-of-type(4),
    .hero-message-field,
    .hero-submit-button,
    .lead-form-message {
        grid-column: auto;
    }

    .hero-form-callout {
        padding: 0 18px 20px;
    }

    .conversion-proof-inner {
        justify-content: flex-start;
        gap: 11px 18px;
        font-size: 13px;
    }
}


/* Distinct hero headline responsive tuning */
@media (max-width: 900px) {
    .conversion-hero-copy h1 {
        font-size: clamp(42px, 8.2vw, 58px);
    }
}

@media (max-width: 600px) {
    .conversion-eyebrow {
        margin-bottom: 16px;
    }

    .conversion-hero-copy h1 {
        margin-bottom: 26px;
        padding-bottom: 20px;
        font-size: clamp(37px, 10.5vw, 48px);
        line-height: 1.08;
    }

    .conversion-hero-copy h1::after {
        width: 58px;
        height: 3px;
    }
}

/* Review cards */
@media (max-width: 900px) {
    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .review-card {
        padding: 24px;
    }

    .reviews-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .reviews-summary .quote-button {
        margin-left: 0;
    }
}


/* Reference-inspired benefits + reviews */
@media (max-width: 900px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .benefit-card {
        min-height: 0;
    }

    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .benefits-section {
        padding: 76px 0;
    }

    .benefit-card {
        padding: 30px 24px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .reviews-summary {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width:700px) {
    .review-carousel { width:100%; padding:0 0 40px; }
    .review-carousel-window,.review-slide { min-height:390px; }
    .review-slide { padding:48px 26px 34px; }
    .review-text { font-size:16px; }
    .review-arrow { top:auto; bottom:-4px; width:40px; height:40px; }
    .review-arrow-prev { left:20px; }
    .review-arrow-next { right:20px; }
    .reviews-actions {
        flex-direction:column; align-items:stretch; max-width:330px;
        margin-left:auto; margin-right:auto;
    }
}


@media(max-width:900px){.service-detail-layout{grid-template-columns:1fr;gap:38px}.service-detail-media .section-media{height:390px}.service-info-grid{grid-template-columns:1fr}.reference-media-grid{grid-template-columns:1fr 1fr}.quote-card-form{grid-template-columns:1fr}.quote-card-form .form-group,.quote-card-form .form-group:nth-of-type(5){grid-column:1/-1}}
@media(max-width:600px){.service-detail-section,.service-education,.service-reference-media{padding:68px 0}.service-detail-media .section-media{height:300px}.reference-media-grid{grid-template-columns:1fr}.quote-card-header{padding:25px 22px 21px}.quote-card-form,.lead-popup-card .quote-card-form{padding:20px}.reference-media-card img{height:250px}}

@media (max-width:800px){.reference-insights{padding:58px 0}.reference-insights-stack{gap:44px}.reference-insight{grid-template-columns:1fr;gap:24px}.reference-insight-reverse .reference-insight-media,.reference-insight-reverse .reference-insight-copy{order:initial}}