html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 540px) {
  .header { width: 100%; max-width: 100vw; }
  .menu-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .brand { max-width: calc(100% - 54px); }
  .brand-copy strong { font-size: 22px; }
  .hero-content {
    width: calc(100% - 2.4rem);
    max-width: calc(100% - 2.4rem);
    min-width: 0;
  }
  .hero h1 { font-size: 44px; overflow-wrap: anywhere; }
  .hero-text { max-width: 100%; overflow-wrap: anywhere; }
  .hero-actions { width: 100%; min-width: 0; }
  .hero-actions .button { width: 100%; min-width: 0; }
}