/* =========================================================
   LARGE TABLETS
========================================================== */

@media (max-width: 1100px) {

    :root {
        --container-padding: 24px;
    }


    /* HEADER */

    .desktop-nav {
        gap: 20px;
    }

    .desktop-nav a {
        font-size: 0.78rem;
    }

    .brand-logo {
        width: 175px;
    }


    /* HERO */

    .hero {
        min-height: 680px;
    }

    .hero-content {
        width: 52%;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.98) 0%,
                rgba(255,255,255,0.94) 38%,
                rgba(255,255,255,0.66) 58%,
                rgba(255,255,255,0.05) 82%
            );
    }


    /* IMPACT */

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

    .impact-results {
        order: 1;
    }

    .ecosystem-summary {
        order: 2;
    }


    /* CLIENTS */

    .clients-container {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .client-logos {
        justify-content: center;
        flex-wrap: wrap;
    }

}



/* =========================================================
   TABLETS / MOBILE NAV
========================================================== */

@media (max-width: 850px) {

    /* HEADER */

    .site-header {
        padding-top: 16px;
    }

    .desktop-nav,
    .header-cta {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }


    /* MOBILE NAV */

    .mobile-nav {
        position: fixed;

        top: 0;
        right: 0;

        width: min(360px, 90vw);
        height: 100vh;

        z-index: calc(var(--z-header) - 1);

        display: flex;
        flex-direction: column;

        gap: 8px;

        padding:
            100px
            28px
            30px;

        background:
            rgba(255,255,255,0.98);

        backdrop-filter: blur(16px);

        box-shadow:
            -12px 0 40px rgba(0,0,0,0.12);

        transform: translateX(105%);

        transition:
            transform var(--transition-normal);
    }

    .mobile-nav.open {
        transform: translateX(0);
    }

    .mobile-nav a {
        padding:
            14px
            0;

        color: var(--text-primary);

        font-weight: var(--font-weight-semibold);

        border-bottom:
            1px solid var(--border-light);
    }

    .mobile-nav .btn {
        margin-top: 18px;

        border-bottom: 0;
    }


    /* HERO */

    .hero {
        min-height: 820px;
    }

    .hero-background img {
        object-position: 66% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.99) 0%,
                rgba(255,255,255,0.97) 48%,
                rgba(255,255,255,0.55) 70%,
                rgba(255,255,255,0.02) 100%
            );
    }

    .hero-container {
        align-items: flex-start;

        padding-top: 115px;
        padding-bottom: 40px;
    }

    .hero-content {
        width: 100%;
        max-width: 620px;
    }

    .hero-content h1 {
        max-width: 580px;

        font-size:
            clamp(
                3rem,
                8vw,
                4.6rem
            );
    }

    .hero-description {
        max-width: 540px;
    }

    .hero-benefits {
        margin-top: 340px;

        color: var(--white);
    }

}



/* =========================================================
   MOBILE
========================================================== */

@media (max-width: 620px) {

    :root {
        --container-padding: 18px;
        --section-padding-mobile: 54px;
    }


    /* HEADER */

    .brand-logo {
        width: 150px;
    }


    /* HERO */

    .hero {
        min-height: 960px;
    }

    .hero-container {
        padding-top: 102px;
    }

    .hero-content .eyebrow {
        margin-bottom: 12px;

        font-size: 0.68rem;
    }

    .hero-content h1 {
        margin-bottom: 18px;

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.6rem
            );

        line-height: 1.02;
    }

    .hero-description {
        max-width: 100%;

        margin-bottom: 24px;

        font-size: 0.94rem;
    }

    .hero-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 0;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-benefits {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 370px;
    }

    .hero-benefit {
        gap: 10px;
    }

    .hero-benefit img {
        width: auto;
        height: 50px;
    }

    .hero-benefit p {
        color: var(--white);

        font-size: 0.82rem;
    }


    /* IMPACT */

    .impact-inner {
        padding:
            34px
            20px;
    }

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

        gap: 12px;
    }

    .stat strong {
        font-size: 1.4rem;
    }

    .stat span:last-child {
        font-size: 0.67rem;
    }


    /* ECOSYSTEM SUMMARY */

    .ecosystem-summary {
        grid-template-columns: 1fr;

        padding:
            30px
            20px
            0;
    }

    .ecosystem-products {
        margin-top: 10px;
    }

    .ecosystem-products img {
        max-height: 220px;
    }


    /* CLIENTS */

    .clients-container {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .client-logos {
        gap:
            18px
            22px;
    }

    .client-logos img {
        max-width: 60px;
        max-height: 26px;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .brand-logo {
        width: 138px;
    }

    .hero {
        min-height: 930px;
    }

    .hero-benefits {
        margin-top: 345px;
    }

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

}


/* =========================================================
   SOLUTIONS + BENEFITS RESPONSIVE
========================================================== */

@media (max-width: 1000px) {

    .solution-card {
        min-height: 330px;
    }

    .solution-card-content {
        width: 48%;

        padding:
            28px
            24px;
    }


    .benefits .container {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .section-heading {
        max-width: none;
    }

    .benefits-grid {
        grid-template-columns:
            repeat(5, 1fr);
    }

}


@media (max-width: 760px) {

    .solutions {
        padding-top: 34px;
    }

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

    .solution-card {
        min-height: 420px;
    }

    .solution-card-content {
        top: auto;
        bottom: 0;

        width: 100%;
        height: auto;

        min-height: 48%;

        justify-content: flex-start;

        padding:
            26px
            24px;

        background:
            linear-gradient(
                180deg,
                rgba(7, 30, 25, 0.90),
                rgba(7, 30, 25, 0.99)
            );
    }

    .solution-icon {
        width: 38px;
        height: 38px;

        margin-bottom: 14px;
    }

    .solution-card-content h2 {
        margin-bottom: 10px;

        font-size: 1.8rem;
    }

    .solution-card-content p {
        margin-bottom: 14px;
    }


    .benefits {
        padding:
            22px
            0
            54px;
    }

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

        gap:
            30px
            18px;
    }

    .benefit-item:not(:last-child)::after {
        display: none;
    }

}


@media (max-width: 430px) {

    .solution-card {
        min-height: 390px;
    }

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

    .benefit-item:last-child {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   SOLAR SYSTEM + PROJECTS RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .solar-system-card {
        grid-template-columns:
            1fr
            1fr;

        padding:
            42px
            38px;
    }

    .solar-system-features {
        grid-column:
            1 / -1;

        display: grid;

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

        gap: 22px;

        margin-top: 10px;
    }

    .solar-system-features article {
        grid-template-columns: 1fr;

        gap: 10px;
    }


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

    .projects-intro {
        max-width: 620px;
    }

}


@media (max-width: 820px) {

    .solar-system-card {
        grid-template-columns: 1fr;

        gap: 24px;

        padding:
            36px
            28px;
    }

    .solar-system-copy {
        max-width: 560px;
    }

    .solar-system-product {
        min-height: 280px;
    }

    .solar-system-product img {
        max-height: 320px;
    }

    .solar-system-features {
        grid-column: auto;

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


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

    .project-card:last-child {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 560px) {

    .solar-system {
        padding:
            28px
            0
            54px;
    }

    .solar-system-card {
        padding:
            30px
            22px;

        border-radius: var(--radius-md);
    }

    .solar-system-copy h2 {
        font-size:
            clamp(
                2.15rem,
                11vw,
                3rem
            );
    }

    .solar-system-product {
        min-height: 220px;
    }

    .solar-system-product img {
        max-height: 260px;
    }

    .solar-system-features {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .solar-system-features article {
        grid-template-columns:
            40px 1fr;
    }


    .projects {
        padding-bottom: 54px;
    }

    .project-cards {
        grid-template-columns: 1fr;
    }

    .project-card:last-child {
        grid-column: auto;
    }

    .project-card > img {
        height: 210px;
    }

}


/* =========================================================
   CREV ECOSYSTEM + CTA + FOOTER RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .crev-ecosystem-grid {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .crev-ecosystem-copy {
        max-width: 650px;
    }

}


@media (max-width: 820px) {

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

    .brand-card-solar {
        grid-column:
            1 / -1;
    }


    .final-cta {
        min-height: 460px;
    }

    .final-cta-content {
        flex-direction: column;
        align-items: flex-start;

        gap: 28px;
    }

}


@media (max-width: 560px) {

    .crev-ecosystem {
        padding:
            54px
            0;
    }

    .brand-family {
        grid-template-columns: 1fr;
    }

    .brand-card-solar {
        grid-column: auto;
    }

    .brand-card {
        min-height: 220px;
    }


    .final-cta {
        min-height: 520px;
    }

    .final-cta-background img {
        object-position: 65% center;
    }

    .final-cta-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(6, 59, 46, 0.92) 0%,
                rgba(6, 59, 46, 0.82) 50%,
                rgba(6, 59, 46, 0.50) 100%
            );
    }

    .final-cta-content h2 {
        font-size:
            clamp(
                2.3rem,
                11vw,
                3.4rem
            );
    }

    .final-cta-content .btn {
        width: 100%;
    }


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

        gap: 18px;
    }

}