/* Parallax equipment backdrop for the main What We Do section */
#services{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#f6f3ea;
}
#services::before,
#services::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background-repeat:no-repeat;
  background-attachment:fixed;
  pointer-events:none;
  z-index:0;
}
#services::before{
  left:0;
  background-image:
    linear-gradient(90deg,rgba(246,243,234,.02) 0%,rgba(246,243,234,.08) 66%,rgba(246,243,234,.68) 100%),
    url('https://images.rawpixel.com/image_social_landscape/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTEyL3Jhd3BpeGVsX29mZmljZV8yOV9waG90b19vZl9hX3doZWVsZWRfZXhjYXZhdG9yX2lzb2xhdGVkX29uX3doaV9jNWMyMjkwZi0wMjZjLTQ0MDEtOWNmNy1jMDljODRiOTAyNTJfMS5qcGc.jpg');
  background-size:50vw auto;
  background-position:left center;
  opacity:.54;
}
#services::after{
  right:0;
  background-image:url('/assets/mower-cutout.webp');
  background-size:52vw auto;
  background-position:right center;
  opacity:.88;
  filter:saturate(1.08) contrast(1.03) drop-shadow(0 16px 24px rgba(20,70,130,.20));
}
#services > .section-heading,
#services > .cards{
  position:relative;
  z-index:2;
}
#services > .section-heading{
  text-shadow:0 2px 12px rgba(246,243,234,.92),0 1px 3px rgba(246,243,234,.95);
}
#services .service-card{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  box-shadow:0 16px 36px rgba(26,43,34,.12);
  border:1px solid rgba(255,255,255,.74);
}
@media(max-width:980px){
  #services::before{
    width:52%;
    background-size:58vw auto;
    opacity:.46;
  }
  #services::after{
    width:54%;
    background-size:60vw auto;
    opacity:.80;
  }
}
@media(max-width:620px){
  #services{
    --services-parallax-top:0px;
    --services-parallax-bottom:0px;
    background-color:#f6f3ea;
    background-image:
      linear-gradient(180deg,rgba(246,243,234,.02) 0%,rgba(246,243,234,.12) 34%,rgba(246,243,234,.44) 49%,rgba(246,243,234,.18) 63%,rgba(246,243,234,.04) 100%),
      radial-gradient(circle at 50% 48%,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 54%),
      url('https://images.rawpixel.com/image_social_landscape/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTEyL3Jhd3BpeGVsX29mZmljZV8yOV9waG90b19vZl9hX3doZWVsZWRfZXhjYXZhdG9yX2lzb2xhdGVkX29uX3doaV9jNWMyMjkwZi0wMjZjLTQ0MDEtOWNmNy1jMDljODRiOTAyNTJfMS5qcGc.jpg'),
      url('/assets/mower-cutout.webp');
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
    background-size:100% 100%,100% 100%,132% auto,124% auto;
    background-position:
      center center,
      center center,
      center calc(1% + var(--services-parallax-top)),
      center calc(99% + var(--services-parallax-bottom));
  }
  #services::before,
  #services::after{
    display:none;
  }
  #services > .section-heading{
    text-shadow:none;
  }
  #services > .section-heading > p:last-child{
    max-width:34rem;
    margin:14px auto 0;
    padding:14px 16px;
    color:#17352a;
    background:rgba(248,245,237,.82);
    border:1px solid rgba(255,255,255,.72);
    border-radius:14px;
    box-shadow:0 10px 24px rgba(24,48,38,.12);
    backdrop-filter:blur(7px) saturate(1.04);
    -webkit-backdrop-filter:blur(7px) saturate(1.04);
    text-shadow:0 1px 0 rgba(255,255,255,.55);
  }
  #services .service-card{
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(6px) saturate(1.05);
    -webkit-backdrop-filter:blur(6px) saturate(1.05);
    box-shadow:0 14px 32px rgba(22,43,34,.14);
    border:1px solid rgba(255,255,255,.84);
  }
}
@media (prefers-reduced-motion:reduce){
  #services{
    --services-parallax-top:0px!important;
    --services-parallax-bottom:0px!important;
  }
}