.service-hero--water-heater {
  --service-hero-start: rgba(13, 50, 81, 0.98);
  --service-hero-end: rgba(130, 74, 30, 0.84);
  --service-hero-glow-1: rgba(255, 180, 109, 0.24);
  --service-hero-glow-2: rgba(155, 223, 255, 0.16);
  --service-hero-base-duration: 7.8s;
  --service-hero-art-duration: 9.2s;
  --service-pattern-one:
    radial-gradient(circle, rgba(255, 189, 120, 0.34) 0 35%, transparent 36%);
  --service-pattern-two:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.08) 0 10px,
      transparent 10px 22px
    );
  --service-pattern-three:
    radial-gradient(circle, rgba(158, 223, 255, 0.18) 0 40%, transparent 41%);
  --service-pattern-one-size: 16rem 16rem;
  --service-pattern-two-size: 30% 64%;
  --service-pattern-three-size: 9rem 9rem;
  --service-pattern-one-pos: 84% 38%;
  --service-pattern-two-pos: 78% 52%;
  --service-pattern-three-pos: 18% 24%;
  --service-hero-art-opacity: 0.92;
  --service-hero-accent-one:
    radial-gradient(circle, rgba(255, 190, 121, 0.34) 0 34%, transparent 35%);
  --service-hero-accent-one-width: 16rem;
  --service-hero-accent-one-height: 16rem;
  --service-hero-accent-one-top: 5%;
  --service-hero-accent-one-right: 6%;
  --service-hero-accent-one-radius: 50%;
  --service-hero-accent-one-duration: 6.3s;
  --service-hero-accent-two:
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.2) 0 14%, transparent 15%),
    radial-gradient(circle at 38% 52%, rgba(255, 255, 255, 0.16) 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 65%);
  --service-hero-accent-two-width: 7rem;
  --service-hero-accent-two-height: 14rem;
  --service-hero-accent-two-bottom: -2%;
  --service-hero-accent-two-right: 24%;
  --service-hero-accent-two-radius: 999px;
  --service-hero-accent-two-opacity: 0.78;
  --service-hero-accent-two-duration: 5.4s;
}

.page-water-heater .callout {
  background: #f3f8fe;
}