/* =========================================================
   NEXUS RESEARCH CONSULTING
   RESPONSIVE DESIGN
   ========================================================= */


/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
   Maximum width: 1100px
   ========================================================= */

@media (max-width: 1100px) {

    /* -----------------------------------------
       GLOBAL
    ----------------------------------------- */

    .container {

        width: 92%;
    }


    section {

        padding: 80px 0;
    }


    /* -----------------------------------------
       NAVBAR
    ----------------------------------------- */

    .navbar .container {

        min-height: 76px;
    }


    .nav-links {

        gap: 20px;
    }


    .nav-links a {

        font-size: 0.9rem;
    }


    .nav-cta {

        padding: 9px 16px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    #hero {

        padding: 90px 0 80px;
    }


    .hero-grid {

        gap: 45px;
    }


    .hero-text h1 {

        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }


    /* -----------------------------------------
       WHY CHOOSE NEXUS
    ----------------------------------------- */

    .why-content {

        gap: 45px;
    }


    /* -----------------------------------------
       ABOUT
    ----------------------------------------- */

    .about-preview-grid,
    .about-grid {

        gap: 45px;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid {

        grid-template-columns: 1.4fr 1fr 1fr;

        gap: 35px;
    }

}


/* =========================================================
   TABLETS
   Maximum width: 900px
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------
       GLOBAL
    ----------------------------------------- */

    section {

        padding: 70px 0;
    }


    /* -----------------------------------------
       NAVBAR
    ----------------------------------------- */

    .navbar .container {

        min-height: 72px;
    }


    .logo img {

        height: 52px;
    }


    .nav-links {

        gap: 15px;
    }


    .nav-links a {

        font-size: 0.84rem;
    }


    .nav-cta {

        display: none;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero-grid {

        grid-template-columns: 1fr;

        gap: 10px;

        text-align: center;
    }


    .hero-text {

        max-width: 760px;

        margin: 0 auto;
    }


    .hero-label {

        justify-content: center;
    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;
    }


    .hero-buttons {

        justify-content: center;
    }


    .hero-trust {

        justify-content: center;
    }


    .hero-image {

        max-width: 560px;

        margin: 0 auto;
    }


    /* -----------------------------------------
       GRIDS
    ----------------------------------------- */

    .grid-4 {

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


    .grid-3 {

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


    /* -----------------------------------------
       WHY CHOOSE NEXUS
    ----------------------------------------- */

    .why-content {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .why-introduction {

        max-width: 750px;

        margin: 0 auto;

        text-align: center;
    }


    .why-introduction .section-eyebrow,
    .why-introduction .section-title,
    .why-introduction .section-subtitle {

        text-align: center;
    }


    .why-introduction .section-subtitle {

        margin-left: auto;

        margin-right: auto;
    }


    /* -----------------------------------------
       RESEARCH AREAS
    ----------------------------------------- */

    .research-areas-grid {

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


    /* -----------------------------------------
       EXPERTISE / METHODS
    ----------------------------------------- */

    .expertise-grid,
    .methods-grid,
    .standards-grid {

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


    /* -----------------------------------------
       PROCESS
    ----------------------------------------- */

    .process-grid {

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


    .process-step:not(:last-child)::after {

        display: none;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 30px;
    }


    /* -----------------------------------------
       ABOUT
    ----------------------------------------- */

    .about-preview-grid,
    .about-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .about-preview-content,
    .about-content {

        max-width: 760px;

        margin: 0 auto;
    }


    .about-preview-content .section-eyebrow,
    .about-preview-content .section-title,
    .about-preview-content .section-subtitle {

        text-align: center;
    }


    .about-preview-content .section-subtitle {

        margin-left: auto;

        margin-right: auto;
    }


    .about-preview-image {

        max-width: 600px;

        margin: 0 auto;
    }


    /* -----------------------------------------
       CONTACT PREVIEW
    ----------------------------------------- */

    .contact-preview-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .contact-preview-content {

        max-width: 760px;

        margin: 0 auto;

        text-align: center;
    }


    .contact-preview-content .section-eyebrow,
    .contact-preview-content .section-title,
    .contact-preview-content .section-subtitle {

        text-align: center;
    }


    .contact-preview-content .section-subtitle {

        margin-left: auto;

        margin-right: auto;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid {

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

        gap: 40px;
    }

}


/* =========================================================
   LARGE PHONES
   Maximum width: 700px
   ========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       GLOBAL
    ----------------------------------------- */

    .container {

        width: 90%;
    }


    section {

        padding: 60px 0;
    }


    /* -----------------------------------------
       NAVBAR
    ----------------------------------------- */

    .navbar .container {

        min-height: 68px;
    }


    .logo img {

        height: 70px;
    }


    /*
       We are temporarily allowing the links
       to wrap. A proper mobile menu will be
       introduced later with JavaScript.
    */

    .nav-links {

        gap: 10px 14px;

        flex-wrap: wrap;

        justify-content: flex-end;
    }


    .nav-links a {

        padding: 5px 0;

        font-size: 0.78rem;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    #hero {

        padding: 65px 0 60px;
    }


    .hero-grid {

        gap: 35px;
    }


    .hero-text h1 {

        font-size: clamp(2.2rem, 9vw, 3rem);

        letter-spacing: -0.7px;
    }


    .hero-description {

        font-size: 1rem;

        line-height: 1.75;
    }


    .hero-buttons {

        flex-direction: column;

        width: 100%;
    }


    .hero-buttons .btn {

        width: 100%;
    }


    .hero-trust {

        gap: 10px 15px;
    }


    .hero-trust span {

        font-size: 0.8rem;
    }


    /* -----------------------------------------
       SECTION TITLES
    ----------------------------------------- */

    .section-title {

        font-size: 2rem;
    }


    .section-subtitle {

        margin-bottom: 35px;

        font-size: 0.96rem;
    }


    .section-eyebrow {

        font-size: 0.72rem;

        letter-spacing: 1.5px;
    }


    /* -----------------------------------------
       GRIDS
    ----------------------------------------- */

    .grid-4,
    .grid-3,
    .grid-2 {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .card {

        padding: 27px;
    }


    /* -----------------------------------------
       STATISTICS
    ----------------------------------------- */

    #statistics .grid {

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

        gap: 12px;
    }


    #statistics .card {

        padding: 25px 15px;
    }


    #statistics .card h3 {

        font-size: 2rem;
    }


    #statistics .card p {

        font-size: 0.78rem;
    }


    /* -----------------------------------------
       WHY CHOOSE NEXUS
    ----------------------------------------- */

    .why-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       RESEARCH AREAS
    ----------------------------------------- */

    .research-areas-grid {

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

        gap: 12px;
    }


    .research-area {

        min-height: 75px;

        padding: 15px;

        font-size: 0.82rem;
    }


    /* -----------------------------------------
       EXPERTISE
    ----------------------------------------- */

    .expertise-grid,
    .methods-grid,
    .standards-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       PROCESS
    ----------------------------------------- */

    .process-grid {

        grid-template-columns: 1fr;
    }


    .process-step {

        padding: 27px;
    }


    /* -----------------------------------------
       SOFTWARE
    ----------------------------------------- */

    .software-grid {

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

        gap: 12px;
    }


    .software-card {

        min-height: 70px;

        font-size: 0.85rem;
    }


    /* -----------------------------------------
       TESTIMONIALS
    ----------------------------------------- */

    .testimonial-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       INSIGHTS
    ----------------------------------------- */

    .knowledge-grid,
    .knowledge-page-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    #cta {

        padding-top: 50px;

        padding-bottom: 70px;
    }


    .cta-box {

        padding: 50px 25px;

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


    .cta-box h2 {

        font-size: 1.8rem;
    }


    .cta-box p {

        font-size: 0.92rem;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .contact-information,
    .contact-form-wrapper {

        padding: 28px;
    }


    /* -----------------------------------------
       PAGE HERO
    ----------------------------------------- */

    .page-hero {

        padding: 65px 0;
    }


    .page-hero h1 {

        font-size: 2.2rem;
    }


    .page-hero p {

        font-size: 0.95rem;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    footer {

        padding-top: 55px;
    }


    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .footer-brand p {

        max-width: 100%;
    }


    .footer-bottom {

        margin-top: 10px;
    }

}


/* =========================================================
   SMALL PHONES
   Maximum width: 480px
   ========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------
       GLOBAL
    ----------------------------------------- */

    .container {

        width: 92%;
    }


    section {

        padding: 50px 0;
    }


    /* -----------------------------------------
       NAVBAR
    ----------------------------------------- */

    .navbar .container {

        flex-direction: column;

        align-items: center;

        gap: 8px;

        padding: 12px 0;
    }


    .logo img {

        height: 70px;
    }


    .nav-links {

        width: 100%;

        justify-content: center;

        gap: 5px 12px;
    }


    .nav-links a {

        font-size: 0.75rem;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    #hero {

        padding: 50px 0;
    }


    .hero-text h1 {

        font-size: 2.1rem;

        line-height: 1.18;
    }


    .hero-description {

        font-size: 0.94rem;
    }


    .hero-label {

        font-size: 0.68rem;

        letter-spacing: 1.2px;
    }


    .hero-label::before {

        width: 20px;
    }


    .hero-trust {

        flex-direction: column;

        align-items: center;

        gap: 8px;
    }


    /* -----------------------------------------
       SECTION HEADINGS
    ----------------------------------------- */

    .section-title {

        font-size: 1.8rem;
    }


    .section-subtitle {

        font-size: 0.9rem;
    }


    /* -----------------------------------------
       STATISTICS
    ----------------------------------------- */

    #statistics .card {

        padding: 22px 10px;
    }


    #statistics .card h3 {

        font-size: 1.75rem;
    }


    #statistics .card p {

        font-size: 0.72rem;
    }


    /* -----------------------------------------
       RESEARCH AREAS
    ----------------------------------------- */

    .research-areas-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       SOFTWARE
    ----------------------------------------- */

    .software-grid {

        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       BUTTONS
    ----------------------------------------- */

    .btn {

        width: 100%;

        min-height: 48px;

        padding: 12px 20px;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .card {

        padding: 24px;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .cta-box {

        padding: 42px 20px;
    }


    .cta-box h2 {

        font-size: 1.6rem;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .contact-information,
    .contact-form-wrapper {

        padding: 24px;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid {

        gap: 30px;
    }


    .footer-brand img {

        height: 50px;
    }


    .social-links {

        justify-content: center;
    }


    /* -----------------------------------------
       SCROLL TOP
    ----------------------------------------- */

    .scroll-top {

        right: 15px;

        bottom: 15px;

        width: 40px;

        height: 40px;
    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}

/* =====================================================
   HERO RESPONSIVE DESIGN
===================================================== */

@media (max-width: 900px) {

    .hero {
        padding: 70px 0 80px;
    }


    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    .hero-content {
        max-width: 100%;
        text-align: center;
    }


    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions {
        justify-content: center;
    }


    .hero-values {
        justify-content: center;
    }


    .hero-image {
        max-width: 650px;
        margin: 0 auto;
    }

}


@media (max-width: 600px) {

    .hero {
        padding: 55px 0 65px;
    }


    .hero-grid {
        gap: 35px;
    }


    .hero-content h1 {
        font-size: 2.35rem;
        letter-spacing: -0.8px;
    }


    .hero-text {
        font-size: 1rem;
        line-height: 1.7;
    }


    .hero-values {
        gap: 18px;
    }


    .hero-image-wrapper {
        border-radius: 18px;
    }


    .hero-image-wrapper::after {
        border-radius: 18px;
    }

}

/* =====================================================
   FOOTER RESPONSIVE DESIGN
===================================================== */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    .site-footer {
        margin-top: 60px;
        padding: 55px 0 25px;
    }


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


    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

}