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

@media (max-width: 1100px) {

    :root {
        --container-width: 960px;
    }

    .desktop-nav {
        gap: 24px;
    }

    .services-grid,
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-us-grid,
    .eco-grid,
    .contact-preview-grid {
        gap: 48px;
    }

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

    .footer-column:last-child {
        grid-column: 2 / 4;
    }
}


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

@media (max-width: 900px) {

    .section {
        padding: 90px 0;
    }

    /* Navbar */

    .desktop-nav {
        display: none;
    }

    .nav-quote-btn {
        display: none;
    }

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

    /* Hero */

    .hero {
        min-height: 780px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(6, 6, 6, 0.94) 0%,
                rgba(6, 6, 6, 0.78) 65%,
                rgba(6, 6, 6, 0.48) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.12),
                rgba(0, 0, 0, 0.75)
            );
    }

    .hero-copy {
        max-width: 700px;
    }

    /* Why Us */

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .why-us-image {
        max-width: 650px;
    }

    .why-us-image img {
        aspect-ratio: 16 / 11;
    }

    /* Highlight Cards */

    .highlight-card {
        min-height: 460px;
    }

    /* Eco */

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

    .eco-image {
        max-width: 700px;
    }

    /* Contact */

    .contact-preview-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */

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

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-column:last-child {
        grid-column: auto;
    }
}


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

@media (max-width: 700px) {

    .container {
        width: min(
            calc(100% - 32px),
            var(--container-width)
        );
    }

    .section {
        padding: 74px 0;
    }

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

    .section-heading p,
    .section-intro {
        font-size: 0.98rem;
    }


    /* =========================
       TOP BAR
    ========================= */

    .top-bar-inner {
        justify-content: center;
        min-height: 34px;
    }

    .top-bar-message {
        display: none;
    }

    .top-bar-contact {
        width: 100%;
        justify-content: center;

        font-size: 0.7rem;
    }


    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        min-height: 70px;
    }

    .brand {
        gap: 9px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;

        border-radius: 10px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .brand-subtitle {
        font-size: 0.56rem;
    }


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

    .hero {
        min-height: calc(100svh - 104px);
        align-items: flex-end;
    }

    .hero-background-image {
        object-position: 60% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.22) 0%,
                rgba(5, 5, 5, 0.64) 34%,
                rgba(5, 5, 5, 0.97) 78%,
                #080808 100%
            );
    }

    .hero-content {
        padding-top: 120px;
        padding-bottom: 68px;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 12vw, 4.4rem);
        letter-spacing: -0.04em;
    }

    .hero-description {
        margin-top: 20px;

        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        margin-top: 28px;
    }

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

    .hero-trust-row {
        display: grid;
        gap: 11px;

        margin-top: 28px;
    }


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

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

    .service-card {
        min-height: 275px;
    }


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

    .why-us-grid {
        gap: 52px;
    }

    .why-us-image img {
        aspect-ratio: 4 / 3;
    }

    .why-us-image::after {
        inset: 10px -8px -10px 8px;
    }

    .feature-list {
        gap: 24px;
    }

    .feature-item {
        grid-template-columns: 48px 1fr;
        gap: 14px;
    }

    .feature-number {
        width: 42px;
        height: 42px;
    }


    /* =========================
       PROCESS
    ========================= */

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

    .process-card {
        min-height: 210px;
    }


    /* =========================
       SERVICE HIGHLIGHTS
    ========================= */

    .service-highlight {
        padding-top: 0;
    }

    .service-highlight-grid {
        grid-template-columns: 1fr;
    }

    .highlight-card {
        min-height: 430px;
    }

    .highlight-content {
        inset: auto 24px 26px 24px;
    }

    .highlight-content h2 {
        font-size: 2.2rem;
    }


    /* =========================
       ECO
    ========================= */

    .eco-grid {
        gap: 42px;
    }

    .eco-image img {
        aspect-ratio: 4 / 3;
    }


    /* =========================
       QUOTE CTA
    ========================= */

    .quote-cta {
        padding: 82px 0;
    }

    .quote-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .quote-cta-actions .btn {
        width: 100%;
    }


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

    .contact-preview-grid {
        gap: 42px;
    }

    .contact-detail-card {
        padding: 20px;
    }

    .contact-detail-card strong {
        overflow-wrap: anywhere;
    }


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

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 38px;

        padding-top: 58px;
        padding-bottom: 42px;
    }

    .footer-brand,
    .footer-column:last-child {
        grid-column: auto;
    }

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

        padding-bottom: 90px;
    }


    /* =========================
       FLOATING MOBILE CTA
    ========================= */

    .mobile-floating-quote {
        display: flex;
    }
}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 28px);
    }

    .top-bar-contact {
        gap: 8px;
    }

    .top-bar-contact a:first-child {
        display: none;
    }

    .top-bar-divider {
        display: none;
    }

    .brand-logo {
        width: 41px;
        height: 41px;
    }

    .brand-name {
        font-size: 0.92rem;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 13vw, 3.5rem);
    }

    .eyebrow {
        font-size: 0.67rem;
        letter-spacing: 0.14em;
    }

    .eyebrow::before {
        width: 20px;
    }

    .service-card {
        padding: 24px;
    }

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

    .highlight-content h2 {
        font-size: 1.95rem;
    }
}


/* =========================
   VERY SMALL PHONES
========================= */

@media (max-width: 360px) {

    .brand-text {
        display: none;
    }

    .hero h1 {
        font-size: 2.35rem;
    }

    .top-bar-contact {
        font-size: 0.66rem;
    }
}

/* =========================
   SERVICES PAGE RESPONSIVE
========================= */

@media (max-width: 900px) {

    .page-hero {
        min-height: 560px;
    }

    .detailed-service-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .detailed-service-grid.reverse
    .detailed-service-image,
    .detailed-service-grid.reverse
    .detailed-service-content {
        order: initial;
    }

    .detailed-service-image {
        max-width: 720px;
    }

    .eco-service-banner-inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .eco-service-banner-inner
    .btn {
        justify-self: start;
    }
}


@media (max-width: 700px) {

    .page-hero {
        min-height:
            calc(100svh - 104px);

        align-items: flex-end;
    }

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

    .page-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 5, 5, 0.25) 0%,
                rgba(5, 5, 5, 0.64) 36%,
                rgba(5, 5, 5, 0.96) 78%,
                #080808 100%
            );
    }

    .page-hero-content {
        padding-top: 130px;
        padding-bottom: 72px;
    }

    .page-hero h1 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4.2rem
            );
    }

    .page-hero-copy > p {
        font-size: 1rem;
    }

    .detailed-service-grid {
        gap: 40px;
    }

    .detailed-service-image img {
        aspect-ratio: 4 / 3;
    }

    .detailed-service-image::after {
        inset:
            9px
            -7px
            -9px
            7px;
    }

    .service-check-list {
        grid-template-columns: 1fr;
    }

    .eco-service-banner-inner {
        padding: 30px 24px;
    }

    .eco-service-banner-inner
    .btn {
        width: 100%;
    }

    .custom-service-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .custom-service-actions
    .btn {
        width: 100%;
    }
}

/* =========================
   ABOUT PAGE RESPONSIVE
========================= */

@media (max-width: 1000px) {

    .values-grid,
    .experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .about-story-grid,
    .brand-promise-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-story-image {
        max-width: 700px;
    }

    .about-story-image img {
        aspect-ratio: 16 / 11;
    }

    .brand-promise-image {
        max-width: 700px;
    }

    .new-company-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .new-company-card .btn {
        justify-self: start;
    }
}


@media (max-width: 700px) {

    .values-grid,
    .experience-grid {
        grid-template-columns: 1fr;
    }

    .value-card,
    .experience-card {
        min-height: 230px;
    }

    .about-story-image img,
    .brand-promise-image img {
        aspect-ratio: 4 / 3;
    }

    .about-story-image::after {
        inset: 9px -7px -9px 7px;
    }

    .new-company-card {
        padding: 30px 24px;
    }

    .new-company-card .btn {
        width: 100%;
    }
}

/* =========================
   QUOTE PAGE RESPONSIVE
========================= */

@media (max-width: 1000px) {

    .quote-layout {
        grid-template-columns: 1fr;
    }

    .quote-sidebar {
        position: static;

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

    .quote-sidebar-note {
        grid-column: 1 / -1;
    }
}


@media (max-width: 700px) {

    .quote-page-hero {
        padding: 78px 0 68px;
    }

    .quote-page-hero h1 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4.1rem
            );
    }

    .quote-page-hero p {
        font-size: 0.98rem;
    }

    .quote-hero-trust {
        display: grid;

        gap: 9px;
    }

    .quote-layout {
        gap: 30px;
    }

    .form-section {
        padding: 30px 22px;
    }

    .form-section-heading {
        align-items: flex-start;

        margin-bottom: 28px;
    }

    .form-step {
        width: 42px;
        height: 42px;
    }

    .form-grid.two-columns {
        grid-template-columns: 1fr;
    }

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

    .form-consent {
        padding: 26px 22px;
    }

    .form-status {
        margin:
            22px
            22px
            0;
    }

    .quote-submit-area {
        padding:
            28px
            22px
            32px;
    }

    .quote-sidebar {
        grid-template-columns: 1fr;
    }

    .quote-sidebar-note {
        grid-column: auto;
    }
}


@media (max-width: 420px) {

    .form-section-heading {
        gap: 13px;
    }

    .form-section-heading h2 {
        font-size: 1.15rem;
    }

    .choice-card-content {
        min-height: 80px;

        padding: 14px;
    }

    .quote-sidebar-card {
        padding: 23px;
    }
}

/* =========================
   CONTACT PAGE RESPONSIVE
========================= */

@media (max-width: 900px) {

    .contact-page-grid {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    .contact-info-column {
        max-width: 720px;
    }

    .contact-methods {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 700px) {

    .contact-page-hero {
        padding: 78px 0 68px;
    }

    .contact-page-hero h1 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4.1rem
            );
    }

    .contact-page-hero p {
        font-size: 0.98rem;
    }

    .contact-page-grid {
        gap: 38px;
    }

    .contact-methods {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 30px 22px;

        gap: 21px;
    }

    .contact-form-heading {
        padding-bottom: 23px;
    }

    .contact-quote-card {
        padding: 25px 22px;
    }
}


@media (max-width: 420px) {

    .contact-method-card {
        padding: 20px;
    }

    .contact-method-card::after {
        right: 18px;
    }

    .contact-form {
        padding: 26px 18px;
    }
}
/* =========================
   LEGAL PAGE RESPONSIVE
========================= */

@media (max-width: 900px) {

    .legal-layout {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .legal-sidebar {
        position: static;

        max-width: 720px;
    }

    .legal-contact-box {
        max-width: 450px;
    }
}


@media (max-width: 700px) {

    .legal-page-hero {
        padding: 78px 0 68px;
    }

    .legal-page-hero h1 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4.1rem
            );
    }

    .legal-page-hero p {
        font-size: 0.98rem;
    }

    .legal-content > section {
        padding: 30px 22px;
    }

    .legal-content h2 {
        font-size: 1.2rem;
    }

    .legal-contact-box {
        max-width: none;
    }
}


@media (max-width: 420px) {

    .legal-content > section {
        padding: 26px 18px;
    }

    .legal-company-details {
        padding: 18px;
    }
}

/* =========================
   SUCCESS PAGE RESPONSIVE
========================= */

@media (max-width: 700px) {

    .success-page {
        min-height: auto;

        padding: 82px 0 90px;
    }

    .success-icon {
        width: 66px;
        height: 66px;

        font-size: 1.7rem;
    }

    .success-page h1 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4.1rem
            );
    }

    .success-page-inner > p {
        font-size: 0.98rem;
    }

    .success-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

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

    .success-contact {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================
   BOOKING CONFIRMATION
   RESPONSIVE
========================= */

@media (max-width: 700px) {

    .booking-confirmation-header {
        padding: 16px 18px;
    }

    .booking-confirmation-content {
        padding: 23px 20px;
    }

    .booking-help-note {
        padding: 18px;
    }
}


@media (max-width: 420px) {

    .booking-confirmation-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

    .booking-step {
        grid-template-columns:
            34px minmax(0, 1fr);

        gap: 12px;
    }

    .booking-step > span {
        width: 32px;
        height: 32px;
    }
}

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

@media (max-width: 700px) {

    .error-page {
        min-height: calc(100vh - 70px);

        padding: 80px 0;
    }

    .error-number {
        margin-bottom: -10px;

        font-size: clamp(8rem, 42vw, 12rem);
    }

    .error-page h1 {
        font-size:
            clamp(
                2.6rem,
                12vw,
                4rem
            );
    }

    .error-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

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

}