/* An icy, architectural backdrop for cleaning, using the existing brand colours. */
.cleaning-section {
  isolation: isolate;
  background-color: #f1f7fb;
  background-image: linear-gradient(112deg, #fbfdff 0%, #f1f7fb 58%, #e4f1f7 100%);
  border-top: 1px solid #d7e6ef;
  border-bottom: 1px solid #d7e6ef;
}

/* Offset diamond frames echo the geometry of the Superior One brandmark. */
.cleaning-section::before {
  content: "";
  position: absolute;
  inset: auto;
  top: -270px;
  right: -190px;
  width: 740px;
  height: 740px;
  border: 1px solid rgba(27,93,171,.16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(37,150,190,.13), rgba(27,93,171,.035));
  background-size: auto;
  box-shadow:
    0 0 0 28px rgba(255,255,255,.45),
    0 0 0 29px rgba(37,150,190,.13),
    0 0 0 78px rgba(255,255,255,.25),
    0 0 0 79px rgba(27,93,171,.09);
  transform: rotate(-38deg);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.cleaning-section::after {
  content: "";
  position: absolute;
  bottom: -380px;
  left: -260px;
  width: 670px;
  height: 670px;
  border: 1px solid rgba(37,150,190,.18);
  border-radius: 24px;
  background: rgba(37,150,190,.035);
  box-shadow:
    0 0 0 36px rgba(255,255,255,.3),
    0 0 0 37px rgba(27,93,171,.08);
  transform: rotate(-38deg);
  pointer-events: none;
  z-index: 0;
}

.cleaning-section > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .cleaning-section {
    background-image: linear-gradient(155deg, #f9fcff 0%, #f0f7fb 55%, #e5f2f7 100%);
  }
  .cleaning-section::before {
    top: -120px;
    right: -230px;
    width: 440px;
    height: 440px;
    opacity: .75;
    box-shadow:
      0 0 0 24px rgba(255,255,255,.45),
      0 0 0 25px rgba(37,150,190,.13),
      0 0 0 56px rgba(255,255,255,.25),
      0 0 0 57px rgba(27,93,171,.09);
  }
  .cleaning-section::after {
    width: 430px;
    height: 430px;
    bottom: -250px;
    left: -240px;
  }
}

@media (forced-colors: active) {
  .cleaning-section {
    background: Canvas;
    border-color: CanvasText;
  }
  .cleaning-section::before,
  .cleaning-section::after { display: none; }
}