/* BWell Lounge: the inner-page layer (service pages, About, Contact, the
   services index). Loads after /css/bwell.css and reuses its grounds, type,
   furniture (slide header, hairlines, tracked caps), chapter bar, disclosure,
   .chips, .ticks, .why__list, .visit__stack and .foot.

   The rule for this layer, from Kiarash (Sept 22): on the service pages the
   CONTENT is the focus, and every visual has to make the content easier to
   follow. So each device here is shaped by what it carries — a sequence is a
   timeline, a price list is a menu, a contrast is a comparison, a number is
   drawn to scale — and the photographs are the rooms, as punctuation. */

/* ============================================================ 0 · hero */
.svc-hero {
  position: relative; min-height: 92svh; overflow: clip;
  display: grid; grid-template-rows: auto 1fr;
  background: #2B211A;
  --sc-ink: #F8F3EC; --sc-ink-soft: #E9E0CE; --sc-accent: #F8F3EC; --sc-accent-ink: #2B211A; --sc-hairline-strong: rgb(248 243 236 / 0.35);
  color: var(--sc-ink);
}
.svc-hero__photo { position: absolute; inset: 0; margin: 0; z-index: 0; overflow: clip; background: #2B211A; }
.svc-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.svc-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(to top, rgb(var(--dusk) / 0.92) 0%, rgb(var(--dusk) / 0.82) 24%, rgb(var(--dusk) / 0.58) 44%, rgb(var(--dusk) / 0.2) 62%, rgb(var(--dusk) / 0) 78%),
  linear-gradient(to bottom, rgb(var(--dusk) / 0.5) 0%, rgb(var(--dusk) / 0) 22%); }
.svc-hero__wash { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgb(var(--dusk)); opacity: 1; transition: opacity 1300ms var(--sc-ease-out) 80ms; }
.is-loaded .svc-hero__wash { opacity: 0; }
.svc-hero__top { position: relative; z-index: 4; }
.svc-hero__copy { position: relative; z-index: 3; align-self: end; display: grid; gap: var(--sc-5); padding-block: var(--sc-8) clamp(2.5rem, 7vh, 5rem); }
.svc-hero__crumb { display: flex; flex-wrap: wrap; gap: 0.7em; align-items: baseline; margin: 0; color: var(--sc-ink); }
.svc-hero__crumb a { text-decoration: none; color: inherit; opacity: 0.68; }
@media (hover: hover) and (pointer: fine) { .svc-hero__crumb a:hover { opacity: 1; } }
.svc-hero__crumb span[aria-hidden] { opacity: 0.45; }
.svc-hero__h1 { max-width: 17ch; font-size: clamp(2.6rem, 1rem + 5vw, 5.8rem); line-height: 1.08; letter-spacing: -0.008em; }
/* The source H1s run "Service in Newmarket — long subtitle": one h1, two lines. */
/* the screen-reader dash between title and subtitle is clipped, but its text box
   was still set at display size (75x117px) and reached into the intro below */
.svc-hero__h1 .visually-hidden { white-space: nowrap; font-size: 1px; line-height: 1; }
.svc-hero__sub { font-family: var(--sc-font-display); font-size: 0.4em; line-height: 1.24; letter-spacing: 0; max-width: 38ch; margin-top: 0.55em; color: var(--sc-ink-soft); text-wrap: pretty; }
.svc-hero .hero__intro { max-width: 62rem; }
.svc-hero__intro .body, .svc-hero__intro p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.65; max-width: 52ch; margin: 0; text-shadow: 0 1px 14px rgb(0 0 0 / 0.35); text-wrap: pretty; }
.svc-hero__intro p + p { margin-top: var(--sc-3); }
/* One rule for every hero, not one that fell out of label length: the booking
   button, then the quieter alternative under it, both on the button's left edge.
   (Side by side, "Book a Psychotherapy Consultation" + its link needed ~780px in
   a ~460px column, so four heroes stacked and four sat inline.) The phone stack
   below 520px is the .cta-row rule: the button full width, the link under it. */
.svc-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-4); }
.svc-hero__cta .btn { background: var(--cream); color: #2B211A; }
@media (hover: hover) and (pointer: fine) { .svc-hero__cta .btn:hover { background: #fff; } }
.svc-hero__cta2 { color: var(--cream); border-bottom-color: var(--cream); }
/* a lead-in question above the secondary link (cta2.lead): the link's caps, but
   unruled and soft, so the question reads as context and the rule marks the action */
.svc-hero__cta2-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-2); margin: 0; }
.svc-hero__cta2-lead { font-family: var(--sc-font-text); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--sc-ink-soft); text-shadow: 0 1px 10px rgb(0 0 0 / 0.4); }
@media (min-width: 861px) { .svc-hero__cta2 { white-space: nowrap; } }

@media (prefers-reduced-motion: no-preference) {
  .svc-hero__photo img { filter: blur(14px); transform: scale(1.06); transition: filter 1500ms cubic-bezier(0.2, 0.7, 0.1, 1) 80ms, transform 1600ms cubic-bezier(0.2, 0.7, 0.1, 1) 80ms; }
  .is-loaded .svc-hero__photo img { filter: blur(0); transform: none; }
  .is-settled .svc-hero__photo img { filter: none; transition: none; }
  .svc-hero .hero__line > span { transform: translateY(110%); transition: transform 1000ms cubic-bezier(0.2, 0.7, 0.1, 1); }
  .svc-hero .hero__line:nth-child(1) > span { transition-delay: 620ms; }
  .svc-hero .hero__line ~ .hero__line > span { transition-delay: 760ms; }
  .svc-hero.is-loaded .hero__line > span { transform: none; }
  /* the intro is not in this group: it is there from the first paint (bwell.css, hero-intro-in) */
  .svc-hero .svc-hero__crumb, .svc-hero .masthead { opacity: 0; transform: translateY(10px); transition: opacity 800ms var(--sc-ease-out), transform 800ms var(--sc-ease-out); }
  .svc-hero .masthead { transition-delay: 500ms; }
  .svc-hero .svc-hero__crumb { transition-delay: 560ms; }
  .svc-hero.is-loaded .svc-hero__crumb, .svc-hero.is-loaded .masthead { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .svc-hero__wash { display: none; } }

@media (max-width: 860px) {
  .svc-hero { min-height: 100svh; }
  .svc-hero__photo img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .svc-hero__scrim { background:
    linear-gradient(to top, rgb(var(--dusk) / 0.95) 0%, rgb(var(--dusk) / 0.9) 30%, rgb(var(--dusk) / 0.7) 52%, rgb(var(--dusk) / 0.2) 72%, rgb(var(--dusk) / 0) 86%),
    linear-gradient(to bottom, rgb(var(--dusk) / 0.55) 0%, rgb(var(--dusk) / 0) 24%); }
  .svc-hero__copy { padding-block: var(--sc-5) clamp(1.5rem, 4vh, 2.5rem); gap: var(--sc-4); }
  .svc-hero__h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); max-width: none; }
  .svc-hero__sub { font-size: 0.5em; margin-top: 0.5em; }
  .svc-hero .hero__intro { grid-template-columns: 1fr; }
  .svc-hero__intro p { font-size: 0.86rem; line-height: 1.55; max-width: none; }
}
/* the button goes full width at the thumb only where every other primary does */
@media (max-width: 520px) {
  .svc-hero__cta { align-items: stretch; }
  .svc-hero__cta .btn { padding-block: 1.05em; }
  .svc-hero__cta2 { align-self: flex-start; }
}
@media (max-height: 660px) and (max-width: 860px) {
  .svc-hero__h1 { font-size: 2.1rem; }
  .svc-hero__sub { display: none; }
}

/* ======================================================= 1 · at a glance */
.svc-glance { padding-block: var(--sc-section); }
.svc-glance__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sc-7) clamp(2rem, 6vw, 6rem); align-items: start; }
.svc-glance__lede { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; letter-spacing: 0; max-width: 30ch; text-wrap: pretty; margin: 0 0 var(--sc-5); }
.svc-glance .ch-head { margin-bottom: var(--sc-6); }
.svc-glance .body { color: var(--sc-ink); }
.svc-glance__index { margin-top: var(--sc-6); counter-reset: svc 1; }
/* spaced off a lede or slot content only: with nothing above it, the index's top
   rule starts on the facts' top rule instead of 32px under it */
.svc-glance__index:first-child { margin-top: 0; }
.facts { display: grid; margin: 0; border-top: 1px solid var(--sc-hairline-strong); }
.facts > div { display: grid; grid-template-columns: minmax(7rem, 0.36fr) 1fr; gap: var(--sc-4); align-items: baseline; padding-block: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); }
.facts dt { margin: 0; color: var(--sc-ink-soft); }
.facts dd { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: 0; text-wrap: pretty; }
.svc-glance__foot { display: grid; gap: var(--sc-5); margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.svc-glance__foot .lede { max-width: 38ch; }
/* the CTA pair is a .cta-row (bwell.css): primary first, one centre line, one gap;
   stacked full width on phones. One rule per width instead of a wrap that fell
   wherever the labels' length put it: the lede above the pair, and from 1280px
   the lede left and the pair on its last line, right, never wrapping. */
@media (min-width: 1280px) {
  .svc-glance__foot:has(> .lede) { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sc-8); }
  .svc-glance__foot:has(> .lede) > .cta-row { flex-wrap: nowrap; }
}
/* two buttons side by side sit a step closer than a button and a text link */
.svc-glance__cta { column-gap: var(--sc-4); }
@media (max-width: 520px) { .svc-glance__cta { row-gap: var(--sc-3); } }
@media (max-width: 960px) { .svc-glance__grid { grid-template-columns: 1fr; } }
/* The label column. At 26% of the facts column a two-word label ("Session
   length", "Private room") broke over two lines at 1440 beside one-line
   neighbours. Where the facts sit beside the lede at full size, the rows share
   one label column sized to the longest label (subgrid), capped so a long label
   wraps, evenly, instead of starving the values. */
.facts dt { text-wrap: balance; }
@media (min-width: 1181px) {
  .facts { grid-template-columns: fit-content(13rem) minmax(0, 1fr); column-gap: var(--sc-4); }
  .facts > div { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
@media (max-width: 520px) { .facts > div { grid-template-columns: 1fr; gap: var(--sc-2); } }

/* ============================================================ chapters */
.chapter .ch-head { margin-bottom: 0; }
.ch-lede { display: grid; gap: var(--sc-4); }
.ch-lede > div { display: contents; }
.ch-lede p { margin: 0; color: var(--sc-ink); max-width: 62ch; text-wrap: pretty; }
.ch-lede p.ch-lede__big { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; letter-spacing: 0; max-width: 32ch; }
/* In a photo split the head sits in a column ~55% of the page: it steps down one
   notch, as the split's tiles and payoff do (at the full-width size "What
   Psychotherapy at BWell Lounge Looks Like" ran four lines at 1440). */
@media (min-width: 861px) { .split__copy .ch-head .display--xl { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.2rem); } }
/* space between the chapter head and whatever device follows */
.chapter__body > .ch-head + *, .split__copy > .ch-head + * { margin-top: var(--sc-8); }
.block { margin-top: var(--sc-8); }
.block > .label:first-child { display: block; margin: 0 0 var(--sc-4); color: var(--sc-ink-soft); }
.prose { display: grid; gap: var(--sc-4); max-width: 64ch; }
.prose > p { margin: 0; color: var(--sc-ink); text-wrap: pretty; }
.prose--soft > p { color: var(--sc-ink-soft); }
.prose--cols { max-width: none; grid-template-columns: 1fr 1fr; gap: var(--sc-4) clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .prose--cols { grid-template-columns: 1fr; } }
.chapter a:not(.btn):not(.link):not(.xsell__item) { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* the split chapter: sticky photo column + copy */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.split--r { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split--r > .split__media { order: 2; }
.split__media { position: sticky; top: 10svh; }
.split__photo { display: flow-root; height: min(76svh, 44rem); margin: 0 0 0 calc(-1 * var(--edge)); }
.split--r .split__photo { margin: 0 calc(-1 * var(--edge)) 0 0; }
.split__photo img { object-position: var(--pos, 50% 50%); }
.split__photo--parallax img { height: 118%; margin-top: -9%; will-change: transform; }
/* The iris is keyed to the chapter's progress (0.06-0.36). Beside a sticky column
   that works; stacked on a phone the photo heads a long chapter and has scrolled
   away by 0.36, so a reader only ever saw a small circle in an empty band. On
   phones the photograph is simply shown. (!important: the engine writes the
   clip-path inline each frame.) */
@media (max-width: 860px) { .split__photo--iris { clip-path: none !important; } }
.split__copy { min-width: 0; }
.split .trio { margin-left: calc(-1 * var(--edge)); }
.split--r .trio { margin-left: 0; margin-right: calc(-1 * var(--edge)); }
@media (max-width: 860px) {
  .split, .split--r { grid-template-columns: 1fr; gap: var(--sc-6); }
  .split__media { position: relative; top: 0; }
  .split--r > .split__media { order: 0; }
  .split__photo, .split--r .split__photo { height: 40svh; margin-inline: calc(-1 * var(--edge)); }
  .split .trio, .split--r .trio { margin-inline: calc(-1 * var(--edge)); }
}

/* the payoff line */
.payoff { margin-top: var(--sc-8); padding: 0.12em 0; }
.payoff p { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.18; letter-spacing: 0; max-width: 26ch; margin: 0; text-wrap: pretty; }
.payoff--sm p { font-size: var(--sc-t-xl); line-height: 1.26; max-width: 32ch; }
/* in a photo split the copy column is ~55% of the page: the line scales with it
   (at 1024 the 2xl size ran seven lines of ~20 characters) */
@media (min-width: 861px) { .split__copy .payoff:not(.payoff--sm) p { font-size: clamp(var(--sc-t-xl), 3.4vw, var(--sc-t-2xl)); line-height: 1.2; } }
@media (max-width: 860px) { .payoff p { font-size: var(--sc-t-xl); } }

/* =============================================================== tiles */
.tiles { display: grid; gap: var(--sc-6) clamp(1.5rem, 3.5vw, 3.5rem); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { position: relative; display: grid; align-content: start; gap: var(--sc-3); padding-top: var(--sc-5); }
/* each tile stands on a rule that draws itself across as it arrives */
.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-ink); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--sc-ease-out) 120ms; }
.tile.sc-in::before { transform: scaleX(1); }
.tile__k { margin: 0; color: var(--sc-ink-soft); }
.tile__t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: 0; text-wrap: balance; }
.tile__t a { text-decoration: none; }
.tile__x { color: var(--sc-ink-soft); display: grid; gap: var(--sc-3); text-wrap: pretty; }
.tile__x p { margin: 0; }
.tile__link { justify-self: start; margin-top: var(--sc-2); }
@media (max-width: 1100px) { .tiles--4, .tiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Three peers stay equals between 641 and 960: one column, at a reading measure.
   (2 + 1 with the third spanning the row made it read as a different, wider kind
   of item, and ran its text to ~85 characters a line.) */
@media (min-width: 641px) and (max-width: 960px) { .tiles--3 { grid-template-columns: minmax(0, 1fr); } .tiles--3 .tile__x { max-width: 56ch; } }
/* Tiles side by side share their rows (subgrid): a one-line title beside a
   two-line one no longer starts its text up to 44px higher in the same row. */
@media (min-width: 641px) {
  .tiles > .tile { grid-template-rows: subgrid; grid-row: span 3; }
  .tiles > .tile:has(> :nth-child(2):last-child) { grid-row: span 2; }
  .tiles > .tile:has(> :nth-child(4)) { grid-row: span 4; }
  /* the shared row can be taller than this tile's text: keep it at the top */
  .tiles > .tile > .tile__x { align-content: start; }
}
@media (max-width: 640px) { .tiles--2, .tiles--3, .tiles--4, .tiles--5 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tile::before { transform: none; transition: none; } }

/* ============================================================ timeline */
.tline { list-style: none; margin: 0; padding: 0; display: grid; }
.tline__step { position: relative; display: grid; grid-template-columns: 2.25rem minmax(9rem, 0.36fr) minmax(0, 1fr); gap: var(--sc-2) var(--sc-6); padding-bottom: var(--sc-7); }
.tline__step:last-child { padding-bottom: 0; }
/* the spine: one segment per step, drawn downward as the step arrives */
.tline__step::before { content: ""; position: absolute; left: calc(0.5rem - 0.5px); top: 1.05rem; bottom: -0.2rem; width: 1px; background: var(--rule-ink); transform: scaleY(0); transform-origin: top; transition: transform 1100ms var(--sc-ease-out) 260ms; }
.tline__step:last-child::before { display: none; }
.tline__step.sc-in::before { transform: scaleY(1); }
.tline__node { position: relative; width: 1rem; height: 1rem; margin-top: 0.3rem; border-radius: 50%; border: 1px solid var(--sc-ink); background: var(--sc-canvas); transition: background-color 500ms var(--sc-ease-out) 200ms; }
.tline__step.sc-in .tline__node { background: var(--sc-ink); }
.tline__head { display: grid; gap: var(--sc-2); align-content: start; }
.tline__when { margin: 0.35rem 0 0; color: var(--sc-ink-soft); display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; }
.tline__dur { color: var(--sc-ink); opacity: 0.68; }
.tline__t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: 0; }
.tline__x { color: var(--sc-ink); display: grid; gap: var(--sc-3); max-width: 60ch; text-wrap: pretty; }
.tline__x p { margin: 0; }
.tline__x > :first-child { margin-top: 0.3rem; }
.split__copy .tline__step { grid-template-columns: 2.25rem minmax(0, 1fr); }
.split__copy .tline__x { grid-column: 2; }
@media (max-width: 720px) {
  .tline__step { grid-template-columns: 2rem minmax(0, 1fr); }
  .tline__x { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .tline__step::before { transform: none; transition: none; } .tline__node { background: var(--sc-ink); } }

/* the time map: the session to scale */
.tmap { margin: 0 0 var(--sc-8); }
.tmap__cap { display: block; margin: 0 0 var(--sc-4); color: var(--sc-ink-soft); }
.tmap__bar { display: flex; gap: 3px; align-items: stretch; }
.tmap__seg { position: relative; flex: var(--w) 1 0; min-width: 4.5rem; display: grid; align-content: start; gap: var(--sc-2); padding-top: calc(10px + var(--sc-3)); }
.tmap__fill { position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--sc-ink); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--sc-ease-out); transition-delay: calc(var(--i) * 380ms); }
.tmap__seg::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--sc-hairline); z-index: -1; }
.tmap.sc-in .tmap__fill { transform: scaleX(1); }
.tmap__name { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.2; }
.tmap__dur { font-family: var(--sc-font-text); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--sc-ink-soft); }
@media (max-width: 720px) {
  .tmap__bar { flex-direction: column; gap: var(--sc-4); }
  .tmap__seg { flex: none; padding-top: calc(10px + var(--sc-2)); }
  .tmap__fill, .tmap__seg::after { right: auto; width: max(8%, calc(var(--w) * 100%)); }
}
@media (prefers-reduced-motion: reduce) { .tmap__fill { transform: none; transition: none; } }
/* side by side, each label keeps clear of the next segment's (at 1024 "Arrival and
   Intake" ran to 6px of "Setup"); the bar itself still spans the full segment */
@media (min-width: 721px) {
  .tmap__seg { padding-right: var(--sc-4); }
  .tmap__seg:last-child { padding-right: 0; padding-left: var(--sc-4); }
}
@media (min-width: 721px) and (max-width: 1100px) { .tmap__name { font-size: var(--sc-t-base); } }

/* ================================================================ menu */
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(2rem, 5vw, 5rem); border-top: 1px solid var(--sc-hairline-strong); }
.menu-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-item { padding-block: var(--sc-5); border-bottom: 1px solid var(--sc-hairline); display: grid; align-content: start; gap: var(--sc-2); }
.menu-item__row { display: flex; align-items: baseline; gap: var(--sc-3); }
.menu-item__name { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: 0; flex: none; max-width: 80%; }
.menu-item__lead { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in oklab, var(--sc-ink) 45%, transparent); transform: translateY(-0.28em); }
.menu-item__price { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.2; flex: none; font-variant-numeric: lining-nums tabular-nums; }
.menu-item__tag { margin: 0; color: var(--sc-ink-soft); }
.menu-item__desc { margin: 0; color: var(--sc-ink-soft); max-width: 56ch; text-wrap: pretty; }
.menu-note { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 70ch; }
@media (max-width: 860px) { .menu-list--2 { grid-template-columns: 1fr; } }
/* two columns at 861-1280: name and price step down with the column so a long
   name, its leader and its price keep one line (the price dropped under the name,
   41-81px, and the prices stopped reading as a column) */
@media (min-width: 861px) and (max-width: 1280px) {
  .menu-list--2 .menu-item__name, .menu-list--2 .menu-item__price { font-size: min(var(--sc-t-xl), calc(3.6vw - 10px)); }
}

/* ============================================================= compare */
.compare { display: grid; gap: var(--sc-5); align-items: stretch; }
.compare--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare__col { display: grid; align-content: start; gap: var(--sc-3); padding: var(--sc-6) var(--sc-5) var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.compare__col--us { border-top: 2px solid var(--sc-ink); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); }
.compare__label { margin: 0; color: var(--sc-ink-soft); }
.compare__col--us .compare__label { color: var(--sc-ink); }
.compare__t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: 0; text-wrap: balance; }
.compare__x { color: var(--sc-ink-soft); display: grid; gap: var(--sc-3); text-wrap: pretty; }
.compare__x p { margin: 0; }
.compare__col--us .compare__x { color: var(--sc-ink); }
.compare__pts { margin-top: var(--sc-2); }
@media (max-width: 860px) { .compare--2, .compare--3 { grid-template-columns: 1fr; } }

/* ========================================================== range bars */
.rbars { margin: 0; display: grid; gap: var(--sc-6); max-width: 52rem; }
.rbar { display: grid; gap: var(--sc-3); }
.rbar__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-2) var(--sc-5); }
.rbar__label { margin: 0; }
.rbar__value { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.1; }
.rbar__track { position: relative; height: 12px; background: var(--sc-hairline); }
.rbar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--to) * 1%); background: var(--sc-ink); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--sc-ease-out) 200ms; }
/* a range: solid to the low end, fading across the band to the high end */
.rbar__fill--range { background: linear-gradient(90deg, var(--sc-ink) 0%, var(--sc-ink) calc(var(--from) / var(--to) * 100%), color-mix(in oklab, var(--sc-ink) 22%, transparent) 100%); }
.rbar.sc-in .rbar__fill { transform: scaleX(1); }
.rbar__note { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 60ch; }
.rbar__axis { display: flex; justify-content: space-between; font-family: var(--sc-font-text); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--sc-ink-soft); border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-2); }
.rbar__cap { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 64ch; }
@media (prefers-reduced-motion: reduce) { .rbar__fill { transform: none; transition: none; } }

/* ============================================================ callouts */
.callouts { display: grid; gap: var(--sc-5); }
.callouts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.callouts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.callout { display: grid; align-content: start; gap: var(--sc-3); padding: var(--sc-5) 0 var(--sc-2); border-top: 1px solid var(--sc-ink); }
.callout__label { margin: 0; color: var(--sc-ink-soft); }
.callout--caution .callout__label { color: var(--sc-ink); }
.callout__t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: 0; }
.callout__x { color: var(--sc-ink); display: grid; gap: var(--sc-3); text-wrap: pretty; max-width: 58ch; }
.callout__x p { margin: 0; }
@media (max-width: 860px) { .callouts--2, .callouts--3 { grid-template-columns: 1fr; } }

/* =========================================================== checklist */
.checklist__label { display: block; margin: 0 0 var(--sc-4); color: var(--sc-ink-soft); }
.checklist__list { gap: var(--sc-3) clamp(1.5rem, 4vw, 4rem); }
.checklist__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .checklist__list--2, .checklist__list--3 { grid-template-columns: 1fr; } }

/* ============================================================== plate */
.plate { margin: var(--sc-9) calc(-1 * var(--edge)) 0; }
.plate__frame { display: flow-root; height: var(--h); overflow: clip; background: var(--sc-surface); }
.plate__frame img { width: 100%; height: 120%; margin-top: calc(-0.1 * var(--h)); object-fit: cover; object-position: var(--pos, 50% 50%); display: block; will-change: transform; }
.plate__cap { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); align-items: baseline; justify-content: space-between; padding: var(--sc-4) max(var(--sc-gutter), calc((100vw - var(--sc-maxw)) / 2 + var(--sc-gutter))) 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.plate__cap .label { color: var(--sc-ink); }

/* ============================================================== facts */
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); margin: 0; border-top: 1px solid var(--sc-hairline-strong); }
.details--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.details > div { padding-block: var(--sc-5); border-bottom: 1px solid var(--sc-hairline); }
.details > .details__wide { grid-column: 1 / -1; }
.details dt { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); }
.details dd { margin: 0; color: var(--sc-ink); text-wrap: pretty; max-width: 58ch; }
.details dd p { margin: 0; } .details dd p + p { margin-top: var(--sc-3); }
.details__wide dd { max-width: 76ch; }
.details__cta { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-6); align-items: baseline; margin-top: var(--sc-7); }
/* page-owned markup, so it cannot carry .cta-row: the same phone rule, spelled out */
@media (max-width: 520px) {
  .details__cta { flex-direction: column; align-items: stretch; gap: var(--sc-5); }
  .details__cta > .btn { width: 100%; }
  .details__cta > .link { align-self: flex-start; }
}
@media (max-width: 960px) { .details--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .details, .details--3 { grid-template-columns: 1fr; } }

/* ============================================================ cross-sell */
.xsell { display: grid; gap: var(--sc-5); }
.xsell--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xsell--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xsell--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xsell--4 .xsell__item h3 { font-size: var(--sc-t-lg); }
@media (max-width: 1099px) { .xsell--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xsell__item { display: grid; align-content: start; gap: var(--sc-3); padding: 0 0 var(--sc-5); border-bottom: 1px solid var(--sc-hairline-strong); text-decoration: none; color: inherit; }
.xsell__img { display: block; aspect-ratio: 3 / 2; overflow: clip; background: var(--sc-surface); margin-bottom: var(--sc-2); }
.xsell__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .xsell__item:hover .xsell__img img { transform: scale(1.03); } .xsell__item:hover .link { border-bottom-width: 2px; padding-bottom: calc(0.55em - 1px); } }
.xsell__item h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: 0; }
.xsell__item p { margin: 0; color: var(--sc-ink-soft); text-wrap: pretty; }
.xsell__item .link { justify-self: start; margin-top: var(--sc-2); }
@media (max-width: 860px) {
  .xsell--2, .xsell--3, .xsell--4 { grid-template-columns: 1fr; }
  .xsell__item { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: var(--sc-4); align-items: start; }
  .xsell__img { grid-row: 1 / span 3; aspect-ratio: 1; margin-bottom: 0; }
  .xsell__item h3 { font-size: var(--sc-t-lg); }
}

/* ================================================================= faq */
.faq__list details { border-top: 1px solid var(--sc-hairline-strong); }
.faq__list details:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.faq__list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--sc-5); align-items: center; padding-block: var(--sc-5); font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.32; text-wrap: balance; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; font-family: var(--sc-font-text); font-weight: 300; font-size: 1.6rem; line-height: 1; transition: transform var(--sc-d-base) var(--sc-ease-out); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
.faq__list details p { margin: 0 0 var(--sc-5); max-width: 66ch; color: var(--sc-ink-soft); }
.faq-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-6) clamp(2rem, 6vw, 7rem); align-items: start; }
.faq-split > .ch-head { position: sticky; top: 14svh; }
@media (max-width: 860px) { .faq-split { grid-template-columns: 1fr; } .faq-split > .ch-head { position: static; } }

/* =============================================================== close */
.close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-8) clamp(2rem, 6vw, 7rem); align-items: start; margin-top: var(--sc-10); padding-top: var(--sc-8); border-top: 1px solid var(--sc-hairline-strong); }
.close__h2 { max-width: 12ch; margin-top: var(--sc-4); }
.close__body { display: grid; gap: var(--sc-4); }
.close__body > p { margin: 0; color: var(--sc-ink-soft); max-width: 60ch; text-wrap: pretty; }
.close__body > p.close__lead { color: var(--sc-ink); }
.close__cta { margin-top: var(--sc-4); }   /* a .cta-row (bwell.css) */
/* Under a FAQ the Close shares the FAQ's columns, so in the last chapter the
   closing paragraphs and CTAs start on the questions' x (they sat 108px to the
   right at 1440), and the right column has room for a long booking label and
   its link on one line. (/about's Close, under 1fr / 1fr quotes, keeps 1fr / 1fr.) */
@media (min-width: 861px) { .faq-split ~ .close { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
/* On the 0.8fr column the Close title steps down as a split's head does (at the
   display--xl size "Real Moments of Care and Support" ran five lines at 1024). */
@media (min-width: 861px) { .close__h2 { font-size: clamp(2.4rem, -0.4rem + 5vw, 4.2rem); } }
/* Below 1280 the Close column is 430-600px and a booking label plus its link
   (up to ~630px) does not fit: the pair stacks there on purpose, the link on
   the button's left edge, instead of wrapping wherever label length put it. */
@media (min-width: 861px) and (max-width: 1279px) { .close__cta { flex-direction: column; align-items: flex-start; } }
@media (max-width: 860px) { .close { grid-template-columns: 1fr; gap: var(--sc-6); margin-top: var(--sc-8); padding-top: var(--sc-6); } }

/* ========================================== placeholders for missing facts
   Every fact BWell hasn't supplied shows as a marked gap on review, never as a
   guess. Dashed, labelled, impossible to mistake for final copy. */
.tbc { display: inline-block; max-width: 100%; padding: 0.08em 0.4em 0.12em; border: 1px dashed color-mix(in oklab, currentColor 55%, transparent); background: color-mix(in oklab, currentColor 6%, transparent); font-size: 0.92em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tbc__k { white-space: nowrap; font-family: var(--sc-font-text); font-size: 0.72em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.6em; opacity: 0.75; }

/* the footer's services column (links every service from every page) */
.foot__svc ul { gap: var(--sc-2); }

/* ============================================================ standout */
.standout { margin-top: var(--sc-8); padding: var(--sc-6) 0 0.12em; border-top: 1px solid var(--rule-ink); }
.standout__k { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); }
.standout__t { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-3xl); line-height: 1.12; letter-spacing: 0; margin: 0 0 var(--sc-4); max-width: 15ch; text-wrap: balance; }
.standout__x { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.standout__x p { margin: 0; }
@media (max-width: 860px) { .standout__t { font-size: var(--sc-t-2xl); } }

/* the wipe: a line revealed bottom-up the moment it scrolls in (IntersectionObserver
   via data-sc-in), instead of the engine's fade-and-rise for ordinary blocks */
/* The observed box stays unclipped (an element clipped to zero area never
   registers as intersecting); its children carry the clip. */
.wipe[data-sc-in] { opacity: 1; transform: none; }
.wipe[data-sc-in] > * { clip-path: inset(100% 0 -0.25em 0); transition: clip-path 1100ms var(--sc-ease-out) 120ms; }
.wipe[data-sc-in] > :nth-child(2) { transition-delay: 220ms; }
.wipe[data-sc-in] > :nth-child(3) { transition-delay: 320ms; }
.wipe[data-sc-in].sc-in > * { clip-path: inset(-0.1em 0 -0.25em 0); }
@media (prefers-reduced-motion: reduce) { .wipe[data-sc-in] > * { clip-path: none; transition: none; } }

/* inside a photo split the copy column is ~55% of the page: tiles step down a size */
.split__copy .tile__t, .split__copy .compare__t, .split__copy .callout__t { font-size: var(--sc-t-lg); line-height: 1.24; }
.split__copy .tiles { gap: var(--sc-6) clamp(1.25rem, 2.5vw, 2.5rem); }

/* ============================================================ plain pages */
.plain-head { padding-bottom: var(--sc-8); border-bottom: 1px solid var(--sc-hairline-strong); }
.plain-head__copy { display: grid; gap: var(--sc-5); padding-top: clamp(3rem, 10vh, 7rem); max-width: 52rem; }
.plain-head .svc-hero__crumb { color: var(--sc-ink); }
.plain-head__updated { margin: 0; color: var(--sc-ink-soft); }
.legal { padding-block: var(--sc-8) var(--sc-9); }
.legal__body { max-width: 68ch; display: grid; gap: var(--sc-4); }
.legal__body h2 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.2; margin: var(--sc-7) 0 var(--sc-2); }
.legal__body h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); margin: var(--sc-5) 0 0; }
.legal__body p, .legal__body li { color: var(--sc-ink); text-wrap: pretty; margin: 0; }
.legal__body ul { display: grid; gap: var(--sc-2); padding-left: 1.2em; margin: 0; }

/* ===================================================== shared fixes, Sept 22
   From the first five pages' reviews. */
/* hit areas on phones: buttons and .link are sized by bwell.css; the crumb links here */
@media (max-width: 860px) {
  .svc-hero__crumb a { padding-block: 0.6em; }
}

/* ===================================================== shared fixes, round 2 (Sept 22 evening)
   From the 14 page reviews. */
.menu-item__row { flex-wrap: wrap; row-gap: 0; }
.menu-item__desc > p { margin: 0; } .menu-item__desc > p + p { margin-top: var(--sc-2); }
.standout__x:empty { display: none; }
.faq-split + .close { border-top: 0; }
/* placeholders read in the text face at a legible size, full strength on dark grounds */
.tbc { font-family: var(--sc-font-text); }
.tbc__k { font-size: max(0.72em, 11.5px); }
.ground--forest .tbc__k, .ground--clay .tbc__k { opacity: 1; }
/* range bars: the "50" sits on the true midpoint */
.rbar__axis { position: relative; }
.rbar__axis > :nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
/* the time map's last, short step keeps its label to the right edge */
@media (min-width: 721px) { .tmap__seg:last-child { justify-items: end; text-align: right; } .tmap__seg:last-child .tmap__name, .tmap__seg:last-child .tmap__dur { white-space: nowrap; } }
/* cross-sell: a single plate is a ruled row (photo left, text right) */
@media (min-width: 861px) {
  .xsell--1 .xsell__item { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(2rem, 4vw, 4rem); }
  .xsell--1 .xsell__img { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
  .xsell--1 .xsell__item > :not(.xsell__img) { grid-column: 2; }
  .xsell--1 h3 { grid-row: 2; } .xsell--1 p { grid-row: 3; } .xsell--1 .link { grid-row: 4; }
  .xsell__item { grid-template-rows: auto auto 1fr auto; }
  /* plates side by side share their rows: a two-line title beside a one-line one
     no longer starts its line lower (1024, "Naturopathic Medicine") */
  .xsell:not(.xsell--1) > .xsell__item:has(> .xsell__img) { grid-row: span 4; grid-template-rows: subgrid; }
}
/* cross-sell on narrow phones: photo above the text so the text keeps a readable measure */
@media (max-width: 480px) {
  .xsell__item { grid-template-columns: 1fr; }
  .xsell__img { grid-row: auto; aspect-ratio: 16 / 9; margin-bottom: var(--sc-2); }
}
@media (max-width: 860px) {
  .svc-glance__index a { min-height: 44px; }
  .svc-hero__intro p { font-size: 0.95rem; }
  .facts > div:last-child { border-bottom: 0; }
}

/* Very tall viewports (see the note at the end of bwell.css). Here, not there: this file
   loads after bwell.css, and `.svc-hero { min-height: 92svh }` above would win a tie. */
@media (min-height: 2000px) and (max-aspect-ratio: 1/1) {
  .svc-hero { min-height: 56rem; }
  .wipe[data-sc-in] > * { clip-path: none !important; transition: none !important; }
}
@media (min-height: 2000px) and (max-aspect-ratio: 1/1) and (max-width: 860px) {
  .split__photo, .split--r .split__photo { height: 22rem; }
}