/* Treatments overview — /treatments/
   Scoped to body.page-services. Page hero, labels, buttons and the illustrated .tx-card / .ti pattern are shared
   (site.css). The treatments are grouped by need: an index of the four groups opens the page, then each group holds
   its title beside a ruled list of treatments, each with its spot illustration. */

/* ---------- Index ---------- */
.page-services .tx-index {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px);
  margin: 0 0 var(--space-section); padding-top: 28px; border-top: 1px solid var(--line);
}
.page-services .tx-index__name { margin: 0 0 16px; }
.page-services .tx-index__name a { font-size: var(--fs-label); font-weight: 560; font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.page-services .tx-index ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.page-services .tx-index li a { font-size: .95rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color .3s, border-color .3s; }
.page-services .tx-index a:hover { color: var(--ink); border-color: var(--sun); }

/* ---------- Groups: the title holds beside its treatments ---------- */
.page-services .tx-group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 96px); align-items: start; scroll-margin-top: calc(var(--header-h) + 24px); }
.page-services .tx-group + .tx-group { margin-top: var(--space-section); }
.page-services .tx-group__head { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.page-services .tx-group__num { font-family: var(--f-display); font-size: 1.1rem; font-style: italic; font-weight: 300; color: var(--sun-deep); }
.page-services .tx-group__title { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; max-width: 12ch; }

.page-services .tx-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.page-services .tx-item { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
/* Each treatment is a row: illustration, then title, description and link. */
.page-services .tx-card { display: grid; grid-template-columns: clamp(76px, 7vw, 104px) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; padding: clamp(28px, 3vw, 44px) clamp(8px, 1.4vw, 24px); }
.page-services .tx-card__art { width: 100%; margin: 0; }
.page-services .tx-card__body { display: flex; flex-direction: column; align-items: flex-start; }
.page-services .tx-card__title { font-size: clamp(1.6rem, 2.2vw, 2.1rem); margin: 6px 0 14px; }
.page-services .tx-card__text { max-width: 62ch; margin-bottom: 22px; }
.page-services .tx-card__text p { margin: 0; }
.page-services .tx-card__text p + p { margin-top: 1em; }

/* ---------- Insurance note ---------- */
.page-services .tx-note {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 96px); row-gap: 18px;
  margin-top: var(--space-section); padding-top: 32px; border-top: 1px solid var(--line-strong); scroll-margin-top: calc(var(--header-h) + 24px);
}
.page-services .tx-note__title { grid-row: span 2; font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; }
.page-services .tx-note__text { max-width: 62ch; margin: 0; color: var(--muted); }
.page-services .tx-note .link-arrow { justify-self: start; }

@media (max-width: 1080px) { .page-services .tx-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .page-services .tx-group, .page-services .tx-note { grid-template-columns: minmax(0, 1fr); }
  .page-services .tx-group__head { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .page-services .tx-group__title { max-width: none; }
  .page-services .tx-note__title { grid-row: auto; }
}
@media (max-width: 640px) {
  .page-services .tx-index { display: none; }
  .page-services .tx-card { grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; padding: 28px 0; }
  .page-services .tx-card__title { font-size: 1.6rem; margin: 2px 0 10px; }
}