/* Layout — page-level structure only (the hero grid and its responsive shape).
   Component visuals live in components.css. */

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  min-height: 100svh;
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__visual { order: -1; }
}