/* Treatment pages and the treatments hub */

.tx-crumbs { padding-top: calc(var(--sc-9) + 0.5rem); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.tx-crumbs a { color: var(--sc-ink-soft); text-underline-offset: 4px; }

.tx-hero { padding-block: var(--sc-6) var(--sc-8); }
.tx-hero--hub { padding-top: calc(var(--sc-9) + 1rem); }
.tx-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.tx-hero__copy { display: grid; gap: var(--sc-5); }
.tx-hero h1 { margin: 0; }
.tx-answer { margin: 0; font-size: var(--sc-t-lg); line-height: 1.55; max-width: 40rem; color: var(--sc-ink); }
.tx-hero__act { display: flex; flex-wrap: wrap; gap: var(--sc-5); align-items: center; }
.tx-hero__media { position: relative; aspect-ratio: 4 / 5; max-width: 30rem; width: 100%; justify-self: end; }
.tx-hero__media--video { aspect-ratio: 16 / 12; max-width: 38rem; }
.tx-hero__media img, .tx-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tx-facts { padding-block: var(--sc-6); border-block: 1px solid var(--sc-hairline-strong); }
.tx-facts dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-6); }
.tx-facts dt { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.tx-facts dd { margin: var(--sc-2) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.15; color: var(--sc-ink); }

.tx-section { padding-block: var(--sc-8); }
.tx-section--linen { background: #E3D9CC; }
.tx-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 7rem); }
.tx-split h2 { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.tx-body { display: grid; gap: var(--sc-4); }
.tx-body .sc-body { margin: 0; }
.tx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.tx-list li { padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline-strong); font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.2; }
.tx-note { margin: 0; font-size: var(--sc-t-sm); }

.tx-visit { padding-block: var(--sc-8); background: var(--night); color: #F3ECE3; }
.tx-visit h2 { margin: 0 0 var(--sc-7); color: #FBF6EF; }
.tx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); counter-reset: step; }
.tx-steps li { counter-increment: step; display: grid; gap: var(--sc-3); padding-top: var(--sc-5); border-top: 1px solid rgba(243, 236, 227, 0.28); align-content: start; }
.tx-steps li::before { content: counter(step); font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1; color: #D9C9B6; }
.tx-steps h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); color: #FBF6EF; }
.tx-steps p { margin: 0; color: #DCCFC1; max-width: 32ch; }

.faq { border-top: 1px solid var(--sc-hairline-strong); }
.faq details { border-bottom: 1px solid var(--sc-hairline-strong); }
.faq summary > span { min-width: 0; overflow-wrap: break-word; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-5) 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1.25rem; text-align: center; font-family: var(--sc-font-text); font-size: var(--sc-t-lg); font-weight: 300; color: var(--sc-ink-soft); }
.faq summary > span { flex: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 var(--sc-5); max-width: 62ch; color: var(--sc-ink-soft); line-height: 1.6; }

.tx-review { margin: 0 0 var(--sc-7); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.tx-review a { color: var(--sc-ink); }
.tx-related__title { margin: 0 0 var(--sc-5); font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); }
.tx-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.tx-related a { display: grid; gap: var(--sc-2); padding: var(--sc-5) 0; border-top: 1px solid var(--line); color: var(--sc-ink); text-decoration: none; height: 100%; }
.tx-related a:hover .tx-related__name { text-decoration: underline; text-underline-offset: 6px; }
.tx-related__name { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
.tx-related__line { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }

.tx-close { padding-block: var(--sc-8) var(--sc-7); border-top: 1px solid var(--sc-hairline-strong); }
.tx-close__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sc-6); }
.tx-close h2 { margin: 0; max-width: 20ch; }
.tx-fine { margin-top: var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* hub */
.hub { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sc-7) var(--sc-5); }
.hub a { display: grid; gap: var(--sc-3); color: var(--sc-ink); text-decoration: none; }
.hub__img { aspect-ratio: 4 / 5; display: block; }
.hub__img img { transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .hub a:hover .hub__img img { transform: scale(1.03); } .hub a:hover .hub__name { text-decoration: underline; text-underline-offset: 6px; } }
.hub__name { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.1; }
.hub__new { font-style: normal; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); margin-left: var(--sc-2); }
.hub__line { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }

@media (max-width: 860px) {
  .tx-split { grid-template-columns: minmax(0, 1fr); }
  .tx-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablets keep the side-by-side hero and the three-up rows; phones stack */
@media (max-width: 640px) {
  .tx-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tx-hero__media { justify-self: start; max-width: 22rem; }
  .tx-steps, .tx-related { grid-template-columns: 1fr; }
}