@media (max-width: 1280px) {
    .brand__signal {
        display: none;
    }

    .nav-desktop__link,
    .nav-desktop__trigger {
        padding-inline: 0.5rem;
        font-size: 0.86rem;
    }

    .hero__copy h1 {
        max-width: 14em;
    }
}

@media (max-width: 1200px) {
    .nav-desktop,
    .site-header__cta {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-backdrop,
    .nav-mobile {
        display: block;
    }

    .nav-checkbox:checked ~ .nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-checkbox:checked ~ .nav-mobile {
        transform: translateX(0);
        visibility: visible;
    }

    .hero__inner,
    .cta-band__inner,
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .cta-band h2 {
        max-width: none;
    }

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

@media (max-width: 1024px) {
    .hero {
        min-height: 0;
    }
}

@media (max-width: 900px) {
    .hero {
        padding: calc(var(--header-height) + 3.25rem) 0 3.75rem;
    }

    .hero__copy h1,
    .cta-band h2 {
        max-width: none;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .brand__signal {
        display: none;
    }

    .hero__lead {
        font-size: var(--fs-md);
    }

    .site-footer__nav,
    .site-footer__base-inner {
        grid-template-columns: 1fr;
        display: grid;
    }

    .site-footer__legal {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .nav-dropdown,
    .nav-desktop__item.has-sub--wide .nav-dropdown {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .hero__actions,
    .cta-band__actions {
        display: grid;
    }

    .hero__actions .btn,
    .cta-band__actions .btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .brand__name {
        font-size: 0.9rem;
    }
}

@media (min-width: 1440px) {
    .hero {
        min-height: 48rem;
    }
}