/* ==========================================================================
   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.
   ========================================================================== */

/* ---- her choice 02-A, with her two notes ------------------------------
   The eyebrow sits above the heading; the emphasis inside the heading is
   heavier than the site's 700, and the gap between the two lines closes. */
.section-head .eyebrow,
.page-intro .eyebrow,
.intro-copy .eyebrow{ display:block; margin-block-end:6px }
.h-light strong,
.intro-copy h1 strong,
.head-row h2 strong{ font-weight:800 }

/* ---- 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 }
}

/* ---- her choice 03-B, made compact ------------------------------------
   Her notes: a hairline border, a shadow, a square image — and then: the
   cards are enormous, they should be compact and elegant, and the photograph
   should carry ATMOSPHERE from an interesting fragment rather than show the
   whole scene.

   So the card gets narrower (four across instead of three), its padding and
   type come down a step, and the image is scaled up inside its square so
   what you see is a detail of the photograph, not the photograph. */
.treat-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-3);
}
@media (max-width:1280px){ .treat-list{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){  .treat-list{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){  .treat-list{ grid-template-columns:1fr } }

.treat-card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:var(--hairline) solid var(--line);
  border-radius:var(--r);
  /* no mat: the photograph runs to the card's own edges. The paper strip
     lives under it, where the text is, and the card's radius clips the top
     two corners of the image instead of framing it. */
  overflow:hidden;
  box-shadow:0 1px 2px rgba(46,42,36,.035), 0 4px 12px rgba(46,42,36,.04);
  /* her note: on hover the CARD grows. The shadow stays exactly as it is and
     the photograph inside does not move — one gesture, not three. */
  transform:scale(1);
  transition:transform var(--dur-ui) var(--curve),
             border-color var(--dur-ui) var(--curve);
}
.treat-card:hover{
  transform:scale(1.025);
  border-color:color-mix(in oklab, var(--muted) 45%, transparent);
}
@media (hover:none){ .treat-card:hover{ transform:none } }

/* Her note: the CARD should be square, not elongated. A 1:1 image already
   fills the card's whole width, and the text then adds ~110px on top of it,
   so a square image can only ever make a tall card. The image goes to 4/3 —
   still a clean crop, and it brings the card itself to very near 1:1. */
.treat-card .shot{
  /* 16/10, not 4/3 and not 1:1 — a square image makes a card 0.74 tall and
     4/3 only reached 0.80. At 16/10 the card measures 0.89, which is as
     close to square as a card with text underneath can get. */
  aspect-ratio:16/10;
  background:var(--panel);
  position:relative; overflow:hidden;
}
.treat-card .shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* the crop into the fragment is fixed — it does not zoom on hover */
  transform:scale(1.35);
}
/* each fragment is aimed by hand — the interesting part is never the middle */
.treat-card .shot--jar img{ object-position:50% 42% }
.treat-card .shot--bed img{ object-position:38% 58% }

/* an honest empty surface where a photograph does not exist yet */
.treat-card .shot--empty::after{
  content:attr(data-need);
  position:absolute; inset-block-end:9px; inset-inline-start:10px;
  font-size:11px; letter-spacing:var(--ls-label); color:var(--muted);
}

.treat-card .body{
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:4px; flex:1;
}
.treat-card .treat-num{
  font-size:11px; letter-spacing:var(--ls-label); color:var(--muted);
}
.treat-card h3{ font-size:17px; font-weight:var(--fw-light); line-height:1.25 }
.treat-card p{
  color:var(--ink-2); font-size:14px; line-height:1.62;
}

/* ---- FAQ — the structure from her reference ---------------------------
   Each question is its own bordered card with a gap between them, not a list
   split by hairlines. The mark is + when closed and - when open: two drawn
   paths, the vertical one folding away, so it is never a font glyph. */
/* margin-inline-START:auto pushes the block AWAY from the start edge, and in
   an RTL document the start edge is the right — so it was landing on the left,
   the opposite of the reading edge. The auto margin goes on the END. */
.inset-block{ max-width:66.6%; margin-inline-end:auto }
@media (max-width:1024px){ .inset-block{ max-width:100% } }

.faq{ display:grid; gap:12px }

.faq-item{
  background:var(--paper);
  border:var(--hairline) solid var(--line);
  border-radius:var(--r);
  padding:6px 20px;
  transition:border-color var(--dur-ui) var(--curve);
}
.faq-item:hover{ border-color:color-mix(in oklab, var(--muted) 40%, transparent) }
.faq-item[data-state="open"]{ border-color:color-mix(in oklab, var(--muted) 55%, transparent) }

.faq-q{
  width:100%; text-align:start; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:var(--t-body); font-weight:var(--fw-bold);
  color:var(--ink); line-height:1.5;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); padding:16px 0;
}
/* the mark sits on the quiet side — the left, in an RTL line */
.faq-q .pm{
  flex:none; width:15px; height:15px; order:-1;
  fill:none; stroke:var(--olive-ink); stroke-width:1.7; stroke-linecap:round;
}
.faq-q .pm .v{
  transform-origin:50% 50%;
  transition:transform var(--dur-ui) var(--curve), opacity var(--dur-ui) var(--curve);
}
.faq-item[data-state="open"] .pm .v{ transform:rotate(90deg); opacity:0 }

.faq-a{
  color:var(--ink-2); font-size:var(--t-small); line-height:var(--lh-body);
  max-width:var(--measure);
  padding:0 0 18px;
}

/* ---- 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) }
}