/* ============================================================
   svc.css — services index + service detail pages only.
   Shared components in site.css, all values from tokens.css.
   ============================================================ */

/* services grid (index; mirrors homepage services section) */
.svc-grid { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }

.svc-lede { max-width: 62ch; }

/* ---------- detail hero strip ---------- */
.svc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 48vh;
  min-height: 48svh;
  background: var(--char); /* paint-before-image */
  color: var(--paper);
  overflow: hidden;
}
.svc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--char) 0%,
    color-mix(in srgb, var(--char) 52%, transparent) 38%,
    color-mix(in srgb, var(--char) 14%, transparent) 74%,
    transparent 100%);
}
.svc-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: var(--space-4) var(--space-3); }
.svc-hero h1 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.1rem, 7.6vw, 3.8rem);
  text-shadow: 0 2px 24px color-mix(in srgb, var(--char) 60%, transparent);
}
.svc-hero__kicker {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sun);
}

/* ---------- intro: copy + "what's included" checklist ---------- */
.svc-intro { display: grid; gap: var(--space-3); }
.svc-listh { margin-top: var(--space-2); }
.checklist { list-style: none; display: grid; gap: var(--space-2) var(--space-4); max-width: 820px; }
.checklist li { position: relative; padding-left: 2rem; font-weight: 500; }
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--sun-deep);
}
@media (min-width: 700px) { .checklist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .svc-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; }
  .svc-intro .checklist { grid-template-columns: 1fr; }
  .svc-listh { margin-top: 0; }
}

/* ---------- before/after column (shares .ba from site.css) ---------- */
.svc-ba__col { max-width: 920px; margin-inline: auto; }
.svc-caption { margin-top: var(--space-2); color: var(--ink-dim); font-size: var(--small); }

/* ---------- sibling-service cards ---------- */
.svc-sibs { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 640px) { .svc-sibs { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }