Layout adapts when device is rotated to landscape

A hero section with height: 100vh becomes roughly 350px tall when the user rotates their phone to landscape. Headline, subhead, and CTA button get crammed into that tiny vertical window — often only the headline remains visible, with the CTA below the fold. 100vh also misbehaves on iOS Safari because mobile browser chrome shrinks and grows dynamically. 100dvh (dynamic viewport height) is the modern replacement that handles both cases correctly.

Replace height: 100vh with min-height: 100dvh so content can grow past the viewport when necessary, and add a landscape media query to reduce padding on short viewports. Update hero and full-screen overlay components in src/components/.

.hero { min-height: 100dvh; }
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding: 3rem 0; }
}