/* The nested-square field is decorative; the headline remains the primary content. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 24px; }
.hero .intro { position: relative; z-index: 1; width: 100%; }
.hero h1 { max-width: 20ch; margin-bottom: 24px; font-size: clamp(2rem, 3.9vw, 3.5rem); line-height: 1.18; letter-spacing: -.045em; text-wrap: balance; }
.hero:has(.hero-field[hidden]) { grid-template-columns: minmax(0, 1fr); }
.hero-field { position: relative; width: 100%; min-width: 0; aspect-ratio: 1; pointer-events: none; }
.hero-field-canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 800px) {
  .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 16px; }
}
@media (max-width: 600px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 24px 32px; gap: 8px; }
  .hero h1 { font-size: clamp(2rem, 7vw, 2.5rem); }
  .hero-field { width: min(100%, clamp(180px, 26svh, 240px)); justify-self: center; margin-block: 0 -16px; }
}