@media (max-width: 1100px) {
    .site-header__inner,
    .site-footer__inner,
    .cta-banner,
    .hero-block__grid,
    .contact-layout,
    .card-grid--two,
    .testimonial-grid,
    .portfolio-grid,
    .pill-grid,
    .stack-grid,
    .stats-strip {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
    }

    .hero-block__visual {
        padding: 0;
    }

    .hero-card--secondary {
        position: static;
        width: 100%;
        margin-top: 18px;
    }

    .site-footer__links {
        text-align: left;
    }
}

@media (max-width: 920px) {
    .site-nav__toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
    }

    .site-nav__panel {
        position: absolute;
        top: calc(100% + 12px);
        right: 20px;
        left: 20px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow);
    }

    .site-nav.is-open .site-nav__panel {
        display: flex;
    }

    .site-nav.is-open .site-nav__toggle span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .site-nav.is-open .site-nav__toggle span:nth-child(2) {
        opacity: 0;
    }

    .site-nav.is-open .site-nav__toggle span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .main-menu ul,
    .site-nav__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-menu {
        width: 100%;
    }

    .main-menu a {
        width: 100%;
        padding: 0 4px;
        border-radius: 0;
    }
}

@media (max-width: 680px) {
    .container {
        width: min(var(--container), calc(100% - 24px));
    }

    .site-main {
        padding-top: 22px;
        padding-bottom: 72px;
    }

    .site-header__inner {
        min-height: 74px;
    }

    .site-brand img {
        width: 48px;
        height: 48px;
    }

    .site-brand__text {
        font-size: 1.05rem;
    }

    .hero-block__content,
    .page-shell,
    .feature-card,
    .testimonial-card,
    .pill-card,
    .contact-card,
    .cta-banner {
        padding: 22px;
    }

    .hero-block h1,
    .section-heading h2,
    .page-shell h1,
    .cta-banner h2 {
        font-size: 2.2rem;
    }

    .button,
    .button--ghost {
        width: 100%;
    }

    .hero-block__actions,
    .section-cta,
    .button-row {
        display: grid;
    }
}