/* Mobile refinements — max-width: 768px only */

@media (max-width: 768px) {
    /* Hero — stacked flow: content first, tunnel after CTA */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: auto;
        padding-bottom: var(--space-xl);
    }

    .hero__content-wrap {
        order: 1;
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .hero__content {
        padding-top: var(--space-sm);
        padding-bottom: 0;
    }

    .hero__eyebrow {
        margin-bottom: var(--space-sm);
    }

    .hero__title {
        margin-bottom: var(--space-sm);
    }

    .hero__lead {
        margin-bottom: var(--space-xs);
        font-size: 1rem;
    }

    .hero__highlight {
        margin-bottom: var(--space-md);
        font-size: 0.9375rem;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .hero__actions .btn--hero-secondary {
        display: none;
    }

    .hero__actions .btn--hero {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 1.0625rem 1.25rem;
    }

    /* Tunnel — in document flow below CTA, no overlap with copy */
    .hero__visual-wrap {
        order: 2;
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        width: min(100%, 360px);
        height: clamp(260px, 72vw, 340px);
        max-width: min(92vw, 360px);
        max-height: 340px;
        min-height: 260px;
        margin: var(--space-lg) auto 0;
        opacity: 1;
        z-index: 1;
        flex-shrink: 0;
        overflow: hidden;
    }

    .tunnel-visual__ring--l5,
    .tunnel-visual__particle:nth-child(n+4) {
        display: none;
    }

    .tunnel-visual__rig {
        width: 78%;
        height: 78%;
    }

    .tunnel-visual__logo-wrap {
        width: min(100%, 12.5rem);
    }

    .tunnel-visual__focal {
        transform: translate(-50%, -50%) translateZ(-130px)
            translate(calc(var(--px) * 0.06), calc(var(--py) * 0.04));
    }

    /* Auto section */
    .auto-world {
        gap: var(--space-sm);
    }

    .btn--auto-section {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .auto-portal__logo {
        width: min(100%, 13.5rem);
    }

    /* Vision */
    .vision__header {
        margin-bottom: var(--space-md);
    }

    .vision__grid {
        gap: var(--space-sm);
    }

    .vision__item {
        padding: var(--space-md);
    }

    /* Brand pillars — tighter vertical rhythm */
    .brand-pillars {
        gap: calc(var(--space-lg) * 0.85);
    }

    .brand-pillar {
        padding: calc(var(--space-md) * 0.9) 0 calc(var(--space-md) * 0.9) var(--space-md);
    }

    .brand-statement {
        margin-bottom: calc(var(--space-xl) * 0.8);
        padding-bottom: calc(var(--space-lg) * 0.85);
    }

    /* Brand closure */
    .section--brand-closure {
        padding-block: calc(var(--space-lg) * 0.85);
        padding-bottom: calc(var(--space-xl) * 0.9);
    }

    .brand-closure {
        padding-block: calc(var(--space-sm) * 0.85);
    }

    .brand-closure__title {
        font-size: clamp(1.75rem, 8.5vw, 2.5rem);
        padding-inline: 0.25rem;
    }

    .brand-closure__text {
        padding-inline: 0.5rem;
    }

    .brand-closure__beam {
        width: min(88vw, 22rem);
    }

    .site-footer {
        padding-top: calc(var(--space-xl) * 0.85);
    }
}

/* Mobile navigation overlay */
@media (max-width: 899px) {
    .site-nav {
        gap: var(--space-lg);
        padding: calc(var(--header-height) + var(--space-md)) var(--space-md) var(--space-xl);
    }

    .site-nav__list {
        gap: var(--space-md);
        width: 100%;
        max-width: 18rem;
    }

    .site-nav__link {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1.125rem;
        padding: 0.5rem 0.75rem;
    }

    .site-nav .btn--header {
        width: 100%;
        max-width: 18rem;
        margin-top: var(--space-sm);
        padding: 1.0625rem 1.5rem;
        font-size: 0.875rem;
        letter-spacing: 0.08em;
        box-shadow:
            0 4px 20px rgba(214, 185, 120, 0.28),
            0 0 28px rgba(91, 154, 255, 0.1);
    }

    .site-header--open .site-nav {
        overflow-y: auto;
    }
}