:is(.hero, .approach, .contact, .about-card, .service-hero, .process-section, .closing-cta) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(196, 113, 63, .3), transparent 48%),
    radial-gradient(ellipse at 78% 72%, rgba(113, 139, 91, .42), transparent 48%),
    linear-gradient(115deg, #142d25 8%, #254b38 58%, #425342 100%);
}

:is(.hero, .approach, .contact, .about-card, .service-hero, .process-section, .closing-cta)::before,
:is(.hero, .approach, .contact, .about-card, .service-hero, .process-section, .closing-cta)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

:is(.hero, .approach, .contact, .about-card, .service-hero, .process-section, .closing-cta)::before {
  background: url("/forest-grain.svg") repeat;
  background-size: 180px 180px;
  opacity: .19;
  animation: none;
}

:is(.hero, .approach, .contact, .about-card, .service-hero, .process-section, .closing-cta)::after {
  inset: -6%;
  background: url("/forest-contours.svg") right center / auto 115% no-repeat;
  opacity: .68;
  transform-origin: 85% 50%;
  animation: forest-flow 24s ease-in-out infinite alternate;
}

:is(.hero-leaf, .hero-mark, .hero > .leaf) {
  opacity: .045;
}

.approach {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(196, 113, 63, .2), transparent 48%),
    linear-gradient(125deg, #203d30, #142d25 75%);
}

.approach::after {
  background-position: left center;
  opacity: .3;
  animation-delay: -10s;
}

:is(.contact, .closing-cta) {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(196, 113, 63, .24), transparent 55%),
    linear-gradient(100deg, #182f27, #304c39);
}

:is(.contact, .closing-cta)::after {
  background-position: right 65%;
  opacity: .42;
  animation-delay: -16s;
}

.about-card::after {
  opacity: .32;
}

.process-section::after {
  opacity: .28;
  animation: none;
}

@keyframes forest-flow {
  from { transform: translate3d(-1%, -1%, 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(2%, 2%, 0) rotate(2deg) scale(1.05); }
}

@media (max-width: 820px) {
  :is(.hero, .service-hero)::after {
    background-position: 65% center;
    opacity: .38;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.hero, .approach, .contact, .about-card, .service-hero, .process-section, .closing-cta)::after {
    animation: none;
    transform: none;
  }
}