/**
 * Service page — hero, spec panel, priced menu, fit block, process, FAQ, CTA.
 * -----------------------------------------------------------------------------
 * Palette is the plum family from the treatment-page design: a refinement of
 * the site's existing maroon (#6E3C4C -> #6F3D58, near-identical hue) rather
 * than a new brand, so the page reads as this site and not a bolt-on.
 *
 * Everything is scoped under .ssm-svc. The theme sets loose element styles for
 * h1/h2/h3, ul/li, a and details that would otherwise bleed in, so headings,
 * lists and links are all reset explicitly rather than inherited.
 */

.ssm-svc {
  --svc-plum-mid: #6F3D58;
  --svc-plum-deep: #4D2C41;
  --svc-plum-falloff: #351C2D;
  --svc-mauve: #8E5A78;
  --svc-blush: #D9B6C6;
  --svc-rose: #F5EFEF;
  --svc-rule: #DCCFD2;
  --svc-ink: #351C2D;

  /* Typography is the v5 IV Therapy design system, verbatim.
     ------------------------------------------------------------------------
     Third pairing in a day, so the trail is worth leaving. Fraunces was the
     original display face and was dropped as the only family the rest of the
     site never used. The v5-print template then pinned Lora 500 + Poppins —
     and that pass turned up the real finding: `main.min.css` asks for
     `font-family: Lora` in a number of rules but no @font-face or webfont
     request has ever supplied it, so those headings have always painted
     Georgia. "The site's own faces" was not a thing that existed.

     v5 supersedes both and adds a role rather than just swapping names. It is
     a three-role system: a serif for display, a sans for reading, and a
     genuine monospace for the data and label type — the eyebrows, spec keys,
     filter chips and flags that Poppins had been standing in for. All three
     are requested in lib/service-menu.php, gated to component pages. */
  /* LIVE-SITE TYPE (2026-09-09, user: "match what the live site is using").
     Measured on prod and read from main.min.css: headings are Lora — declared
     300, painting the self-hosted Regular — UPPERCASE and tracked (.hdg-1 .11em,
     .hdg-2/.hdg-3 .07em, .hdg-4 .125em, 30px/1.25; page titles 48px); kickers,
     nav and every button are Miriam Libre 700, 14px/24px, 4px tracking,
     uppercase (.hdg-6 / .primary-btn); body is Poppins 400, 16px/28px
     (.paragraph-default) with 20px/32px for leads (.paragraph-large). All three
     faces are self-hosted by main.min.css on every page (Lora 400 + italic,
     Miriam Libre 700, Poppins 400) and Poppins 300–700 come from the theme's own
     Google request, so this stylesheet requests no fonts of its own.
     Supersedes the v5-print Lora 500/600 + Poppins 300 system (2026-09-01). */
  --svc-display: 'Lora', Georgia, serif;
  --svc-body: 'Poppins', system-ui, sans-serif;
  --svc-data: 'Miriam Libre', 'Poppins', system-ui, sans-serif;
  --svc-track-h1: .07em;
  --svc-track-h2: .07em;
  --svc-track-h3: .125em;
  --svc-track-k: 4px;
  --svc-maxw: 1120px;

  /* The site has TWO stacked fixed bars — `.follow-banner` (a WPCode snippet,
     not theme code) at 0-70 pushing `header.navbar` to 70-150 — but `body`
     only reserves 80px, the navbar's height alone. So the first 70px of every
     page renders underneath the header. Without this offset the eyebrow lands
     behind the navbar. Same correction as .ssm-shop-hero; a fix on body would
     move the top of every page on the site and belongs in its own pass. */
  --svc-banner-h: 70px;

  display: block;
  background: var(--svc-rose);
  color: var(--svc-ink);
  font-family: var(--svc-body);
  /* The artifact's own body metrics: 16px / 1.7 / 300. The previous pass set
     400 because Karla 300 was too thin; Poppins 300 is a different cut and the
     print system specifies it, so it is stated explicitly rather than inherited
     from main.min.css's `body { font-weight: 300 }`. */
  font-size: 16px;
  line-height: 1.75; /* 28px at 16px — .paragraph-default */
  font-weight: 400;
  padding-bottom: 5rem;
}

.ssm-svc__wrap {
  max-width: var(--svc-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.ssm-svc img { max-width: 100%; display: block; }

/* ---- type ---- */
/* Sentence case, weight 400, and slightly tighter tracking than the print
   template used. Newsreader at 400 is already a substantial weight on screen —
   its 500 reads as a semibold — so the design sets headings one step lighter
   than the Lora pass did and lets the larger sizes carry the emphasis instead.

   An earlier iteration uppercased all three levels with positive tracking, on
   the theory that the rest of the site sets display type that way. Both
   supplied designs set headings in sentence case, so that is settled.
   Uppercase survives only on label type: buttons, spec keys, eyebrows, chips
   and flags. */
.ssm-svc__title,
.ssm-svc__h2,
.ssm-svc h3 {
  font-family: var(--svc-display);
  font-weight: 400;
  /* 2026-09-10 client: no all-caps on titles/headers — sentence case, template tracking */
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--svc-plum-falloff);
  margin: 0 0 0.5rem;
  font-size: clamp(1.05rem, 1.5vw, 1.375rem);
  line-height: 1.25;
}
.ssm-svc__title {
  font-family: var(--svc-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  /* .llvc__content__title / page title on the live site: Lora 48px/1.25 */
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  line-height: 1.25;
  color: var(--svc-plum-falloff);
  margin: 0;
}
/* The design sets the second clause of the h1 in italic. Newsreader's italic is
   a true cut, not a slant, which is the reason the family was requested with
   its italic axis. */
.ssm-svc__title em {
  font-style: italic;
  color: var(--svc-plum-mid);
}
.ssm-svc__h2 {
  font-family: var(--svc-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  /* .hdg-2: Lora 30px/1.25 .07em uppercase */
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.25;
  color: var(--svc-plum-falloff);
  margin: 0;
}

/* ---- the monospace role ----
   These are label type, not prose: they are scanned, they are short, and they
   sit in uppercase with wide tracking. In the v5 system they take the mono
   face. Grouped in one block rather than added to each rule so the role stays
   auditable — if the third face ever changes again, this is the list. */
.ssm-svc__fact dt,
.ssm-svc__facts-hd,
.ssm-svc__spec-row dt,
.ssm-svc__drip-flag,
.ssm-svc__drip-in li,
/* .ssm-svc__filt is NOT listed here: it declares its own family further down
   the file, so an entry in this group would silently lose to it. It is set at
   that rule instead. */
.ssm-svc__cta-meta,
.ssm-svc__hero-tag,
.ssm-svc__quote figcaption {
  font-family: var(--svc-data); font-weight: 700;}

.ssm-svc__eyebrow {
  /* .hdg-6 on the live site: Miriam Libre 700, 14px/24px, 4px tracking. The
     hairline prefix stays — it is the one thing the v5 pages add to it. */
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--svc-data);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: var(--svc-track-k);
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin-bottom: 1.1rem;
}
/* Eyebrow on a dark ground (timeline, group band, invite card, dark hero).
   Restored 2026-09-09: the rule lived inside the old group-band block and went
   with it when that block was rewritten, leaving mauve on plum at 2.9:1. */
.ssm-svc__eyebrow--on-dark { color: var(--svc-blush); }
.ssm-svc__eyebrow--on-dark::before { background: var(--svc-mauve); }
.ssm-svc__eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--svc-blush);
  flex: none;
}

.ssm-svc__lede { margin-top: 1.2rem; }
.ssm-svc__lede p {
  font-family: var(--svc-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--svc-plum-deep);
  margin: 0 0 1rem;
}
.ssm-svc__lede p:last-child { margin-bottom: 0; }

.ssm-svc__note {
  margin: 1.6rem 0 0;
  font-size: 1rem;
  color: var(--svc-plum-deep);
  max-width: 56ch;
}

.ssm-svc__head {
  margin-bottom: 2.6rem;
  max-width: 62ch;
}

/* ---- buttons ---- */
/* Uppercase + tracking, matching the site's own button convention. The type
   size drops as caps read larger than lower-case at the same size, and the
   horizontal padding grows because tracking adds width to the label. */
.ssm-svc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* .primary-btn / .secondary-btn on the live site */
  font-family: var(--svc-data);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: var(--svc-track-k);
  text-transform: uppercase;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ssm-svc__btn:focus-visible { outline: 3px solid var(--svc-mauve); outline-offset: 3px; }
.ssm-svc__btn--primary { /* 2026-09-10: solid CTAs share the site purple (plum-falloff), see brand-plum.css */ background: var(--svc-plum-falloff); color: #fff; }
.ssm-svc__btn--primary:hover,
.ssm-svc__btn--primary:focus { background: var(--svc-plum-deep); color: #fff; }
.ssm-svc__btn--ghost { border-color: var(--svc-plum-mid); color: var(--svc-plum-mid); background: transparent; }
.ssm-svc__btn--ghost:hover,
.ssm-svc__btn--ghost:focus { background: var(--svc-plum-mid); color: #fff; }
.ssm-svc__btn--light { background: #fff; color: var(--svc-plum-deep); }
.ssm-svc__btn--light:hover,
.ssm-svc__btn--light:focus { background: var(--svc-blush); color: var(--svc-plum-deep); }

/* ---- brand mark ---- */
/* The brand wave mark. Replaced a generated circle containing a Fraunces "S" —
   that was a placeholder device, and the real logo mark is both more
   distinctive and actually the brand. No circle around it: the mark is already
   a closed, self-contained shape and a ring only competed with it.
   `currentColor` lets the panel set the tone. */
.ssm-svc__mark {
  /* Source art is 264 x 561, so height drives the size and width follows. */
  height: 72px;
  width: auto;
  flex-shrink: 0;
  display: block;
  /* The panel is a column flex container, so the default `stretch` blows the
     SVG out to the full column width and preserveAspectRatio then centres the
     glyph inside that box — leaving the mark floating mid-column while the
     heading below it is flush left. `flex-start` makes it take its intrinsic
     width and line up with the text. */
  align-self: flex-start;
  color: var(--svc-blush);
  /* A quiet signature, not a second focal point beside the heading. */
  opacity: 0.85;
}

/* ---- hero ---- */
.ssm-svc__hero { padding-top: calc(64px + var(--svc-banner-h)); }
.ssm-svc__hero-grid {
  display: grid;
  /* minmax(0,…) not a bare 1fr — the lede's 56ch measure would otherwise set a
     min-content floor and blow the column past the viewport on narrow screens. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.ssm-svc__hero-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.ssm-svc__hero-media {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
  background: linear-gradient(160deg, var(--svc-blush), var(--svc-plum-mid) 130%);
}
.ssm-svc__hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---- quick facts ---- */
.ssm-svc__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--svc-rule);
  border-bottom: 1px solid var(--svc-rule);
  /* Hairlines are drawn as grid gaps over a ruled background rather than as a
     border on each cell. With a per-cell border, any count that doesn't divide
     evenly leaves a dangling rule on the last cell of a short row; this way the
     rules are always the gaps between cells, whatever the count wraps to. */
  gap: 1px;
  background: var(--svc-rule);
}
/* The strip is a single scan-line: however many facts there are, they sit on
   one row on desktop. `auto-fit` over the actual child count rather than a
   hardcoded 4 — the count is editor-controlled, and a fixed track count is what
   previously left an orphan row with a dangling rule. */
.ssm-svc__facts {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
}
/* 2026-09-11 client: "expand the pink on the info bar so it has more continuity" — the strip's rose
   and its two hairlines run edge to edge (like the jump band beneath it) while the cells stay on
   the container grid. Painted with a spread box-shadow clipped to the strip's own height, which
   adds no scrollable overflow; the pseudo-elements extend the top and bottom rules the same way. */
.ssm-svc__facts {
  position: relative;
  box-shadow: 0 0 0 100vmax var(--svc-rose);
  clip-path: inset(0 -100vmax);
}
.ssm-svc__facts::before,
.ssm-svc__facts::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--svc-rule);
  box-shadow: 0 0 0 100vmax var(--svc-rule);
  clip-path: inset(0 -100vmax);
  pointer-events: none;
}
.ssm-svc__facts::before { top: -1px; }
.ssm-svc__facts::after  { bottom: -1px; }
/* Five across gets tight, so the type steps down rather than the row wrapping.
   The step is now a nudge rather than the cliff it used to be: it was written
   when the labels were sentences — "Blends to choose from", "When you feel it",
   "Typical cadence" — which genuinely needed shrinking to hold one line. The
   v5 copy is "Session", "From", "Blends", so most of that headroom came back
   and the old step was only making the strip hard to read. Kept, because five
   cells each carrying a note line is still the tightest the strip ever gets. */
.ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact {
  padding: 1.25rem 0.9rem;
}
.ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact dt {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
}
.ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact dd {
  font-size: 1.22rem;
}
/* Between the 880px stacking point and ~1060 the cells get tight, so the
   horizontal padding comes in to buy the type its room.

   There used to be a second type step-down here as well. It is gone: measured
   at 881 / 900 / 940 / 980 / 1024 / 1060, the strip holds its single row at the
   full size with no label wrapping, no note running past two lines and no
   overflow. It was only ever needed for the old sentence-length labels, and
   keeping it meant the hardest range to read was also the smallest type. */
@media (min-width: 881px) and (max-width: 1060px) {
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact { padding: 1.1rem 0.7rem; }
}

.ssm-svc__fact {
  padding: 1.4rem 1.2rem;
  background: var(--svc-rose);
}
.ssm-svc__fact dt {
  /* 0.8rem, up from 0.72. Mono faces carry a small x-height for their em, so
     they read a step smaller than the number suggests — at 0.72 these labels
     measured 10.5px on the page and were genuinely hard to read. */
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  font-weight: 700; /* label system: Miriam Libre 700 (2026-09-10 consistency pass) */
  margin: 0 0 0.25rem;
  /* Labels are short enough to sit on one line at every count; wrapping one
     would push its row taller than its neighbours and break the scan-line. */
  text-wrap: balance;
}
.ssm-svc__fact dd {
  margin: 0;
  font-family: var(--svc-display);
  /* The value is what the strip exists to be scanned for, so it takes the
     largest step up. Newsreader at 1.35rem sits clearly under the h2 scale
     without competing with it. */
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--svc-plum-falloff);
}

/* ---- section rhythm ----
   The first section after the hero carries the full 76px; the rest only pad the
   bottom, so consecutive sections don't double up into a 152px gap. */
.ssm-svc__section { padding: 76px 0; }
.ssm-svc__section--tight { padding-top: 0; }
.ssm-svc__section--last { padding-bottom: 0; }

/* The hero's "See the menu" button jumps to #ssm-menu, which would otherwise
   land under the two fixed bars. Clears both, not just the navbar. */
.ssm-svc [id] { scroll-margin-top: calc(var(--svc-banner-h) + 90px); }
.ssm-svc:has(.ssm-svc__stickybar) [id] { scroll-margin-top: calc(var(--svc-banner-h) + 90px + 70px); } /* the floating bar (≈66–70px tall) sits under the header */

/* ---- spec panel ---- */
.ssm-svc__spec {
  background: var(--svc-plum-falloff);
  border-radius: 24px;
  color: var(--svc-rose);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.ssm-svc__spec-brand {
  padding: 3rem;
  background: linear-gradient(160deg, var(--svc-plum-deep), var(--svc-plum-falloff));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.ssm-svc__spec-brand .ssm-svc__h2 { color: var(--svc-rose); }
.ssm-svc__spec-brand p {
  margin: 1rem 0 0;
  color: var(--svc-blush);
  font-size: 0.98rem;
}
/* The brand column is space-between, so with only the mark and a caption it left
   a large void in the middle. The image fills it and is `margin: auto 0` rather
   than a flex child at either end, so the panel still balances without one. */
.ssm-svc__spec-media {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(220, 207, 210, .08);
}
.ssm-svc__spec-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ssm-svc__spec-table {
  margin: 0;
  padding: 2.2rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ssm-svc__spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(220, 207, 210, .18);
}
.ssm-svc__spec-row:last-child { border-bottom: none; }
.ssm-svc__spec-row dt {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-blush);
  font-weight: 600;
  padding-top: 0.15rem;
}
.ssm-svc__spec-row dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--svc-rose);
}

/* ---- indication chips ---- */
.ssm-svc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ssm-svc__chips li {
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 100px;
  padding: 0.55rem 1.15rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--svc-plum-deep);
  margin: 0;
}
.ssm-svc__chips li::before { content: none; }

/* ---- the priced menu ----
   A card grid rather than the dot-leader list this component started as: with a
   price on every row the leader was doing no work, and cards let the twelve
   blends be scanned in three columns instead of one long list. */
.ssm-svc__menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}
.ssm-svc__drip {
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 20px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ssm-svc__drip-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  /* The price is `flex: 0 0 auto` and `nowrap`, so it cannot shrink; the name's
     min-content floor is its longest word. Below ~340px a long price such as
     "$100 – $200" beside a name pushed the price outside the card. Wrapping is
     the release valve and engages only when the row genuinely will not fit —
     at every other width this row still sits on one line. */
  flex-wrap: wrap;
}
.ssm-svc__drip-name {
  font-family: var(--svc-display);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--svc-plum-falloff);
  /* A flex child defaults to its min-content width. Fourth instance of this
     trap on the site, after the shop toolbar, the PDP column and __pair. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.ssm-svc__drip-price {
  flex: 0 0 auto;
  font-family: var(--svc-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--svc-plum-mid);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ssm-svc__drip-desc {
  margin: 0;
  font-size: 0.93rem;
  color: var(--svc-plum-deep);
}
.ssm-svc__drip-desc.is-empty { display: none; }

.ssm-svc__footnote {
  margin: 2rem 0 0;
  font-size: 0.9rem;
  color: var(--svc-mauve);
  max-width: 62ch;
}

/* ---- fit block ---- */
.ssm-svc__fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
.ssm-svc__fit {
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 20px;
  padding: 2rem;
}
/* Dashed, unfilled: the "consider something else" column should read as the
   quieter of the two, not as an equal-weight offer. */
.ssm-svc__fit--alt { background: transparent; border-style: dashed; }
.ssm-svc__fit h3 { margin-bottom: 1rem; }
.ssm-svc__fit ul { list-style: none; margin: 0; padding: 0; }
.ssm-svc__fit li {
  padding: 0.45rem 0 0.45rem 1.6rem;
  position: relative;
  font-size: 0.96rem;
  color: var(--svc-plum-deep);
  margin: 0;
}
.ssm-svc__fit li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--svc-mauve);
}
.ssm-svc__fit p {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--svc-mauve);
}

/* ---- process steps ---- */
.ssm-svc__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  counter-reset: svc-step;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The IV authority draws four stages across when there are four; three
   cards in a 3-up grid were leaving the fourth step orphaned on IV, HRT and
   peptides (parity audit 2026-09-08). */
.ssm-svc__steps:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ssm-svc__step {
  /* The template's `.stage` (HALO, IV authority, rev B): a 2px plum rule on
     top, then kicker · h3 · body on the page ground. Was a white 20px-radius
     card with a large blush counter — the one block the 2026-09-08 parity
     audit found styled differently from every reference. */
  border-top: 2px solid var(--svc-plum-deep);
  padding: 20px 0 0;
  counter-increment: svc-step;
  margin: 0;
}
.ssm-svc__step::before {
  content: counter(svc-step, decimal-leading-zero);
  display: block;
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin-bottom: 12px;
  line-height: 1;
}
.ssm-svc__step h3 { margin: 0 0 10px; color: var(--svc-ink); }
.ssm-svc__step p { margin: 0; font-size: 0.98rem; color: var(--svc-ink-soft, #635660); }
.ssm-svc__steps-note { margin-top: 1.6rem; font-size: 0.93rem; color: var(--svc-ink-soft, #635660); max-width: 70ch; }

/* ---- a linked menu row ----
   Used by concern pages, where the menu's job is to route rather than to price,
   so the name has to read as clickable without turning the row into a wall of
   blue. Inherits the row's display face and colour and carries a hairline
   underline, which firms up on hover and focus. */
.ssm-svc__drip-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--svc-blush);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.ssm-svc__drip-name a:hover,
.ssm-svc__drip-name a:focus-visible {
  color: var(--svc-plum-mid);
  border-bottom-color: var(--svc-plum-mid);
}

/* ---- process step label ----
   Opt-in per step. Where a label exists it takes the counter's slot and the
   counter is suppressed, so the card never carries two markers. Mono, because
   this is the same class of type as the eyebrows and spec keys. */
.ssm-svc__step--labelled { counter-increment: none; }
.ssm-svc__step--labelled::before { content: none; }
.ssm-svc__step-k {
  display: block;
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin-bottom: 12px;
  line-height: 1;
}

/* ---- recovery timeline ----
   Six stages across on a desktop, three on a tablet, one on a phone. The
   connecting rule is drawn on the track rather than per-stage so it can't
   overhang the last card, and it is dropped entirely once the stages stack —
   a vertical run of cards already reads as a sequence without it. */
.ssm-svc__tl {
  background: var(--svc-plum-falloff);
  color: #F3E7EC;
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3.25rem);
}
.ssm-svc__tl-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.ssm-svc__tl .ssm-svc__h2 { color: #fff; }
.ssm-svc__tl .ssm-svc__lede { color: #EFDCE3; }

.ssm-svc__tl-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--tl-cols, 6), minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}
.ssm-svc__tl-stage {
  margin: 0;
  padding-top: 1.5rem;
  position: relative;
}
/* The connector is drawn per stage, reaching across the gap to the next dot,
   and suppressed on the last one. A single rule across the whole track was the
   obvious first move and it overhangs: it runs to the track's right edge, a full
   column past the final dot, so the arc appears to continue into nothing. */
.ssm-svc__tl-stage::after {
  content: '';
  position: absolute;
  left: 0.6rem;
  top: 0.3rem;
  width: calc(100% + 1.25rem - 0.6rem);
  height: 1px;
  background: rgba(217, 182, 198, 0.35);
}
.ssm-svc__tl-stage:last-child::after { display: none; }
.ssm-svc__tl-stage::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--svc-blush);
}
.ssm-svc__tl-day {
  display: block;
  font-family: var(--svc-data);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-blush);
  margin-bottom: 0.5rem; font-weight: 700;}
.ssm-svc__tl .ssm-svc__tl-title {
  font-family: var(--svc-display);
  font-size: 1.15rem;
  font-weight: 400;
  /* Scoped to .ssm-svc__tl on purpose. `.ssm-svc h3` sets the ink colour at
     specificity 0,1,1, which outranks a single class — so an unscoped
     .ssm-svc__tl-title paints --svc-plum-falloff, the exact colour of this
     section's own background, and the stage titles vanish. Same scoping the
     .ssm-svc__group heading uses for the same reason. */
  color: #fff;
  margin: 0 0 0.45rem;
  line-height: 1.25;
  text-wrap: balance;
}
.ssm-svc__tl-stage p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #E3CBD5;
}

.ssm-svc__tl-note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(217, 182, 198, 0.3);
  max-width: 760px;
}
.ssm-svc__tl-note p { margin: 0 0 0.75rem; font-size: 0.95rem; color: #EFDCE3; }
.ssm-svc__tl-note p:last-child { margin-bottom: 0; }
.ssm-svc__tl-note a { color: #fff; }

/* ---- links inside editor prose ----
   Three fields render editor HTML — the hero intro, the fit note and the
   timeline note — and each is used to route someone to a page that suits them
   better. Without an affordance those links inherit the paragraph's own colour
   and read as plain text: measured on the melasma fit note, link and body were
   the identical rgb(142,90,120) with no underline and no weight change, i.e.
   invisible. A hairline underline that firms up on hover matches the treatment
   already used on the menu rows and the location block. */
.ssm-svc__fit-note a,
.ssm-svc__lede a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--svc-blush);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.ssm-svc__fit-note a:hover,
.ssm-svc__fit-note a:focus-visible,
.ssm-svc__lede a:hover,
.ssm-svc__lede a:focus-visible {
  color: var(--svc-plum-falloff);
  border-bottom-color: var(--svc-plum-mid);
}
.ssm-svc__tl-note a {
  border-bottom: 1px solid rgba(217, 182, 198, 0.6);
  text-decoration: none;
}
.ssm-svc__tl-note a:hover,
.ssm-svc__tl-note a:focus-visible { border-bottom-color: #fff; }

/* Six across needs ~1060px to give each stage a readable measure; below that
   it goes to three (two rows, so the connecting rule is dropped — one rule can
   only join the first row) and then to one. */
@media (max-width: 1060px) {
  .ssm-svc__tl-track { grid-template-columns: repeat(min(var(--tl-cols, 6), 3), minmax(0, 1fr)); row-gap: 1.75rem; }
  /* More than one row now, and a horizontal segment would run off the end of
     each row into the next. The dots plus the "when" labels carry the order. */
  .ssm-svc__tl-stage::after { display: none; }
}

/* ---- FAQ ---- */
.ssm-svc__faq { max-width: 760px; }
.ssm-svc__faq details { border-bottom: 1px solid var(--svc-rule); }
.ssm-svc__faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 0;
  font-family: var(--svc-display);
  font-size: 1.14rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--svc-plum-falloff);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.ssm-svc__faq summary::-webkit-details-marker { display: none; }
.ssm-svc__faq summary::after {
  content: "+";
  font-family: var(--svc-body);
  font-size: 1.4rem;
  color: var(--svc-mauve);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.ssm-svc__faq details[open] summary::after { transform: rotate(45deg); }
.ssm-svc__faq summary:focus-visible {
  outline: 3px solid var(--svc-mauve);
  outline-offset: 3px;
  border-radius: 6px;
}
.ssm-svc__faq details p {
  margin: 0;
  padding: 0 0 1.4rem;
  max-width: 62ch;
  color: var(--svc-plum-deep);
  font-size: 0.98rem;
}

/* ---- pairs well with ---- */
.ssm-svc__pairs {
  display: grid;
  /* Three across, as every reference draws `.pairs` (HALO template, IV
     authority, rev B concern template all use repeat(3,1fr)). Was 2 — the
     2026-09-08 parity audit caught it on all 15 pages. Drops to 2 at ≤980
     with the steps grid, then 1 at ≤840. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.ssm-svc__pair {
  /* Template `.pair`: bordered block card, 3px radius, kicker on top and a
     descriptive link label at the foot — the twin of the concern card. Was a
     flex row with a trailing arrow. */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-radius: 3px;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
a.ssm-svc__pair:hover,
a.ssm-svc__pair:focus-visible { border-color: var(--svc-plum-mid); transform: translateY(-2px); color: inherit; }
.ssm-svc__pair h3 { margin: 0 0 8px; color: var(--svc-ink); overflow-wrap: anywhere; }
.ssm-svc__pair p { margin: 0; font-size: 0.92rem; color: var(--svc-ink-soft, #635660); }
.ssm-svc__pair-go {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--svc-data);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--svc-plum-mid);
}

/* ---- closing CTA ---- */
.ssm-svc__cta {
  background: var(--svc-plum-mid);
  border-radius: 24px;
  padding: 4rem 3rem;
  color: #fff;
  text-align: center;
}
.ssm-svc__cta .ssm-svc__h2 { color: #fff; margin-bottom: 0.8rem; }
.ssm-svc__cta-body {
  color: var(--svc-blush);
  max-width: 52ch;
  margin: 0 auto 2rem;
}
.ssm-svc__cta-actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ssm-svc__cta-meta {
  margin: 2.2rem 0 0;
  font-size: 0.9rem;
  color: var(--svc-blush);
}
.ssm-svc__cta-meta a { color: #fff; text-decoration: none; font-weight: 600; }
.ssm-svc__cta-meta a:hover { text-decoration: underline; color: #fff; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .ssm-svc__menu,
  .ssm-svc__pairs,
  .ssm-svc__steps,
  .ssm-svc__steps:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
  .ssm-svc__hero { padding-top: calc(40px + var(--svc-banner-h)); }
  /* Same pairing as the desktop rule above — the crumbs carry the offset. */
  .ssm-svc:has(.ssm-svc__crumbs) .ssm-svc__hero { padding-top: 40px; }
  .ssm-svc__hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Image first on mobile: the hero photo is the fastest signal of what the
     page is, and it costs nothing above a 40px heading. */
  .ssm-svc__hero-media { aspect-ratio: 16 / 10; order: -1; }

  /* Two up on tablet, whatever the count — the gap hairlines handle the rules,
     so the old per-cell border resets are no longer needed. `grid-auto-flow`
     must go back to `row` here: the desktop one-line rule sets it to `column`,
     which would otherwise keep forcing every fact onto a single row and squeeze
     five of them into a 390px viewport. */
  .ssm-svc__facts,
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px;
  }
  /* And the desktop type step-down is unnecessary once they're two up. */
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact { padding: 1.4rem 1.2rem; }
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact dt { font-size: 0.8rem; letter-spacing: 0.14em; }
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact dd { font-size: 1.35rem; }
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact-note { font-size: 0.95rem; }

  /* An odd count leaves the final grid cell empty, and because the hairlines
     are the container's background showing through the gaps, that empty cell
     renders as a solid grey block rather than as nothing. Span the last item
     across both columns so the strip always ends flush. */
  .ssm-svc__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .ssm-svc__section { padding: 56px 0; }
  .ssm-svc__section--tight { padding-top: 0; }
  .ssm-svc__section--last { padding-bottom: 0; }
  .ssm-svc__head { margin-bottom: 2rem; }

  .ssm-svc__spec { grid-template-columns: minmax(0, 1fr); }
  .ssm-svc__spec-brand,
  .ssm-svc__spec-table { padding: 2rem; }
  .ssm-svc__spec-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }

  .ssm-svc__fit-grid,
  .ssm-svc__pairs,
  .ssm-svc__steps,
  .ssm-svc__steps:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the arc becomes a vertical timeline rather than six loose dots:
     the content indents and the connector is redrawn downwards to the next dot.
     `.ssm-svc__tl-stage:last-child::after` still wins on specificity, so the
     line stops at the final stage without a second rule. */
  .ssm-svc__tl-track { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .ssm-svc__tl-stage { padding-top: 0; padding-left: 1.85rem; }
  .ssm-svc__tl-stage::before { top: 0.2rem; }
  .ssm-svc__tl-stage::after {
    display: block;
    left: 0.25rem;
    top: 1.05rem;
    width: 1px;
    height: calc(100% + 1.6rem - 1.05rem);
  }

  .ssm-svc__cta { padding: 2.75rem 1.5rem; }
}

/* The facts strip runs out of room for five across a little before the rest of
   the component needs to stack, so it gets its own slightly earlier breakpoint
   (880 vs 840). Below this it is two up; above it, one clean line. */
@media (min-width: 841px) and (max-width: 880px) {
  .ssm-svc__facts,
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact { padding: 1.4rem 1.2rem; }
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact dt { font-size: 0.8rem; letter-spacing: 0.14em; }
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact dd { font-size: 1.35rem; }
  .ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact-note { font-size: 0.95rem; }
  .ssm-svc__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .ssm-svc__menu { grid-template-columns: minmax(0, 1fr); }
  .ssm-svc__hero-ctas .ssm-svc__btn { flex: 1 1 auto; text-align: center; }
}

/* =============================================================================
   Additions merged from the later wellness iteration
   -----------------------------------------------------------------------------
   Goal filter, per-item ingredient tags, boosters, group sessions, ingredient
   glossary, location cards, disclaimer and the sticky mobile bar.

   Kept in the existing plum system rather than the iteration's wine/charcoal:
   the two palettes are the same hue family (#6B2D3E vs #6F3D58), so adopting a
   second set would have been churn without a visible gain, and plum is already
   the deliberate refinement of the site's own maroon.
   ========================================================================== */

/* ---- goal filter ---- */

.ssm-svc__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}

.ssm-svc__filt {
  font-family: var(--svc-data);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  border: 1px solid var(--svc-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--svc-plum-deep);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  /* 44px minimum so a filter is a comfortable tap target, not a hairline pill */
  min-height: 44px; font-weight: 700;}

.ssm-svc__filt:hover { border-color: var(--svc-plum-mid); color: var(--svc-plum-mid); }
.ssm-svc__filt:focus-visible { outline: 2px solid var(--svc-plum-mid); outline-offset: 2px; }
.ssm-svc__filt.is-on {
  background: var(--svc-plum-mid);
  border-color: var(--svc-plum-mid);
  color: #fff;
}

/* Announced to screen readers via aria-live; visually redundant next to the
   grid itself, so it stays quiet rather than adding another line of UI. */
.ssm-svc__filter-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ssm-svc__drip.is-filtered-out { display: none; }

/* ---- drip extras: flag + ingredient tags ---- */

.ssm-svc__drip { position: relative; }

.ssm-svc__drip-flag {
  position: absolute;
  top: -0.6rem;
  right: 1.4rem;
  background: var(--svc-plum-mid);
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

.ssm-svc__drip-in {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--svc-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ssm-svc__drip-in li {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--svc-plum-deep);
  background: var(--svc-rose);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  margin: 0;
}

/* ---- boosters ---- */

.ssm-svc__boost {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}

.ssm-svc__boost li {
  position: relative;
  padding: 1.05rem 0 1.05rem 2rem;
  border-bottom: 1px solid var(--svc-rule);
  margin: 0;
  line-height: 1.6;
}

/* A rule rather than a bullet: these are additions to something else, and a
   short dash reads as "plus this" where a disc reads as a checklist. */
.ssm-svc__boost li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.75rem;
  width: 1rem;
  height: 1px;
  background: var(--svc-plum-mid);
}

.ssm-svc__boost strong { color: var(--svc-plum-falloff); font-weight: 600; }

/* ---- group sessions ---- */

/* Light, per the IV Therapy authority (artifact 27293364): `.group` is a
   two-column grid on the page ground with hairline list rows — no plum block.
   The plum version came from the Aug-13 wellness-hub artifact's wine band and
   was the one tone mismatch the 2026-09-08 parity audit found on IV. Shared
   with wellness_hub, so the hub band goes light too (its eyebrow was the
   blush-on-light 1.6:1 trap otherwise — both components now use the plain
   eyebrow and the primary button here). */
.ssm-svc__group {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) 0;
}

.ssm-svc__group-points {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--svc-rule);
}

.ssm-svc__group-points li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--svc-rule);
  margin: 0;
  line-height: 1.6;
  color: var(--svc-ink-soft, #635660);
}

.ssm-svc__group-points strong {
  font-family: var(--svc-display);
  font-weight: 400;
  color: var(--svc-plum-deep);
}

.ssm-svc__group .ssm-svc__btn { margin-top: 1.5rem; }

@media (max-width: 820px) {
  .ssm-svc__group { grid-template-columns: minmax(0, 1fr); }
}

/* ---- ingredient glossary ---- */

.ssm-svc__gloss {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--svc-rule);
  border: 1px solid var(--svc-rule);
  border-radius: 20px;
  overflow: hidden;
}

.ssm-svc__gloss-item {
  background: #fff;
  padding: 1.5rem 1.4rem;
}

/* ⚠️ Same trap as the facts strip: the hairlines here are the CONTAINER's
   background showing through 1px gaps, so a trailing empty cell renders as a
   solid grey rectangle, not as nothing. Any term count that doesn't divide by
   the track count leaves one or two of them (14 terms in three columns leaves
   one; 10 leaves two). Span the last item across the rest of its row so the
   grid always ends flush, whatever the editor's count. */
.ssm-svc__gloss-item:nth-child(3n + 1):last-child { grid-column: span 3; }
.ssm-svc__gloss-item:nth-child(3n + 2):last-child { grid-column: span 2; }

.ssm-svc__gloss dt {
  font-family: var(--svc-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--svc-plum-falloff);
  line-height: 1.25;
  margin: 0 0 0.4rem;
}

.ssm-svc__gloss dd {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---- location cards ---- */

.ssm-svc__locs {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  text-align: left;
}

.ssm-svc__loc {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  margin: 0;
}

.ssm-svc__loc h3 {
  font-family: var(--svc-display);
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 0.5rem;
}

.ssm-svc__loc p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #EFDCE3;
}

.ssm-svc__loc a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.ssm-svc__loc a:hover { border-bottom-color: #fff; }

/* ---- disclaimer ---- */

.ssm-svc__disclaimer-wrap { padding-top: 2.5rem; }

.ssm-svc__disclaimer {
  font-size: 0.78rem;
  line-height: 1.65;
  color: #7C6B74;
  max-width: 90ch;
  margin: 0;
}

/* ---- floating book bar (client template "bookbar", 2026-09-11) ----
   Every width, revealed once the hero has scrolled past: page name (Lora) · three-fact strap
   (blush, uppercase) · Book pill (blush). Pinned directly BELOW the fixed header stack (client
   2026-09-11: "below the nav bar") — utility banner 70px + dark header 80px = 150px — and stacked
   under the header (z 140), so once the hero has scrolled past it slides down out of the header.
   Phones drop the name and strap and show Call + Book. */

.ssm-svc__stickybar {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--svc-banner-h) + 80px); /* under .follow-banner (70px) + header (80px) */
  z-index: 140; /* beneath the header (150) so it can slide out from under it */
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 56px;
  padding: 8px 24px;
  background: rgba(53, 28, 45, 0.97);
  backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  transform: translateY(-110%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.ssm-svc__stickybar.is-up { transform: translateY(0); }
.ssm-svc__stickybar-name {
  font-family: var(--svc-display);
  font-size: 1.05rem;
  line-height: 1.2;
  color: #fff;
  margin-left: max(0px, calc((100% - var(--svc-maxw)) / 2));  /* start on the container's edge */
}
.ssm-svc__stickybar-meta {
  font-family: var(--svc-data);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-blush);
  margin-left: auto;
  white-space: nowrap;
}
.ssm-svc__stickybar .ssm-svc__btn { flex: none; text-align: center; justify-content: center; }
.ssm-svc__stickybar .ssm-svc__btn--primary {
  background: var(--svc-blush);
  color: var(--svc-plum-deep);
  margin-right: max(0px, calc((100% - var(--svc-maxw)) / 2));
}
.ssm-svc__stickybar .ssm-svc__btn--primary:hover { background: #fff; color: var(--svc-plum-deep); }
.ssm-svc__stickybar .ssm-svc__btn--ghost-light { display: none; }
@media (max-width: 720px) { .ssm-svc__stickybar-meta { display: none; } }
@media (max-width: 640px) {
  .ssm-svc__stickybar { gap: 0.6rem; padding: 0.6rem 0.9rem; }
  .ssm-svc__stickybar-name { display: none; }
  .ssm-svc__stickybar .ssm-svc__btn { flex: 1; margin: 0; }
  .ssm-svc__stickybar .ssm-svc__btn--ghost-light { display: inline-flex; }
}

.ssm-svc__btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.ssm-svc__btn--ghost-light:hover { background: #fff; color: var(--svc-plum-falloff); }

@media (prefers-reduced-motion: reduce) {
  .ssm-svc__stickybar { transition: none; }
}

/* ---- responsive ---- */

@media (max-width: 980px) {
  .ssm-svc__gloss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssm-svc__group { grid-template-columns: minmax(0, 1fr); }

  /* Two tracks now, so the three-column spans are wrong and an odd count is
     what leaves the orphan instead. */
  .ssm-svc__gloss-item:nth-child(3n + 1):last-child,
  .ssm-svc__gloss-item:nth-child(3n + 2):last-child { grid-column: auto; }
  .ssm-svc__gloss-item:nth-child(2n + 1):last-child { grid-column: span 2; }
}

@media (max-width: 640px) {
  .ssm-svc__gloss { grid-template-columns: minmax(0, 1fr); }
  /* One track: a `span 2` here would create an implicit second column and
     break the grid, so every span is cleared. */
  .ssm-svc__gloss-item:nth-child(2n + 1):last-child { grid-column: auto; }
  .ssm-svc__filt { flex: 1 1 calc(50% - 0.5rem); }
  .ssm-svc__locs { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   v5 additions — jump nav, spec-strip header, fact notes, hero tag, testimonial
   ========================================================================== */

/* ---- jump nav ----
   Deliberately NOT sticky, unlike the reference page. This site already has two
   stacked fixed bars owning the top 150px (see the --svc-banner-h note above),
   and a third sticky row would leave almost nothing of a phone viewport. It
   scrolls away with the hero instead. */
.ssm-svc__jump {
  /* 2026-09-10 client: "align these two sections" — the bar used to be a full-bleed band under
     a contained spec strip. It is now contained too: the rose band, its rule and its links share
     the strip's left/right edges, and the links sit on the cells' 14px text indent. */
  /* 2026-09-11 client: one row, and "expand the pink back splash from one end of the page to the
     other to fit the text". The band is full-bleed again (rose + rule on the nav itself); the list
     still STARTS on the strip's text indent — the wrap's left padding recreates the container's
     inner edge — but is free to run past the container's right edge to the page gutter. If a
     viewport is still too narrow for one row, the list scrolls and JS flags [data-overflow] so the
     fade appears; it never wraps and never clips silently. */
  border: 0;
  border-bottom: 1px solid var(--svc-rule);
  background: var(--svc-rose);
  position: relative;
}
.ssm-svc__jump .ssm-svc__wrap {
  position: relative;
  max-width: none;   /* the row may be wider than the strip; it is centred on the same axis */
  padding: 0 24px;
}
.ssm-svc__jump ul {
  display: flex;
  gap: clamp(16px, 2.2vw, 32px); /* phones/tablets; desktop gap is set below */
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  /* side padding mirrors the fact cells (1.2rem; 0.9rem on 5-fact strips, 0.7rem in their
     881–1060px squeeze) so the link text sits on the cell text's own indent */
  padding: 1.15rem 1.2rem;
  background: transparent; /* the band is painted by .ssm-svc__jump, edge to edge */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ssm-svc__jump ul::-webkit-scrollbar { display: none; }
.ssm-svc__jump li { margin: 0; padding: 0; }
.ssm-svc__jump a {
  font-family: var(--svc-data);
  font-size: 0.8125rem;
  color: var(--svc-plum-mid);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.ssm-svc__jump a:hover,
.ssm-svc__jump a:focus-visible {
  color: var(--svc-plum-falloff);
  border-bottom-color: var(--svc-plum-mid);
}
/* A scroll container with no visible edge reads as a short list that simply
   ends. The fade is the only affordance that there is more to the right — the
   same treatment the print template in this system uses. */
/* Desktop: the row is CENTRED under the strip (client 2026-09-11, on a wide monitor: "I want the
   text to be more centered") — same centre axis as the 1120px container, symmetric overhang when
   the eight chips are wider than it. `safe center` falls back to start-aligned scrolling if a row
   is ever too wide for the viewport, so nothing is clipped on the left. */
@media (min-width: 901px) {
  .ssm-svc__jump ul { justify-content: safe center; gap: clamp(20px, 2.6vw, 44px); }
}
/* Between the phone breakpoint and ~1300px the eight-chip pages need a slightly tighter setting to
   hold one row; measured 2026-09-11 (weight loss + acne fit at 1024 and 1280 with these). */
@media (min-width: 901px) and (max-width: 1300px) {
  .ssm-svc__jump ul { gap: 16px; }
  .ssm-svc__jump a { font-size: 0.75rem; letter-spacing: .14em; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .ssm-svc__jump ul { gap: 12px; } /* the eight-chip weight loss page needs 28px more at 1024 */
}
.ssm-svc__jump[data-overflow] .ssm-svc__wrap::after {
  content: "";
  position: absolute;
  right: 0; /* the band is full-bleed, so the fade sits on the viewport edge */
  top: 0;
  bottom: 1px;
  width: 44px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(245, 239, 239, 0), var(--svc-rose));
}
@media (max-width: 900px) {
  .ssm-svc__jump .ssm-svc__wrap::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 1px;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(245, 239, 239, 0), var(--svc-rose));
  }
  .ssm-svc__jump a { font-size: 0.95rem; }
}

/* Every jump target has to clear the two fixed bars, or each click lands with
   the section heading hidden underneath the header. scroll-margin on the
   targets rather than scroll-padding on <html>, which is not ours to set. */
.ssm-svc [id] {
  scroll-margin-top: calc(var(--svc-banner-h) + 6rem);
}

/* ---- spec strip header ---- */
.ssm-svc__spec-strip {
  margin-top: 56px;
  border-top: 1px solid var(--svc-plum-mid);
}
/* Without the header row the strip's own rule would sit directly on the
   facts grid's rule — two hairlines, 1px apart. */
.ssm-svc__spec-strip:not(:has(.ssm-svc__facts-hd)) { border-top: 0; }
.ssm-svc__facts-hd {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0.9rem 0 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--svc-plum-mid);
}
.ssm-svc__facts-hd b { font-weight: 700; }
.ssm-svc__facts-hd i {
  font-style: normal;
  color: var(--svc-mauve);
  margin-left: auto;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  text-align: right;
}
/* The strip owns the top margin now, so the grid inside it must not add its
   own — that rule sets `margin: 56px 0 0`. */
.ssm-svc__spec-strip .ssm-svc__facts { margin-top: 0; }
@media (max-width: 560px) {
  /* Label and aside stop fitting on one line well before the strip stacks. */
  .ssm-svc__facts-hd { flex-direction: column; gap: 4px; }
  .ssm-svc__facts-hd i { margin-left: 0; text-align: left; }
}

/* ---- fact note ----
   Third line under a fact's value: the qualifier the number alone overstates
   ("$135" / "to $210 · every price posted"). Resets the label styling it would
   otherwise inherit from the cell — this one is prose, at prose weight. */
.ssm-svc__fact-note {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--svc-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--svc-plum-deep);
}
/* The five-fact size-down steps the value down; the note goes with it. */
.ssm-svc__facts:has(.ssm-svc__fact:nth-child(5)) .ssm-svc__fact-note { font-size: 0.88rem; }

/* ---- hero image caption tag ---- */
.ssm-svc__hero-media { position: relative; }
.ssm-svc__hero-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(251, 249, 249, 0.94);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-plum-mid);
  padding: 7px 12px;
  border-radius: 2px;
}

/* ---- testimonial ---- */
.ssm-svc__quote {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.ssm-svc__quote .ssm-svc__mark {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 auto 1.6rem;
  color: var(--svc-plum-mid);
}
.ssm-svc__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--svc-display);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  line-height: 1.38;
  font-style: italic;
  color: var(--svc-plum-deep);
}
.ssm-svc__quote figcaption {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin-top: 1.4rem;
}

/* ---- pair kicker ----
   Says HOW the treatment pairs — same visit, quick add-on, going deeper. That
   relationship is the useful part of a "pairs well with" card and the name
   alone doesn't carry it. */
.ssm-svc__pair-k,
.ssm-svc__concern-k {
  display: block;
  font-family: var(--svc-data);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin-bottom: 10px;
}

/* NOTE: --ghost-light is NOT defined here. It already exists further up, for
   the sticky bar's Call button and the wellness hub. A second definition was
   briefly added at this point and was a mistake twice over: it changed those
   two existing buttons' border colour as a side effect, and because it set
   only `border-color` the width stayed at the original rule's 1px while the
   solid --light button uses 1.5px, so a solid/outline pair never sat flush. */

/* =============================================================================
   Google reviews + medical review byline
   ========================================================================== */

/* ---- a Google review in the testimonial slot ----
   Shares .ssm-svc__quote so the two sources are visually interchangeable; this
   only adds what a sourced review needs that a typed one doesn't. */
.ssm-svc__quote--google .ssm-svc__quote-stars {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  color: var(--svc-mauve);
  margin-bottom: 1.1rem;
  /* The glyphs already carry the meaning via aria-label on the wrapper. */
  line-height: 1;
}
.ssm-svc__quote--google figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 0.7rem;
}
.ssm-svc__quote--google figcaption a {
  color: var(--svc-plum-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ssm-svc__quote--google figcaption a:hover { color: var(--svc-plum-falloff); }
.ssm-svc__quote-when { color: var(--svc-mauve); }
/* Marks the source, which Google's terms require and which is also just honest
   — a reader should be able to tell a sourced review from site copy. */
.ssm-svc__quote-src {
  flex-basis: 100%;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--svc-mauve);
  opacity: 0.85;
}
/* Centred inside the hub, which has no .ssm-svc__quote of its own. */
.ssm-svc__quote--hub { max-width: 780px; margin-inline: auto; text-align: center; }

/* ---- aggregate rating line ---- */
.ssm-svc__grating-wrap { margin: 1.6rem 0 0; text-align: center; }
.ssm-svc__grating {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--svc-data);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-plum-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--svc-rule);
  padding-bottom: 3px; font-weight: 700;}
.ssm-svc__grating:hover { border-bottom-color: var(--svc-plum-mid); }
.ssm-svc__grating-stars { color: var(--svc-mauve); font-size: 0.95rem; }

/* ---- medically reviewed by ----
   Sits above the disclaimer, in the same quiet register: this is provenance,
   not a badge. Slightly darker than the disclaimer so the name is findable
   without competing with the page. */
.ssm-svc__medreview {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--svc-plum-deep);
  max-width: 90ch;
}
.ssm-svc__medreview-label {
  font-family: var(--svc-data);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}
.ssm-svc__medreview a {
  color: var(--svc-plum-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ssm-svc__medreview a:hover { color: var(--svc-plum-falloff); }

/* ===========================================================================
   v5-PRINT SUPERSET — 2026-09-03
   The seven sections the client's v5-print template adds on top of this
   component. Every colour and face comes from the tokens above so these bands
   inherit the Lora + Poppins system rather than restating it.
   ======================================================================== */

/* ---------- breadcrumbs ---------- */
/* The banner offset has to live on whatever renders FIRST, and on a page with
   breadcrumbs that is this bar, not the hero.
   ---------------------------------------------------------------------------
   `--svc-banner-h` was only ever applied to `.ssm-svc__hero`, which is correct
   for a page whose hero is the first thing in the article. Every page that also
   renders crumbs put an un-offset 22px bar above that hero, inside the 70px the
   offset exists to clear — so the whole trail painted underneath the fixed
   header and was invisible. Measured at both 390 and 1440 on
   /treatment/laser-resurfacing-near-naperville/ before this rule: crumbs
   80..120, header bottom 150. Not a hub-only problem; it affected every v5 page
   with a breadcrumb, which is all of them bar the wellness hub.

   The offset moves onto the crumbs, and the hero drops it when crumbs precede
   it so the two cannot both pay it and push the h1 70px down the page. `:has()`
   rather than a modifier class because the component already relies on it (see
   `.ssm-svc__facts:has(...)`) and this needs no markup change on pages that are
   already live. */
.ssm-svc__crumbs {
  padding-top: calc(22px + var(--svc-banner-h));
}
.ssm-svc:has(.ssm-svc__crumbs) .ssm-svc__hero {
  padding-top: 64px;
}
.ssm-svc__crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--svc-data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}
/* Separator is generated, not typed into the label, so a crumb can be
   reordered or removed without leaving a stray slash behind. */
.ssm-svc__crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--svc-blush);
}
.ssm-svc__crumbs a {
  color: var(--svc-mauve);
  text-decoration: none;
}
.ssm-svc__crumbs a:hover {
  color: var(--svc-plum-mid);
  text-decoration: underline;
}
.ssm-svc__crumbs li[aria-current] {
  color: var(--svc-ink);
}

/* ---------- what it treats: pills ---------- */
.ssm-svc__treats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.ssm-svc__treats a,
.ssm-svc__treats span {
  display: inline-block;
  font-size: 0.9rem;
  padding: 8px 17px;
  border: 1px solid var(--svc-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--svc-plum-mid);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
/* A pill with no destination is not a link and must not look like one. */
.ssm-svc__treats span {
  color: var(--svc-ink);
  background: transparent;
}
.ssm-svc__treats a:hover {
  border-color: var(--svc-plum-mid);
  background: var(--svc-rose);
}
.ssm-svc__treats-note {
  margin: 22px 0 0;
  font-size: 0.93rem;
  color: var(--svc-plum-falloff);
  max-width: 64ch;
}

/* ---------- concern cards ---------- */
.ssm-svc__concerns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 38px;
}
.ssm-svc__concern {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--svc-rule);
  border-radius: 3px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
a.ssm-svc__concern:hover {
  border-color: var(--svc-plum-mid);
  transform: translateY(-2px);
}
/* Scoped past `.ssm-svc h3`, which sets the dark-band falloff colour and would
   otherwise paint these headings nearly invisible on a white card — the same
   trap the timeline titles hit. */
.ssm-svc__concerns .ssm-svc__concern-title {
  font-family: var(--svc-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.375rem); /* same step as .ssm-svc h3 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--svc-ink);
  margin: 0 0 8px;
}
.ssm-svc__concern p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--svc-plum-falloff);
}
.ssm-svc__concern-go {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-plum-mid);
}
@media (max-width: 900px) {
  .ssm-svc__concerns { grid-template-columns: 1fr; }
}

/* ---------- before & after ---------- */
.ssm-svc__results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 26px);
  margin-top: 38px;
}
.ssm-svc__result figure {
  margin: 0;
}
.ssm-svc__result img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--svc-rose);
}
.ssm-svc__result figcaption {
  margin-top: 11px;
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}
.ssm-svc__result p {
  margin: 5px 0 0;
  font-size: 0.9rem;
  color: var(--svc-plum-falloff);
}
.ssm-svc__results-note {
  margin-top: 28px;
  font-size: 0.82rem;
  color: var(--svc-plum-falloff);
  max-width: 70ch;
}
/* Two before/afters side by side are too small to read on a phone. */
@media (max-width: 560px) {
  .ssm-svc__results { grid-template-columns: 1fr; }
}

/* ---------- pricing cards ---------- */
.ssm-svc__tiers-band {
  background: var(--svc-rose);
  border-top: 1px solid var(--svc-rule);
  border-bottom: 1px solid var(--svc-rule);
}
.ssm-svc__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 38px;
  /* Deliberately NOT `align-items: start`: the cards must stretch to a common
     height so `margin-top: auto` on the button can baseline all three. With
     start-alignment each card sizes to its own content and the buttons land at
     three different heights. */
  align-items: stretch;
}
.ssm-svc__tier {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 28px 26px 30px;
  border: 1px solid var(--svc-rule);
  border-radius: 3px;
  background: #fff;
}
.ssm-svc__tier--pick {
  border-color: var(--svc-plum-mid);
}
.ssm-svc__tier-flag {
  position: absolute;
  top: -1px;
  right: 20px;
  padding: 5px 11px;
  background: var(--svc-plum-mid);
  color: #fff;
  font-family: var(--svc-data);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ssm-svc__tier-k {
  margin: 0 0 14px;
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}
.ssm-svc__tier-v {
  margin: 0 0 6px;
  font-family: var(--svc-display);
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--svc-ink);
  font-variant-numeric: tabular-nums;
}
.ssm-svc__tier-u {
  margin: 0;
  font-size: 0.88rem;
  color: var(--svc-plum-falloff);
}
.ssm-svc__tier-list {
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
  font-size: 0.93rem;
}
.ssm-svc__tier-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--svc-rule);
  color: var(--svc-plum-falloff);
}
.ssm-svc__tier-list li:last-child {
  border-bottom: 0;
}
/* Pushes every button to the same baseline whatever the list length, so three
   cards of unequal content still line up. */
.ssm-svc__tier .ssm-svc__btn {
  margin-top: auto;
  align-self: flex-start;
}
.ssm-svc__tiers-note {
  margin-top: 26px;
  font-size: 0.9rem;
  color: var(--svc-plum-falloff);
  max-width: 66ch;
}
@media (max-width: 900px) {
  .ssm-svc__tiers { grid-template-columns: 1fr; }
}

/* ---------- trust facts ---------- */
.ssm-svc__trust-band {
  border-top: 1px solid var(--svc-rule);
}
.ssm-svc__trust {
  margin: 34px 0 0;
  border-top: 1px solid var(--svc-rule);
}
.ssm-svc__trust-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--svc-rule);
}
.ssm-svc__trust-row dt {
  margin: 0;
  padding-top: 3px;
  font-family: var(--svc-data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}
.ssm-svc__trust-row dd {
  margin: 0;
  font-size: 0.96rem;
  color: var(--svc-plum-falloff);
}
/* Two columns on a wide screen, but as a grid rather than CSS columns: the
   template used `columns: 2`, which breaks a dt away from its dd across the
   column boundary. */
@media (min-width: 900px) {
  .ssm-svc__trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(28px, 4vw, 60px);
  }
}
@media (max-width: 620px) {
  .ssm-svc__trust-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------- virtual consultation band ----------
   From the client's CO2 v5-print template (`.vcmini`). Two columns on desktop,
   the motif dropping away entirely below the split — it is decorative, and at
   phone width the copy needs the whole measure more than the page needs an
   ornament. */
.ssm-svc__vc {
  /* Client's `.vcmini` (rev B, 4 Sep 2026): copy 1.35fr, phone .65fr, on the
     section ground — no card chrome, the closing plum card directly below is
     the card. Earlier revision was a white bordered box with the seal motif;
     the client's layout shows the tool on a phone instead. */
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(8px, 1.5vw, 20px) 0;
}

.ssm-svc__vc-copy .ssm-svc__lede { margin-bottom: 1.8rem; }

/* Opt-in box (the v5 hub template's `.vcmini`): rose ground, 1px rule, 3px
   radius, inner padding. The service pages keep the bare band. */
.ssm-svc__vc--boxed {
  background: var(--svc-rose);
  border: 1px solid var(--svc-rule);
  border-radius: 3px;
  padding: clamp(24px, 3.5vw, 44px);
}

/* Optional two-button row: "Book Now" (solid) beside the virtual-consultation
   link (outlined). Mirrors .ssm-svc__hero-ctas so the pair wraps the same way. */
.ssm-svc__vc-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

/* The template's `.btn--solid`: deepest plum, blush on hover. Kept as its own
   variant rather than restyling --primary, which is plum-mid everywhere else. */
.ssm-svc__btn--deep { background: var(--svc-plum-deep); color: #fff; border-color: var(--svc-plum-deep); }
.ssm-svc__btn--deep:hover,
.ssm-svc__btn--deep:focus-visible { background: var(--svc-blush); color: var(--svc-plum-deep); border-color: var(--svc-blush); }

.ssm-svc__vc-phone {
  margin: 0;
  justify-self: center;
  width: min(300px, 100%);
}
.ssm-svc__vc-phone svg { width: 100%; height: auto; display: block; }
/* The mock's photographic phone (reference/vc-phone-body-model.png, 228px wide):
   shown at its native size so it never upscales soft, floated over the faint
   seal circle the mock draws behind it. */
.ssm-svc__vc-phone:has(img) { position: relative; width: min(300px, 100%); display: grid; place-items: center; padding: 24px 0; }
.ssm-svc__vc-phone img { position: relative; z-index: 1; width: auto; max-width: 232px; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(53, 28, 45, .18)); }
.ssm-svc__vc-phone:has(img)::before {
  content: "S";
  position: absolute; left: 0; top: 50%; translate: -18% -50%;
  width: 230px; height: 230px; border-radius: 50%;
  background: rgba(217, 182, 198, .22);
  border: 1px solid rgba(217, 182, 198, .55);
  font-family: var(--svc-display); font-size: 150px; line-height: 230px; text-align: center;
  color: rgba(217, 182, 198, .35);
}
.ssm-svc__vc-phone:has(img)::after {
  content: ""; position: absolute; right: 0; top: 6%;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(217, 182, 198, .55);
}

@media (max-width: 820px) {
  .ssm-svc__vc { grid-template-columns: minmax(0, 1fr); }
  /* Template puts the phone first on narrow screens; smaller so it does not
     push the heading a full viewport down. */
  .ssm-svc__vc-phone { order: -1; width: min(200px, 100%); }
}

/* =============================================================================
   rev B price-list shape (2026-09-08) — `.rows`, `.subhd`, `.fine`, `.band`,
   `.fmla`, `.tiles`, `.sec--rose`, plus the hub's grouped concern header.
   Values are the template's; only the names are namespaced.
   ========================================================================== */
.ssm-svc__section--rose {
  background: var(--svc-rose);
  border-top: 1px solid var(--svc-rule);
  border-bottom: 1px solid var(--svc-rule);
  /* a band needs its own breathing room top AND bottom (the shared --tight zeroes padding-top) */
  padding-block: clamp(48px, 6vw, 88px);
}
/* the section after a band keeps its space; two bands in a row share one rule */
.ssm-svc__section--rose + .ssm-svc__section--tight { padding-top: clamp(48px, 6vw, 88px); }
.ssm-svc__section--rose + .ssm-svc__section--rose { border-top: 0; }
.ssm-svc__subhd {
  font-family: var(--svc-data);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin: 38px 0 0;
}
.ssm-svc__rows { border-top: 1px solid var(--svc-plum-deep); margin-top: 12px; }
.ssm-svc__rows > div {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr auto;
  gap: 6px 20px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--svc-rule);
}
.ssm-svc__rows b { font-weight: 500; font-size: 1rem; color: var(--svc-ink); }
.ssm-svc__rows i { font-style: normal; font-size: 0.88rem; color: var(--svc-ink-soft, #635660); grid-column: 1 / -1; order: 3; }
.ssm-svc__rows em {
  font-style: normal;
  font-family: var(--svc-display);
  font-size: 1.16rem;
  color: var(--svc-plum-mid);
  white-space: nowrap;
  text-align: right;
}
.ssm-svc__rows em.ssm-svc__rows-q {
  font-family: var(--svc-data);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--svc-mauve);
}
.ssm-svc__fine { font-size: 0.86rem; color: var(--svc-ink-soft, #635660); margin: 14px 0 0; max-width: 70ch; }

.ssm-svc__band {
  background: linear-gradient(160deg, var(--svc-plum-deep), var(--svc-plum-falloff));
  border-radius: 3px;
  color: #fff;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3.5vw, 40px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 36px;
}
.ssm-svc__band b { font-family: var(--svc-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: #fff; }
.ssm-svc__band span { font-family: var(--svc-data); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--svc-blush); line-height: 1.8; font-weight: 700;}

.ssm-svc__fmla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: 22px;
}
.ssm-svc__fmla > div {
  background: #fff;
  border: 1px solid var(--svc-rule);
  border-left: 2px solid var(--svc-blush);
  border-radius: 3px;
  padding: 18px 20px;
}
.ssm-svc__fmla b { display: block; font-family: var(--svc-display); font-weight: 400; font-size: 1.05rem; color: var(--svc-plum-deep); margin-bottom: 3px; }
.ssm-svc__fmla span { font-size: 0.88rem; color: var(--svc-ink-soft, #635660); line-height: 1.5; }
.ssm-svc__fmla em { display: block; font-style: normal; font-family: var(--svc-display); font-size: 1.1rem; color: var(--svc-plum-mid); margin-top: 9px; }

.ssm-svc__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: 26px;
}
.ssm-svc__tile {
  background: var(--svc-rose);
  border: 1px solid var(--svc-rule);
  border-left: 2px solid var(--svc-plum-mid);
  border-radius: 3px;
  padding: clamp(22px, 3vw, 30px);
}
.ssm-svc__section--rose .ssm-svc__tile { background: #fff; }
.ssm-svc__tile h3 { margin: 0 0 6px; color: var(--svc-ink); }
.ssm-svc__tile-amt { font-family: var(--svc-display); font-size: 2.2rem; color: var(--svc-plum-mid); line-height: 1; }
.ssm-svc__tile-per { font-family: var(--svc-data); font-size: 0.8rem; color: var(--svc-ink-soft, #635660); margin-left: 4px; font-weight: 700;}
.ssm-svc__tile p { font-size: 0.93rem; color: var(--svc-ink-soft, #635660); margin: 10px 0 0; }

/* hub: grouped concern cards under a ruled heading with a count (rev B .group) */
.ssm-svc__cgroup { margin-top: clamp(40px, 5vw, 64px); }
.ssm-svc__cgroup:first-child { margin-top: 0; }
.ssm-svc__cgroup-hd {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--svc-rule);
  padding-bottom: 10px;
}
.ssm-svc__cgroup-hd h2 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); margin: 0; }
.ssm-svc__cgroup-hd span {
  font-family: var(--svc-data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--svc-mauve);
  margin-left: auto;
  white-space: nowrap;
}
.ssm-svc__cgroup .ssm-svc__concerns { margin-top: 26px; }

@media (max-width: 1000px) { .ssm-svc__fmla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ssm-svc__fmla, .ssm-svc__tiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px)  { .ssm-svc__rows > div { grid-template-columns: 1fr auto; } }


/* 2026-09-10 client: the hub's paper ground (#FBF9F9) with alternating rose bands, on EVERY v5 page.
   Bands are assigned over the final markup by ssm_alternate_bands() in lib/service-menu.php. */
.ssm-svc { background: #FBF9F9; }

/* jump-bar indent follows the fact cells (see .ssm-svc__fact paddings above) */
.ssm-svc:has(.ssm-svc__facts > .ssm-svc__fact:nth-child(5)) .ssm-svc__jump ul { padding-inline: 0.9rem; }
@media (min-width: 881px) and (max-width: 1060px) {
  .ssm-svc:has(.ssm-svc__facts > .ssm-svc__fact:nth-child(5)) .ssm-svc__jump ul { padding-inline: 0.7rem; }
}
@media (max-width: 840px) {
  /* stacked cells go back to 1.2rem side padding at this width, so the bar follows */
  .ssm-svc:has(.ssm-svc__facts > .ssm-svc__fact:nth-child(5)) .ssm-svc__jump ul { padding-inline: 1.2rem; }
}