/* Reuse the shared service-page hero, gallery, steps, FAQs and CTAs. */
.replacement-reasons,
.replacement-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.replacement-reasons li {
  padding: 1.15rem;
  border-left: 4px solid #F5B421;
  background: #f4f5f7;
}

.replacement-reasons h3 {
  color: #23232E;
  font-size: 1.15rem;
  line-height: 1.3;
}

.replacement-options .area-info-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: #f4f5f7;
}

.replacement-options .area-info-card p {
  margin-top: 0;
}

.replacement-options .area-info-card > a {
  margin-top: auto;
  padding-top: .75rem;
}

.replacement-types dt {
  margin-top: 1.25rem;
  color: #23232E;
  font-weight: 700;
}

.replacement-types dd {
  margin: .4rem 0 0;
  color: #393943;
}

.replacement-discontinued {
  padding: clamp(1.2rem, 3vw, 2rem);
  border-top: 4px solid #F5B421;
  border-radius: 8px;
  background: white;
}

.emergency-section .replacement-urgent-note {
  margin-top: 1.5rem;
  padding: 1.1rem;
  border-left: 4px solid #F5B421;
  background: #fff7e8;
}

.replacement-all-services {
  display: flex;
  width: fit-content;
}

.lock-replacement-page main h2 {
  scroll-margin-top: 1.5rem;
}

@media (min-width: 600px) {
  .replacement-reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .replacement-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}