/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .desktop-nav {

        gap:
            18px;

    }


    .desktop-nav a {

        font-size:
            10px;

    }


    .hero-product {

        width:
            52%;

        right:
            -8%;

    }


    .hero h1 {

        font-size:
            clamp(52px, 7vw, 78px);

    }

}


@media (max-width: 800px) {


    :root {

        --header-height:
            76px;

    }


    .container {

        width:
            min(
                calc(100% - 36px),
                var(--container)
            );

    }


    /* HEADER */

    .desktop-nav,
    .header-cta {

        display:
            none;

    }


    .menu-toggle {

        display:
            block;

    }


    .mobile-menu {

        position:
            fixed;

        top:
            76px;

        left:
            18px;

        right:
            18px;

        padding:
            18px;

        display:
            flex;

        flex-direction:
            column;

        gap:
            4px;

        background:
            rgba(8,11,10,.96);

        border:
            1px solid
            rgba(255,255,255,.14);

        border-radius:
            8px;

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-10px);

        transition:
            .3s ease;

    }


    .mobile-menu.open {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

    }


    .mobile-menu a {

        padding:
            14px;

        color:
            rgba(255,255,255,.85);

        font-size:
            13px;

        font-weight:
            600;

    }


    .mobile-menu .mobile-cta {

        margin-top:
            8px;

        background:
            var(--red);

        border-radius:
            5px;

        color:
            #fff;

    }


    /* HERO */

    .hero {

        min-height:
            100svh;

    }


    .hero-container {

        align-items:
            flex-start;

        padding-top:
            145px;

        padding-bottom:
            125px;

    }


    .hero-content {

        width:
            100%;

        padding:
            0;

        position:
            relative;

        z-index:
            8;

    }


    .hero-background img {

        object-position:
            63% center;

    }


    .hero-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(5,10,9,.58) 0%,
                rgba(5,10,9,.72) 42%,
                rgba(5,10,9,.94) 100%
            );

    }


    .hero-eyebrow {

        font-size:
            9px;

        padding:
            9px 12px;

        margin-bottom:
            18px;

    }


    .hero h1 {

        font-size:
            clamp(48px, 13vw, 68px);

        line-height:
            .94;

        letter-spacing:
            -.06em;

    }


    .hero-description {

        max-width:
            100%;

        margin-top:
            22px;

        font-size:
            14px;

        line-height:
            1.65;

    }


    .hero-actions {

        margin-top:
            26px;

        flex-direction:
            column;

        width:
            100%;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    /* PRODUCT */

    .hero-product {

        width:
            92%;

        right:
            -18%;

        bottom:
            82px;

        opacity:
            .42;

        z-index:
            2;

    }


    /* BENEFITS */

    .hero-benefits {

        position:
            absolute;

        bottom:
            0;

        left:
            0;

        width:
            100%;

        grid-template-columns:
            repeat(2, 1fr);

    }


    .hero-benefit {

        min-height:
            62px;

        padding:
            8px 12px;

        gap:
            9px;

    }


    .hero-benefit:nth-child(2) {

        border-right:
            0;

    }


    .hero-benefit:nth-child(3),
    .hero-benefit:nth-child(4) {

        display:
            none;

    }


    .benefit-icon {

        width:
            30px;

        height:
            30px;

        font-size:
            13px;

    }


    .hero-benefit strong {

        font-size:
            11px;

    }


    .hero-benefit small {

        font-size:
            9px;

    }

}


@media (max-width: 480px) {

    .container {

        width:
            calc(100% - 30px);

    }


    .hero-container {

        padding-top:
            130px;

    }


    .brand-logo img {

        width:
            100px;

    }


    .hero h1 {

        font-size:
            clamp(43px, 13vw, 58px);

    }


    .hero-description {

        font-size:
            13px;

    }


    .hero-product {

        right:
            -32%;

        bottom:
            75px;

        width:
            100%;

    }

}
/* =========================================================
   ROOF CONSTRUCTION RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .roof-construction {

        padding: 80px 0;

    }


    .construction-container {

        grid-template-columns:
            1fr;

        min-height: auto;

    }


    .construction-content {

        padding-right: 0;

    }


    .construction-content h2 {

        font-size:
            clamp(42px, 9vw, 58px);

    }


    .construction-content p {

        max-width:
            650px;

    }


    .construction-visual {

        margin-top: 55px;

        min-height: 480px;

    }

}


@media (max-width: 600px) {

    .roof-construction {

        padding: 70px 0;

    }


    .construction-content h2 {

        font-size:
            43px;

        line-height:
            .98;

    }


    .construction-content p {

        font-size:
            13px;

        line-height:
            1.7;

    }


    .construction-visual {

        min-height:
            390px;

        margin-top:
            35px;

    }


}
@media (max-width: 900px) {

    .construction-visual {

        min-height: auto;

        margin-top: 45px;

    }

    .construction-image-wrap {

        max-width: 620px;

    }

}


@media (max-width: 600px) {

    .construction-visual {

        margin-top: 35px;

    }

    .construction-image-wrap {

        width: 108%;

        max-width: none;

        margin-left: -4%;

    }

    .construction-image {

        width: 100%;

    }

}
/* =========================================================
   WHY CHOOSE — RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .roof-benefits-container {

        grid-template-columns:
            220px 1fr;

        gap: 30px;

    }


    .benefits-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .benefit-card {

        min-height: 220px;

    }

}


@media (max-width: 760px) {

    .roof-benefits {

        padding: 65px 0;

    }


    .roof-benefits-container {

        grid-template-columns:
            1fr;

        gap: 38px;

    }


    .benefits-intro {

        text-align: left;

    }


    .benefits-intro h2 {

        font-size: 38px;

    }


    .benefits-grid {

        grid-template-columns:
            repeat(2, 1fr);

        border-left: 1px solid
            rgba(255,255,255,.11);

        border-top: 1px solid
            rgba(255,255,255,.11);

    }


    .benefit-card {

        min-height: 220px;

        border-bottom:
            1px solid rgba(255,255,255,.11);

    }


    .benefit-card:last-child {

        grid-column: 1 / -1;

    }

}


@media (max-width: 480px) {

    .roof-benefits {

        padding: 58px 0;

    }


    .benefits-intro h2 {

        font-size: 35px;

    }


    .benefits-grid {

        grid-template-columns:
            1fr;

    }


    .benefit-card {

        min-height: auto;

        padding: 25px 20px 27px;

    }


    .benefit-card:last-child {

        grid-column: auto;

    }


    .benefit-icon {

        width: 42px;

        height: 42px;

        margin-bottom: 20px;

    }


    .benefit-card h3 {

        font-size: 15px;

    }


    .benefit-card p {

        max-width: 280px;

        font-size: 11px;

    }

}

/* =========================================================
   MOBILE HERO FIX — AQUAIZOL
========================================================= */

@media (max-width: 767px) {

    /* Prevent horizontal scrolling */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

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

    /* Hero section */
    .hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        overflow: hidden;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* SEO H1 */
    .hero-seo-title {
        max-width: 100%;
        font-size: 18px;
        line-height: 1.4;
        letter-spacing: -.02em;
        overflow-wrap: break-word;
        margin-bottom: 22px;
    }

    /* Main visual heading */
    .hero-main-heading {
        max-width: 100%;
        font-size: clamp(42px, 11vw, 58px);
        line-height: .98;
        letter-spacing: -.055em;
        overflow-wrap: normal;
    }

    .hero-main-heading span,
    .hero-main-heading strong {
        max-width: 100%;
    }

    /* Product category */
    .hero-eyebrow {
        max-width: 100%;
        margin-top: 18px;
        padding: 10px 12px;
        font-size: 9px;
        line-height: 1.5;
        letter-spacing: .08em;
        white-space: normal;
    }

    /* Description */
    .hero-description {
        max-width: 100%;
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.65;
    }

    /* CTA buttons */
    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
    }

    .hero-actions .btn {
        min-height: 48px;
        padding: 0 16px;
        gap: 10px;
        font-size: 12px;
    }

    /* Product image: keep it behind content */
    .hero-product {
        right: -22%;
        bottom: 90px;
        width: 72%;
        opacity: .32;
        z-index: 1;
    }

    .hero-product-glow {
        display: none;
    }

    /* Keep hero text and buttons above product image */
    .hero-content {
        z-index: 4;
    }

    /* Benefits: two columns on mobile */
    .hero-benefits {
        position: relative;
        z-index: 6;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        margin-top: 32px;
    }

    .hero-benefit {
        min-width: 0;
        min-height: 76px;
        gap: 8px;
        padding: 12px 8px;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .hero-benefit:first-child {
        border-left: 1px solid rgba(255,255,255,.14);
    }

    .benefit-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .hero-benefit strong {
        font-size: 11px;
        line-height: 1.3;
    }

    .hero-benefit small {
        font-size: 9px;
        line-height: 1.4;
    }

}


/* Narrow mobile screens */
@media (max-width: 380px) {

    .hero-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-main-heading {
        font-size: 40px;
    }

    .hero-actions .btn {
        padding: 0 12px;
        font-size: 11px;
    }

}