.service-feature {
  --cyan: #0cc0df;
  --navy: #1d3450;
}
.service-feature .header .button {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}
.service-feature .front-intro h1 {
  max-width: 13ch;
  text-wrap: balance;
}
.service-feature .front-hero img {object-position: 72% 36%}
.service-scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.service-scope-heading, .service-scope-notes {grid-column: 2}
.service-scope-heading {grid-row: 1; align-self: end}
.service-scope-heading .lede, .service-scope-notes p:last-child {margin-bottom: 0}
.service-scope figure {grid-area: 1 / 1 / span 2; align-self: center; margin: 0}
.service-scope figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}
.service-scope .eyebrow {margin-bottom: 12px}
.service-scope h2 {margin-bottom: 16px}
.service-scope h3 {margin: 24px 0 8px}
.service-scope ul {padding-inline-start: 1.2em}
.service-scope li + li {margin-top: 4px}
.service-scope p {max-width: 62ch}
@media (max-width: 850px) {
  .service-scope {grid-template-columns: 1fr; row-gap: 24px}
  .service-scope-heading, .service-scope-notes, .service-scope figure {grid-area: auto}
  .service-scope-notes h3:first-child {margin-top: 0}
}
@media (max-width: 640px) {
  .service-feature .front-hero img {object-position: 12% top}
  .service-feature .front-intro h1 {max-width: 100%}
}

/* Longer service names need room within the shaded part of the photograph. */
.service-feature .front-intro h1.long-title {
  max-width: min(18ch, 62vw);
  font-size: clamp(46px, 4.8vw, 83px);
}
.service-feature .front-intro h1 {overflow-wrap: anywhere}
.service-scope figure img.contain {object-fit: contain; background: #f3f6f7}
@media (max-width: 640px) {
  .service-feature .front-intro h1.long-title {max-width: 100%; font-size: clamp(32px, 8vw, 44px)}
  .service-feature .front-hero img {object-position: center 35%}
  .service-feature .front-hero img.dusting-crop {object-position: 12% top}
}