.service-refresh__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
}

.service-refresh__intro > p:not(.eyebrow) {
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 55ch;
  line-height: 1.55;
}

.service-refresh__feature {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-deep-teal);
  border: 1px solid var(--polish-rule);
  border-radius: var(--polish-radius);
  overflow: hidden;
}

.service-refresh__feature img {
  display: block;
  height: auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

body.area-redesign .service-refresh__feature.area-hero-photo {
  aspect-ratio: auto;
  background: var(--color-paper);
  border: 1px solid var(--polish-rule);
}

body.area-redesign .service-refresh__feature.area-hero-photo img { height: auto; }

.service-refresh__feature figcaption {
  font-size: 0.875rem;
  padding: 0.65rem 0.9rem;
}

.service-refresh__feature a,
.service-refresh__links a,
.service-refresh__notes a { color: var(--color-deep-teal); }

.service-refresh__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
}

.service-refresh__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--polish-rule);
  border-radius: 0.5rem;
}

.service-refresh__scope { margin: 1.25rem 0 0; }

.service-refresh__notes {
  padding: clamp(1.1rem, 3vw, 2rem) 0;
  margin-bottom: clamp(0.8rem, 2vw, 1.7rem);
}

.service-refresh__notes dl,
.service-refresh__city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27ch), 1fr));
  gap: 0.9rem;
  margin: 0;
}

.service-refresh__notes dl > div,
.service-refresh__city-grid > div {
  padding: 1rem;
  background: var(--color-paper);
  border: 1px solid var(--polish-rule);
  border-radius: var(--polish-radius);
}

.service-refresh__notes dt {
  margin-bottom: 0.35rem;
  color: var(--color-deep-teal);
  font-weight: 800;
}

.service-refresh__notes dd { margin: 0; }
.service-refresh__city-grid h3 { margin: 0 0 0.8rem; }
.service-refresh__faq summary { cursor: pointer; }
.service-refresh__faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.service-refresh__faq details p { padding-top: 0.85rem; }

@media (min-width: 980px) {
  .service-page-hero > .service-refresh__feature { align-self: center; }
}

@media (max-width: 760px) {
  .service-refresh__hero { grid-template-columns: minmax(0, 1fr); }
}
