@media (max-width: 768px) {

    /* HEADER */

    .header {
        min-height: 72px;
    }

    .header > .container {
        min-height: 72px;

        padding-inline: 1.25rem;
    }

    .navbar {
        position: fixed;

        top: 0;
        right: 0;

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

        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 5rem 1.5rem 2rem;

        background-color: rgba(8, 13, 18, 0.98);

        border-left: 1px solid var(--color-border);

        box-shadow: var(--shadow-lg);

        transform: translateX(100%);
        visibility: hidden;
        opacity: 0;

        transition:
            transform var(--transition-base),
            visibility var(--transition-base),
            opacity var(--transition-base);

        overflow-y: auto;
    }

    /*
       Add .is-open to .navbar from main.js
       when the mobile menu is opened.
    */

    .navbar.is-open {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }

    .menu-toggle {
        display: inline-flex;

        position: absolute;

        top: 50%;
        left: 1.25rem;

        transform: translateY(-50%);

        z-index: 1001;
    }

    .close-menu {
        display: inline-flex;

        position: absolute;

        top: 1rem;
        right: 1rem;
    }

    .navbar > .logo {
        position: absolute;

        top: 1rem;
        left: 1.5rem;

        width: 125px;

        justify-self: auto;
    }

    .navbar > .logo img {
        width: 100%;
    }

    .nav-menu {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 0;
    }

    .nav-left {
        justify-content: flex-start;

        margin-top: 4rem;
    }

    .nav-right {
        justify-content: flex-start;
        padding-left: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        width: 100%;

        justify-content: space-between;

        padding: 1rem 0;

        font-size: 0.6875rem;
        letter-spacing: 0.12em;

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

    
    .nav-link::after {
        display: none;
    }

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-toggle {
        justify-content: space-between;
    }

    .nav-dropdown-menu {
        position: static;

        width: 100%;

        margin: 0;
        padding: 0;

        background-color: rgba(255, 255, 255, 0.025);

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

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        display: none;
    }

    .nav-dropdown[open] .nav-dropdown-menu {
        display: block;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    .nav-dropdown-link {
        padding: 0.8rem 1rem;

        font-size: var(--fs-body-sm);
    }

    .nav-dropdown-link:hover {
        padding-left: 1.2rem;
    }

    .nav-cta {
        margin-top: 1.25rem;
    }

    .btn-primary {
        width: 100%;

        min-height: 3rem;

        padding: 0.85rem 1.25rem;

        justify-content: center;
    }


    /*HERO GLOBAL*/

    .hero-global {
        min-height: 560px;

        padding-block: 5rem 3rem;
    }

    .hero-global-container {
        width: 100%;
        padding-inline: 1.5rem;
    }

    .hero-global-content {
        width: 100%;
        max-width: 540px;

        padding-block: var(--space-8);
    }

    .hero-global .section-subtitle {
        justify-content: center;
        gap: var(--space-2);

        margin-bottom: var(--space-4);

        font-size: clamp(1.35rem, 4.5vw, 2rem);
        line-height: 1.15;
        letter-spacing: 0.08em;
    }

    .hero-global .section-subtitle::before {
        width: 22px;
        height: 2px;
    }

    .hero-global-title {
        margin-bottom: var(--space-4);

        font-size: clamp(3rem, 10vw, 4.5rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
    }

    .hero-global-description {
        max-width: 480px;

        margin: var(--space-3) auto var(--space-6);

        font-size: var(--fs-body-lg);
        line-height: 1.7;
    }

    .hero-global-overlay {
        background: linear-gradient(
            180deg,
            rgba(3, 6, 9, 0.72) 0%,
            rgba(3, 6, 9, 0.82) 50%,
            rgba(3, 6, 9, 0.92) 100%
        );

    }

    /*HERO HOME*/

    .hero {
        min-height: auto;
        min-height: 100svh;
        padding-block: 5rem 5.5rem;
    }

    .hero::before {
        inset: -5px;
        background-position: 48% center;
        background-attachment: scroll;
        filter: blur(1.5px);
    }

    .hero-overlay {
        background: linear-gradient(
            180deg,
            rgba(3, 6, 9, 0.68) 0%,
            rgba(3, 6, 9, 0.74) 38%,
            rgba(3, 6, 9, 0.88) 100%
        );
    }

    .hero-overlay::after {
        background: linear-gradient(
            180deg,
            rgba(3, 6, 9, 0.35) 0%,
            rgba(3, 6, 9, 0.08) 25%,
            rgba(3, 6, 9, 0.28) 65%,
            rgba(3, 6, 9, 0.78) 100%
        );
    }

    .hero > .container {
        padding-inline: 1.5rem;
    }

    .hero-content {
        max-width: 560px;
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }

    .hero-accent-line {
        width: 1.75rem;
        margin-bottom: var(--space-4);
    }

    .hero-title {
        max-width: 560px;
        margin-bottom: var(--space-4);
        font-size: clamp(2.5rem, 8vw, 3.75rem);
        line-height: 1.08;
        letter-spacing: 0;
        overflow-wrap: break-word;
    }

    .hero-description {
        max-width: 500px;
        margin-bottom: var(--space-6);
        font-size: var(--fs-body);
        line-height: 1.7;
    }

    .hero-cta {
        min-width: 11rem;
        margin-bottom: var(--space-8);
    }

    .hero-stats {
        max-width: 540px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: var(--space-2);
    }

    .hero-stat {
        min-height: 3.75rem;
        padding-inline: var(--space-2);
    }

    .hero-stat:not(:last-child)::after {
        height: 2rem;
    }

    .hero-stat-number {
        margin-bottom: var(--space-1);
        font-size: 1.15rem;
    }

    .hero-stat-number-wide {
        font-size: var(--fs-body);
    }

    .hero-stat-label {
        font-size: 0.5625rem;
        line-height: 1.5;
        letter-spacing: 0.07em;
        text-align: center;
    }

    .hero-scroll-indicator {
        bottom: 1rem;
        gap: var(--space-1);
    }

    /*SERVICE HOME*/

    .services-home {
        padding-block: 5rem;
    }

    .services-home-intro {
        max-width: 560px;
        margin-bottom: 2.5rem;
    }

    .services-home .section-subtitle {
        gap: 0.55rem;
        margin-bottom: 0.85rem;
        font-size: var(--fs-body-sm);
        letter-spacing: 0.1em;
    }

    .services-home .section-subtitle::before {
        width: 18px;
    }

    .services-home .section-title {
        margin-bottom: 1rem;
        font-size: clamp(1.9rem, 5.5vw, 2.4rem);
        line-height: 1.15;
        letter-spacing: 0;
    }

    .services-home .section-description {
        max-width: 520px;
        margin-bottom: 1.25rem;
        font-size: var(--fs-body);
        line-height: 1.7;
    }

    .services-home .section-link {
        gap: 0.6rem;
        font-size: var(--fs-body);
    }

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

    .service-card {
        height: 290px;
    }

    .service-card-content {
        padding: 1.1rem;
    }

    .service-card-heading {
        gap: 0.45rem;
        padding-right: 1rem;
    }

    .service-card-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .service-card-arrow {
        right: 0.75rem;
        bottom: 0.8rem;
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    /*ABOUT HOME*/

    .about-home {
        min-height: auto;
        background-position: 38% center;
        background-attachment: scroll;

        background-image:
            linear-gradient(
                180deg,
                rgba(3, 6, 9, 0.68) 0%,
                rgba(3, 6, 9, 0.84) 35%,
                rgba(3, 6, 9, 0.96) 100%
            ),
            url("/assets/images/quote-2.png");
    }

    .about-home-grid {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .about-home-content {
        padding: 5rem 1.5rem 2.5rem;
    }

    .about-home-content .section-subtitle {
        margin-bottom: var(--space-4);
        font-size: var(--fs-body-sm);
        line-height: 1.4;
        letter-spacing: 0.1em;
    }

    .about-home-content .section-description {
        max-width: 600px;
        margin-bottom: var(--space-6);
        font-size: var(--fs-body);
        line-height: 1.7;
    }

    .about-home-features {
        align-items: stretch;
        padding: 2rem 1.5rem 4rem;
    }

    .about-home-features::before {
        top: 0;
        bottom: auto;
        left: 1.5rem;
        right: 1.5rem;
        width: auto;
        height: 1px;
    }

    .about-features-list {
        gap: var(--space-6);
    }

    .about-feature {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: var(--space-4);
    }

    .about-feature-icon {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }

    .about-feature-title {
        margin-bottom: var(--space-2);
        font-size: var(--fs-body);
        line-height: 1.4;
    }

    .about-feature-description {
        font-size: var(--fs-body);
        line-height: 1.65;
    }





    /*RESULTS HOME*/

    .results-home {
        padding: var(--space-12) 0;
    }

    .results-container {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .results-comparison {
        height: clamp(320px, 65vw, 440px);
    }

    .results-content {
        max-width: 600px;
        align-items: flex-start;
    }

    .results-content .section-subtitle {
        margin-bottom: var(--space-4);
        font-size: 0.7rem;
        letter-spacing: 0.15em;
    }

    .results-content .section-link {
        gap: var(--space-2);
        font-size: 0.7rem;
    }

    .results-comparison-handle::before {
        width: 44px;
        height: 44px;
    }

    .results-comparison-arrow {
        font-size: 1.1rem;
    }

    .results-image-label {
        top: var(--space-4);
        min-width: 70px;
        height: 29px;
        padding: 0 var(--space-3);
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .results-image-before .results-image-label {
        left: var(--space-4);
    }

    .results-image-after .results-image-label {
        right: var(--space-4);
    }

    

    /*REVIEWS HOME*/


    .testimonials-home {
        padding: var(--space-10) 0;
    }

    .testimonials-home > .container {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }

    .testimonials-home-heading {
        max-width: 600px;
    }

    .testimonials-home-heading .section-subtitle {
        margin-bottom: var(--space-3);
        font-size: 0.7rem;
        letter-spacing: 0.14em;
    }

    .testimonials-home-content {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
        width: 100%;
    }

    .testimonial-card {
        min-height: 140px;
        padding: var(--space-2) var(--space-6);
    }

    .testimonial-quote-mark {
        font-size: 1.4rem;
    }

    .testimonial-quote {
        margin-bottom: var(--space-4);
        font-size: 0.78rem;
        line-height: 1.65;
    }

    .testimonial-author-name {
        font-size: 0.65rem;
    }

    .reviews-summary {
        min-height: 140px;
        padding: var(--space-2) 0 var(--space-2) var(--space-6);
    }

    .reviews-icon {
        margin-bottom: var(--space-2);
    }

    .reviews-content {
        margin-bottom: var(--space-3);
    }

    .reviews-title {
        font-size: 0.82rem;
    }

    .reviews-description {
        font-size: 0.72rem;
        line-height: 1.5;
    }

    .reviews-link {
        gap: 6px;
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }


    /*CONTACT HOME*/


    .contact-cta {
        min-height: 340px;

        background-position: 65% center;
        background-attachment: scroll;
    }

    .contact-cta-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 6, 9, 0.98) 0%,
                rgba(3, 6, 9, 0.92) 40%,
                rgba(3, 6, 9, 0.72) 70%,
                rgba(3, 6, 9, 0.45) 100%
            );
    }

    .contact-cta > .container {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
        padding-right: 25%;
    }

    .contact-cta .section-subtitle {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
        font-size: 0.7rem;
        letter-spacing: 0.11em;
        line-height: 1.4;
    }

    .final-cta-description {
        max-width: 440px;
        margin-bottom: var(--space-5);
        font-size: 0.85rem;
        line-height: 1.65;
    }

    .final-cta-button {
        margin-top: var(--space-2);
    }


    

    /* FOOTER */

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

        gap: var(--space-10);

        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }

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

    .footer-brand-description {
        max-width: 500px;
    }

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

    .footer-contact {
        display: flex;
        flex-direction: column;

        gap: var(--space-5);
    }

    .footer-social-link {
        margin-bottom: 0;
    }

    .footer-column-title {
        margin-top: 0;
    }

    .footer-cta {
        margin-top: var(--space-5);
    }

    .footer-bottom-container {
        min-height: auto;

        flex-direction: column;
        align-items: flex-start;

        padding-top: var(--space-5);
        padding-bottom: var(--space-5);

        gap: var(--space-3);
    }

    .footer-legal {
        gap: var(--space-5);

        flex-wrap: wrap;
    }

}