/* ==========================================================
   SERVICES PAGE (pageCss: services)
   Text comes from src/_data/services.json.
   ========================================================== */
.svc-section + .svc-section { margin-top: clamp(3.5rem, 8vw, 6rem); }

/* Abatement and removal: one row per service.
   Name on the left, description on the right (stacked on phones). */
.svc-list { max-width: 68rem; border-top: 1px solid var(--line); }

.svc {
  display: grid;
  gap: 0.75rem 3rem;
  padding: 1.75rem 0 1.9rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 2rem;               /* room above when jumped to via /services/#asbestos */
}

@media (min-width: 48em) {
  .svc { grid-template-columns: minmax(12rem, 1fr) 2fr; }
}

.svc__name {
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  padding-top: 0.9rem;
}

/* short tab hanging above each name, same idea as the header rail */
.svc__name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 4px;
  background: linear-gradient(90deg, var(--rail-start), var(--rail-end));
}

/* DOT placard (or house mark where no hazard class applies) under the
   name. Art is one file per service in src/assets/img/placards/ —
   swap a file, keep the filename, nothing else needs to change.
   Indented by the width of the gradient tab above the name, so the
   marks line up with each other and with the end of the tab.*/
.svc__placard {
  width: 5rem;
  height: auto;
  margin: 1.1rem 0 0 2.25rem;
}

@media (max-width: 47.99em) {
  /* stays above 3.5rem so the four-digit ID panel is still readable */
  .svc__placard { width: 4rem; }
}

@media (min-width: 48em) {
  .svc__body { padding-top: 0.9rem; }    /* lines the text up with the name */
}

.svc__body p { margin-bottom: 0.6rem; }

.page .svc__standards {
  font-size: 0.875rem;
  opacity: 0.85;
  margin-bottom: 0;
}
.svc__standards span { color: var(--text); font-weight: 600; }

/* Planning, sampling, and compliance: compact grid */
.support-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.75rem 3rem;
  max-width: 68rem;
}

.support-grid h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.page .support-grid p { font-size: 0.9375rem; margin-bottom: 0; }