@media (max-width: 600px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  h1 { font-size: clamp(2.25rem, 10.5vw, 2.75rem); letter-spacing: -.045em; }
  .site-header { max-width: 100vw; }
  .nav-toggle { position: absolute; right: 1rem; top: .8rem; }
  .hero { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100vw; overflow: hidden; padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-copy, .hero-visual { min-width: 0; max-width: 100%; }
  .hero-copy { width: 100%; overflow: hidden; overflow-wrap: anywhere; }
  .hero-copy > * { max-width: 100%; }
  .hero .eyebrow { max-width: 100%; font-size: .66rem; line-height: 1.45; letter-spacing: .12em; }
  .hero-lead { font-size: .96rem; line-height: 1.62; }
}