/* ==========================================================================
   TREATMENTS — the page's own composition.
   This is the file we iterate on. Everything here is a decision about
   this page's shape; the tokens it uses all live in site.css.
   ========================================================================== */

/* ---- the intro: a two-part composition, not a centred text block --------
   The words hold the reading edge; one tall photograph holds the quiet side.
   Their top edges are deliberately out of line — the photograph starts below
   the H1 baseline so the two do not share an axis and the block reads as
   composed rather than as a header with a picture beside it. */
.intro-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:var(--s-6);
  align-items:start;
}
.intro-copy{ grid-column:2 }
.intro-photo{ grid-column:1; margin-block-start:var(--s-8) }
.intro-photo img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r);
}
.intro-photo figcaption{
  margin-block-start:var(--s-2);
  font-size:var(--t-label); letter-spacing:var(--ls-label); color:var(--muted);
}
.intro-copy .btn-row{ margin-block-start:var(--s-5) }
@media (max-width:1024px){
  .intro-grid{ grid-template-columns:1fr; gap:var(--s-4) }
  .intro-copy,.intro-photo{ grid-column:1 }
  .intro-photo{ margin-block-start:0 }
  .intro-photo img{ aspect-ratio:16/10 }
}

/* ---- the list: ONE wide ruled column, like a magazine contents page ------
   The two-column grid was the page's worst decision: row heights vary with
   the description, so the hairlines never lined up across the columns and
   eleven items left an orphan cell and a dangling rule. */
.treat-list{ display:grid; grid-template-columns:1fr; gap:0 }
.treat-row{
  display:grid;
  grid-template-columns:64px 5fr 7fr;
  gap:var(--s-4);
  align-items:baseline;
  padding-block:var(--s-4);
  border-block-end:var(--hairline) solid var(--line);
}
.treat-row:last-child{ border-block-end:0 }
.treat-num{
  font-size:var(--t-label); letter-spacing:var(--ls-label); color:var(--muted);
}
.treat-row h3{ font-size:var(--t-h3); font-weight:var(--fw-light) }
/* the descriptions ARE the content of a treatments page — they were being
   rendered at caption size in muted grey, which inverted the hierarchy */
.treat-row p{
  color:var(--ink-2); font-size:var(--t-body); line-height:var(--lh-body);
  max-width:var(--measure);
}
@media (max-width:1024px){
  .treat-row{ grid-template-columns:48px 1fr; gap:var(--s-2) var(--s-3) }
  .treat-row p{ grid-column:2 }
}
@media (max-width:640px){
  .treat-row{ grid-template-columns:1fr; gap:var(--s-1); padding-block:var(--s-3) }
  .treat-row p{ grid-column:1 }
}

/* two photographs interleaved into the list at DIFFERENT sizes and sides,
   so they break the rule rhythm instead of decorating rows */
.list-photo{ padding-block:var(--s-5); border-block-end:var(--hairline) solid var(--line) }
.list-photo img{ width:100%; height:auto; object-fit:cover; border-radius:var(--r) }
.list-photo figcaption{
  margin-block-start:var(--s-2);
  font-size:var(--t-label); letter-spacing:var(--ls-label); color:var(--muted);
}
.list-photo--wide img{ aspect-ratio:16/10 }
.list-photo--wide{ max-width:62%; margin-inline-start:auto }   /* sits left */
.list-photo--square img{ aspect-ratio:1/1 }
.list-photo--square{ max-width:38%; margin-inline-end:auto }   /* sits right */
@media (max-width:768px){
  .list-photo--wide,.list-photo--square{ max-width:100%; margin-inline:0 }
  .list-photo--square img{ aspect-ratio:16/10 }
}

/* ---- FAQ: inset to the reading edge, quiet side left empty --------------- */
.inset-block{ max-width:66.6%; margin-inline-start:auto }
@media (max-width:1024px){ .inset-block{ max-width:100% } }

.faq-item{ border-block-end:var(--hairline) solid var(--line); padding-block:var(--s-3) }
.faq-item:last-child{ border-block-end:0 }
.faq-q{
  width:100%; text-align:start; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:var(--t-h3); font-weight:var(--fw-light);
  color:var(--ink);
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-2); padding:var(--s-1) 0;
}
.faq-q .chev{
  flex:none; width:var(--icon); height:var(--icon); fill:none;
  stroke:currentColor; stroke-width:1.6;
  transition:transform var(--dur-ui) var(--curve);
}
.faq-item[data-state="open"] .chev{ transform:rotate(180deg) }
.faq-a{
  color:var(--ink-2); font-size:var(--t-body); line-height:var(--lh-body);
  max-width:var(--measure); padding-block-end:var(--s-2);
}

/* ---- care notes: 7/5, not 1/1 — the "before" list is longer -------------- */
.care-grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--s-5) }
@media (max-width:768px){ .care-grid{ grid-template-columns:1fr; gap:var(--s-4) } }
.care-card h3{ font-size:var(--t-h3); margin-block-end:var(--s-3) }
/* no browser bullets anywhere on this site — the marker is drawn */
.care-card ul{ list-style:none; margin:0; padding:0 }
.care-card li{
  color:var(--ink-2); font-size:var(--t-small); line-height:var(--lh-body);
  padding-block:var(--s-2);
  border-block-start:var(--hairline) solid var(--line);
}
.care-card li:first-child{ border-block-start:0; padding-block-start:0 }

/* ---- closing invitation -------------------------------------------------- */
.cta-band{
  background:var(--ink); color:var(--paper); border-radius:var(--r);
  padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3);
}
@media (max-width:640px){ .cta-band{ padding:var(--s-4) } }
.cta-band .eyebrow{ color:color-mix(in oklab, var(--paper) 70%, transparent) }
.cta-band h2{ color:var(--paper); max-width:var(--hero-copy-w) }
.cta-band p{ color:color-mix(in oklab, var(--paper) 82%, transparent);
             max-width:var(--measure) }
.cta-band .btn-primary{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
  align-self:start; margin-block-start:var(--s-2);
}

/* ---- a heading with a rule and a count, so sections don't all look alike -- */
.head-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4);
  padding-block-end:var(--s-3);
  border-block-end:var(--hairline) solid var(--line);
  margin-block-end:var(--s-5);
}
.head-row h2{ margin:0 }
.head-row .meta{ font-size:var(--t-label); letter-spacing:var(--ls-label);
                 color:var(--muted); white-space:nowrap }
@media (max-width:640px){
  .head-row{ flex-direction:column; align-items:flex-start; gap:var(--s-2) }
}