@media (max-width: 1120px) {
    .desktop-nav,
    .header-account {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .companions-grid,
    .chronicle-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .companions-grid .action-card:last-child {
        grid-column: 1 / -1;
    }

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

@media (max-width: 900px) {
    .hero__banner-wrap {
        width: min(70vw, 650px);
    }
}

@media (max-width: 820px) {
    .container {
        width: min(100% - 32px, var(--container));
    }

    .section {
        padding: 78px 0;
    }

    .section-heading {
        display: block;
        margin-bottom: 40px;
    }

    .section-heading .section-lead {
        margin-top: 20px;
    }

    .split-layout,
    .story-grid,
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .story-copy {
        order: 2;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .feature-card,
    .feature-card--large {
        grid-row: auto;
        min-height: 320px;
    }

    .hero__background {
        object-position: center;
    }

    .hero__content {
        padding-top: 104px;
        padding-bottom: 118px;
    }

    .button {
        min-width: min(310px, 84vw);
    }
}

@media (max-width: 620px) {
    .site-header__inner {
        min-height: 70px;
    }

    .site-brand__text {
        display: none;
    }

    .hero {
        min-height: 100svh;
    }

    .hero__background {
        object-position: center top;
    }

    .hero__content {
        width: min(100% - 22px, 1180px);
        padding-top: 92px;
        padding-bottom: 108px;
    }

    .hero__banner-wrap {
        width: min(92vw, 560px);
        max-width: 100%;
    }

    .hero__discover {
        bottom: 7%;
        max-width: 88%;
        font-size: clamp(.58rem, 2.7vw, .76rem);
        letter-spacing: .14em;
    }

    .hero__discover svg {
        width: 20px;
        height: 20px;
    }

    .button-row {
        display: grid;
    }

    .button-row .button,
    .button {
        width: 100%;
        min-width: 0;
    }

    .companions-grid,
    .chronicle-grid {
        grid-template-columns: 1fr;
    }

    .companions-grid .action-card:last-child {
        grid-column: auto;
    }

    .action-card {
        min-height: 320px;
    }

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

    .footer-bottom .container {
        flex-direction: column;
        gap: 4px;
    }
}