/* =========================================================
   21. RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    :root {
        --container-padding: 5vw;
    }

    .site-nav {
        gap: 1.25rem;
    }

    .display-heading {
        font-size: clamp(2.75rem, 7vw, 5rem);
    }

}

/* Tablet and smaller phones: hamburger so the menu never clips */
@media (max-width: 1024px) {

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1.25rem;
        padding: 5.5rem 1.75rem 2rem;
        background: rgba(5, 5, 7, 0.97);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition:
            opacity var(--duration-normal) var(--ease-standard),
            visibility var(--duration-normal);
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .site-nav a {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 6vw, 2.2rem);
        letter-spacing: -0.02em;
        color: var(--color-white);
    }

    .menu-toggle {
        position: relative;
        z-index: 4;
        display: block;
    }

    .motion-toggle__label {
        display: none;
    }

    /* Open-state bar transforms now live in
       css/25-menu-toggle-universal.css (hamburger → "+", sourced
       from experience.html). Removed here to avoid a specificity
       conflict — the [aria-expanded] attribute selector previously
       used here out-ranks the universal component's selectors. */
}


@media (max-width: 767px) {

    :root {
        --container-padding: 1.25rem;
        --section-padding: 5rem;
    }

    .section-intro,
    .section-heading {
        padding-inline: 0.15rem;
    }

    .section-intro h2,
    .section-heading h2,
    .display-heading {
        overflow-wrap: anywhere;
    }

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

    .hero {
        min-height: 100svh;
    }

    .hero__title {
        font-size: clamp(3.5rem, 17vw, 6rem);
    }

    .hero__orb {
        width: 110vw;
    }


    /* -----------------------------------------------------
       GENERAL
       ----------------------------------------------------- */

    .display-heading {
        font-size: clamp(2.6rem, 12vw, 4rem);
    }

    .section-heading {
        margin-bottom: 4rem;
    }

    .section-copy {
        font-size: 1rem;
    }

}