/* mod-svc-steps — the v2 service-page appointment storyboard.
   Spec: exec-4d55e4ed (14 Aug 2026, approved redesign). Two movements:
   a split band — deep forest panel left (eyebrow, heading, rule, the
   REUSED clinical paragraph), photograph right — then a four-step numbered
   row on the cream ground, numerals with long hairlines, verbatim step
   copy beneath. First adopted by /thermography/full-body/. */

.b-svcsteps__split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: stretch;
}

.b-svcsteps__panel {
  background: var(--home-forest-deep);
  color: var(--card);
  padding: clamp(var(--sp-12), 5vw, var(--sp-20)) clamp(var(--sp-8), 4vw, var(--sp-16));
  padding-inline-start: var(--page-pad);
}
/* Content hugs the container's left column on wide screens. */
.b-svcsteps__panel-inner {
  max-inline-size: 620px;
  margin-inline-start: auto;
  padding-inline-end: clamp(var(--sp-4), 2vw, var(--sp-10));
}

.b-svcsteps__eyebrow { color: var(--home-sage-light); }

.b-svcsteps__h {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--home-display-m);
  line-height: 1.08;
  letter-spacing: var(--track-display);
  color: var(--home-paper);
  margin: var(--sp-4) 0 0;
  text-wrap: balance;
}

.b-svcsteps__rule {
  display: block;
  inline-size: 56px;
  block-size: 2px;
  background: var(--home-sage);
  margin-block: var(--sp-6);
}

.b-svcsteps__intro {
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--home-paper) 82%, var(--home-forest-deep));
  max-inline-size: var(--measure-tight);
  margin: 0;
}

.b-svcsteps__media {
  margin: 0;
  overflow: hidden;
  position: relative;
}
.b-svcsteps__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--svcsteps-focal-x, 50%) var(--svcsteps-focal-y, 35%);
}

/* ── the numbered row ─────────────────────────────────────────────────── */

.b-svcsteps__row {
  list-style: none;
  margin: 0;
  padding: clamp(var(--sp-12), 5vw, var(--sp-20)) var(--page-pad);
  max-inline-size: calc(var(--container-wide) + 2 * var(--page-pad));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8) clamp(var(--sp-6), 2.5vw, var(--sp-10));
  counter-reset: none;
}

.b-svcsteps__n {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--home-display-s);
  line-height: 1;
  color: var(--home-forest);
  margin: 0;
}
.b-svcsteps__n::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--home-line);
}

.b-svcsteps__row h3 {
  font-family: var(--font-display);
  font-weight: var(--w-title);
  font-size: var(--t-title);
  line-height: 1.25;
  color: var(--home-forest);
  /* 16 below, not 12 — the step description is the only thing under a 26px
     display title and it was sitting too close to read as its own line. This
     block is the "how it works" list on six service pages. */
  margin: var(--sp-5) 0 var(--sp-4);
}

/* :where() keeps this at class specificity so the numeral — also a <p> —
   is excluded without an arms race. */
.b-svcsteps__row p:where(:not(.b-svcsteps__n)) {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--soft);
  margin: 0;
}

/* ── smaller viewports ────────────────────────────────────────────────── */

@media (max-width: 899.98px) {
  .b-svcsteps__split { grid-template-columns: 1fr; }
  .b-svcsteps__media { order: -1; }
  .b-svcsteps__media img { position: static; aspect-ratio: 16 / 9; }
  .b-svcsteps__panel-inner { max-inline-size: none; margin: 0; padding: 0; }
  .b-svcsteps__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559.98px) {
  .b-svcsteps__row { grid-template-columns: 1fr; }
}