@media (max-width: 1100px) {
    :root {
        --section-inline: clamp(24px, 6vw, 72px);
    }
}


@media (max-width: 900px) {
    :root {
        --section-inline: clamp(20px, 5.5vw, 40px);
    }
}


@media (max-width: 640px) {
    :root {
        --section-inline: clamp(18px, 5.5vw, 28px);
    }
}


@media (max-width: 380px) {
    :root {
        --section-inline: 16px;
    }
}

@media (max-width: 1024px),
(pointer: coarse) {
    html.lenis {
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }
}

@supports not (overflow: clip) {
    body {
        overflow-x: hidden;
    }
}

@media (pointer: coarse),
(hover: none) {
    body {
        cursor: auto;
    }

    #cursor,
    #cursor-ring {
        display: none !important;
    }
}


@media (hover: hover) and (pointer: fine) {
    .nav-menu-toggle:hover {
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.06);
    }
}

@media (min-width: 901px) {

    /*
 * Spacing targets ~60px beside logo / ~50px between items on large desktop;
 * scales down with viewport so tablet-laptop rows don't overflow.
 */
    #sticky-nav .nav-inner {
        justify-content: center;
        gap: clamp(20px, 4.5vw, 60px);
    }

    #sticky-nav .nav-links--cluster {
        gap: clamp(14px, 3.75vw, 50px);
    }

    /* Asset is 60×60 — full size on desktop; size comes from CSS only */
    #sticky-nav .nav-logo-icon {
        width: 60px;
        height: 60px;
    }

    #sticky-nav .nav-links a {
        font-family: Archivo, var(--font-main), sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 20px;
        line-height: 22px;
        letter-spacing: 0;
        vertical-align: middle;
        color: var(--white);
        text-decoration: none;
        padding-block: 0;
        transition: opacity 0.2s ease, color 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        #sticky-nav .nav-links a:hover {
            opacity: 0.85;
        }
    }
}


@media (hover: hover) and (pointer: fine) {
    .nav-drawer-list a:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--white);
    }
}


@media (prefers-reduced-motion: reduce) {
    #sticky-nav {
        transition: transform 0.32s ease, background 0.3s ease;
    }

    .nav-toggle-lines span {
        transition-duration: 0.2s;
    }

    #nav-drawer {
        transition-duration: 0.2s;
        transition-timing-function: ease;
    }

    html.nav-drawer-open {
        scroll-behavior: auto;
    }

    .hero-wordmark {
        animation-duration: 0.01ms;
        animation-delay: 0s;
        animation-iteration-count: 1;
    }

    #process .sector-slide {
        position: relative;
        top: auto;
        min-height: 0;
    }

    #process>h2.process-eyebrow {
        position: relative;
        top: auto;
    }

    #process .process-stats-sticky {
        position: relative;
        top: auto;
        float: none;
    }

    .sectors-container .sector-slide:nth-child(n) {
        z-index: auto;
    }

    .sector-slide .sector-image {
        transform: none;
    }

    #work>.work-slide {
        position: relative;
        top: auto;
        min-height: min(420px, 85svh);
    }

    #work>.work-slide:nth-child(n) {
        z-index: auto;
    }

    #work>h2.work-eyebrow {
        position: relative;
        top: auto;
    }

    #partners>h2.partners-eyebrow {
        position: relative;
        top: auto;
    }

    #work .work-slide-bg img {
        transition-duration: 0.3s;
        transform: none;
    }
}

@media (max-width: 900px) {
    #sticky-nav .nav-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
    }

    #sticky-nav .nav-links--before,
    #sticky-nav .nav-links--after {
        display: none !important;
    }

    #sticky-nav .nav-menu-toggle {
        display: flex;
        flex: 0 0 auto;
        align-self: center;
    }

    #sticky-nav .nav-brand {
        margin: 0;
        flex: 0 0 auto;
    }
}


@media (max-width: 900px) {
    #footer {
        overflow-x: clip;
        overflow-y: visible;
        /* Content height only — avoids empty band between nav and credits */
        min-height: 0;
    }

    .footer-content {
        justify-content: flex-start;
        min-height: 0;
        box-sizing: border-box;
        padding-top: clamp(20px, 5vw, 40px);
        padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    }

    .footer-logo-wrap {
        margin-top: 0;
        margin-bottom: clamp(12px, 3vw, 20px);
    }

    .footer-social {
        margin-top: 0;
        margin-bottom: 16px;
    }

    .footer-nav {
        gap: 16px;
        margin-bottom: 12px;
    }

    .footer-nav a {
        font-size: clamp(13px, 2.2vw + 0.7rem, 18px);
    }

    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-block: 8px 6px;
        text-align: center;
    }

    .footer-bottom-left {
        justify-self: center;
        width: 100%;
        text-align: center;
    }

    .footer-bottom-center {
        justify-self: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        text-align: center;
    }

    .back-to-top {
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
    }
}


@media (max-width: 640px) {
    #footer {
        min-height: 0;
    }

    .footer-content {
        min-height: 0;
        padding-top: clamp(18px, 5vw, 36px);
        padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 14px));
    }

    .footer-logo-wrap {
        margin-top: 0;
        margin-bottom: clamp(12px, 3vw, 18px);
    }

    .footer-logo-wrap .footer-logo {
        width: 100%;
        max-width: 100%;
        object-fit: contain;
    }

    .footer-social {
        gap: 12px;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .footer-social a {
        width: 36px;
        height: 36px;
    }

    .footer-nav {
        gap: 12px;
        text-align: center;
        margin-bottom: 8px;
    }

    .footer-nav a {
        font-size: clamp(12px, 3.2vw + 0.55rem, 15px);
    }

    .footer-bottom {
        padding-block: 8px 4px;
        gap: 10px;
    }

    .footer-bottom-left {
        font-size: clamp(12px, 3.2vw + 0.55rem, 15px);
    }

    .footer-bottom-left strong {
        font-size: inherit;
    }

    .footer-bottom-center {
        font-size: clamp(11px, 2.9vw + 0.52rem, 14px);
    }
}


@media (max-width: 900px) {
    .hero-wordmark {
        letter-spacing: 0.35em;
        font-size: 22px;
        max-width: min(96vw, 100%);
        white-space: normal;
        line-height: 1.3;
        padding-inline:
            max(var(--section-inline), env(safe-area-inset-left, 0px)) max(var(--section-inline), env(safe-area-inset-right, 0px));
    }
}