.hero {
  background-image: url(/img/content/servicesubpage-pool-renovations/hero.png);
  background-size: cover;
  background-position: bottom center;
  color: white;
  margin-bottom: -11vw;
  position: relative;
  z-index: 1;
  padding: max(6.8535260698em, 20vh) 0;
}
.hero h1 {
  font-size: calc(2.56rem + 2vw);
}
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p:not(:has(.btn)),
.hero ul,
.hero ol {
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow: 0 0.1em 1em #20419a;
}
.hero h1:first-child,
.hero h2:first-child,
.hero h3:first-child,
.hero h4:first-child,
.hero h5:first-child,
.hero h6:first-child,
.hero p:not(:has(.btn)):first-child,
.hero ul:first-child,
.hero ol:first-child {
  margin-top: 0;
}
.hero h1:last-child,
.hero h2:last-child,
.hero h3:last-child,
.hero h4:last-child,
.hero h5:last-child,
.hero h6:last-child,
.hero p:not(:has(.btn)):last-child,
.hero ul:last-child,
.hero ol:last-child {
  margin-bottom: 0;
}

.differentiators {
  padding-top: 11vw;
  position: relative;
  /**
   * I really want to use standard systems for this, rather than custom styles,
   * but I couldn't figure it out and it just needs to be done.
   */
}
.differentiators::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: radial-gradient(ellipse 120% 120% at top center, #007cb5, transparent);
  mix-blend-mode: screen;
}
.differentiators .icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
  margin: 0 auto;
}
@media (max-width: 767.98px) {
  .differentiators .icons {
    width: calc(20em + 1em);
  }
}
.differentiators .icon {
  text-align: center;
  width: 10em;
  max-width: 50%;
}

.cross-sell {
  justify-content: center;
  align-items: center;
}
.cross-sell + .cross-sell {
  margin-top: 4.235801032em;
}
.cross-sell:nth-child(odd) {
  flex-direction: row-reverse;
}
.cross-sell .key-image {
  width: 100%;
  aspect-ratio: 6/5;
}