.hero {
  min-height: 0;
  align-items: center;
}

.hero-copy {
  min-height: 600px;
}

.hero h1 {
  max-width: none;
}

.hero-media {
  align-self: center;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
}

@media (max-width: 980px) {
  .hero-copy { min-height: 0; }
  .hero-media { order: -1; }
  .guide-spine,
  .guide-module { min-width: 0; }
}

@media (max-width: 640px) {
  .offer-card,
  .context-rail { min-width: 0; }
  .offer-card .button { width: 100%; max-width: 100%; white-space: normal; text-align: center; }
}