/* /services/reiki: the layouts the shared components don't have. Loaded after
   /css/service.css on this page only.

   Chapter 4 ("What BWell Stands For", about the clinic): who BWell is, read as a
   pair: the five values (a one-column Checklist) beside the vision (the
   chapter's payoff line), each under its own label. The "Also at BWell"
   hand-offs below use the shared .block label. Stacks under 860px.
   Oct 8, 2026 (Atrin, Oct 4: "values and vision set differently"; on /about both
   were already in the display face): the two are now set as /about sets them
   (about.css, ".ab-values" and ".ab-vision": the same face, size, rules and gaps).
   The values are a ruled index in the display face at --sc-t-lg, not a body-size
   tick list, and the vision sits --sc-3 under its label. Until now the values were
   in the text face at body size beside a display-size vision, so the pair read as
   a footnote next to a headline.
   The pair stays side by side here (this chapter has no photo column; /about stacks
   the two beside its photo) and stacks in /about's order and spacing on phones. */
.rk-house { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-9) clamp(2rem, 6vw, 7rem); align-items: start; }
.rk-house__values .checklist__list { gap: 0; }
.rk-house__values .checklist__list li { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.34; padding: var(--sc-4) 0 var(--sc-4) 1.6em; border-top: 1px solid var(--rule-ink); }
.rk-house__values .checklist__list li::before { top: calc(var(--sc-4) + 0.68em); width: 0.7em; }
.rk-house__vision .label { display: block; margin: 0; color: var(--sc-ink-soft); }
.rk-house__vision .payoff { margin-top: var(--sc-3); }
@media (max-width: 860px) {
  .rk-house { grid-template-columns: minmax(0, 1fr); }
}

/* Oct 8, 2026. Hero breadcrumb on phones: the crumb now carries BWell's name for the
   service, "Reiki & Energy Healing" (it was "Reiki"), and under ~414px the three levels
   no longer fit one line: the name dropped to a second line and left a slash dangling
   after "Services". Under 420px it shows Home / Reiki & Energy Healing, as rooms-for-rent
   does (the BreadcrumbList JSON-LD keeps all three levels; Services is in the menu). From
   420px the three levels fit and show, as on the other service pages. */
@media (max-width: 419px) {
  .svc-hero__crumb a:nth-of-type(2), .svc-hero__crumb span[aria-hidden]:nth-of-type(2) { display: none; }
}

/* Glance: BWell's "Please note" is the last fact. The shared facts are display
   serif at --sc-t-lg, which made a six-line disclaimer the largest block on the
   first screen after the hero. Set it at body size so it reads as a note. No
   statement of the "not medical care" message on this page is display size
   (ch2 carries it as a ruled Callout). */
.svc-glance .facts > div:last-child dd { font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.6; }

/* Hyphenated compounds never break at the hyphen ("non-" / "invasive"). The
   characters are unchanged, so quoted sentences stay exact. */
.rk-nb { white-space: nowrap; }

/* Sept 23 design pass. Open questions ("To confirm" chips) that follow a sourced
   sentence in the same fact (Glance "Where", Practical Details "How to book") sit
   on their own line with a gap, so the fact reads first and the gap second; before
   this they wrapped straight under the sentence with no space. */
.rk-gap { display: block; margin-top: var(--sc-3); }
/* The Glance facts are set in the display face at --sc-t-lg, and the "Where" chip
   inherited it: 22px at 1440, ~45% larger than every other chip on the site. Every
   Glance chip drops to the text face at small size, as on massage-therapy. */
.svc-glance .facts .tbc { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); line-height: 1.45; }