/* ==========================================================================
   The therapy page template.

   One stylesheet for all seven therapy pages, not one per page. Every page
   uses the same sections in the same order, so the only thing that changes
   between them is the content: hero, a session, the room or the kit, add it to
   a visit, questions, book. There is no evidence or research section on any of
   them, by Anton's call on 2026-08-20.

   Reuses everything in base.css and adds nothing to it. No colour, size,
   radius or duration is written by hand: every value is a --rw-* token.

   Section names carry, by Anton's call on 2026-08-20. There is no headline
   under a section name anywhere on the page, and .sec-name is the same rule
   the pricing page uses.
   ========================================================================== */

/* -------------------------------------------------------- section name --- */

/* Floored at 24px. Rust measures 3.68 on cream and 4.25 on white, both of
   which clear AA only above the large text threshold, so 24px is the smallest
   legal size for it and --rw-fs-xl would clamp to 22 on a phone. */
.sec-name {
  font-family: var(--rw-font-mono);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  font-weight: var(--rw-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--rw-ls-mono);
  line-height: 1.2;
  color: var(--rw-rust);
  margin-bottom: var(--rw-s-5);
}

[data-rw-theme="dark"] .sec-name,
.section--dark .sec-name { color: var(--rw-blush); }

/* --------------------------------------------------------------- hero --- */

.thero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(72svh, 40rem);
  padding-block: var(--rw-s-9) var(--rw-s-8);
  background: var(--rw-navy);
  color: var(--rw-cream);
  overflow: hidden;
}

.thero__bg,
.thero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navy tinted scrim, never black. Heavier at the foot, where the type sits. */
.thero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--rw-scrim-90) 0%, var(--rw-scrim-65) 46%, var(--rw-scrim-15) 84%, var(--rw-scrim-08) 100%),
    linear-gradient(to right, var(--rw-scrim-55) 0%, var(--rw-scrim-08) 64%, var(--rw-scrim-00) 100%);
}

/* A wide hero cropped out of a portrait frame has its subject off centre, and a
   phone crops sideways to a narrow slice, so the subject can fall out of frame
   entirely. This moves the focal point. Red light needs it: the lit arch and the
   panel sit in the left third of the 16:9 crop. */
.thero__bg--focus-left img { object-position: 35% center; }

/* A hero photograph that is already almost black takes the standard scrim and
   comes out as a flat navy field with nothing readable in it. This modifier
   drops the left-to-right gradient entirely and keeps only the bottom-up one,
   which is the half that carries type legibility. Only use it on a genuinely
   dark photograph, and only after check.mjs confirms the contrast still holds. */
.thero--photo-dark::after {
  background:
    linear-gradient(to top, var(--rw-scrim-90) 0%, var(--rw-scrim-65) 52%, var(--rw-scrim-15) 88%, var(--rw-scrim-08) 100%);
}

@media (max-width: 47.999rem) {
  .thero--photo-dark::after {
    background:
      linear-gradient(to top, var(--rw-scrim-90) 0%, var(--rw-scrim-90) 44%, var(--rw-scrim-65) 76%, var(--rw-scrim-15) 100%);
  }
}

.thero__inner { position: relative; z-index: 2; }
.thero__inner > * { max-width: 42rem; }

.thero__lead { margin-top: var(--rw-s-5); color: var(--rw-cream); }
.thero__meta { margin-top: var(--rw-s-5); color: var(--rw-blush); }
.thero__actions { margin-top: var(--rw-s-6); }

/* Cream fill with a navy label is 9.79 over the scrim, and it holds on a
   photograph in a way an outline does not. The accent stays with the pass. */
.thero__actions .btn {
  --btn-bg: var(--rw-cream);
  --btn-fg: var(--rw-navy);
  --btn-bd: var(--rw-cream);
}

@media (max-width: 47.999rem) {
  /* The type block reaches further up the frame on a narrow screen, past
     where the desktop scrim has faded out. */
  .thero::after {
    background:
      linear-gradient(to top, var(--rw-scrim-90) 0%, var(--rw-scrim-90) 50%, var(--rw-scrim-65) 82%, var(--rw-scrim-15) 100%),
      linear-gradient(to right, var(--rw-scrim-55) 0%, var(--rw-scrim-15) 80%, var(--rw-scrim-08) 100%);
  }
  .thero__meta { color: var(--rw-cream); }
}

/* -------------------------------------------------- copy beside a photo --- */

.tsplit {
  display: grid;
  gap: var(--rw-s-7);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 62rem) {
  .tsplit { grid-template-columns: 1.1fr 0.9fr; gap: var(--rw-s-8); }
  /* Where the copy runs much longer than the photograph, centring leaves the
     image floating in dead space above and below. */
  .tsplit--top { align-items: start; }
  /* The room section puts the photograph first, so two photo sections in a
     row do not both sit on the same side of the page. */
  .tsplit--flip .tsplit__copy { order: 2; }
  .tsplit--flip .tsplit__art { order: 1; }
}

.tsplit__copy .lead { margin-bottom: var(--rw-s-6); }
.tsplit__copy .body { margin-top: var(--rw-s-5); }

/* Where the copy beside it is short, a full width arch towers over the text and
   reads as the subject of the section rather than the companion to it. This caps
   the image so the two sit at roughly the same height. The arch is 3:4, so 20rem
   wide comes out around 27rem tall, which is about a short copy block. */
.tsplit__art--sm .arch { max-width: 20rem; margin-inline: auto; }

.tpanel { display: block; border-radius: var(--rw-r-lg); overflow: hidden; }
.tpanel img { width: 100%; }

/* ------------------------------------------------------------- a session --- */

.steps { display: grid; gap: var(--rw-s-6); }

.steps__item {
  padding-top: var(--rw-s-4);
  border-top: var(--rw-rule-w) solid var(--rw-navy);
}

.steps__n { color: var(--rw-text-accent); margin-bottom: var(--rw-s-2); }

/* ----------------------------------------------------------- the facts --- */

/* Top margin so a facts list reads as its own block rather than as the tail of
   whatever came before it. Where it follows a lead paragraph the two margins
   collapse, so the other pages are unchanged. */
.tfacts { margin-top: var(--rw-s-6); margin-bottom: var(--rw-s-5); }

/* ------------------------------------------------------ add it to a visit --- */

.tstack__lead { max-width: var(--rw-measure); margin-bottom: var(--rw-s-7); }

.tstack__row {
  display: grid;
  gap: var(--rw-s-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--rw-s-7);
}

@media (min-width: 52rem) {
  .tstack__row { grid-template-columns: repeat(3, 1fr); }
}

.tstack__item { padding-top: var(--rw-s-4); border-top: var(--rw-border-w) solid var(--rw-border); }
.tstack__item .mono { color: var(--rw-blush); margin-bottom: var(--rw-s-3); }

/* ------------------------------------------------------------------ faq --- */

.faq { display: grid; }

.faq__item {
  border-top: var(--rw-border-w) solid var(--rw-border);
  padding-block: var(--rw-s-5);
}
.faq__item:last-child { border-bottom: var(--rw-border-w) solid var(--rw-border); }

.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: var(--rw-s-4);
  align-items: baseline;
  justify-content: space-between;
  /* 48, not 44. At exactly the floor a one line question rounds under it and
     fails the tap target check at some widths. */
  min-height: 48px;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-family: var(--rw-font-mono);
  font-size: var(--rw-fs-xl);
  line-height: 1;
  color: var(--rw-navy);
  flex: none;
  transition: transform var(--rw-dur-base) var(--rw-ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin-top: var(--rw-s-4); }

/* ------------------------------------------------------------------ cta --- */

.tcta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rw-s-6);
}

.tcta .lead { max-width: 34rem; margin: 0; }

/* ------------------------------------------------ scope and price lists --- */

/* Used on the naturopathy page for the practitioner's areas of clinical
   focus. A list, not a benefits stack: it says what somebody works in, and
   the paragraph under it says what that does not mean. */
.tfocus {
  display: grid;
  gap: var(--rw-s-3);
  margin-block: var(--rw-s-5);
  font-size: var(--rw-fs-sm);
  color: var(--rw-text-muted);
  line-height: 1.5;
}

.tfocus li {
  padding-left: var(--rw-s-5);
  border-left: var(--rw-rule-w) solid var(--rw-border);
}

.tnote {
  padding-top: var(--rw-s-5);
  border-top: var(--rw-border-w) solid var(--rw-border);
}

/* A price list on a therapy page, for the ones sold on their own rather than
   as part of a package. */
.tprices { display: grid; margin-bottom: var(--rw-s-5); }

.tprice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rw-s-4);
  padding-block: var(--rw-s-4);
  border-bottom: var(--rw-border-w) solid var(--rw-border-soft);
}

.tprice:first-child { border-top: var(--rw-border-w) solid var(--rw-border-soft); }

.tprice__name { font-size: var(--rw-fs-base); font-weight: var(--rw-w-medium); }
.tprice__dur { margin-left: var(--rw-s-3); color: var(--rw-blush); }

.tprice__amt {
  font-size: var(--rw-fs-lg);
  font-weight: var(--rw-w-semi);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.tprices__note { color: var(--rw-blush); margin-bottom: var(--rw-s-6); }

/* --------------------------------------------------------- a portrait --- */

/* A headshot is not a 44vw panel. It sits small, in the house arch, and the
   column is sized to it rather than the image being stretched to fill a half.
   The 3:4 ratio is what makes the arch read as an arch: on a square element
   the top radius produces a dome instead. The source is a 349px square, so it
   is cover-cropped to the ratio rather than upscaled. */
@media (min-width: 62rem) {
  .tsplit--portrait { grid-template-columns: 13rem 1fr; }
}

.tportrait {
  max-width: 11rem;
  aspect-ratio: 3 / 4;
}
.tportrait__cap { margin-top: var(--rw-s-4); color: var(--rw-text-muted); }

.tavail {
  margin-bottom: var(--rw-s-5);
  padding: var(--rw-s-3) var(--rw-s-4);
  background: var(--rw-bg);
  border-left: var(--rw-rule-w) solid var(--rw-rust);
  color: var(--rw-text);
}