.motion-surface {position: relative; isolation: isolate}
.scroll-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}
/* Focus remains on the content; the field adds depth at the section edges. */
.hero.motion-surface, .editorial-lede.motion-surface, .sample-intro.motion-surface {
  background-color: #fff;
}
#services.motion-surface .triplet article, #approach.motion-surface .triplet article {
  border-top-color: #9db5a5;
}
#services.motion-surface .triplet h3, #approach.motion-surface .triplet h3 {
  color: #164e3b;
}
.about-accountability .about-commitments {
  border-color: #c9d7cd;
  box-shadow: 0 8px 22px #173d3208;
}
.hero .btn, .contact .btn, .sample-next .btn {
  background: #15543f;
  border-color: #15543f;
  color: #fff;
  box-shadow: 0 3px 8px #173d320d;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.hero .btn:hover, .contact .btn:hover, .sample-next .btn:hover {
  background: #0e654b;
  border-color: #0e654b;
  color: #fff;
  box-shadow: 0 5px 14px #173d3218;
}
.hero .text-link, .editorial-lede .text-link, #services .text-link, #approach .text-link {
  color: #185440;
  border-bottom-color: #7e9f8b;
}
.hero .btn:focus-visible, .contact .btn:focus-visible, .sample-next .btn:focus-visible,
#services a:focus-visible, #approach a:focus-visible, .about-accountability a:focus-visible {
  outline: 3px solid #176347;
  outline-offset: 3px;
}
.hero .feature-still img, .editorial-lede .lede-plate img, .contact .contact-plate {
  filter: contrast(1.025) saturate(1.035);
}
::selection {background: #d6e6dd; color: #133e30}
@media (prefers-reduced-motion: reduce) {
  .scroll-field {opacity: .7}
  .hero .btn, .contact .btn, .sample-next .btn {transition: none}
}