/* ============================================================
   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: 1024px) {
    .nav-toggle { display: block; }

    .site-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        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; z-index: 50; }
    .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: 520px) {
    .header-inner { gap: 10px; }
    .brand { gap: 9px; }
    .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; }
    .brand-name { font-size: 1rem; line-height: 1.15; }
}

@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; }
}

@media (max-width: 1024px) {
    .site-header .brand { min-width:0; }
    .site-header .brand-logo { width:190px; max-height:52px; padding:0; background:transparent; border-radius:0; box-shadow:none; }
}
@media (max-width: 520px) {
    .site-header .brand-logo { width:165px; max-height:48px; padding:0; background:transparent; border-radius:0; box-shadow:none; }
}