@media (max-width: 760px) {
    .brand > span { width: var(--logo-mobile-size); height: var(--logo-mobile-size); }
    .brand > span img { transform: scale(var(--logo-mobile-zoom)); }
    .brand.hide-mobile-logo > span { display: none; }
    .brand.hide-mobile-logo { gap: 0; }
    .hero { grid-template-columns: 1fr; }
    .hero-copy { max-width: none; }
    .hero-copy h1 { font-size: var(--hero-title-mobile); }
    .services { font-size: var(--services-mobile); }
    .showcase-frame { width: min(100%, var(--showcase-mobile)); margin: auto; }
}