/* Keep Hero as a single background-image composition on desktop and mobile. */

.home-redesign-hero--background {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
  min-height: clamp(390px, 48vw, 500px);
  overflow: hidden;
  isolation: isolate;
}

.home-redesign-hero--background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.96) 36%,
      rgba(255, 255, 255, 0.76) 52%,
      rgba(248, 251, 255, 0.22) 67%,
      rgba(248, 251, 255, 0.03) 100%
    );
  pointer-events: none;
}

.home-redesign-hero__visual-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/images/hero-moving-prep-wide.png");
  background-repeat: no-repeat;
  /* Hero-ready wide PNG generated from the original image. Left side is outpainted/faded for text; objects remain on the right. */
  background-size: auto min(94%, 450px);
  background-position: right 3% center;
  background-color: #ffffff;
}

.home-redesign-hero--background .home-redesign-hero__copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / 2;
  width: min(100%, 600px);
  min-height: inherit;
  padding: clamp(34px, 4.5vw, 56px);
  background: transparent;
}

.home-redesign-hero--background .home-redesign-hero__note {
  position: static;
  display: inline-block;
  width: fit-content;
  margin-top: 18px;
  transform: rotate(-5deg);
}

.home-redesign-hero--background .home-redesign-hero__visual,
.home-redesign-hero--background .home-redesign-hero__image-slot {
  display: none !important;
}

@media (max-width: 980px) {
  .home-redesign-hero--background {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr) !important;
    min-height: clamp(380px, 64vw, 470px);
  }

  .home-redesign-hero--background::before {
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, 0.99) 0%,
        rgba(255, 255, 255, 0.97) 43%,
        rgba(255, 255, 255, 0.8) 58%,
        rgba(248, 251, 255, 0.22) 74%,
        rgba(248, 251, 255, 0.04) 100%
      );
  }

  .home-redesign-hero__visual-bg {
    background-size: auto min(88%, 420px);
    background-position: right -8px center;
  }

  .home-redesign-hero--background .home-redesign-hero__copy {
    width: min(64vw, 560px);
    padding: 32px 26px;
  }
}

@media (max-width: 760px) {
  .home-redesign-hero--background {
    grid-template-columns: 58% 42% !important;
    min-height: 430px;
  }

  .home-redesign-hero--background::before {
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.98) 48%,
        rgba(255, 255, 255, 0.82) 63%,
        rgba(248, 251, 255, 0.18) 79%,
        rgba(248, 251, 255, 0.02) 100%
      );
  }

  .home-redesign-hero__visual-bg {
    background-size: auto 88%;
    background-position: right -96px center;
  }

  .home-redesign-hero--background .home-redesign-hero__copy {
    width: min(66vw, 410px);
    padding: 26px 16px 24px;
  }

  .home-redesign-hero--background .home-redesign-hero h1 {
    font-size: clamp(1.82rem, 8.8vw, 2.42rem);
    line-height: 1.18;
  }

  .home-redesign-hero--background .home-redesign-hero__lead {
    max-width: 34ch;
    font-size: 0.8rem;
    line-height: 1.72;
  }

  .home-redesign-hero--background .home-redesign-hero__actions {
    width: min(100%, 260px);
  }

  .home-redesign-hero--background .home-redesign-hero__actions .button {
    min-height: 44px;
    padding-inline: 12px;
    font-size: 0.78rem;
  }

  .home-redesign-hero--background .home-redesign-hero__note {
    margin-top: 14px;
    font-size: 0.76rem;
  }
}

@media (max-width: 430px) {
  .home-redesign-hero--background {
    min-height: 450px;
  }

  .home-redesign-hero__visual-bg {
    background-size: auto 80%;
    background-position: right -130px center;
  }

  .home-redesign-hero--background .home-redesign-hero__copy {
    width: 68vw;
    padding: 24px 14px;
  }

  .home-redesign-hero--background .home-redesign-hero__lead {
    max-width: 31ch;
  }
}