#top.hero {
  height: auto !important;
  min-height: max(760px, 100vh) !important;
}

#top .hero-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: min(780px, 72vw) !important;
  min-height: max(760px, 100vh) !important;
  padding-top: clamp(150px, 20vh, 210px) !important;
  padding-bottom: clamp(120px, 15vh, 180px) !important;
}

#top .hero-copy h1 {
  max-width: none !important;
  font-size: clamp(54px, 7.6vw, 116px) !important;
  line-height: .9 !important;
  white-space: nowrap !important;
}

#top .hero-copy h1 em {
  display: inline-block !important;
  white-space: nowrap !important;
}

#top .intro {
  position: relative !important;
  display: block !important;
  flex: none !important;
  width: min(620px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  contain: none !important;
}

#top .intro span {
  display: block !important;
}

#top .intro span + span {
  margin-top: 2px;
}

#top .hero-actions {
  flex: none !important;
  flex-wrap: wrap !important;
}

@media (max-width: 900px) {
  #top.hero,
  #top .hero-copy {
    min-height: max(780px, 100vh) !important;
  }

  #top .hero-copy {
    width: 100% !important;
    padding: 145px 24px 130px !important;
  }

  #top .hero-copy h1 {
    font-size: clamp(48px, 9vw, 76px) !important;
  }

  #top .intro {
    width: min(620px, calc(100vw - 48px)) !important;
  }
}

@media (max-width: 560px) {
  #top.hero,
  #top .hero-copy {
    min-height: max(760px, 100vh) !important;
  }

  #top .hero-copy {
    padding: 125px 20px 120px !important;
  }

  #top .hero-copy h1 {
    font-size: min(11vw, 56px) !important;
  }

  #top .intro {
    width: calc(100vw - 40px) !important;
  }
}