/* Oliver Bee RMT — "Dusk Gradient" design system
   Palette, type and motifs confirmed in OliverRMT_Brand_Guide.md §4.
   Two gradient treatments: .gradient-lift (default, most pages/sections)
   and .gradient-full (reserved for the hero and "How I Work").
   Stage 5 (Oliver, 2 Oct 2026): a new accent (ember, chosen from five for contrast: --ochre on light, --campfire on
   dark; the old ochre stays in the gradients as --earth) and a painted-plaster texture lit at a sharp angle
   (assets/img/plaster.svg, blended soft-light) on the page backgrounds, the gradients and the footer. */

:root {
  --khaki: #EDE6D3;
  --ink: #2B3327;
  --ochre: #AD371B;      /* the accent on light backgrounds: 5.1:1 on khaki (the old #A66A2E was 3.6:1) */
  --campfire: #F08A73;   /* the accent on dark backgrounds: a light tint of the header red (Stage 7; was the orange #FF8559). 6.7:1 on evening */
  --ember-deep: #7A2512; /* Stage 7, the darker red: hover and pressed states of red buttons and links */
  --cta: #C8401C;        /* Stage 7, the brighter red for primary calls to action (Book now), white text 5.0:1 */
  --wine: #3B1A12;       /* Stage 7, the darker red for the footer and dark sections: cream text 13:1 */
  --earth: #A66A2E;      /* the old ochre: the gradients' middle colour, no longer an accent */
  --evening: #241F1A;
  --cream: #F3E9D8;

  --ink-mist: #6B6355;
  --cream-mist: rgba(243, 233, 216, 0.65);
  --line-day: #D8CFB8;
  --line-eve: rgba(243, 233, 216, 0.16);
  --campfire-rgb: 240, 138, 115;   /* --campfire, for its translucent glows */

  --serif: "Bitter", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 6px;
  --max: 68rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* the phone's "reduce motion" setting (set on <html> by each page's head and assets/js/site.js): everything holds still */
html.reduce-motion { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--khaki) url("assets/img/plaster.svg");
  background-blend-mode: soft-light;
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:active { color: var(--ember-deep); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; overflow-wrap: break-word; }
/* a trailing "(in) Kitchener-Waterloo" peeled off an H1 — still part of the heading (so it
   still counts as an on-page SEO signal), just set as a small subordinate line rather than
   spelled out at full heading size. */
.h1-location { display: block; font-family: var(--sans); font-size: 0.42em; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-mist); margin-top: 0.35rem; }
.page-gradient.deep .h1-location, .hero-photo .h1-location { color: rgba(243, 233, 216, 0.65); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { margin: 0 0 1rem; }
.eyebrow {
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}

/* ---------- Header / nav ---------- */
/* Stage 5 ("a little bit plain"): the mark carries the leader motif (a ring and a line in the accent) and a small
   line under it, the links underline in the accent as you point at them, a "Book now" button sits at the end, and a
   dashed rule with an accent slash at its left runs under the whole bar. */
header.site {
  padding: 1.1rem 0 1.15rem;
  position: relative;
  z-index: 5;
  background: rgba(247, 242, 228, 0.55);
  border-bottom: 1px dashed var(--line-day);
}
header.site::after {   /* the accent slash where the rule starts */
  content: ""; position: absolute; left: max(1.5rem, calc((100% - var(--max) - 4rem) / 2 + 1.5rem)); bottom: -1px;
  width: 3.2rem; height: 3px; background: var(--ochre); transform: skewX(-35deg); transform-origin: left bottom;
}
header.site .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: calc(var(--max) + 4rem); }
.mark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.15; text-decoration: none; color: var(--ink); }
.mark-dot { position: relative; flex: none; width: 0.62rem; height: 0.62rem; border-radius: 50%; border: 1.5px solid var(--ochre); }
.mark-dot::after { content: ""; position: absolute; left: 100%; top: 50%; width: 0.55rem; height: 1.5px; margin-top: -0.75px; background: var(--ochre); }
.mark-name { display: flex; flex-direction: column; margin-left: 0.35rem; }
.mark-sub { font: 600 0.55rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre); margin-top: 0.2rem; }
.head-end { display: flex; align-items: center; gap: 1rem; }
nav.site > :first-child { margin-left: 0; }
.btn-head { padding: 0.5rem 1rem; font-size: 0.78rem; background: var(--cta); color: #fff; }   /* primary call to action (Stage 7) */
.btn-head:hover, .btn-head:active { background: var(--ember-deep); }
nav.site a {
  position: relative;
  text-decoration: none;
  margin-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-mist);
}
nav.site > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.3rem; height: 2px; border-radius: 1px;
  background: var(--ochre); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease;
}
nav.site > a:hover::after, nav.site > a[aria-current="page"]::after { transform: scaleX(1); }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--ink); }
html.reduce-motion nav.site > a::after { transition: none; }

/* dropdown, click/tap-based via <details> so it works on touch, not just hover */
nav.site details.nav-drop { display: inline-block; margin-left: 1.2rem; position: relative; }
nav.site details.nav-drop summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.9rem;
  color: var(--ink-mist);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
nav.site details.nav-drop summary::-webkit-details-marker { display: none; }
nav.site details.nav-drop summary::after {
  content: "";
  width: 0.45em; height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 0.1rem;
}
nav.site details.nav-drop:hover summary,
nav.site details.nav-drop[open] summary { color: var(--ink); }
nav.site details.nav-drop .drop-menu {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 0.7rem;
  background: #F7F2E4;
  border: 1px solid var(--line-day);
  border-radius: var(--radius);
  padding: 0.5rem 0;
  min-width: 16rem;
  box-shadow: 0 10px 26px rgba(43, 51, 39, 0.12);
  z-index: 20;
}
nav.site details.nav-drop .drop-menu a {
  display: block;
  margin-left: 0;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
}
nav.site details.nav-drop .drop-menu a:hover { background: var(--khaki); color: var(--ochre); }

/* mobile nav toggle — a checkbox/label pair (not <details>), since browsers vary in how
   they collapse <details> content and some (e.g. Chrome) do it in a way plain CSS can't
   reliably override. Hidden hamburger on desktop; the checkbox drives a real toggle on mobile. */
.nav-toggle-input { display: none; }
.nav-toggle-btn { display: none; }
.hamburger { display: flex; flex-direction: column; gap: 0.28rem; width: 1.35rem; cursor: pointer; }
.hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 1px; }

@media (max-width: 860px) {
  nav.site details.nav-drop { margin-left: 0; margin-right: 1.2rem; width: 100%; }
  nav.site details.nav-drop .drop-menu { position: static; margin-top: 0.5rem; box-shadow: none; width: 100%; }

  header.site .wrap { flex-wrap: nowrap; }
  .mobile-nav-toggle { position: relative; order: 2; }
  .head-end { gap: 0.7rem; }
  nav.site > a::after { display: none; }
  .nav-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0.4rem;
  }
  .mobile-nav-toggle > nav.site {
    display: none;
    flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; right: 0; margin-top: 0.8rem;
    background: #F7F2E4; border: 1px solid var(--line-day); border-radius: var(--radius);
    padding: 1rem 1.2rem; min-width: 14rem;
    box-shadow: 0 12px 30px rgba(43, 51, 39, 0.16); z-index: 30;
  }
  .nav-toggle-input:checked ~ nav.site { display: flex; }
  .mobile-nav-toggle > nav.site a { margin: 0; padding: 0.4rem 0; }
  .mobile-nav-toggle > nav.site details.nav-drop { margin: 0.2rem 0 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  text-align: center;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  text-decoration: none;
  font: 600 0.85rem var(--sans);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.btn-sub { display: block; font-size: 0.72em; font-weight: 500; opacity: 0.75; margin-top: 0.15rem; }
.btn-ink { background: var(--ink); color: var(--khaki); }
.btn-ink:hover { background: #1d2419; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ochre); border-color: var(--ochre); color: var(--cream); }
/* .btn-cream is the primary call to action (Book now): the brighter red with white text since Stage 7 */
.btn-cream { background: var(--cta); color: #fff; }
.btn-cream:hover, .btn-cream:active { background: var(--ember-deep); }
.btn-outline-eve { background: transparent; color: var(--cream); border-color: var(--cream-mist); }
.btn-outline-eve:hover { border-color: var(--cream); }
/* transparent, accent border and text (Stage 5): the in-studio and home-visit buttons; on dark it takes the bright accent */
.btn-accent { background: transparent; color: var(--ochre); border-color: var(--ochre); border-width: 1.5px; }
.btn-accent:hover { background: var(--ochre); color: var(--cream); }
.btn-accent:active, .btn-outline:active { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--cream); }
.on-dark .btn-accent, .find-card.signpost .btn-accent, .feature-box .btn-accent { color: var(--campfire); border-color: var(--campfire); }
.on-dark .btn-accent:hover, .find-card.signpost .btn-accent:hover, .feature-box .btn-accent:hover { background: var(--campfire); color: var(--evening); }
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- Gradient sections ---------- */
.gradient-lift {
  background: url("assets/img/plaster.svg"), linear-gradient(180deg, var(--khaki) 0%, var(--khaki) 70%, #E9DDC4 100%);
  background-blend-mode: soft-light, normal;
}
.gradient-full {
  position: relative;
  background: linear-gradient(180deg,
    var(--khaki) 0%, var(--khaki) 22%,
    var(--earth) 48%,
    #6E4A2C 68%,
    var(--evening) 100%);
  overflow: hidden;
}
.gradient-full::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("assets/img/plaster.svg");   /* the plaster, lit at a sharp angle (was a fine grain) */
  mix-blend-mode: soft-light;
  opacity: 0.6;   /* soft-light bites harder on the dark end of the gradient */
}
.gradient-full .wrap { position: relative; z-index: 1; }

/* one continuous, gently warming gradient spanning several sections at once —
   avoids the hard seam that separate per-section .gradient-lift blocks created */
.page-gradient {
  background: url("assets/img/plaster.svg"), linear-gradient(180deg, var(--khaki) 0%, var(--khaki) 55%, #E9DDC4 100%);
  background-blend-mode: soft-light, normal;
}
.page-gradient > section { background: transparent; }

/* deeper variant for the treatment-plan pages, built from the same warm descent and grain
   texture as .gradient-full (the "How I Work" treatment), so these pages carry the same
   visual signature instead of the much paler base .page-gradient */
.page-gradient.deep {
  position: relative;
  background: linear-gradient(180deg,
    var(--khaki) 0%,
    #DEB877 40%,
    var(--earth) 72%,
    #8B5A32 100%);
  overflow: hidden;
}
.page-gradient.deep::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("assets/img/plaster.svg");   /* the plaster, lit at a sharp angle (was a fine grain) */
  mix-blend-mode: soft-light;
  opacity: 0.6;   /* soft-light bites harder on the dark end of the gradient */
}
.page-gradient.deep > * { position: relative; z-index: 1; }
/* hub variant — the hub wraps its ENTIRE page (hero through the disclaimer) in this same
   gradient now, and with 48+ cards that's a lot taller than a single condition page's content,
   so the color journey has to complete early (within roughly the hero's own height) and then
   hold at a deep warm tone for the rest, rather than stretching the same four stops across a
   much taller, unpredictable total height */
.page-gradient.deep.hub-long {
  background: linear-gradient(180deg,
    var(--khaki) 0%,
    #DEB877 5%,
    var(--earth) 11%,
    #4A3220 20%,
    #37260F 100%);
  /* the base rule's overflow:hidden is what clips the grain texture and rings on a normal
     (short) condition page, but here it's also the ancestor of the sticky filter bar —
     overflow anything but visible on ANY ancestor kills position:sticky outright. The rings
     field clips its own children independently (see .hub-rings-field), so nothing here relies
     on this element doing that clipping. */
  overflow: visible;
}

/* ---------- Hero ---------- */
.hero { padding: 4rem 0 6rem; }
.hero h1 { max-width: 18ch; margin-bottom: 0.5rem; color: var(--ink); }
.hero .eyebrow { color: var(--ochre); }
.hero .hero-sub { font: 500 1.25rem var(--serif); max-width: 30ch; margin: 0 0 1.2rem; color: var(--ochre); }
.hero .lede { font-size: 1.1rem; color: #3c4030; max-width: 34rem; margin-bottom: 2rem; }

/* a full-bleed photo backdrop, used for page heroes — image set via inline style */
.hero-photo {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--cream);
}
.hero-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,31,26,.32) 0%, rgba(36,31,26,.48) 60%, rgba(36,31,26,.62) 100%);
}
.hero-photo .wrap { position: relative; z-index: 1; }
.hero-photo .eyebrow { color: var(--campfire); }
.hero-photo h1 { color: var(--cream); }
.hero-photo .lede { color: rgba(243, 233, 216, 0.88); text-shadow: 0 1px 12px rgba(20,16,12,.35); }
.hero-photo h1 { text-shadow: 0 1px 14px rgba(20,16,12,.4); }
.hero-photo .hero-sub { color: var(--campfire); text-shadow: 0 1px 12px rgba(20,16,12,.35); }

/* a larger, editorial-scale photo for the bio section */
.bio-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius);
  display: block;
}

/* a properly vertical crop for photos of Oliver standing, used inline within a .split */
.portrait-aside {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--radius);
  display: block;
}

/* muted looping video as a section backdrop */
.section-video-bg { position: relative; overflow: hidden; }
.section-video-bg > video {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.section-video-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(237,230,211,.72), rgba(237,230,211,.8));
}
.section-video-bg > .wrap { position: relative; z-index: 2; }

/* ---------- Sections (khaki zone) ---------- */
section { padding: 4.5rem 0; }
section.tight { padding: 3rem 0; }
.section-head { max-width: 40rem; margin-bottom: 2.2rem; }
.section-head p { color: var(--ink-mist); font-size: 1.02rem; }

/* trail rule motif */
.trail {
  border-top: 1px dashed var(--line-day);
  position: relative;
  margin: 0 0 1.6rem;
}
.trail span {
  position: absolute; top: -0.6rem; left: 0;
  background: inherit;
  padding-right: 0.6rem;
  font: 600 0.65rem var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ochre);
}
.trail.on-khaki span { background: var(--khaki); }
.trail.on-lift span { background: #EDE6D3; }

/* leader-line callouts */
.leaders { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.leader { display: flex; align-items: center; gap: 0.5rem; }
.leader .pt { width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1.5px solid var(--ochre); flex: none; }
.leader .ln { width: 1.3rem; height: 1px; background: var(--ochre); }
.leader .lb { font: 500 0.78rem var(--sans); text-transform: uppercase; letter-spacing: 0.02em; color: #4A4530; }

/* ruler ticks */
.ticks { position: relative; width: 0.6rem; }
.ticks i { position: absolute; left: 0; width: 100%; height: 1px; }
.ticks.day i { background: rgba(43, 51, 39, 0.3); }
.ticks.eve i { background: rgba(243, 233, 216, 0.25); }

/* specimen / location stamp */
.stamp {
  width: 5.4rem; height: 5.4rem; border-radius: 50%;
  border: 1px solid rgba(243, 233, 216, 0.4);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 600 0.55rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: #E3D3BE; position: relative; flex: none;
}
.stamp::before {
  content: ""; position: absolute; inset: 5px;
  border: 1px dashed rgba(243, 233, 216, 0.28); border-radius: 50%;
}

/* two-column split */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }
.split.rev { grid-template-columns: 1fr 1.1fr; }
.split.bio-split { grid-template-columns: 1.15fr 1fr; align-items: center; }
.split.focus-split { grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }

/* cards */
.card {
  background: #F7F2E4;
  border: 1px solid var(--line-day);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
}

/* photo placeholder */
.photo-slot {
  border: 1px dashed var(--line-day);
  border-radius: var(--radius);
  background: #E4DAC1;
  color: var(--ink-mist);
  font: 500 0.78rem var(--sans);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
  aspect-ratio: 4 / 3;
}
.photo-slot.eve {
  background: #302620;
  border-color: var(--line-eve);
  color: var(--cream-mist);
}
.photo-slot.eve.glow { position: relative; overflow: hidden; }
.photo-slot.eve.glow::before {
  content: ""; position: absolute; inset: -2.5rem;
  background: radial-gradient(circle, rgba(var(--campfire-rgb), .45), transparent 70%);
}
.photo-slot.eve.glow span { position: relative; z-index: 1; }

/* real photography */
.portrait-photo {
  width: 100%; max-width: 16rem;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.photo-frame { border-radius: var(--radius); overflow: hidden; position: relative; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame.eve { aspect-ratio: 4 / 3; }
.photo-frame.eve.glow::before {
  content: ""; position: absolute; inset: -2.5rem; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 20% 15%, rgba(var(--campfire-rgb), .35), transparent 55%);
  mix-blend-mode: soft-light;
}

/* "the space" mosaic gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 11rem);
  gap: 1rem;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.gallery-grid .g1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery-grid .g2 { grid-column: 3; grid-row: 1 / 3; }
.gallery-grid .g3 { grid-column: 4; grid-row: 1; }
.gallery-grid .g4 { grid-column: 4; grid-row: 2; }

/* short video clips */
.video-row { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 2.2rem; }
.video-tile { width: 10.5rem; flex: none; border-radius: var(--radius); overflow: hidden; background: #14110d; position: relative; }
.video-tile video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.video-tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.7rem 0.5rem;
  font: 600 0.66rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
}
.video-tile.play video { cursor: pointer; }
.video-tile.play .play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.video-tile.play .play-badge span {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.video-tile.play .play-badge span::after {
  content: ""; border-style: solid; border-width: 0.5rem 0 0.5rem 0.8rem;
  border-color: transparent transparent transparent #fff; margin-left: 0.15rem;
}
.video-tile.play.playing .play-badge { display: none; }

/* link tiles — replace video previews in "How I Work" with links to related pages */
.link-row { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 1.4rem; }
.link-tile {
  flex: 1 1 14rem; background: rgba(247, 242, 228, 0.55); border: 1px solid rgba(43, 51, 39, 0.14);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 0.3rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.link-tile:hover { background: rgba(247, 242, 228, 0.85); border-color: var(--campfire); transform: translateY(-2px); }
.link-tile-label { font: 600 1rem var(--serif); color: var(--ink); }
.link-tile-desc { font: 400 0.85rem var(--sans); color: #5b5540; }

/* room / space carousel — merges "The Space" gallery and "The Room" photo into one component */
.room-carousel { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: #14110d; }
.room-carousel-track { position: relative; width: 100%; height: 100%; }
.room-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.room-carousel-slide.is-active { opacity: 1; }
.room-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-carousel-slide img.frame-top { object-position: 50% 8%; }   /* a portrait photo in the landscape frame: keep the head in it */
.room-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem;
  border-radius: 50%; border: 1px solid rgba(243, 233, 216, 0.4); background: rgba(20, 16, 12, 0.45);
  color: var(--cream); font-size: 1.3rem; line-height: 1; display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 2;
}
.room-carousel-arrow.prev { left: 0.75rem; }
.room-carousel-arrow.next { right: 0.75rem; }
.room-carousel-arrow:hover { background: rgba(20, 16, 12, 0.7); border-color: var(--cream); }
.room-carousel-dots { position: absolute; bottom: 0.9rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 2; }
.room-carousel-dots button { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: none; background: rgba(243, 233, 216, 0.4); padding: 0; cursor: pointer; }
.room-carousel-dots button.is-active { background: var(--cream); }

/* ---------- Evening-zone content (inside .gradient-full) ---------- */
.evening-block { padding-top: 2rem; }
.evening-block .eyebrow { color: var(--campfire); }
.evening-block h2, .evening-block h3 { color: var(--cream); }
.evening-block p { color: var(--cream-mist); }
.evening-block .leader .pt { border-color: var(--campfire); }
.evening-block .leader .ln { background: var(--campfire); }
.evening-block .leader .lb { color: var(--cream-mist); }

/* ---------- Rate tables ---------- */
table.rates { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.95rem; }
.section-video-bg table.rates { background: rgba(247, 242, 228, 0.7); border-radius: var(--radius); }
.section-video-bg table.rates th, .section-video-bg table.rates td { padding-left: 0.9rem; padding-right: 0.9rem; }
table.rates th, table.rates td { text-align: left; padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--line-day); }
table.rates th { font: 600 0.72rem var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mist); }
table.rates th:not(:first-child) { text-align: right; }
table.rates td.price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ochre); text-align: right; }
table.rates tfoot td { border-bottom: none; padding-top: 1rem; font-size: 0.85rem; color: var(--ink-mist); }
/* "+ HST" after each price (shared rate card: prices shown plus HST), quieter than the price itself */
table.rates .hst { font-weight: 400; font-size: 0.78em; color: var(--ink-mist); white-space: nowrap; }

/* membership rate tables (4 columns: Session, Non-member, Member, You Save) — auto column
   widths let "Session" grow far wider than its own text needs, reading as if it sits oddly
   far from "Non-member". Fixed, percentage-based column widths pull the three price columns
   into an even, centered cluster and keep that same proportion at any screen size (a percent
   of the table's own width scales itself, unlike a fixed px or rem gap would); the padding
   below then widens the Session→Non-member gap to roughly double the gap between the price
   columns themselves, with a small extra "tab" of padding on the two outer edges. */
.membership-card table.rates { table-layout: fixed; }
.membership-card table.rates th:first-child, .membership-card table.rates td:first-child { width: 31%; }
.membership-card table.rates th:not(:first-child), .membership-card table.rates td:not(:first-child) { width: 23%; }
.membership-card table.rates th:not(:first-child),
.membership-card table.rates td.price { text-align: center; }
.membership-card table.rates th:nth-child(2), .membership-card table.rates td:nth-child(2) { padding-left: 1.5rem; }
.membership-card table.rates th:nth-child(4), .membership-card table.rates td:nth-child(4) { padding-right: 1rem; }
@media (max-width: 600px) {
  /* "Non-member" and "You save" are two-word headers — at phone width the desktop column
     split leaves too little room and "Non-member" wraps onto a second line that visually
     collides with "Member" next to it. Narrower text, tighter tracking and a wider share of
     the table for those two columns (borrowed from Session, which has slack) fixes it. */
  .membership-card table.rates th { font-size: 0.6rem; letter-spacing: 0.03em; }
  .membership-card table.rates th:first-child, .membership-card table.rates td:first-child { width: 24%; }
  .membership-card table.rates th:nth-child(2), .membership-card table.rates td:nth-child(2) { width: 28%; padding-left: 0.4rem; }
  .membership-card table.rates th:nth-child(3), .membership-card table.rates td:nth-child(3) { width: 22%; }
  .membership-card table.rates th:nth-child(4), .membership-card table.rates td:nth-child(4) { width: 26%; padding-right: 0.4rem; }
  .membership-card table.rates .hst { display: block; }   /* under the price, so the columns keep their width */
}

/* ---------- Location / find-me cards ---------- */
.find-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.find-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.find-card { background: #F7F2E4; border: 1px solid var(--line-day); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; }
.find-card.wide { flex-direction: row; flex-wrap: wrap; gap: 2rem; align-items: flex-start; padding: 1.8rem 2rem; }
.find-card.wide > div { flex: 1 1 14rem; }
.find-card .tag { font: 600 0.65rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre); margin-bottom: 0.6rem; }
.find-card h3 { margin-bottom: 0.5rem; }
.find-card p { color: var(--ink-mist); font-size: 0.92rem; margin-bottom: 0.9rem; }
.find-card .hours { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: 0.88rem; }
.find-card .hours li { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--line-day); }
.find-card .btn { margin-top: auto; align-self: flex-start; }
.find-card.signpost, .feature-box {
  position: relative; overflow: hidden;
  background: var(--evening); border: 1px solid rgba(243,233,216,.18);
}
.find-card.signpost > video, .feature-box > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.find-card.signpost::before, .feature-box::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(36,31,26,.62) 0%, rgba(36,31,26,.8) 100%);
}
.find-card.signpost > *:not(video), .feature-box > *:not(video) { position: relative; z-index: 2; }
.find-card.signpost .tag, .feature-box .tag { color: var(--campfire); }
.find-card.signpost h3, .feature-box h3 { color: var(--cream); }
.find-card.signpost p, .feature-box p { color: rgba(243, 233, 216, 0.82); }
.find-card.signpost .hours li { border-bottom-color: rgba(243, 233, 216, 0.16); color: rgba(243, 233, 216, 0.88); }
.find-card.signpost .sub-link { border-top-color: rgba(243, 233, 216, 0.3); }
.find-card .sub-link { border-top: 1px dashed var(--line-day); margin-top: 1.2rem; padding-top: 1.1rem; }
.find-card .sub-link .tag { margin-bottom: 0.4rem; }
/* the clinic box (Stage 5): the old Toronto box's format, wider, hours beside the text */
.find-card.signpost.clinic { padding: 2rem 2.1rem 2.1rem; }
.find-card.clinic .clinic-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
.find-card.clinic .btn, .find-card.clinic .sub-link .btn { margin-top: 0.3rem; }
.find-card.clinic .sub-link p:not(.tag) { font-size: 1rem; margin-bottom: 0.9rem; }
/* the Toronto box (Stage 5): kept, smaller and quieter, so Kitchener-Waterloo leads */
.find-card.toronto { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.5rem; padding: 1rem 1.3rem; background: rgba(247, 242, 228, 0.55); }
.find-card.toronto .tag { margin: 0; flex: none; }
.find-card.toronto p:not(.tag) { flex: 1 1 18rem; margin: 0; font-size: 0.88rem; }
.find-card.toronto .text-link { flex: none; }
.text-link { font: 600 0.74rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ochre); text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Membership cards ---------- */
.membership-card {
  background: #F7F2E4; border: 1px solid var(--line-day); border-radius: var(--radius);
  padding: 2.2rem; margin-bottom: 2rem;
}
.membership-card .top-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.6rem; }
.membership-card .term-pill {
  font: 600 0.7rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--khaki); padding: 0.3rem 0.7rem; border-radius: 999px;
}
.membership-card ul.points { margin: 1rem 0 1.4rem; padding-left: 1.1rem; }
.membership-card ul.points li { margin-bottom: 0.5rem; font-size: 0.94rem; }
.membership-card .actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1.2rem; }
.membership-card .actions .status { font-size: 0.82rem; color: var(--ink-mist); }

/* ---------- Footer ---------- */
/* Stage 5, "Structural card" (the chosen one of three designs): the evening band carries the plaster texture, and one
   card sits in it: booking on the left (where, and a Book now button with the phone and email beside it), the site's
   main pages on the right, and "Are you in Toronto?" across the bottom, to the Toronto Island Wellness site. */
footer.site {
  background: var(--evening) url("assets/img/plaster.svg");
  background-blend-mode: soft-light;
  color: var(--cream-mist);
  padding: 2.6rem 0 1.6rem;
  font-size: 0.88rem;
  border-top: 1px solid rgba(var(--campfire-rgb), 0.3);
}
footer.site a { color: var(--cream); }
.foot-card {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.8rem 2.5rem;
  padding: 1.8rem 2rem 1.6rem 2.3rem; border-radius: calc(var(--radius) * 2);
  background: #2E2721 url("assets/img/plaster.svg"); background-blend-mode: soft-light;   /* solid: the plaster needs a colour to blend with */
  border: 1px solid rgba(243, 233, 216, 0.16); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}
.foot-card::before {   /* the accent slash down the left edge */
  content: ""; position: absolute; left: 0.9rem; top: 1.75rem; height: 3.4rem; width: 3px; border-radius: 2px;
  background: var(--campfire); transform: skewX(-14deg);
}
.foot-card .eyebrow { color: var(--campfire); margin-bottom: 0.6rem; }
.foot-where { margin: 0 0 1.1rem; max-width: 30rem; color: rgba(243, 233, 216, 0.85); font: 400 1.02rem/1.45 var(--serif); }
.foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.foot-actions .btn-cream { padding: 0.7rem 1.5rem; }
.foot-contact { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.foot-contact a { text-decoration: none; border-bottom: 1px dashed rgba(243, 233, 216, 0.35); padding-bottom: 0.1rem; overflow-wrap: anywhere; }
.foot-contact a:hover { border-bottom-color: var(--campfire); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 1.4rem; }
.foot-nav a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; text-decoration: none; color: rgba(243, 233, 216, 0.85); }
.foot-nav a::before { content: ""; flex: none; width: 0.38rem; height: 0.38rem; border-radius: 50%; border: 1.5px solid var(--campfire); }
.foot-nav a:hover { color: var(--cream); }
.foot-toronto {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem;
  padding-top: 1.1rem; border-top: 1px dashed rgba(243, 233, 216, 0.22); text-decoration: none;
}
.foot-toronto-q { font: 500 1.05rem var(--serif); color: var(--cream); }
.foot-toronto-a { flex: 1 1 16rem; color: var(--cream-mist); font-size: 0.85rem; }
.foot-toronto-go { flex: none; font: 600 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--campfire); }
.foot-toronto:hover .foot-toronto-go { text-decoration: underline; text-underline-offset: 0.25em; }
footer.site .footer-meta { margin: 1.1rem 0 0; font-size: 0.78rem; text-align: center; }
footer.site .footer-meta a { color: var(--cream-mist); text-underline-offset: 0.2em; }
footer.site .footer-meta a:hover { color: var(--cream); }

/* ---------- Site map page (sitemap.html, made by generator/make_sitemap.py) ---------- */
.sitemap-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.sitemap-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.8rem 2.4rem; }
.sitemap-group h2 { font-size: 1.35rem; margin-bottom: 0.8rem; }
.sitemap-group h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.sitemap-group h3 a { color: var(--ochre); text-decoration: none; }
.sitemap-group h3 a:hover { text-decoration: underline; }
.sitemap-group ul { list-style: none; margin: 0; padding: 0; }
.sitemap-group li { padding: 0.32rem 0; border-bottom: 1px dashed var(--line-day); font-size: 0.92rem; }
.sitemap-group li a { text-decoration: none; color: var(--ink); }
.sitemap-group li a:hover { color: var(--ochre); }

/* ---------- Treatment Plans: breadcrumb ---------- */
.breadcrumb { font: 500 0.78rem var(--sans); color: var(--ink-mist); margin: 0 0 1rem; }
.breadcrumb a { color: var(--ink-mist); text-decoration: none; }
.breadcrumb a:hover { color: var(--ochre); }
.breadcrumb .sep { margin: 0 0.45rem; color: var(--line-day); }

/* ---------- Treatment Plans: red flag callout ---------- */
.redflag { border-radius: var(--radius); border-left: 4px solid; padding: 1.2rem 1.4rem; margin: 0 0 1.6rem; }
.redflag .flag-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.45rem; }
.redflag svg { flex: none; width: 1.1rem; height: 1.1rem; }
.redflag h3 { font-size: 1rem; margin: 0; }
.redflag p { margin: 0; font-size: 0.94rem; }
.redflag p:not(:last-child) { margin-bottom: 0.6rem; }
.redflag.doctor { background: #F7EAE0; border-color: var(--campfire); }
.redflag.doctor h3, .redflag.doctor svg { color: #A85A2E; }
.redflag.emergency { background: #F6E0DB; border-color: #B4402E; }
.redflag.emergency h3, .redflag.emergency svg { color: #9C3624; }

/* ---------- Treatment Plans: typical course ---------- */
.typical-course {
  background: #F7F2E4; border: 1px solid var(--line-day); border-radius: var(--radius);
  padding: 1rem 1.3rem; font-size: 0.92rem; margin: 0 0 1.6rem;
}
.typical-course strong { color: var(--ochre); }

/* ---------- Treatment Plans: hub hero (split layout + rings) ---------- */
.hub-hero-big { padding-top: 3rem; padding-bottom: 3.5rem; }
.hub-hero-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
/* a very translucent panel that hugs just the text (padding, not a fixed box), sitting between
   the text and the ring field behind it — enough of a wash to keep the heading/lede readable
   over the circles without hiding them outright */
.hub-hero-textcard {
  position: relative; z-index: 2;
  background: rgba(247, 242, 228, 0.3);
  border-radius: calc(var(--radius) * 2);
  padding: 1.6rem 1.8rem;
  margin: -1.6rem -1.8rem;
}
/* the larger rings (r4 especially, at 25rem) are wider than their own column and bleed left
   into the text column when centered near that edge — without an explicit stacking order
   they'd paint after (on top of) the text card just because they're later in the DOM, even
   though visually they're meant to sit behind it */
.hub-hero-rings { position: relative; height: 28rem; z-index: 1; overflow: hidden; }
.ring {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
}
/* each ring centers on its own offset point rather than all sharing one center — a looser,
   more scattered cluster instead of a single bullseye */
.hub-hero-rings .ring.r1 { top: 46%; left: 56%; width: 20rem; height: 20rem; border: 2.5px dashed rgba(228, 208, 178, 0.42); }
.hub-hero-rings .ring.r2 { top: 58%; left: 40%; width: 14.5rem; height: 14.5rem; border: 2.5px dashed rgba(230, 165, 100, 0.42); }
.hub-hero-rings .ring.r3 { top: 36%; left: 64%; width: 9rem; height: 9rem; border: 2.5px dashed rgba(228, 208, 178, 0.42); }
.hub-hero-rings .ring.r4 { top: 66%; left: 68%; width: 25rem; height: 25rem; border: 2.5px dashed rgba(230, 165, 100, 0.42); }
.hub-hero-rings .ring.r5 { top: 26%; left: 34%; width: 6rem; height: 6rem; border: 2.5px dashed rgba(228, 208, 178, 0.42); }
/* the rest of the page's rings — one field spanning the full height of the gradient behind it,
   dense enough to feel like a continuous backdrop rather than a one-off hero flourish. Sits
   behind the card grid (painted first, same stacking context — see .page-gradient.deep > *) so
   the translucent cards float over it. Each ring's exact position/size is set inline per ring
   (see write_hub) rather than as named classes, since the count and spread scale with however
   tall the page ends up being. */
/* ".page-gradient.deep > .hub-rings-field" (not just ".hub-rings-field") to out-specificity the
   generic ".page-gradient.deep > *" rule above, which would otherwise force this back to
   position:relative and collapse it to zero height */
.page-gradient.deep > .hub-rings-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* leader-line stat row under the hero lede */
.hero .leaders { margin-top: 1.6rem; margin-bottom: 0; }

/* ---------- Treatment Plans: disclaimer ---------- */
.disclaimer { font-size: 0.8rem; color: var(--ink-mist); margin: 0; }
/* condition pages sit on the deep gradient, which is dark by the time the disclaimer appears */
.page-gradient.deep .disclaimer { color: var(--cream-mist); }

/* ---------- Treatment Plans: condition grid & cards ---------- */
/* spacing between area sections: treatment-plans.css (.tp .area-heading) */
/* the grid now sits on the hub's extended dark gradient rather than plain khaki, so headings
   need a dark-background treatment */
.page-gradient.deep .area-heading { color: var(--cream); }
.condition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 0 0 1rem; }
/* translucent parchment fill — the same treatment the tab panels on condition pages use,
   so the hub's cards read as part of the same family instead of flat generic boxes */
.condition-card {
  position: relative;
  background: rgba(247, 242, 228, 0.62); border: 1px solid rgba(216, 207, 184, 0.7);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.condition-card:hover {
  border-color: var(--ochre); background: rgba(247, 242, 228, 0.85);
  transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(43, 51, 39, 0.4);
}
.condition-card h3 { font-size: 1.02rem; padding-right: 1.6rem; }
.condition-card p { margin: 0; font-size: 0.86rem; color: var(--ink-mist); }
.condition-card .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; }
/* small rotated dot-and-dash corner mark, reusing the leader-line motif — angle varies per
   body area so the grid has some quiet visual variety without needing illustrated icons */
.card-mark {
  position: absolute; top: 1.35rem; right: 1.3rem;
  width: 1.1rem; height: 1px; background: var(--ochre); opacity: 0.5;
  transform-origin: right center;
}
.card-mark::before {
  content: ""; position: absolute; right: -0.32rem; top: 50%; transform: translateY(-50%);
  width: 0.42rem; height: 0.42rem; border-radius: 50%; border: 1.5px solid var(--ochre);
}
/* small muted flag, reusing the red-flag icon — a quiet heads-up that the page has a
   red-flag note, not an alarm; kept low-contrast on purpose */
.card-flag { position: absolute; top: 1.25rem; right: 1.25rem; width: 1rem; height: 1rem; color: var(--ochre); opacity: 0.55; }
.card-flag svg { width: 100%; height: 100%; }

/* compact variant — used for "Related conditions" inside a tab panel, which already sits on
   the #F7F2E4 panel background, so these use --khaki for contrast and pack in tighter */
.condition-grid.compact { gap: 0.7rem; margin: 0; }
.condition-card.compact { background: var(--khaki); padding: 0.85rem 1rem; gap: 0.35rem; }
.condition-card.compact h3 { font-size: 0.92rem; }
.condition-card.compact p { font-size: 0.8rem; }
.chip {
  font: 600 0.62rem var(--sans); letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--khaki); color: var(--ink-mist);
  padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--line-day);
}

/* ---------- Read more and FAQ (TIW's expanders, behaviour only; Stage 4) ---------- */
/* The button sits after the text it opens, so the X rides down with the opening text, then glides right (--x-shift,
   measured in assets/js/site.js) to the bottom right. "Read more" slides up a little and fades out. Without the
   script, everything stays open. Used by long Treatment Plans tabs; ready for any FAQ (.faq > .faq-item). */
.expander > p { margin-bottom: 0.2rem; }
.more-btn {
  display: flex; align-items: center; width: 100%; min-height: 2.9rem; padding: 0.3rem 0;
  border: 0; background: none; color: var(--ochre); text-align: left; cursor: pointer;
  font: 600 0.74rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
}
.is-measuring .x-icon, .is-measuring .more-label { transition: none; }   /* site.js measuring the X: no motion replayed */
.more-label { display: inline-block; flex: none; transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.6s ease; }
[aria-expanded="true"] > .more-label { opacity: 0; transform: translateY(-0.5rem); }
/* the plus turns into an X, in time with the text sliding open */
.x-icon { position: relative; flex: none; width: 1.6rem; height: 1.6rem; margin-left: 0.45rem; transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1); }
.x-icon i { position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 1.5px; margin: -0.75px 0 0 -0.525rem; border-radius: 1px; background: currentColor; }
.x-icon i:last-child { transform: rotate(90deg); }
[aria-expanded="true"] > .x-icon { transform: translateX(var(--x-shift, 0px)) rotate(45deg); }
.more-body { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.8s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.9s ease 0.1s, visibility 0s linear 0.8s; }
.more-body.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s, 0.1s, 0s; }
.more-inner { min-height: 0; overflow: hidden; }
.more-inner > :first-child { margin-top: 0.6rem; }
.more-inner > :last-child { margin-bottom: 0.4rem; }
html:not(.js) .more-body { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
html:not(.js) .more-btn { display: none; }
/* FAQ: questions separated by hairlines; an opened one sits in a faint parchment box with an ochre edge */
.faq { position: relative; max-width: 44rem; border-top: 1px solid var(--line-day); }
.faq-item { position: relative; margin-inline: -1rem; padding-inline: 1rem; border-bottom: 1px solid var(--line-day); border-radius: var(--radius); transition: background-color 0.5s ease, box-shadow 0.5s ease; }
.faq-item.is-open { background-color: rgba(247, 242, 228, 0.6); box-shadow: inset 2px 0 0 var(--ochre); }
.faq-q { margin: 0; font-size: 1rem; }
.faq-q button {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.3rem; padding: 0.8rem 0;
  border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 500 1rem/1.35 var(--serif);
}
.faq-q .x-icon { color: var(--ochre); }
.faq .more-inner p { margin: 0 0 1.1rem; }
html.reduce-motion .more-label, html.reduce-motion .x-icon, html.reduce-motion .more-body, html.reduce-motion .faq-item,
html.reduce-motion .link-tile, html.reduce-motion .condition-card, html.reduce-motion .room-carousel-slide { transition: none; }
html.reduce-motion .link-tile:hover { transform: none; }

/* ---------- Stage 5 components (2 Oct 2026) ---------- */
/* The slash: a short slanted accent line down a block's left edge (the directory's description and filter bar had a
   straight one; Oliver wanted it as the accent everywhere boxes of text need an edge). */
.slash-box { position: relative; padding-left: 1.25rem; }
.slash-box::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.3rem; height: min(2.8rem, calc(100% - 0.6rem)); width: 3px; border-radius: 2px;
  background: var(--ochre); transform: skewX(-14deg);   /* a short stroke at the top: a long one would drift sideways */
}
.on-dark .slash-box::before, .hero-photo .slash-box::before { background: var(--campfire); }

/* the feature box: the old Toronto box's look (dark, a muted clip behind, the accent eyebrow) for calls to action */
.feature-box::before { background: linear-gradient(100deg, rgba(36,31,26,.88) 0%, rgba(36,31,26,.66) 55%, rgba(36,31,26,.38) 100%); }   /* the clip shows more at the right, behind the button */
.feature-box { min-height: 11.5rem; border-radius: var(--radius); padding: 2rem 2.1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.feature-box .fb-text { flex: 1 1 20rem; max-width: 36rem; }
.feature-box .tag { font: 600 0.65rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.6rem; }
.feature-box h3 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin-bottom: 0.5rem; }
.feature-box p { margin: 0; }
.feature-box .btn-row { flex: none; }

/* a mid-page call to action: one line and a button, on the slash */
.cta-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.5rem; padding: 1.1rem 1.3rem 1.1rem 1.6rem; border-radius: var(--radius); background: rgba(247, 242, 228, 0.6); border: 1px solid var(--line-day); }
.cta-line p { margin: 0; flex: 1 1 18rem; font: 500 1.08rem/1.4 var(--serif); color: var(--ink); }

/* related questions (common-question pages): a list of rows on the slash, not a row of identical buttons */
.ask-box { position: relative; padding: 1.8rem 1.8rem 1.4rem 2.3rem; border-radius: calc(var(--radius) * 2); background: #F2EBD9 url("assets/img/plaster.svg"); background-blend-mode: soft-light; border: 1px solid var(--line-day); }   /* solid: the plaster needs a colour to blend with */
.ask-box::before { content: ""; position: absolute; left: 0.9rem; top: 1.75rem; height: 3.4rem; width: 3px; border-radius: 2px; background: var(--ochre); transform: skewX(-14deg); }
.ask-box .eyebrow { color: var(--ochre); }
.ask-box h2 { margin-bottom: 1rem; }
.ask-list { list-style: none; margin: 0; padding: 0; counter-reset: ask; }
.ask-list li { counter-increment: ask; border-top: 1px dashed var(--line-day); }
.ask-list a { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0.2rem; text-decoration: none; color: var(--ink); font: 500 1.05rem/1.35 var(--serif); transition: color 0.2s ease, padding 0.25s ease; }
.ask-list a::before { content: counter(ask, decimal-leading-zero) " /"; flex: none; font: 600 0.72rem var(--sans); letter-spacing: 0.08em; color: var(--ochre); }
.ask-list a::after { content: "\2192"; margin-left: auto; color: var(--ochre); transition: transform 0.25s ease; }
.ask-list a:hover { color: var(--ochre); }
.ask-list a:hover::after { transform: translateX(0.3rem); }
html.reduce-motion .ask-list a, html.reduce-motion .ask-list a::after { transition: none; }

/* the rolling carousel (homepage, directory, common-question pages): a row of condition cards that scrolls sideways
   on its own (assets/js/site.js: one card every few seconds, pausing for a pointer, a touch, the keyboard or the
   pause button, and only while on screen; still with Reduce Motion). The head: the label in its own box, then the
   heading in a box that runs out to the arrows, which are exactly as tall as it. */
.rail { --bar: 2.9rem; }
.rail-head { margin-bottom: 0.3rem; }
.rail-tag { display: inline-block; margin: 0 0 0.45rem; padding: 0.38rem 0.7rem; border: 1px solid var(--line-day); border-radius: var(--radius); background: rgba(247, 242, 228, 0.6); font: 600 0.66rem/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ochre); }
.rail-bar { display: flex; align-items: stretch; gap: 0.4rem; }
.rail-h { flex: 1; min-width: 0; display: flex; align-items: center; height: var(--bar); margin: 0; padding: 0 1rem; border: 1px solid var(--line-day); border-radius: var(--radius); background: rgba(247, 242, 228, 0.6); font-size: clamp(1.1rem, 2.6vw, 1.4rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 3px 0 0 var(--ochre); }
.rail-btn { flex: none; display: inline-grid; place-items: center; width: var(--bar); height: var(--bar); padding: 0; border: 1px solid var(--line-day); border-radius: var(--radius); background: rgba(247, 242, 228, 0.6); color: var(--ink); cursor: pointer; transition: border-color 0.2s ease, opacity 0.2s ease; }
.rail-btn:hover { border-color: var(--ochre); color: var(--ochre); }
.rail-btn:disabled { opacity: 0.4; cursor: default; }
.rail-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn.is-pause .i-play, .rail-btn.is-pause[aria-pressed="true"] .i-pause { display: none; }
.rail-btn.is-pause[aria-pressed="true"] .i-play { display: block; }
html:not(.js) .rail-btn, html.reduce-motion .rail-btn.is-pause { display: none; }
.rail-track {
  display: flex; gap: 0.9rem; margin: 0 -1rem; padding: 0.9rem 1rem 1.2rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent);
  mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent);
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > li { display: flex; flex: 0 0 clamp(14rem, 72vw, 17rem); margin: 0; scroll-snap-align: start; }
.rail-track .condition-card { width: 100%; background: rgba(247, 242, 228, 0.82); }
.rail-foot { margin: 0.2rem 0 0; }
/* on the dark gradients (the Treatment Plans pages) the boxes go smoked, like the filter bar */
.on-dark .rail-tag, .on-dark .rail-h, .on-dark .rail-btn { background: rgba(55, 38, 15, 0.72); border-color: rgba(243, 233, 216, 0.28); color: var(--cream); }
.on-dark .rail-tag { color: var(--campfire); }
.on-dark .rail-h { box-shadow: inset 3px 0 0 var(--campfire); }
.on-dark .rail-btn:hover { border-color: var(--campfire); color: var(--campfire); }
.on-dark .rail-foot .text-link { display: inline-block; padding: 0.42rem 0.75rem; border-radius: var(--radius); background: rgba(55, 38, 15, 0.72); border: 1px solid rgba(243, 233, 216, 0.28); color: var(--campfire); }   /* readable on the light top of the gradient too */

/* tabs (the homepage's How I Work unit): a row of tabs over a parchment panel; site.js switches them */
.tabset { margin-top: 2rem; }
.tab-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tab-row [role="tab"] {
  position: relative; margin: 0 0 -1px; padding: 0.75rem 1.1rem 0.72rem; border: 1px solid var(--line-day); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; background: rgba(247, 242, 228, 0.45); color: var(--ink-mist); cursor: pointer;
  font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s, background-color 0.2s;
}
.tab-row [role="tab"]:hover { color: var(--ink); background: rgba(247, 242, 228, 0.7); }
.tab-row [role="tab"][aria-selected="true"] { z-index: 1; background: #F7F2E4; color: var(--ink); box-shadow: inset 0 3px 0 var(--ochre); }
.tab-panels { position: relative; padding: 1.9rem 2rem 1.6rem; border: 1px solid var(--line-day); border-radius: 0 var(--radius) var(--radius) var(--radius); background: #F7F2E4 url("assets/img/plaster.svg"); background-blend-mode: soft-light; }
.tab-panels [role="tabpanel"]:focus-visible { outline: 2px solid var(--ochre); outline-offset: 6px; }
.tab-panels [role="tabpanel"][hidden] { display: none; }
.tab-panels h3 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin-bottom: 0.9rem; }
.tab-panels p { color: #3c4030; }
.tab-panels strong { color: var(--ink); font-weight: 600; }
.tab-panels .lead { font: 500 1.12rem/1.45 var(--serif); color: var(--ink); }
.tab-panels .leaders { margin: 1.2rem 0 1.4rem; }
.tab-panels > :last-child, .tab-panels [role="tabpanel"] > :last-child { margin-bottom: 0; }
/* the leader motif carried through the text: each point is a ring and a line, then the words */
.lead-list { list-style: none; margin: 0.4rem 0 1.3rem; padding: 0; }
.lead-list li { position: relative; padding: 0.55rem 0 0.55rem 2.3rem; border-bottom: 1px dashed var(--line-day); color: #3c4030; }
.lead-list li:last-child { border-bottom: 0; }
.lead-list li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1.5px solid var(--ochre); }
.lead-list li::after { content: ""; position: absolute; left: 0.6rem; top: calc(1.05rem + 0.29rem); width: 1.2rem; height: 1px; background: var(--ochre); }
html.reduce-motion .tab-row [role="tab"] { transition: none; }

/* the "Read more" box on the memberships page (and any intro that wants one): a faint wash on the slash */
.intro-box { max-width: 38rem; padding: 1rem 1.2rem 0.6rem 1.6rem; border-radius: var(--radius); background: rgba(36, 31, 26, 0.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.intro-box.slash-box::before { left: 0.6rem; }
.intro-box p { color: rgba(243, 233, 216, 0.92); }
.intro-box strong { color: var(--cream); }
.intro-box .more-btn { color: var(--campfire); }
.intro-box .leaders { margin: 0.4rem 0 0.8rem; }
.intro-box .leader .lb { color: var(--cream); }
.intro-box .leader .pt { border-color: var(--campfire); }
.intro-box .leader .ln { background: var(--campfire); }
.intro-box .leader a { text-decoration: none; }

/* membership cards: the details (terms) behind a Read more, after the benefit and the rates */
.membership-card .card-lead { max-width: 40rem; font-size: 1.02rem; color: #3c4030; }
.membership-card .card-lead strong { color: var(--ink); }
.membership-card .details { margin-top: 0.4rem; }
.membership-card .details .more-btn { min-height: 2.6rem; }
.membership-card .details ul.points { margin-top: 0.4rem; }

/* ---------- Responsive ---------- */
/* mobile-only "read more" truncation — used on pages that cover several topics at once (the
   homepage), never on a page devoted to one subject (a treatment-plans condition page, a
   common-questions article), and never on desktop: the underlying copy is never shortened,
   only visually clipped below 861px until the reader asks to see the rest. Opening slides the
   text to its real height with TIW's "Read more" motion (assets/js/site.js); the X closes it. */
.read-more-btn { display: none; }
@media (max-width: 860px) {
  .readmore {
    max-height: 8em; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
  }
  .readmore.is-expanded { -webkit-mask-image: none; mask-image: none; }
  html:not(.js) .readmore { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .read-more-btn {
    display: flex; align-items: center; width: 100%; min-height: 2.6rem; margin-top: 0.3rem; padding: 0.2rem 0;
    border: 0; background: none; color: var(--ochre); text-align: left; cursor: pointer;
    font: 600 0.74rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  }
  html:not(.js) .read-more-btn { display: none; }
  .gradient-full .read-more-btn { color: var(--ochre); }
  .readmore-group { margin-bottom: 1.4rem; }   /* Stage 5: the button no longer crowds what comes next */
  .evening-block .read-more-btn, .hero-photo .read-more-btn { color: var(--campfire); }

  /* the homepage hero on phones (Stage 5): the photo fills the screen and the words take the lower half at most:
     smaller, the paragraph clipped to a few lines with Read more, so the heading, line and paragraph come to eight */
  .hero-home { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(100svh - 4.6rem); padding: 0 0 1.6rem; background-color: var(--evening); background-size: auto 70%; background-repeat: no-repeat; background-position: 60% 0; }   /* the photo in the top part, so the words sit under the face, not on it */
  .hero-home::before { background: linear-gradient(180deg, rgba(36,31,26,0) 0%, rgba(36,31,26,.05) 34%, rgba(36,31,26,.7) 56%, rgba(36,31,26,.97) 70%, var(--evening) 100%); }
  .hero-home .wrap { width: 100%; }
  .hero-home h1 { font-size: clamp(1.75rem, 7.6vw, 2.2rem); margin-bottom: 0.3rem; }
  .hero-home .hero-sub { font-size: 1rem; margin-bottom: 0.6rem; }
  .hero-home .readmore { max-height: 6.4em; }   /* four lines of the paragraph */
  .hero-home .lede { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0; }
  .hero-home .readmore-group { margin-bottom: 0.6rem; }
  .hero-home .read-more-btn { min-height: 2.2rem; margin-top: 0; }
  .hero-home .btn-row { gap: 0.5rem; }
  .hero-home .btn-row .btn { flex: 1 1 0; width: auto; padding: 0.6rem 0.5rem; font-size: 0.8rem; }
}

@media (max-width: 860px) {
  .split, .split.rev, .split.bio-split, .split.focus-split { grid-template-columns: 1fr; gap: 2rem; }
  .split.focus-split { margin-top: 2rem; }
  .find-grid { grid-template-columns: 1fr; }
  .find-card.wide { flex-direction: column; gap: 1rem; }
  .find-card.clinic .clinic-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .foot-card { grid-template-columns: 1fr; }
  nav.site { display: flex; flex-wrap: wrap; }
  nav.site a { margin-left: 0; margin-right: 1.2rem; }
  /* the dropdown's long questions wrap inside the phone menu instead of pushing it past the screen */
  nav.site details.nav-drop .drop-menu { min-width: 0; }
  nav.site details.nav-drop .drop-menu a { white-space: normal; }
  .mobile-nav-toggle > nav.site { width: min(18rem, calc(100vw - 2rem)); }
  section { padding: 3rem 0; }
  .hero { padding: 3rem 0 4rem; }
  .stamp { display: none; }
  .hub-hero-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .hub-hero-textcard { margin: -1.4rem -1.3rem; padding: 1.4rem 1.3rem; }   /* inside the 1.5rem gutter */
  .hub-hero-rings { display: none; }
  .hub-rings-field { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 9rem); }
  .gallery-grid .g1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .gallery-grid .g2 { grid-column: 1; grid-row: 2 / 4; }
  .gallery-grid .g3 { grid-column: 2; grid-row: 2; }
  .gallery-grid .g4 { grid-column: 2; grid-row: 3; }
  .video-row { justify-content: center; }
  .video-tile { width: 8.5rem; }
  .condition-grid { grid-template-columns: 1fr; }
}

/* ---------- Phones (TIW's phone rules, Stage 4; layout and spacing only) ---------- */
/* Narrower gutters and section spacing, buttons in a row go full width, the footer's buttons sit two by two
   (the name across the top, the email across its own row), and nothing runs wider than the screen. */
@media (max-width: 520px) {
  .wrap { padding: 0 1.15rem; }
  section { padding: 2.5rem 0; }
  section.tight { padding: 2.25rem 0; }
  .hero { padding: 2.5rem 0 3rem; }
  h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  h2 { font-size: clamp(1.45rem, 6.4vw, 1.8rem); }
  .hero .lede { font-size: 1.02rem; }
  .btn-row .btn { width: 100%; }
  .card { padding: 1.3rem 1.2rem; }
  .find-card, .find-card.wide { padding: 1.3rem 1.2rem 1.4rem; }
  .membership-card { padding: 1.4rem 1.15rem; }
  .membership-card .actions .btn { width: 100%; }
  .leaders { gap: 0.8rem 1.2rem; }
  table.rates th, table.rates td { padding: 0.6rem 0.35rem; }
  .link-tile { flex-basis: 100%; }
  /* the hub's text card reaches out past its text by less than the phone gutter, so it never pokes past the screen */
  .hub-hero-textcard { margin: -1.2rem -0.9rem; padding: 1.2rem 0.9rem; }
  .gallery-grid { grid-template-rows: repeat(3, 7.5rem); }

  .foot-card { padding: 1.4rem 1.1rem 1.2rem 1.7rem; gap: 1.4rem; }
  .foot-card::before { left: 0.6rem; }
  .foot-actions .btn-cream { width: 100%; }
  .feature-box { padding: 1.5rem 1.2rem; }
  .feature-box .btn-row { width: 100%; }
  .ask-box { padding: 1.4rem 1.1rem 1rem 1.7rem; }
  .ask-box::before { left: 0.6rem; }
  .tab-panels { padding: 1.4rem 1.1rem 1.2rem; }
  .tab-row { flex-wrap: nowrap; gap: 0.2rem; }
  .tab-row [role="tab"] { flex: 1 1 0; min-width: 0; padding: 0.6rem 0.35rem; font-size: 0.62rem; letter-spacing: 0.04em; line-height: 1.25; text-align: center; }
  .find-card.signpost.clinic { padding: 1.4rem 1.2rem 1.5rem; }
  .cta-line { padding: 1rem 1rem 1rem 1.4rem; }
  .cta-line .btn { width: 100%; }
  .sitemap-cols { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .wrap { padding: 0 1rem; }
  .mark-sub { display: none; }
  .mark { font-size: 1.05rem; white-space: nowrap; }
  .btn-head { padding: 0.45rem 0.75rem; white-space: nowrap; }
  table.rates { font-size: 0.88rem; }
  .membership-card table.rates td { font-size: 0.86rem; }
  .breadcrumb { font-size: 0.72rem; }
}
@media (max-width: 360px) {
  .mark-dot { display: none; }
  .mark-name { margin-left: 0; }
  .mark { font-size: 1rem; }
  .btn-head { padding: 0.42rem 0.6rem; font-size: 0.74rem; }
  .head-end { gap: 0.5rem; }
}

/* ---------- Stage 6 (Oliver, 3 Oct 2026): cleanup ---------- */
/* Homepage: pricing now follows The Space, so its section rises out of the evening instead of starting on a seam */
.page-gradient.from-evening {
  background: url("assets/img/plaster.svg"), linear-gradient(180deg, var(--evening) 0, var(--khaki) 14rem, var(--khaki) 55%, #E9DDC4 100%);
  background-blend-mode: soft-light, normal;
}
.page-gradient.from-evening > .section-video-bg:first-child { padding-top: 7.5rem; margin-top: -1px; }
.page-gradient.from-evening > .section-video-bg:first-child::before {
  background: url("assets/img/plaster.svg"), linear-gradient(180deg, var(--evening) 0, rgba(237,230,211,.72) 7rem, rgba(237,230,211,.8) 100%);
  background-blend-mode: soft-light, normal;
}
/* a carousel's own line between its heading and the cards (label, heading, line, cards) */
.rail-intro { max-width: 40rem; margin: 0.7rem 0 1.1rem; color: var(--ink-mist); }
.on-dark .rail-intro { color: var(--cream-mist); }
/* the footer on pages that already end with the booking band: contact only, no second "Book a session" */
.foot-book-contact { align-self: start; }
.foot-book-contact .foot-contact { flex-direction: column; gap: 0.6rem; font: 400 1.02rem/1.45 var(--serif); }
.foot-book-contact .foot-contact a { align-self: flex-start; }
/* the Common Questions page: each question with its opening line */
.ask-list-full a { align-items: flex-start; }
.ask-list-full a::before { padding-top: 0.3rem; }
.ask-list-full a::after { padding-top: 0.1rem; }
.ask-q { display: block; }
.ask-a { display: block; margin-top: 0.3rem; font: 400 0.92rem/1.5 var(--sans); color: var(--ink-mist); }
.ask-text { flex: 1; min-width: 0; }
/* collapsed "Read more" text stays findable (a link from Google, or find in page, opens it: site.js) */
.more-body[hidden="until-found"] { visibility: visible; }
/* rate tables: a price and its "+ HST" stay together */
table.rates td.price { white-space: nowrap; }
@media (max-width: 600px) {
  /* carousel heading in full: the arrows and pause move to their own row under it */
  .rail-bar { flex-wrap: wrap; }
  .rail-h { flex: 1 1 100%; height: auto; min-height: var(--bar); padding-block: 0.55rem; white-space: normal; text-wrap: balance; }
  .rail-btn.is-prev { margin-left: auto; }
}
@media (max-width: 520px) {
  /* common-question pages: about a third less space between sections */
  .qa-page section { padding: 1.7rem 0; }
  .qa-page section.tight { padding: 1.5rem 0; }
}

/* ---------- Stage 7 (Oliver, 3 Oct 2026): desktop review ---------- */
/* Style A, the one box: the condition-card look (light panel, hairline border, 6px corners) with the corner slash at
   the top right (a ring and a line in the accent, like .card-mark). Used for the homepage cards, the directory band,
   the price cards, the inquiry form, the Treatment Plan panel and (on dark) the footer and the location cards. */
:root {
  --mark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD371B' stroke-width='1.5'%3E%3Cpath d='M6.2 14.95 16.87 7.49'/%3E%3Ccircle cx='19' cy='6' r='2.6'/%3E%3C/svg%3E");
  --mark-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F08A73' stroke-width='1.5'%3E%3Cpath d='M6.2 14.95 16.87 7.49'/%3E%3Ccircle cx='19' cy='6' r='2.6'/%3E%3C/svg%3E");
}
.box-a { position: relative; background: #F7F2E4; border: 1px solid var(--line-day); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.5rem; }
.box-a::after, .find-pair .find-card::after, .foot-card::after, .tp .book .book-pages::after {
  content: ""; position: absolute; top: 0.95rem; right: 0.95rem; width: 1.5rem; height: 1.5rem; z-index: 3;
  background: var(--mark-light) center / contain no-repeat; opacity: 0.6; pointer-events: none;
}
.find-pair .find-card::after, .foot-card::after { background-image: var(--mark-dark); opacity: 0.8; }
.box-a > h3:first-of-type, .box-a > .tag:first-child { padding-right: 2rem; }

/* the one list format (the In-Studio days list): label left, value right, a hairline between rows, no bullets */
.rows { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: 0.92rem; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-day); color: #3c4030; }
.rows li:last-child { border-bottom: 0; }
.rows li > span:last-child:not(:first-child) { text-align: right; }
.rows .price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ochre); white-space: nowrap; }
.rows .hst { font-weight: 400; font-size: 0.8em; color: var(--ink-mist); }
.rows.prose li { display: block; }
.rows strong { color: var(--ink); font-weight: 600; }
.rows-note { margin: 0; font-size: 0.85rem; color: var(--ink-mist); }
.find-card .hours li:last-child { border-bottom: 0; }

/* How I Work: three cards instead of tabs */
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; align-items: start; }
.how-card { background: #F7F2E4 url("assets/img/plaster.svg"); background-blend-mode: soft-light; }
.how-card .how-step { font: 600 0.72rem var(--sans); letter-spacing: 0.13em; color: var(--ochre); margin: 0 0 0.5rem; }
.how-card h3 { font-size: 1.35rem; margin-bottom: 0.8rem; }
.how-card p { color: #3c4030; font-size: 0.95rem; }
.how-card .lead { font: 500 1.05rem/1.45 var(--serif); color: var(--ink); }
.how-card > :last-child { margin-bottom: 0; }

/* The Space: what's in the room, as a list on the dark */
.evening-block .rows li { border-bottom-color: var(--line-eve); color: rgba(243, 233, 216, 0.88); }
.space-rows li > span:first-child { font: 600 0.68rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--campfire); flex: none; }
.space-rows { margin-bottom: 1.2rem; }

/* Services & Pricing: two Style A cards over the clip */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.price-card { background: rgba(247, 242, 228, 0.94); }
.price-card .tag, .inquiry-form legend { font: 600 0.65rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre); margin: 0 0 0.5rem; }
.price-card h3 { margin-bottom: 0.7rem; }

/* the membership box: red accent kept, the yearly savings beside the words */
.member-box { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-left: 2.1rem; }
.member-box .member-text { flex: 1 1 20rem; }
.member-box h3 { margin-bottom: 0.4rem; }
.member-box .member-text p { margin: 0; color: var(--ink-mist); }
.member-box .member-save { flex: 1 1 16rem; margin: 0; }
.member-box .btn { flex: none; }
.membership-card .year-save { margin: -0.4rem 0 1.2rem; }
.membership-card .year-save li > span:first-child { color: var(--ink-mist); }

/* Where to Find Me: two sections side by side, Fearless Heart and Toronto */
.find-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.find-pair .find-card.signpost { padding: 1.9rem 1.9rem 1.9rem; }
.find-pair .find-card .btn { margin-top: 0.3rem; }
.find-card.signpost.toronto-card { background: var(--wine) url("assets/img/plaster.svg"); background-blend-mode: soft-light; }
.find-card.signpost.toronto-card::before { display: none; }

/* the Condition Directory: label, heading, line, carousel and link held in one band */
.dir-band { background: rgba(247, 242, 228, 0.6); padding: 1.5rem 1.5rem 1.2rem; }
.dir-band .rail-foot { margin-bottom: 0; }

/* the footer: the darker red, and the footer card in the one box style (corner slash, not the left one) */
footer.site { background-color: var(--wine); border-top-color: rgba(var(--campfire-rgb), 0.35); }
.foot-card { border-radius: var(--radius); background-color: #4A1B11; padding: 1.8rem 2rem 1.6rem; }
.foot-card::before { display: none; }
.foot-actions + .foot-actions { margin-top: 0.9rem; }

/* the Treatment Plan panel in the one box style */
.tp .book .book-pages { background: rgba(247, 242, 228, 0.9); border-color: var(--line-day); box-shadow: none; }

/* the inquiry form */
.inquiry-form { max-width: 44rem; padding: 2rem 2rem 1.8rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }
.field { margin: 0 0 1.1rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font: 600 0.82rem var(--sans); color: var(--ink); margin-bottom: 0.35rem; }
.field input:not([type="radio"]), .field textarea {
  width: 100%; padding: 0.65rem 0.75rem; border: 1px solid #BDB49C; border-radius: var(--radius);
  background: #FFFDF7; color: var(--ink); font: 400 1rem var(--sans);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ochre); outline-offset: 1px; border-color: var(--ochre); }
.field .hint, .hint { font-weight: 400; font-size: 0.8rem; color: var(--ink-mist); margin: 0.3rem 0 0; }
.field label .hint { margin-left: 0.3rem; }
.field.choice label { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; padding: 0.3rem 0; cursor: pointer; }
.field.choice input { accent-color: var(--ochre); width: 1.05rem; height: 1.05rem; }
.field[hidden] { display: none; }
.field.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-sent, .form-error { padding: 0.8rem 1rem; border-radius: var(--radius); margin: 0 0 1.2rem; font-weight: 500; }
.form-sent { background: #E7EEDC; color: var(--ink); }
.form-error { background: #F6E0DB; color: #7A2512; }
.form-error p { margin: 0; }
.form-error .btn-row { margin: 0.7rem 0 0; }
.form-error a:not(.btn) { color: inherit; }
.form-error .form-copied:empty { display: none; }
.form-error .form-copied { margin-top: 0.5rem; font-weight: 400; }
.inquiry-form .btn[disabled] { opacity: 0.6; }

@media (max-width: 860px) {
  .how-grid, .price-grid, .find-pair { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .box-a { padding: 1.3rem 1.1rem 1.2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .inquiry-form { padding: 1.4rem 1.1rem 1.3rem; }
  .member-box { padding-left: 1.6rem; }
  .member-box .btn { width: 100%; }
  .foot-card { padding: 1.5rem 1.2rem 1.3rem; }
  .foot-actions .btn { flex: 1 1 100%; }
  .find-pair .find-card.signpost { padding: 1.4rem 1.2rem 1.5rem; }
  .space-rows li { flex-direction: column; gap: 0.15rem; }
  .space-rows li > span:last-child { text-align: left; }
}

/* Common-question pages (Stage 7, "the formatting is strange"): on wide screens each question's label and heading sit
   in a left column and the answer in a readable right column (the text used to run the full page width), with a
   hairline between questions, like the list format. Phones keep the single column. */
@media (min-width: 861px) {
  .qa > .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0 3rem; align-items: start; }
  .qa .section-head { margin-bottom: 0; position: sticky; top: 1.5rem; }
  .qa .section-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
  .qa .qa-body { max-width: 38rem; padding-top: 1.55rem; }
  .qa + .qa > .wrap { border-top: 1px solid var(--line-day); padding-top: 2.4rem; }
  .qa { padding-top: 2.2rem; padding-bottom: 2.2rem; }
}
.qa-body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------------------------------------------------
   The home visit pop-up ("Request a home visit", Oliver, 9 Oct 2026; script in assets/js/site.js): an adjusted copy of
   torontoislandwellness.ca's home-visit-request.css, its --hvr-* settings set from this site's palette and type
   (evening panel, campfire accent, Bitter headings, Archivo text). Buttons are the site's .btn-cream and .btn-outline-eve.
   --------------------------------------------------------------------------------------------------------------------- */
.hvr {
  --hvr-bg: var(--evening);
  --hvr-text: rgba(243, 233, 216, .88);
  --hvr-strong: var(--cream);
  --hvr-soft: var(--cream-mist);
  --hvr-line: rgba(243, 233, 216, .45);
  --hvr-field: rgba(243, 233, 216, .07);
  --hvr-accent: var(--campfire);
  --hvr-error: #ff9c8a;
  --hvr-head: var(--serif);
  --hvr-body: var(--sans);
  --hvr-radius: var(--radius);

  width: min(40rem, calc(100vw - 1.5rem)); max-width: none; max-height: calc(100dvh - 1.5rem);
  margin: auto; padding: 0; border: 0; border-radius: var(--hvr-radius); overflow: auto; overscroll-behavior: contain;
  background: var(--hvr-bg); color: var(--hvr-text);
  box-shadow: inset 3px 0 0 var(--hvr-accent), inset 0 0 0 1px var(--line-eve), 0 30px 80px -20px rgba(0, 0, 0, .8);
  font: 1rem/1.65 var(--hvr-body);
}
.hvr::backdrop { background: rgba(20, 14, 10, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.hvr-open { overflow: hidden; }   /* the page behind doesn't scroll while it's open */
.hvr[open] { animation: hvr-in .25s ease-out; }
@keyframes hvr-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hvr[open] { animation: none; } }

.hvr-panel { position: relative; padding: clamp(1.25rem, 4vw, 2rem) clamp(1.1rem, 4vw, 2rem) clamp(1.25rem, 4vw, 1.8rem) calc(clamp(1.1rem, 4vw, 2rem) + 3px); }
.hvr h2 { margin: 0 2.5rem .4rem 0; color: var(--hvr-strong); font: 500 clamp(1.35rem, 4vw, 1.75rem)/1.2 var(--hvr-head); }
.hvr-intro { margin: 0 0 1.2rem; color: var(--hvr-soft); }
.hvr-close {
  position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--hvr-strong); font: 400 1.9rem/1 var(--hvr-body); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(243, 233, 216, .3);
}
.hvr-close:hover { box-shadow: inset 0 0 0 1px var(--cream); }
.hvr :focus-visible { outline: 2px solid var(--campfire); outline-offset: 2px; }

.hvr-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hvr-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.3rem; }
.hvr-field label { color: var(--hvr-accent); font: 600 .65rem/1.3 var(--hvr-body); letter-spacing: .1em; text-transform: uppercase; }
.hvr-hint { font-size: .85rem; color: var(--hvr-soft); }

.hvr input, .hvr select, .hvr textarea {
  box-sizing: border-box; max-width: 100%; margin: 0; padding: .45rem .6rem; border: 0; border-radius: var(--hvr-radius);
  background: var(--hvr-field); box-shadow: inset 0 -1.5px 0 var(--hvr-line);
  color: var(--hvr-strong); font: 1rem/1.35 var(--hvr-body);   /* 16px: phones don't zoom in on focus */
  color-scheme: dark;
}
.hvr input::placeholder, .hvr textarea::placeholder { color: rgba(243, 233, 216, .5); }
.hvr input:focus, .hvr select:focus, .hvr textarea:focus { outline: 2px solid var(--campfire); outline-offset: 1px; box-shadow: inset 0 -1.5px 0 var(--hvr-accent); }
.hvr [aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--hvr-error); background: rgba(255, 120, 100, .1); }
.hvr select option { background: var(--evening); color: var(--cream); }
#hvr-email { width: 100%; }

/* the request itself: a letter with the blanks inline */
.hvr-letter { margin: 0; padding: 0; border: 0; min-width: 0; }
.hvr-letter legend { padding: 0; margin-bottom: .4rem; color: var(--hvr-accent); font: 600 .65rem/1.3 var(--hvr-body); letter-spacing: .1em; text-transform: uppercase; }
.hvr-letter p { margin: 0 0 .6rem; line-height: 2.5; }
.hvr-blank { display: inline-flex; flex-direction: column; vertical-align: top; max-width: 100%; line-height: 1.35; }
.hvr-blank input, .hvr-blank select { display: inline-block; }
.hvr-name input { width: 13rem; }
.hvr-address input { width: 18rem; }
.hvr-phone input { width: 11rem; }
.hvr-date input { min-width: 10.5rem; }
.hvr-time input { min-width: 7.5rem; }
.hvr-notes { display: flex; width: 100%; }
.hvr-notes textarea { width: 100%; resize: vertical; min-height: 4.5rem; }
.hvr-err { display: block; min-height: 0; color: var(--hvr-error); font: 600 .78rem/1.35 var(--hvr-body); }
.hvr-err:empty { display: none; }
.hvr-blank .hvr-err { max-width: 16rem; padding-top: .15rem; }
.hvr-summary { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--hvr-radius); background: rgba(255, 120, 100, .12); box-shadow: inset 3px 0 0 var(--hvr-error); color: var(--hvr-strong); }
.hvr-summary:focus { outline: none; }
.hvr-days { margin: .8rem 0 0; font-size: .85rem; color: var(--hvr-soft); }

/* the hidden field bots fill in: off-screen, never shown */
.hvr-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.hvr-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.hvr-send { min-width: 9rem; }
.hvr-send[disabled] { opacity: .65; cursor: progress; }
.hvr-status { margin-top: 1rem; }
.hvr-status:empty { display: none; }
.hvr-status.is-error { padding: .8rem 1rem; border-radius: var(--hvr-radius); background: rgba(255, 120, 100, .1); box-shadow: inset 3px 0 0 var(--hvr-error); }
.hvr-status p { margin: 0 0 .7rem; }
.hvr-status p:last-child { margin-bottom: 0; }
.hvr-small { font-size: .88rem; color: var(--hvr-soft); }
.hvr-status a:not(.btn), .hvr-done a { color: var(--hvr-strong); }

.hvr-done { padding: .4rem 0 0; }
.hvr-done:focus { outline: none; }
.hvr-done-h { margin: 0 0 .6rem; color: var(--hvr-strong); font: 500 1.15rem/1.4 var(--hvr-head); }

@media (max-width: 520px) {
  .hvr { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .hvr-letter p { line-height: 1.7; }
  .hvr-blank { display: flex; width: 100%; margin: .3rem 0 .45rem; }
  .hvr-blank input, .hvr-blank select { width: 100% !important; }
  .hvr-blank .hvr-err { max-width: none; }
  .hvr-send { width: 100%; }
  /* the X stays in the corner while the form scrolls */
  .hvr-close { position: fixed; z-index: 2; top: max(.6rem, env(safe-area-inset-top)); right: .6rem; background: var(--hvr-bg); }
}
.hvr.is-sent .hvr-intro { display: none; }