/* Homepage hero refinement only.
   All sections below the first section keep their existing design. */

main .hero {
  height: clamp(570px, 32vw, 620px) !important;
  min-height: 570px !important;
  background: #fff !important;
}

main .hero .hero-grid {
  grid-template-columns: minmax(540px, 42%) minmax(0, 58%) !important;
}

main .hero .hero-copy {
  display: flex !important;
  width: calc(100% - clamp(2.75rem, 4.4vw, 6.5rem)) !important;
  max-width: 720px !important;
  margin-left: clamp(2.75rem, 4.4vw, 6.5rem) !important;
  padding: 0 clamp(2rem, 3vw, 4rem) 0 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
}

main .hero .eyebrow {
  margin-bottom: 0 !important;
}

main .hero h1::before {
  margin-top: 1.65rem !important;
  margin-bottom: 1.6rem !important;
}

main .hero h1 {
  max-width: 650px !important;
  margin-bottom: 1.8rem !important;
  font-size: clamp(3.05rem, 3.45vw, 4.4rem) !important;
  line-height: 1.07 !important;
}

main .hero .lede {
  max-width: 590px !important;
  margin-bottom: 2.15rem !important;
  font-size: 17px !important;
  line-height: 1.62 !important;
}

main .hero .button-row {
  gap: 1rem 1.1rem !important;
}

main .hero .button {
  min-height: 44px !important;
  padding: 0.68rem 1.3rem !important;
  font-size: 0.92rem !important;
}

main .hero .hero-art-circle-animation svg {
  top: -5% !important;
  right: 2% !important;
  width: 78% !important;
  height: 94% !important;
  transform: translate3d(calc(var(--hero-scroll) * -7px), calc(var(--hero-scroll) * -7px), 0)
    scale(calc(0.97 + (var(--hero-scroll) * 0.025))) !important;
  transform-origin: center !important;
}

@media (min-width: 1800px) {
  main .hero .hero-grid {
    grid-template-columns: minmax(620px, 40%) minmax(0, 60%) !important;
  }

  main .hero .hero-copy {
    max-width: 760px !important;
    margin-left: clamp(4rem, 5vw, 7rem) !important;
  }

  main .hero .hero-art-circle-animation svg {
    top: -6% !important;
    right: 3% !important;
    width: 74% !important;
    height: 92% !important;
  }
}

@media (max-width: 1200px) {
  main .hero .hero-grid {
    grid-template-columns: minmax(475px, 45%) minmax(0, 55%) !important;
  }

  main .hero .hero-copy {
    width: calc(100% - clamp(2rem, 3.5vw, 3.5rem)) !important;
    margin-left: clamp(2rem, 3.5vw, 3.5rem) !important;
  }

  main .hero h1 {
    font-size: clamp(2.8rem, 4.5vw, 3.7rem) !important;
  }
}

@media (max-width: 1080px) {
  main .hero {
    height: auto !important;
    min-height: 0 !important;
  }

  main .hero .hero-grid {
    grid-template-columns: 1fr !important;
  }

  main .hero .hero-copy {
    display: block !important;
    width: 100% !important;
    max-width: 740px !important;
    margin-left: 0 !important;
    padding: 0 0 clamp(2.5rem, 5vw, 3.25rem) !important;
  }

  main .hero .hero-art-circle-animation svg {
    top: -3% !important;
    right: 4% !important;
    width: 72% !important;
    height: 96% !important;
  }
}

@media (max-width: 620px) {
  main .hero .hero-copy {
    max-width: none !important;
  }
}