@media (max-width: 940px) {
    .nav__menu {
        background: var(--color-paper);
        border-bottom: 1px solid var(--color-line);
        display: none;
        left: 0;
        padding: 18px;
        position: absolute;
        right: 0;
        top: 72px;
    }

    .nav__menu--open {
        display: grid;
    }

    .nav__hamburger {
        display: block;
    }

    /* The header CTA moves into the menu (F8). */
    .nav__cta {
        display: none;
    }

    .nav__item--cta {
        display: block;
        margin-top: 8px;
    }

    .nav__item--cta .btn {
        width: 100%;
    }

    .nav__menu--open {
        gap: 14px;
    }

    .hero__grid,
    .section__split,
    .proof-layout,
    .faq-layout,
    .path-grid,
    .footer__grid {
        grid-template-columns: 1fr;
    }

    .hero__copy,
    .hero__media {
        min-width: 0;
    }

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

    .hero__media {
        min-height: auto;
    }
}

@media (max-width: 620px) {
    /* html and body: reset.css (overflow-x: clip, E2E R3 N-03). */
    main,
    section {
        max-width: 100vw;
        overflow-x: hidden;
    }

    @supports (overflow-x: clip) {
        main,
        section {
            overflow-x: clip;
        }
    }

    .container {
        max-width: var(--container);
        width: calc(100% - 24px);
    }

    .hero__copy,
    .hero__grid,
    .hero__media,
    .visitor-status,
    .programme-status,
    .section__header,
    .action-section__inner {
        max-width: calc(100vw - 24px);
        width: 100%;
    }

    .hero__grid {
        margin-left: auto;
        margin-right: auto;
    }

    .nav__inner {
        min-height: 64px;
    }

    /* The header language switcher moves into the menu (F8). */
    .lang-switcher {
        display: none;
    }

    .nav__item--langs {
        border-top: 1px solid var(--color-line);
        display: block;
        padding-top: 12px;
    }

    .hero {
        padding-top: 54px;
        padding-bottom: 48px;
    }

    .hero h1 {
        font-size: clamp(1.85rem, 8vw, 2.35rem);
        line-height: 1;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* E16: as hero.css, with the mobile size as the upper bound. */
    @supports (width: 1cqi) {
        .hero--home h1 {
            font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(1.85rem, 8vw, 2.35rem));
        }
    }

    .hero__subtitle {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    .event-strip {
        display: grid;
        gap: 8px;
    }

    .hero__media {
        padding: 18px;
    }

    .sense-tile {
        min-height: auto;
    }

    .sense-tile__name {
        margin-top: 10px;
    }

    .hero__cta,
    .action-section__cta,
    .btn {
        width: 100%;
    }

    .hero__cta .btn,
    .action-section__cta .btn {
        justify-content: center;
    }

    .experience-grid,
    .sensory-board {
        grid-template-columns: 1fr;
    }

    .footer__bottom,
    .footer__legal {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}