/* ============================================================
   Responsive rules — mobile-first support from 340px up.
   Mobile menu behaviour + breakpoint adjustments.
   ============================================================ */

@media (max-width: 900px) {
    .value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .nav-toggle { display: block; }

    .site-nav {
        position: absolute; left: 0; right: 0; top: 72px;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--c-primary);
        border-top: 1px solid rgba(236,243,241,.15);
        max-height: 0; overflow: hidden;
        transition: max-height .25s ease;
        z-index: 40;
    }
    .site-header { position: relative; }
    .site-nav.open { max-height: 420px; }
    .site-nav a { padding: 14px 20px; border-bottom: 1px solid rgba(236,243,241,.1); }
    .site-nav .nav-cta { margin: 12px 20px; text-align: center; }

    .hero { padding: 64px 0 72px; }
}

@media (max-width: 460px) {
    .value-grid { grid-template-columns: 1fr; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Guard the smallest supported width (340px). */
@media (max-width: 360px) {
    .container { padding: 0 14px; }
    .btn { padding: 11px 16px; font-size: .9rem; }
}