.migration-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 80px;
  background: radial-gradient(ellipse at 80% 30%, #075473, #003b5c 50%, #002640);
}
.migration-hero migration-hall-background {
  position: absolute;
  inset: 80px 1% 90px auto;
  width: 45%;
  opacity: .95;
  pointer-events: none;
}
.migration-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,38,64,.82) 15%, rgba(0,38,64,.2) 42%, transparent 55%);
}
.migration-hero__content { position: relative; z-index: 1; }
.hero-motion-toggle {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 20px;
  padding: 8px 12px;
  border: 1px solid #608a9e;
  border-radius: 6px;
  background: #002640;
  color: #d6e9f2;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.hero-motion-toggle:focus-visible { outline: 2px solid #8fe3a8; outline-offset: 4px; }
.hero-motion-toggle:hover { background: #004364; }
@media (max-width: 900px) {
  .migration-hero { padding: 64px 0 80px; }
  .migration-hero migration-hall-background { width: 100%; opacity: .35; }
  .migration-hero::after { background: rgba(0,38,64,.45); }
  .migration-hero .btn { white-space: normal; text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-toggle { display: none; }
}

@media (min-width: 901px) {
  .migration-hero__content h1 { max-width: 56% !important; }
  .migration-hero__content > p { max-width: 50% !important; }
}
@media (max-width: 900px) {
  .migration-hero migration-hall-background { inset: auto 0 75px; width: 100%; height: 380px; opacity: .8; }
  .migration-hero { padding-bottom: 470px; }
  .migration-hero::after { background: transparent; }
}