/* ===========================================================================
   THE BODY — Treatments page components (Figma 277:2 "Treatments fin",
   1440 x 11230). Shared engine in base.css; per-element geometry generated
   into treatments.css by scripts/build_treatments.py. Hero frame: 898.
   =========================================================================== */

/* ---------- 01 hero: photo card flush with the hero's bottom edge ---------- */
.hero--treat { --hero-h: 898; }
.hero-banner--treat {
  position: absolute;
  left: calc(23 * var(--u)); right: calc(17 * var(--u));   /* <- 23 / 1440-23-1400 */
  top: calc(26 * var(--u)); bottom: 0;                       /* <- 26 / 898-26-872 */
  border-radius: calc(30 * var(--u)); overflow: hidden; background: #d8d4c4;
}
.hero-banner--treat > img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }
/* Figma sets this Book label #EFEEDF on the #EFEEDF pill, so it read as an empty pill.
   2026-10-28: a dark label, as on Home's Book pill (.h-book.k-ink); Treatments + Packages. */
.h-book--blank { color: var(--ink); }

/* ---------- shared bits ---------- */
.k-sage-d { color: #97a596; }
.box { position: absolute; height: calc(var(--h) * var(--u)); }
.rule-hair { background: var(--hair); }
.photo10 { border-radius: calc(10 * var(--u)); }
.ring44 {
  position: absolute; width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border-radius: 999px; border: 1px solid #97a596;
  display: flex; align-items: center; justify-content: center;
}
.ring44--on { border: 1.5px solid var(--clay); }
.ring44 span { margin-right: calc(-1 * var(--u)); }        /* Figma drops the trailing tracking */
.btn-ink   { background: var(--ink); }
.btn-body  { background: var(--body); }
.btn-line  { border: 1px solid var(--ink); }

/* ---------- 05 treatment list ---------- */
.side-card { background: #f6f5ec; border: 1px solid var(--hair); border-radius: calc(20 * var(--u)); }
.consult   { border: 1px solid #c7d3c4; border-radius: calc(24 * var(--u)); }
.price span { display: block; }

/* ---------- 07b cedar for two ---------- */
.duo {
  position: absolute; left: calc(24 * var(--u)); top: 0;
  width: calc(1392 * var(--u)); height: calc(731 * var(--u));
  border-radius: calc(30 * var(--u)); overflow: hidden;
}
.duo > img.duo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo-wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 58%, rgba(10,8,6,0) 100%),
              linear-gradient(180deg, rgba(10,8,6,0) 0%, rgba(10,8,6,.06) 28%, rgba(10,8,6,.34) 58%, rgba(10,8,6,.82) 100%);
}
.haze { transition: opacity 1.6s ease; }
/* steamed-up glass (js/steam.js) replaces the static Figma haze: fogs up on arrival,
   rub to clear. pan-y lets a sideways finger rub wipe while vertical drags still scroll */
.duo { touch-action: pan-y; }
.duo-glass { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity 2.6s cubic-bezier(.3,.1,.3,1); }
.duo.is-fogged .duo-glass { opacity: 1; }
.duo--gl .haze { display: none; }
@media (prefers-reduced-motion: reduce) { .duo-glass { transition: none; } }
.k-snow   { color: #f6f1e7; }
.k-snow82 { color: rgba(246,241,231,.82); }
.k-snow50 { color: rgba(246,241,231,.5); }
.k-night  { color: #171411; }
.pe-none  { pointer-events: none; }
.hint-rule { background: rgba(246,241,231,.4); height: 1px; }
.btn-snow  { background: #f6f1e7; border: 1px solid #f6f1e7; color: #171411; }
.btn-ghost { border: 1px solid rgba(246,241,231,.34); color: #f6f1e7; }
.duo .a { z-index: 1; }

/* ---------- 06 goals ---------- */
.goal {
  position: absolute; width: calc(631 * var(--u)); height: calc(456 * var(--u));
  border: 1px solid #c7d3c4; border-radius: calc(20 * var(--u)); overflow: hidden;
  background: var(--paper);
}
.goal-img { position: absolute; left: 0; top: 0; width: calc(629 * var(--u)); height: calc(250 * var(--u)); overflow: hidden; }
.goal-img > img { width: 100%; height: 100%; object-fit: cover; }
.goal-img > img.crop { position: absolute; left: 0; top: var(--it); height: var(--ih); object-fit: fill; }
.goal-link { border-bottom: 1px solid var(--clay); }

/* ---------- 07 packs ---------- */
.pack { border: 1px solid var(--hair); border-radius: calc(24 * var(--u)); background: var(--paper); }
.pack--on { border: 1.5px solid var(--clay); background: #f6f5ec; }

/* ---------- 09 FAQ ---------- */
.faq-rule { background: var(--hair); }

/* ---------- 2026-10-28 client edits (Treatments only) ---------- */
/* Siberian Spa Experience stages: the time set right in each bullet line */
.tr-stage-t { float: right; margin-left: calc(16 * var(--u)); font-size: calc(13.5 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }
/* Cedar Rituals Coming Soon notice (2.8): balance the 2-line eyebrow so no word sits alone */
[data-f="280:84/soon"] .soon-note__eyebrow { text-wrap: balance; }

/* ---------- 2026-10-29: treatment rows that book online (build_treatments.row_hit / row_plus) ----------
   The whole row is one click target (a layer over the row, just before its h3) with Figma's clay "+"
   on the right; on hover the row tints, the title underlines and the "+" turns. Phones: css/m-treatments.css */
.row-hit { z-index: 2; display: block; transition: background-color .2s ease; }
.row-hit:hover { opacity: 1; background: rgba(40, 33, 27, .035); }
.row-plus {
  position: absolute; right: calc(4 * var(--u)); top: 50%;
  width: calc(28 * var(--u)); margin-top: calc(-13 * var(--u));
  font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u)); text-align: center;
  transition: transform .25s ease;
}
.row-hit:hover .row-plus { transform: rotate(90deg); }
.row-hit:hover + h3 .pick-link { text-decoration-color: currentColor; }
.row-plus-m { display: none; }
@media (prefers-reduced-motion: reduce) { .row-hit, .row-plus { transition: none; } }