/* BWell Lounge: brand layer over the scroll-craft engine.
   Tokens come from bwell-content-studio/brand/STYLE_LOCK.md. The engine stylesheet
   (/sc/scrollcraft.css) is the mechanism and is never edited; everything here is
   our own markup. */

@font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay-Italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/Montserrat-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* The stand-in while Montserrat loads: Arial scaled to Montserrat's average letter
   width (112.7%, as rendered at weight 400, over this site's own hero paragraphs), so the text wraps on
   the same words and nothing jumps when the real face swaps in. It matters since Oct 2,
   when the hero intro started painting before the fonts arrive. */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 112.7%; ascent-override: 85.9%; descent-override: 22.3%; line-gap-override: 0%; }
/* The same for the headline face: Georgia at Playfair Display's average width (100.6%, as rendered, over this site's headlines). The
   headline is masked until the fonts are in, but it still takes its space, and a headline
   that wrapped to a different number of lines moved the intro below it at the swap. */
@font-face { font-family: "Playfair Display Fallback"; src: local("Georgia"); size-adjust: 100.6%; ascent-override: 107.6%; descent-override: 25%; line-gap-override: 0%; }

:root {
  /* cream ground (default) */
  --sc-canvas: #F8F3EC;
  --sc-surface: #EFE6D9;
  --sc-ink: #1D1B19;
  --sc-ink-soft: #5A5548;
  --sc-accent: #5C633B;        /* olive, deepened to clear 4.5:1 on cream */
  --sc-accent-ink: #F8F3EC;
  --sc-font-display: "Playfair Display", "Playfair Display Fallback", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Montserrat", "Montserrat Fallback", "Avenir Next", system-ui, sans-serif;
  --sc-font-mono: "Montserrat", system-ui, sans-serif;
  --sc-shadow-color: 24 32% 11%;   /* warm, not the green-black it was */
  --sc-r-lg: 20px;

  --forest: #2F3A2B;
  --olive: #737B4D;
  --sage: #8E9867;
  --clay: #8D6959;
  --oat: #BDA990;
  --cream: #F8F3EC;
  /* Lamplight, not gold. Every light in the carousels is a real source falling on
     a real surface, so the house windows glow warm cream rather than the #F1D9A4
     yellow, which is off-palette. */
  --glow: #F3E6CE;

  /* The furniture, measured off the shipped slides (1080x1350):
     rule 1px at 5.3% height, label and counter 1.7% cw in tracked caps, margins
     5.56% cw. On the web the margin is the gutter and the rest is fixed. */
  --rule-ink: color-mix(in oklab, var(--sc-ink) 72%, transparent);
  --label-size: clamp(0.72rem, 0.66rem + 0.2vw, 0.8rem);
  --label-track: 0.2em;

  /* Depth in the carousels is optical: one directional source, a fast falloff
     from the top of the wall to the bottom, and shadows that stay warm. The
     whole page is lit by one declared sun and one declared shade, and the shade
     is warm — measured R-B +57 to +72 across every shipped slide, with no
     cool-shadow/warm-highlight split anywhere. */
  --sun: 255 247 231;
  --shade: 92 72 50;
  /* The warm dark the page resolves to: the hero's wash and scrim, and the
     scrim on the one full-bleed plate. Not forest — POST_HISTORY blocks green
     as the colour that leads, and the measured shadows are warm anyway. */
  --dusk: 43 33 26;
  --wedge: linear-gradient(168deg,
    rgb(var(--sun) / 0.5) 0%,
    rgb(var(--sun) / 0.15) 26%,
    rgb(var(--shade) / 0) 52%,
    rgb(var(--shade) / 0.07) 82%,
    rgb(var(--shade) / 0.13) 100%);
  --wedge-dark: linear-gradient(168deg,
    rgb(var(--sun) / 0.11) 0%,
    rgb(var(--sun) / 0.045) 30%,
    rgb(18 14 8 / 0) 56%,
    rgb(18 14 8 / 0.17) 100%);
  /* A whisper of tooth so a flat ground is a lit wall, not a filled div. The
     approved post measures almost no grain, so this is far below the old 0.16
     plaster noise. */
  --tooth: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7'/></filter><rect width='300' height='300' filter='url(%23t)'/></svg>");
}

body { font-weight: 400; }

/* In 22 shipped slides the photograph is cropped by the frame edge, never fitted
   inside it. On a page with a centred measure the equivalent is to let a photo
   run off the side it sits on: this is the distance from the wrap's content edge
   to the viewport edge, so a photo can reach it with one negative margin.
   `overflow-x: clip` on body (engine) absorbs the scrollbar rounding. */
:root { --edge: calc(max(0px, (100vw - var(--sc-maxw)) / 2) + var(--sc-gutter)); }
.bleed-l { margin-left: calc(-1 * var(--edge)); }
.bleed-r { margin-right: calc(-1 * var(--edge)); }
[data-chapter], [id] { scroll-margin-top: 3.4rem; }

/* ------------------------------------------------------------- grounds --
   A ground is a lit wall, not a fill. Every ground carries the same light: one
   source high and to the left, a fast falloff down the wall (the shipped slides
   measure the top of the wall 15-25 luminance points brighter than the bottom),
   and shadows that stay warm — there is no cool-shadow/warm-highlight split
   anywhere in the carousels. The run across the page is
   photographic -> oat -> cream -> clay -> forest -> cream -> oat -> cream -> forest:
   green appears twice, late, and never leads, per POST_HISTORY.md. */
.ground { --rule-ink: color-mix(in oklab, var(--sc-ink) 72%, transparent); position: relative; background: var(--sc-canvas); color: var(--sc-ink); isolation: isolate; --lit-x: 12%; --lit-y: 20%; --lit-a: 0.42; }
/* The bloom is the light the photograph lets in, landing on the wall beside it.
   Each chapter points it at the side its photo bleeds off, so the ground is lit
   BY the image rather than sitting behind it — which is how depth is built in
   every shipped slide: one source, a real falloff, nothing graphic. */
.ground::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(80vw 90vh at var(--lit-x) var(--lit-y), rgb(255 247 231 / var(--lit-a)), transparent 66%),
    var(--wedge);
}
.ground--lit-r { --lit-x: 88%; }
.ground--lit-c { --lit-x: 50%; --lit-y: 8%; }
.ground::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--tooth); background-size: 300px;
  opacity: 0.05; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(90vw 100vh at var(--lit-x) var(--lit-y), #000 0%, transparent 62%);
  mask-image: radial-gradient(90vw 100vh at var(--lit-x) var(--lit-y), #000 0%, transparent 62%);
}
.ground--oat { --sc-canvas: #EFE6D8; --sc-surface: #E6DBCA; color: var(--sc-ink); }
.ground--clay {
  /* Brand Clay is #8D6959; this is the same hue a step into shadow, which is
     where the copy sits on the wall anyway, and it buys the secondary ink real
     contrast margin instead of scraping 4.5:1. */
  --sc-canvas: #7F5B4C; --sc-surface: #71503F;
  --sc-ink: #FBF6EF; --sc-ink-soft: #F2E7DD;
  --sc-accent: #FBF6EF; --sc-accent-ink: #6E4E40;
  --sc-hairline: color-mix(in oklab, #FBF6EF 18%, transparent);
  --sc-hairline-strong: color-mix(in oklab, #FBF6EF 34%, transparent);
  --sc-shadow-color: 18 30% 14%;
  color: var(--sc-ink);
}
.ground--forest {
  --sc-canvas: #2F3A2B; --sc-surface: #37432F;
  --sc-ink: #F8F3EC; --sc-ink-soft: #D3CCBB;
  --sc-accent: #F8F3EC; --sc-accent-ink: #2F3A2B;
  --sc-shadow-color: 26 34% 7%;
  /* The engine derives its hairlines from the ROOT ink, so on forest they were
     the dark ink at 12-22%: the FAQ's row rules, the Close's top rule and a
     ghost button's edge were near-invisible dark lines on dark green. Cream,
     as on clay. */
  --sc-hairline: color-mix(in oklab, #F8F3EC 16%, transparent);
  --sc-hairline-strong: color-mix(in oklab, #F8F3EC 30%, transparent);
  color: var(--sc-ink);
}
.ground--clay, .ground--forest { --lit-a: 0.13; }
.ground--clay::before, .ground--forest::before {
  background-image:
    radial-gradient(80vw 90vh at var(--lit-x) var(--lit-y), rgb(255 244 222 / var(--lit-a)), transparent 64%),
    var(--wedge-dark);
}
.ground--clay::after, .ground--forest::after { mix-blend-mode: screen; opacity: 0.07; }
/* a ghost button on a dark ground keeps an edge you can see (≥3:1 against the wall) */
.ground--forest .btn--ghost:not(:hover), .ground--clay .btn--ghost:not(:hover) { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 60%, transparent); }

/* ---------------------------------------------------------- type layer --
   Measured off the shipped slides, and it is the whole port in four numbers:
   Playfair at REGULAR weight (not 500), tracking at ZERO (not -0.02em), leading
   between 1.11 and 1.26 (not 0.94), measure 20-32 characters. The old values
   made the same face read heavy, condensed and web-agency; these make it read
   the way it reads on the carousels.

   And no italic. `use-your-benefits` broke the roman+one-oversized-italic-word
   habit that sat on 4 of 4 posts, and POST_HISTORY.md still blocks it. Rather
   than rewrite every headline's markup, <em> inside display type is re-set
   upright in the same ink: emphasis is carried by size and position alone. */
.display { font-family: var(--sc-font-display); font-weight: 400; line-height: 1.16; letter-spacing: 0; text-wrap: balance; margin: 0; }
.display em { font-style: normal; font-weight: 400; letter-spacing: inherit; color: inherit; }
.display--hero { font-size: clamp(2.9rem, 1rem + 6.2vw, 6.6rem); line-height: 1.1; letter-spacing: -0.008em; }
.display--xl { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.1rem); line-height: 1.12; letter-spacing: -0.006em; }
.display--lg { font-size: var(--sc-t-3xl); line-height: 1.14; }
.display--md { font-size: var(--sc-t-2xl); line-height: 1.18; }
.display--sm { font-size: var(--sc-t-xl); line-height: 1.22; letter-spacing: 0; }
.lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; text-wrap: pretty; margin: 0; }
.body { max-width: 64ch; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.body + .body { margin-top: var(--sc-4); }
.small { font-size: var(--sc-t-sm); }
/* The utility layer: 1.7% of canvas width in caps at 0.2em, regular weight, no
   pill and no outline. STYLE_LOCK names this as a constant and it is the one
   piece of chrome the carousels allow. */
.label { 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); }
.hairline { height: 1px; border: 0; background: var(--sc-hairline-strong); margin: 0; }

a { color: inherit; }
/* The carousels' only call to action is a hairline with tracked caps over it
   (`LINK IN BIO`, `Swipe ->`). That is BWell's own affordance, so it is the
   site's default link: caps, tracked, on a rule that thickens on hover. No
   olive-underlined web link. */
.link {
  display: inline-block; color: var(--sc-ink); text-decoration: none;
  font-family: var(--sc-font-text); font-size: var(--label-size); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase;
  padding-bottom: 0.55em; border-bottom: 1px solid var(--sc-ink);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .link:hover { border-bottom-width: 2px; padding-bottom: calc(0.55em - 1px); } }

/* A booking button is the one thing a website needs that a carousel does not,
   so it is the one deliberate departure: kept, but square-cornered, flat and
   typeset in the same tracked caps as the rest of the furniture. No pill, no
   shadow — both are on the STYLE_LOCK rejected list. */
.btn {
  /* One tier, one box: tracked caps, 44px minimum, square. Wrapping policy is
     below — one line on desktop; on a phone the tracking tightens so the long
     service labels ("Book a psychotherapy consultation") fit a 390px screen,
     and only a narrower phone falls back to a balanced two-line wrap (a
     min-content of ~393px at 0.2em once forced the hero grid past 375px). */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  text-align: center; text-wrap: balance; min-width: 0; min-height: 44px;
  padding: 1.15em 2em; border-radius: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--label-size);
  letter-spacing: var(--label-track); text-transform: uppercase; text-decoration: none;
  border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out), transform 90ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: color-mix(in oklab, var(--sc-accent) 84%, var(--sc-ink)); } }
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--sc-ink); } }
/* press, focus, disabled: the same for every button and text CTA */
.btn:active, .link:active, .more > summary:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.btn--ghost:focus-visible, .link:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .btn:active, .link:active, .more > summary:active { transform: none; } }
/* desktop: a button label never wraps (taste 4.5). The text CTA (.link) is
   left to wrap: a few are sentences set in a measured column on purpose. */
@media (min-width: 861px) { .btn { white-space: nowrap; } }
/* phones: 0.14em tracking and a 1rem side pad — the hero's own phone setting,
   now the rule for every button, so a long label stays on one line at 390 */
@media (max-width: 520px) { .btn { padding-inline: 1rem; letter-spacing: 0.14em; } }

/* The CTA row: one primary (.btn) first, at most one secondary (.link) after
   it, on a shared centre line. Wide: inline, wraps if it must. Phones: stacked,
   the primary full width at the thumb, the secondary left under it. */
/* Aligned on the label's baseline, not the box centre: a .link's box carries
   its rule and 0.55em under the words, so centring the boxes set its caps ~4px
   above the button's. (.btn is inline-flex: its baseline is its label.) */
.cta-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-4) var(--sc-6); }
@media (max-width: 520px) {
  .cta-row { flex-direction: column; align-items: stretch; gap: var(--sc-5); }
  .cta-row > .btn { width: 100%; }
  .cta-row > .link { align-self: flex-start; }
}

/* Hit areas on phones without moving anything: a .link (26px tall) and a
   "Read more" summary grow an 18px pad upward, cancelled by an equal negative
   margin, so the box is 44px while the text and its rule stay where they were. */
@media (max-width: 860px) {
  .link, .more > summary { padding-top: 18px; margin-top: -18px; }
  /* this replaces the older ::after hit slop (service.css), which now reached
     30px above the text and could take taps off a button stacked above it */
  a.link::after { content: none; }
  /* /services sizes its own "Read more" summary to 44px (pages/services.css) */
  .sx-more > summary { padding-top: 0; margin-top: 0; }
}

/* Square corners, edge to edge. Nothing photographic sits in a rounded box:
   in 22 shipped slides the image is the ground, never a framed object. */
.photo { border-radius: 0; overflow: clip; margin: 0; background: var(--sc-surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- the nav -- */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); padding-block: var(--sc-5); }
.masthead__mark img { width: clamp(9rem, 12vw, 11.5rem); height: auto; }
/* the wordmark link is 21px of ink; a 12px pad cancelled by its own margin
   makes it a 45px tap without moving it */
.masthead__mark { display: block; padding-block: 12px; margin-block: -12px; }
.masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); font-size: var(--sc-t-sm); font-weight: 600; }
.masthead__nav > a:not(.btn), .menu > summary { text-decoration: none; color: var(--sc-ink); padding-block: 0.4em; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .masthead__nav > a:not(.btn):hover, .menu > summary:hover { text-decoration: underline; text-underline-offset: 0.3em; } }
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35em; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 0.42em; height: 0.42em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.menu[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
/* Menus are square like everything else (photos, plates, buttons); the item
   text lines up with "Services" above it (panel pad + item pad = the offset). */
.menu__panel { position: absolute; top: calc(100% + 0.6rem); left: calc(-1 * (var(--sc-3) + 0.9em)); z-index: 80; min-width: 19rem; padding: var(--sc-3); border-radius: 0; background: var(--cream); box-shadow: var(--sc-e3); display: grid; }
.menu__panel a { padding: 0.6em 0.9em; border-radius: 0; text-decoration: none; font-weight: 500; color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .menu__panel a:hover { background: var(--sc-surface); } }
.menu > summary:focus-visible, .masthead__nav > a:not(.btn):focus-visible, .menu__panel a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .masthead__nav { display: none; }
  .masthead__nav.is-open { display: grid; position: absolute; inset-inline: var(--sc-gutter); top: 5rem; z-index: 90; gap: 0; padding: var(--sc-4) var(--sc-5) var(--sc-5); border-radius: 0; background: var(--cream); box-shadow: var(--sc-e3); }
  /* one left edge for every row: the top-level links, the Services summary and
     the Book button all start at the panel's padding; sub-items indent once */
  .masthead__nav.is-open > a:not(.btn), .masthead__nav.is-open .menu > summary { display: flex; align-items: center; min-height: 48px; padding: 0.4em 0; }
  .masthead__nav.is-open > a:not(.btn) + a:not(.btn), .masthead__nav.is-open .menu + a { border-top: 1px solid color-mix(in oklab, #1D1B19 10%, transparent); }
  .masthead__nav.is-open .btn { margin-top: var(--sc-4); justify-content: center; }
  .masthead__nav.is-open .menu__panel { position: static; box-shadow: none; padding: 0 0 var(--sc-2) var(--sc-4); min-width: 0; background: transparent; }
  .masthead__nav.is-open .menu__panel a { display: flex; align-items: center; min-height: 44px; padding: 0.35em 0; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; background: transparent; border: 1px solid var(--sc-hairline-strong); border-radius: 0; padding: 0.6em 1.1em; font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer; }
  .nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
}

/* -------------------------------------------------- announcement strip --
   Temporary: components/Announce.astro, set by ANNOUNCE in data/site.ts (Oct 5, 2026: BWell's
   first anniversary, in the lockup of that day's post: the name line, a hairline, one
   tracked line). It lies OVER the top of the page's opening instead of pushing the page
   down: its own height is taken back with a negative margin and the masthead under it moves
   down by the same amount (the three `.annc ~ main` rules). So the hero keeps its full
   height, its button stays inside the first screen on phones, and closing the strip moves
   nothing but the masthead. It scrolls away with the page; the chapter bar never meets it.
   Fixed heights and nowrap on purpose: a line that wrapped would run under the wordmark. */
:root { --annc-h: 2.75rem; }
.annc {
  position: relative; z-index: 50; min-height: var(--annc-h); margin-bottom: calc(-1 * var(--annc-h));
  --sc-ink: #F8F3EC; color: var(--sc-ink);
  /* the clay ground a step into shadow, with the post's candlelight rising from the lower edge */
  background: radial-gradient(42rem 5rem at 50% 115%, rgb(243 230 206 / 0.12), rgb(243 230 206 / 0) 72%), #71503F;
}
.annc ~ main .hero__top, .annc ~ main .svc-hero__top, .annc ~ main .plain-head { padding-top: var(--annc-h); }
.annc__in { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--annc-h); }
.annc__msg { display: inline-flex; align-items: center; gap: 0.95rem; margin: 0 2.25rem; color: inherit; text-decoration: none; white-space: nowrap; }
.annc__lead { font-family: var(--sc-font-display); font-size: 1.06rem; line-height: 1.2; font-variant-numeric: lining-nums; }
.annc__rule { flex: none; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.68; }
.annc__line, .annc__go { color: inherit; }
.annc__go { margin-left: 0.6rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.5em; }
a.annc__msg:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* the close: two hairlines in a 44px tap, its glyph on the content's right edge */
.annc__x { position: absolute; right: calc(var(--sc-gutter) - 15px); top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; }
.annc__x::before, .annc__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: 0 0 0 -7px; background: currentColor; transform: rotate(45deg); }
.annc__x::after { transform: rotate(-45deg); }
.annc__x:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) { .annc__x:hover { opacity: 0.68; } a.annc__msg:hover .annc__go { text-decoration-thickness: 2px; } }
/* phones: the post's lockup in two lines, name over the tracked line; the whole strip is the link */
@media (max-width: 720px) {
  :root { --annc-h: 3.5rem; }
  .annc__msg { flex-direction: column; gap: 0.28rem; margin-inline: 1.75rem; }
  .annc__lead { font-size: 1rem; }
  .annc__line { letter-spacing: 0.16em; }
  .annc__rule, .annc__go { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .annc { animation: annc-in 700ms var(--sc-ease-out) 350ms both; }
  @keyframes annc-in { from { opacity: 0; transform: translateY(-100%); } }
}
@media print { .annc { display: none; } .annc ~ main .hero__top, .annc ~ main .svc-hero__top, .annc ~ main .plain-head { padding-top: 0; } }

/* -------------------------------------------------------- chapter bar --
   Where you are, how far to go, and the way to book. Appears once the title
   page is behind the reader. */
.chbar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  --bar-bg: color-mix(in oklab, var(--cream) 86%, transparent);
  --bar-ink: #1D1B19; --bar-soft: #5A5548; --bar-accent: #5C633B;
  background: var(--bar-bg); color: var(--bar-ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--bar-ink) 10%, transparent);
  transform: translateY(-110%); opacity: 0;
  transition: transform var(--sc-d-slow) var(--sc-ease-out), opacity var(--sc-d-slow) var(--sc-ease-out), background-color var(--sc-d-slow) var(--sc-ease-out), color var(--sc-d-slow) var(--sc-ease-out);
}
.chbar.is-on { transform: none; opacity: 1; }
.chbar.on-dark { --bar-bg: color-mix(in oklab, #2F3A2B 95%, transparent); --bar-ink: #F8F3EC; --bar-soft: #D3CCBB; --bar-accent: #C9CFA8; box-shadow: 0 1px 0 color-mix(in oklab, #F8F3EC 14%, transparent); }
.chbar__inner { max-width: none; display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.25rem); min-height: 3.4rem; }
.chbar__mark { display: inline-flex; flex: none; padding: 10px; margin: -10px; }
/* the bee is 1490x1600, not square: size it by height and let the width follow */
.chbar__mark img { width: auto; height: 1.6rem; aspect-ratio: 1490 / 1600; object-fit: contain; }
/* The slide label and its `n / N` counter, in the same tracked caps the
   carousels use — the counter set dimmer than the label, which is the only
   opacity hierarchy in the whole system. */
.chbar__now { display: inline-flex; align-items: center; gap: 0.45rem; flex: none; min-height: 44px; background: transparent; border: 0; padding: 0; color: inherit; font-family: var(--sc-font-text); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; cursor: pointer; }
.chbar__n { font-size: inherit; line-height: 1; }
.chbar__of { color: var(--bar-soft); font-size: inherit; letter-spacing: inherit; }
.chbar__title { letter-spacing: inherit; }
.chbar__book { flex: none; padding: 0.85em 1.4em; margin-left: auto; }

/* The list. Wide: full labels. Mid: numbers only (the title sits by the
   counter). Narrow: a dropdown. The progress fill runs under the current item
   and paces itself to that chapter's length. */
.chbar__list { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-width: 0; justify-content: center; gap: clamp(0.4rem, 1.2vw, 1.1rem); font-size: var(--label-size); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.chbar__list a { position: relative; display: inline-flex; align-items: baseline; gap: 0.45em; white-space: nowrap; padding: 0.55em 0.1em; color: var(--bar-soft); text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.chbar__num { font-family: var(--sc-font-text); font-size: inherit; letter-spacing: inherit; }
.chbar__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bar-accent); transform: scaleX(0); transform-origin: left; }
.chbar__list a[aria-current="true"] { color: var(--bar-ink); }
.chbar__list a[aria-current="true"]::after { transform: scaleX(var(--p, 0)); }
@media (hover: hover) and (pointer: fine) { .chbar__list a:hover { color: var(--bar-ink); } }
.chbar__track { display: none; height: 2px; background: color-mix(in oklab, var(--bar-ink) 10%, transparent); }
.chbar__fill { height: 100%; background: var(--bar-accent); transform-origin: left; transform: scaleX(var(--p, 0)); will-change: transform; }
/* Three modes, chosen by chapter-bar.js from what actually FITS, not from the
   viewport width: `full` (every label), `tight` (every label, set smaller and
   closer, with the short Book button), `menu` (a dropdown). Width breakpoints
   guessed wrong — eight homepage labels overflowed at 1500-1700px and ran
   under the counter and the Book button — so the script measures the list
   against the space it has and steps down until nothing overlaps. Phones
   always get the dropdown. There is no numbers-only mode: "01 02 03 … 09"
   told a reader nothing about where each number went (Atrin's audit, Oct 1),
   so a chapter's name is always on the bar or one tap away. */
.chbar[data-mode="full"] .chbar__title, .chbar[data-mode="tight"] .chbar__title { display: none; }
.chbar[data-mode="full"] .chbar__now, .chbar[data-mode="tight"] .chbar__now { pointer-events: none; }
.chbar[data-mode="tight"] .chbar__list { font-size: 0.72rem; letter-spacing: 0.04em; gap: 0.4rem; margin-inline: 0.5rem; justify-content: space-evenly; }
/* The button keeps its full label in tight mode (Oct 4, 2026): it read "Book" on one page
   and "Book Now" on the next. Only phones (≤520px) get the short label. */
.chbar[data-mode="tight"] .chbar__book { padding-inline: 0.9em; letter-spacing: 0.1em; font-size: 0.72rem; }
.chbar[data-mode="menu"] .chbar__list { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: calc(100% + 0.5rem); display: none; flex: none; flex-direction: column; gap: 0; padding: var(--sc-3); border-radius: 0; background: var(--cream); color: #1D1B19; box-shadow: var(--sc-e3); }
.chbar[data-mode="menu"] .chbar__list a { color: #5A5548; min-height: 44px; align-items: center; padding: 0.7em 0.8em; border-radius: 0; }
.chbar[data-mode="menu"] .chbar__list a::after { display: none; }
.chbar[data-mode="menu"] .chbar__list a[aria-current="true"] { color: #1D1B19; background: var(--sc-surface); }
.chbar[data-mode="menu"].is-open .chbar__list { display: flex; }
.chbar[data-mode="menu"] .chbar__now::after { content: ""; flex: none; width: 0.4em; height: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12em) rotate(45deg); margin-left: 0.2em; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.chbar[data-mode="menu"].is-open .chbar__now::after { transform: translateY(0.1em) rotate(-135deg); }
.chbar__now:focus-visible, .chbar__mark:focus-visible, .chbar__list a:focus-visible { outline: 2px solid var(--bar-ink); outline-offset: 2px; }
/* The counter never wraps: `1 / 8` stays on one line and only the title
   truncates (on a 375px phone the `/ 8` was dropping under the `1`). */
.chbar[data-mode="menu"] .chbar__now { flex: 1; min-width: 0; flex-wrap: nowrap; }
.chbar__n, .chbar__of { flex: none; white-space: nowrap; }
.chbar[data-mode="menu"] .chbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chbar[data-mode="menu"] .chbar__book { margin-left: 0; }
.chbar[data-mode="menu"] .chbar__track { display: block; }
/* the list never touches the counter or the button, whatever the mode */
.chbar__list { margin-inline: clamp(0.5rem, 1.5vw, 1.5rem); }
.chbar[data-mode="menu"] .chbar__list { margin-inline: 0; }
@media (max-width: 520px) { .chbar__book { padding: 0.75em 0.9em; letter-spacing: 0.12em; } }
/* phones: the current chapter's title sets a touch tighter so the longest
   ("Questions & Next Step") reads whole beside `6 / 6` at 390 instead of "NEXT S…" */
@media (max-width: 520px) { .chbar__inner { gap: 0.6rem; } .chbar[data-mode="menu"] .chbar__title { letter-spacing: 0.1em; } }
/* On a dark ground the bar's button goes cream, the way every button inside a
   forest chapter already is; olive on forest barely separated from the bar. */
.chbar__book:focus-visible { outline-color: var(--bar-ink); }
.chbar.on-dark .chbar__book { background: var(--cream); color: #2F3A2B; }
@media (hover: hover) and (pointer: fine) { .chbar.on-dark .chbar__book:hover { background: #fff; } }

/* --------------------------------------------------- chapter grammar --
   Every chapter opens the same way: number + eyebrow, headline, one short
   paragraph, then the motion. Anything longer sits behind "Read more". */
.ch-head { display: grid; gap: var(--sc-6); align-content: start; }
/* The slide header, exactly as the carousels set it: series label hard left,
   `n / N` hard right, a 1px rule underneath that both stand on, and a big gap
   of air before the headline — the shipped slides leave 12-15% of the canvas
   between the rule and the first line of type. */
.ch-head__eyebrow {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-5);
  width: 100%; margin: 0 0 clamp(2rem, 6vh, 4.5rem);
  padding-bottom: 0.95em;
  /* a label that wraps on a phone splits evenly (no "ROOF" alone on line two) */
  text-wrap: balance;
}
.ch-head__eyebrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rule-ink); transform: scaleX(0); transform-origin: left;
  transition: transform 1000ms var(--sc-ease-out) 90ms;
}
.ch-head__eyebrow.sc-in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .ch-head__eyebrow::after { transform: none; transition: none; } }
/* The counter sits dimmer than the label — the one opacity hierarchy the
   carousels use, measured at 60-75%. */
.ch-head__eyebrow span { font: inherit; letter-spacing: inherit; color: var(--sc-ink); opacity: 0.68; flex: none; }
.ch-head .body { color: var(--sc-ink); }

/* Disclosure reads as a line of the utility layer, not a UI control: tracked
   caps on a rule, with a bare + that turns. The circled plus was an icon, and
   there is exactly one icon in 22 shipped slides. */
.more { --more-ink: var(--sc-ink); }
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.7em; color: var(--more-ink); font-family: var(--sc-font-text); font-weight: 500; font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; padding-bottom: 0.5em; border-bottom: 1px solid var(--sc-hairline-strong); transition: border-color var(--sc-d-fast) var(--sc-ease-out); }
.more > summary::-webkit-details-marker { display: none; }
/* the + is set a step larger so it centres on the caps, not the baseline */
.more > summary::before { content: "+"; font-size: 1.3em; font-weight: 400; line-height: 1; transition: transform var(--sc-d-base) var(--sc-ease-out); }
.more[open] > summary::before { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .more > summary:hover { border-bottom-color: var(--sc-ink); } }
.more > summary:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
.more > :not(summary) { margin-top: var(--sc-4); }
.more[open] > summary { margin-bottom: var(--sc-2); }
.more .body + .body { margin-top: var(--sc-4); }

/* ------------------------------------------------------- 0 · title page --
   You walk in. Four photographs cross-dissolve with a slow push while the
   act's --sc-p runs 0→1: street (0–.30) → porch (.24–.58) → door (.52–.86)
   → lounge (.80–1). Each stop grows through its life so the cut reads as
   one move. The copy leaves on the porch; the pillars land at the door; the
   address lands in the lounge. Load-in is a focus pull off .is-loaded. */
.title-page .sc-stage, .title-page [data-sc-stage] { display: block; }
/* The wash and the scrim are warm, not green. Every shadow in the carousels
   measures warm (R-B +57 to +72) — there is no cool-shadow/warm-highlight
   split-tone anywhere — and POST_HISTORY.md blocks forest green as the colour
   that leads. So the first paint is a deep warm brown and green arrives later,
   on its own chapter. */
.title-page { --sc-canvas: #2B211A; }
.hero {
  position: relative; height: 100svh; min-height: 34rem; overflow: clip;
  display: grid; grid-template-rows: auto 1fr auto; --p: var(--sc-p, 0);
  --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); background: #2B211A;
}

/* the walk: four stops, one scrim where the copy sits, one wash for the load-in */
.walk { position: absolute; inset: 0; z-index: 0; }
/* One compositor layer per stop (Oct 4, 2026: the hero stuttered on phones). The push-in
   and the dissolve both sit on .stop; the photograph inside it is not a layer of its own,
   which halves the full-screen textures a phone holds while the hero is pinned (8 to 4).
   .hero clips the scaled stop, so the picture is the same. */
.stop { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(calc(1.02 + var(--life) * 0.16)); transform-origin: var(--origin, 50% 55%); will-change: transform, opacity; --in: 0; --out: 1; --life: 0; }
.stop img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* life = progress through this stop. Later stops stack on top of earlier
   ones and only fade IN; the one underneath stays solid until it is covered,
   then drops out, so no frame of the dissolve is two half-images on dark. */
.stop { --life: clamp(0, calc((var(--p) - var(--in)) / (var(--out) - var(--in))), 1);
        opacity: min(clamp(0, calc((var(--p) - var(--in)) / 0.09), 1), clamp(0, calc((var(--out) + 0.04 - var(--p)) * 40), 1)); }
.stop--street { z-index: 1; --in: -0.2; --out: 0.36; --origin: 50% 62%; }
.stop--porch  { z-index: 2; --in: 0.27; --out: 0.64; --origin: 50% 48%; }
.stop--door   { z-index: 3; --in: 0.55; --out: 0.92; --origin: 52% 50%; }
.stop--lounge { z-index: 4; --in: 0.83; --out: 1.40; --origin: 40% 52%; }
.walk__scrim, .walk__wash { z-index: 5; }
.stop--street img { object-position: 50% 62%; }
.stop--porch img { object-position: 50% 50%; }
.stop--door img { object-position: 55% 50%; }
.stop--lounge img { object-position: 40% 52%; }
/* The one place the site departs from "contrast is earned by the quiet zone":
   these are real exterior photographs of a white clapboard house under a bright
   sky, and they have no dark quiet zone to put cream type into. So the lower
   half becomes an actual warm plane and the type sits ON that plane — which is
   what `your-first-visit` did with its two real photographs. The plane is warm
   (the carousels' shadows measure warm throughout), and it covers only the band
   the copy occupies so the house above it stays a photograph. */
.walk__scrim { position: absolute; inset: 0; background:
  linear-gradient(to top, rgb(var(--dusk) / 0.94) 0%, rgb(var(--dusk) / 0.86) 26%, rgb(var(--dusk) / 0.66) 46%, rgb(var(--dusk) / 0.24) 66%, rgb(var(--dusk) / 0) 80%),
  linear-gradient(to bottom, rgb(var(--dusk) / 0.5) 0%, rgb(var(--dusk) / 0) 20%); }
.walk__wash { position: absolute; inset: 0; background: rgb(var(--dusk)); opacity: 1; transition: opacity 1300ms var(--sc-ease-out) 80ms; }
.is-loaded .walk__wash { opacity: 0; }

/* chrome and copy over the photograph */
.hero__top { position: relative; z-index: 3; }
.hero__nav .masthead__nav > a:not(.btn), .hero__nav .menu > summary { color: var(--sc-ink); }
.hero__nav .nav-toggle { color: var(--sc-ink); border-color: rgb(248 243 236 / 0.5); }
.hero__nav .menu__panel a, .hero__nav .masthead__nav.is-open > a:not(.btn), .hero__nav .masthead__nav.is-open .menu > summary { color: #1D1B19; }
.hero__nav .masthead__nav.is-open .btn { background: #5C633B; color: #F8F3EC; }
.hero__copy {
  position: relative; z-index: 2; align-self: end; display: grid; gap: var(--sc-6); padding-block: var(--sc-6) clamp(2.5rem, 7vh, 5rem);
  transform: translate3d(0, calc(var(--p) * -10vh), 0);
  opacity: clamp(0, calc(1 - (var(--p) - 0.14) / 0.16), 1);
  pointer-events: none;
}
.hero__copy > * { pointer-events: auto; min-width: 0; }
.title-page__h1 { max-width: 14ch; font-size: clamp(3rem, 1rem + 6.2vw, 6.8rem); line-height: 1.08; letter-spacing: -0.008em; }
/* One colour per block. The carousels never set a key word in a second colour
   or a second style — emphasis is size and position. "Newmarket" keeps its own
   line and nothing else. */
.title-page__h1 em { display: block; color: inherit; font-style: normal; }
/* the hidden space between the two H1 lines (so the text reads "Wellness Centre
   Newmarket", not "Wellness CentreNewmarket") must not open a display-size text box */
.title-page__h1 .visually-hidden { font-size: 1px; line-height: 1; }
.hero__line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__line > span { display: block; transform: translateY(110%); }
.hero__intro { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, auto); align-items: end; gap: var(--sc-5) var(--sc-8); }
.hero__intro .body { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.65; max-width: 52ch; text-shadow: 0 1px 14px rgb(0 0 0 / 0.35); }
.hero__intro > .btn { justify-self: start; background: var(--cream); color: #2B211A; }
@media (hover: hover) and (pointer: fine) { .hero__intro > .btn:hover { background: #fff; } }

/* the beats on the way in */
.hero__beats { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(3rem, 27svh); pointer-events: none; display: grid; }
.hero__beats > * { grid-area: 1 / 1; margin: 0; }
.hero__pillars { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-family: var(--sc-font-display); font-size: clamp(1.25rem, 1rem + 1.4vw, 2.1rem); line-height: 1.16; color: var(--cream); text-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 28px rgb(0 0 0 / 0.55);
  opacity: min(clamp(0, calc((var(--p) - 0.42) / 0.12), 1), clamp(0, calc((0.82 - var(--p)) / 0.10), 1)); transform: translate3d(0, calc((0.62 - var(--p)) * 8vh), 0); }
.hero__pillars li { transition: none; }
/* lining digits: Playfair's default figures hang below the line, so "75" and the
   postal code sat low beside the capitals (Atrin's audit, Oct 1) */
.hero__addr { font-family: var(--sc-font-display); font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem); line-height: 1.16; letter-spacing: 0; font-variant-numeric: lining-nums; color: var(--cream); max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / 0.4);
  opacity: clamp(0, calc((var(--p) - 0.80) / 0.10), 1); transform: translate3d(0, calc((1 - var(--p)) * 6vh), 0); }

/* the load-in: the intro is there from the first paint; then the focus pull on the
   street and the type rising */
@keyframes hero-intro-in { from { transform: translateY(12px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .stop--street 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 .stop--street img { filter: blur(0); transform: none; }
  .is-settled .stop--street img { filter: none; transition: none; }
  .hero__nav { opacity: 0; transform: translateY(-6px); transition: opacity 700ms var(--sc-ease-out) 500ms, transform 700ms var(--sc-ease-out) 500ms; }
  /* The intro paragraph is the largest text on the first screen, so it is what Chrome
     times as Largest Contentful Paint. Until Oct 2, 2026 it waited for the fonts, for
     .is-loaded, and then 1150ms more, which put LCP near 4s on a phone (2.5s is the
     limit for "good"). It is now there, fully opaque, from the first paint, and only
     rises 12px on its own clock. No opacity in the animation: Chrome does not count text
     first painted at opacity 0, and with the analytics scripts loading a fade measured
     3.7 to 4.3s again. The wash, the focus pull and the headline rise are unchanged.
     (SEO.md A3) */
  .hero__intro { animation: hero-intro-in 700ms var(--sc-ease-out) both; }
  .hero__line > span { transition: transform 1000ms cubic-bezier(0.2, 0.7, 0.1, 1); }
  .hero__line:nth-child(1) > span { transition-delay: 620ms; }
  /* the second line, wherever it sits: a hidden separator between the two lines (the space
     on the homepage, the dash on inner pages) made it the third child, so :nth-child(2)
     stopped matching and the second line rose first, with no delay */
  .hero__line ~ .hero__line > span { transition-delay: 760ms; }
  .is-loaded .hero__nav { opacity: 1; transform: none; }
  .is-loaded .hero__line > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__line > span { transform: none; }
  .walk__wash { display: none; }
}

/* reduced motion: one still photograph, no pin, copy on it */
.hero-stacked .hero { height: auto; min-height: 100svh; }
.hero-stacked .stop { opacity: 0; }
.hero-stacked .stop--street { opacity: 1; }
.hero-stacked .stop { transform: none; }
.hero-stacked .hero__copy { transform: none; opacity: 1; }
.hero-stacked .hero__beats { display: none; }

/* phones: the same walk, art-directed. Type at the top of the frame over the
   sky, the paragraph short, the button full width at the thumb. */
@media (max-width: 860px) {
  .hero { grid-template-rows: auto 1fr auto; }
  .stop--street img { object-position: 46% 30%; }
  .stop--street { --origin: 46% 30%; }
  .stop--porch img { object-position: 50% 55%; }
  .stop--door img { object-position: 60% 50%; }
  .stop--lounge img { object-position: 30% 50%; }
  .walk__scrim { background:
    linear-gradient(to top, rgb(var(--dusk) / 0.95) 0%, rgb(var(--dusk) / 0.9) 30%, rgb(var(--dusk) / 0.72) 50%, rgb(var(--dusk) / 0.2) 70%, rgb(var(--dusk) / 0) 84%),
    linear-gradient(to bottom, rgb(var(--dusk) / 0.55) 0%, rgb(var(--dusk) / 0) 24%); }
  .hero__copy { padding-block: var(--sc-5) clamp(1.5rem, 4vh, 2.5rem); gap: var(--sc-5); }
  .title-page__h1 { font-size: clamp(2.6rem, 12vw, 3.9rem); max-width: none; }
  .hero__intro { grid-template-columns: 1fr; gap: var(--sc-5); }
  .hero__intro .body { font-size: 0.86rem; line-height: 1.55; max-width: none; }
  .hero__intro > .btn { justify-self: stretch; justify-content: center; padding: 1.05em 1rem; font-size: var(--label-size); letter-spacing: 0.14em; }
  .hero__beats { bottom: max(2rem, 27svh); }
  .hero__pillars { font-size: 1.35rem; gap: 0.35rem 1.2rem; }
  .hero__addr { font-size: 1.6rem; max-width: 12ch; }
  .hero__nav .masthead__mark img { width: 8.5rem; }
}
@media (max-height: 660px) and (max-width: 860px) {
  .title-page__h1 { font-size: 2.5rem; }
  .hero__intro .body { font-size: 0.8rem; line-height: 1.45; }
  .hero__copy { gap: var(--sc-4); }
}

/* ------------------------------------------------------ 1 · At a glance -- */
.glance { position: relative; z-index: 3; margin-top: -24svh; min-height: 100svh; display: grid; align-content: center; padding-block: var(--sc-9); }
.hero-stacked + .glance { margin-top: 0; }
.glance .ch-head { margin-bottom: var(--sc-7); }
.glance__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sc-7) clamp(2rem, 6vw, 6rem); align-items: start; }
/* The eight services were pills. STYLE_LOCK rejects "outlined pill labels" by
   name and there is not one in 22 shipped slides, so the list becomes what the
   carousels would do with it: names in the display serif, each on its own
   hairline, numbered in the utility layer. */
.chips { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: svc; border-top: 1px solid var(--sc-hairline-strong); }
.chips li { counter-increment: svc; border-bottom: 1px solid var(--sc-hairline); }
.chips a { display: flex; align-items: baseline; gap: var(--sc-5); padding: 0.62em 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.2; text-decoration: none; color: var(--sc-ink); transition: padding-left var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out); }
.chips a::before { content: counter(svc, decimal-leading-zero); flex: none; font-family: var(--sc-font-text); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .chips a:hover { padding-left: 0.6rem; } }
.glance__plate { display: grid; grid-template-columns: auto auto; gap: var(--sc-6) clamp(1.5rem, 4vw, 3rem); align-items: end; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.glance__plate .pillars { grid-column: 1 / -1; font-size: var(--sc-t-base); }
.glance__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-5); margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
@media (max-width: 960px) { .glance__grid { grid-template-columns: 1fr; } .chips a { font-size: var(--sc-t-base); } }

/* ------------------------------------------------ 1 · A Space For You -- */
.recog { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(2rem, 6vw, 7rem); }
.recog__media { position: sticky; top: 10svh; }
.recog__photo { height: min(80svh, 48rem); margin-left: calc(-1 * var(--edge)); }
.recog__photo img { height: 118%; margin-top: -9%; object-position: 40% 50%; will-change: transform; }
.recog__copy .display { margin-bottom: var(--sc-6); }
/* Was 62 words in the display serif at --sc-t-xl. The carousels give the display
   face one short line and hand anything longer to small Montserrat. */
.recog__line { font-size: var(--sc-t-lg); line-height: 1.6; max-width: 46ch; text-wrap: pretty; margin: 0 0 var(--sc-6); }
.recog__reveal { margin-top: var(--sc-8); padding: 0.12em 0; }
.recog__final { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1.14; letter-spacing: 0; max-width: 14ch; margin: 0; }
.recog__final em { color: inherit; font-style: normal; }
@media (max-width: 860px) {
  .recog { grid-template-columns: 1fr; gap: var(--sc-6); }
  .recog__media { position: relative; top: 0; }
  .recog__photo { height: 38svh; margin-inline: calc(-1 * var(--edge)); }
  .recog__line { font-size: var(--sc-t-lg); }
  .recog__final { font-size: var(--sc-t-2xl); }
}

/* ---------------------------------------------- 2 · what brings people -- */
.help { margin-top: var(--sc-9); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.help > .label { margin: 0 0 var(--sc-4); }
.help__lede { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 34ch; text-wrap: pretty; margin: 0 0 var(--sc-5); }
.help__col { border-top: 1px solid var(--sc-hairline); }
.help__col:last-of-type { border-bottom: 1px solid var(--sc-hairline); }
.help__col > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: var(--sc-4); align-items: baseline; padding-block: var(--sc-4); font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.22; }
.help__col > summary::-webkit-details-marker { display: none; }
.help__col > summary span { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.16em; color: var(--sc-ink-soft); }
.help__col > summary::after { content: "+"; font-family: var(--sc-font-text); font-weight: 300; font-size: 1.4rem; line-height: 1; color: var(--sc-ink-soft); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.help__col[open] > summary::after { transform: rotate(45deg); }
.help__col .ticks { padding: 0 0 var(--sc-5) 2.4rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.ticks li { position: relative; padding-left: 1.3em; color: var(--sc-ink); text-wrap: pretty; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5em; height: 1px; background: var(--rule-ink); }
.help__foot { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); max-width: 60ch; text-wrap: pretty; }
.help__foot .link { display: inline-block; margin-top: var(--sc-3); }
@media (max-width: 860px) { .help__col .ticks { padding-left: 0; } }

/* ------------------------------------------------------ silence + peak -- */
.philosophy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.philosophy__photo { position: sticky; top: 14svh; height: 68svh; margin-left: calc(-1 * var(--edge)); }
.philosophy__photo img { object-position: 30% 50%; }
.philosophy__copy .ch-head > .body { color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.5; }
.philosophy__copy .more .body { color: var(--sc-ink-soft); }
.philosophy__cta { margin: var(--sc-3) 0 0; }
@media (max-width: 860px) {
  .philosophy { grid-template-columns: 1fr; }
  .philosophy__photo { position: relative; top: 0; height: 42svh; margin-inline: calc(-1 * var(--edge)); }
}

.roof-lead { padding-block: var(--sc-section) var(--sc-6); }
.roof-lead .ch-head { max-width: 46rem; }
.roof-lead__how { 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); margin: 0; }
.house__count { position: absolute; left: 0; bottom: -0.5rem; margin: 0; 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); }
.house__count span { color: var(--sc-ink); }
.roof { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; height: 100%; padding-block: var(--sc-6); }
.roof__house { position: relative; }
.roof__house svg { width: 100%; height: auto; overflow: visible; }
.roof__copy { display: grid; align-items: center; min-height: 0; }
.roof__copy > * { grid-area: 1 / 1; }
.svc h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); line-height: 1.14; letter-spacing: 0; margin: 0 0 var(--sc-4); }
.svc h3 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .svc h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; } }
.svc__kicker { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.38; color: var(--sc-ink); margin: 0 0 var(--sc-5); max-width: 36ch; }
.svc__body { color: var(--sc-ink-soft); max-width: 58ch; margin: 0; font-size: var(--sc-t-sm); line-height: 1.7; }
.svc .ticks { grid-template-columns: 1fr 1fr; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
.svc__links { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-5); font-size: var(--sc-t-sm); }
/* "Coming Soon" leads its beat: at label size in the soft ink it was missed, and
   the two services under it read as on offer today (Atrin's audit, Oct 1) */
.svc--soon .label { display: inline-block; margin: 0; padding-bottom: 0.7em; border-bottom: 1px solid currentColor; font-size: var(--sc-t-base); font-weight: 600; letter-spacing: 0.18em; color: var(--sc-ink); }
.roof__intro { display: grid; gap: var(--sc-5); }
.roof__intro-line { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1.14; letter-spacing: 0; margin: 0; max-width: 14ch; }
.roof__intro-line em { color: inherit; font-style: normal; }
.svc__step { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.16em; color: var(--sc-ink-soft); margin: 0 0 var(--sc-3); }
.more--svc > summary { font-size: var(--sc-t-xs); letter-spacing: 0.04em; }
.svc .more { margin-top: var(--sc-5); }
.svc .more .svc__body { margin: 0; }
.roof__soon .more { margin-top: var(--sc-3); }
.roof__soon { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); margin-top: var(--sc-5); }
.roof__soon h3 { font-size: var(--sc-t-xl); }

/* the house */
.house { --line: #F8F3EC; }
.house .ln { fill: none; stroke: var(--line); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.house .ln--soft { stroke-opacity: 0.35; stroke-width: 1.2; }
.house .fill-wall { fill: #34402F; }
.house .fill-roof { fill: #26301F; }
.house .pane { fill: #1F281B; stroke: var(--line); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: fill 520ms var(--sc-ease-out); }
.house .light { fill: var(--glow); opacity: 0; transition: opacity 620ms var(--sc-ease-out); }
.house .spill { fill: url(#spill); opacity: 0; transition: opacity 900ms var(--sc-ease-out); pointer-events: none; }
.house .opening.is-lit .light { opacity: 1; }
.house .opening.is-lit .spill { opacity: 0.55; }
.house .opening.is-now .light { fill: #F6E4BA; }
.house .opening--soon .pane { stroke-dasharray: 5 5; }
.house .opening--soon.is-lit .light { opacity: 0.28; }
.house a:focus-visible { outline: none; }
.house a:focus-visible .pane { stroke: var(--sc-accent); stroke-width: 3; }
.house .sign-text { font-family: var(--sc-font-display); fill: #F8F3EC; font-size: 22px; }
.house .roofline { fill: none; stroke: var(--glow); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 800ms var(--sc-ease-out); }
.house.is-whole .roofline { opacity: 1; }
.house__tip { position: absolute; z-index: 5; pointer-events: none; padding: 0.5em 0.8em; border-radius: 0; background: var(--cream); color: #2F3A2B; font-family: var(--sc-font-text); font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, -130%) scale(0.96); transition: opacity 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out); }
.house__tip.is-on { opacity: 1; transform: translate(-50%, -130%) scale(1); }

/* stacked peak: phones and reduced motion (set by page JS before mount) */
.roof-stacked .sc-stage, .roof-stacked [data-sc-stage] { position: static; height: auto; overflow: visible; }
.roof-stacked .roof { display: block; height: auto; padding-block: 0 var(--sc-section); }
.roof-stacked .roof__house { position: sticky; top: 3.4rem; z-index: 4; padding-block: var(--sc-4) var(--sc-5); background: linear-gradient(to bottom, var(--sc-canvas) 84%, transparent); margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter); }
.roof-stacked .roof__house svg { max-height: 26svh; width: auto; margin-inline: auto; display: block; }
.roof-stacked .house__count { position: static; text-align: center; margin-top: var(--sc-2); font-size: var(--sc-t-sm); }
.roof-stacked .house__count span { font-size: var(--sc-t-lg); }
.roof-stacked .roof__copy { display: grid; gap: var(--sc-8); max-width: 64rem; }
.roof-stacked .roof__copy > * { grid-area: auto; opacity: 1 !important; transform: none !important; }
.roof-stacked .svc { padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.roof-stacked .roof__intro { padding-top: var(--sc-6); }
@media (prefers-reduced-motion: reduce) { .roof-stacked .roof__house { position: relative; } }
@media (max-width: 860px) {
  .svc .ticks { grid-template-columns: 1fr; }
  .roof__soon { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------- 5 · your care -- */
.personal { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.personal__h2 { max-width: 14ch; }
.personal__open { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; letter-spacing: 0; max-width: 30ch; margin: 0 0 var(--sc-5); }
.personal__open em { color: inherit; font-style: normal; }
.personal__aside { position: sticky; top: 14svh; }
.personal__aside .photo { aspect-ratio: 4 / 5; margin-right: calc(-1 * var(--edge)); }
.personal__aside .photo img { object-position: 45% 60%; }
.why { margin-top: var(--sc-9); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-6) clamp(2rem, 6vw, 7rem); align-items: start; }
.why__head { display: grid; gap: var(--sc-5); position: sticky; top: 14svh; }
.why__list { border-top: 1px solid var(--sc-hairline-strong); }
.why__item { border-bottom: 1px solid var(--sc-hairline-strong); }
.why__item > 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-weight: 400; font-size: var(--sc-t-xl); line-height: 1.22; }
.why__item > summary::-webkit-details-marker { display: none; }
.why__item > summary::after { content: "+"; font-family: var(--sc-font-text); font-weight: 300; font-size: 1.4rem; line-height: 1; color: var(--sc-ink-soft); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.why__item[open] > summary::after { transform: rotate(45deg); }
.why__item > :not(summary) { margin-bottom: var(--sc-5); }
.why__item .body + .body { margin-top: var(--sc-4); }
.why__vision { margin: var(--sc-5) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.26; letter-spacing: 0; max-width: 30ch; text-wrap: balance; }
@media (max-width: 860px) { .personal, .why { grid-template-columns: 1fr; } .personal__aside { position: static; } .personal__aside .photo { aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--edge)); } .why__head { position: static; } }

/* ----------------------------------------------------- 6 · First Visit -- */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); }
.visit__photos { position: relative; min-height: 100%; }
/* Was three photos overlapping on drop shadows — a collage, which BRAND_GUIDE
   bans by name and which is the "floating photo cards" hero Kiarash rejected.
   It becomes the trio `your-first-visit` used instead: three square frames,
   flush, hairline gutters, running off the left edge. Same three photographs,
   same device slot in the chapter, no cards. */
.visit__stack { position: sticky; top: 8svh; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-left: calc(-1 * var(--edge)); }
.visit__stack .photo { position: relative; }
.visit__stack .p1 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.visit__stack .p2, .visit__stack .p3 { aspect-ratio: 1; }
.visit__h2 { max-width: 12ch; }
.visit .ch-head { margin-bottom: var(--sc-7); }
.visit__block { padding-block: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.visit__block h4 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); margin: 0 0 var(--sc-4); }
.visit__more > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--sc-5); align-items: center; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.22; }
.visit__more > summary::-webkit-details-marker { display: none; }
.visit__more > summary::after { content: "+"; font-family: var(--sc-font-text); font-weight: 300; font-size: 1.4rem; line-height: 1; color: var(--sc-ink-soft); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.visit__more[open] > summary::after { transform: rotate(45deg); }
.visit__more h4 { margin-top: var(--sc-5); }
.visit__more .ticks { margin-bottom: var(--sc-2); }
.visit__cta { margin-top: var(--sc-7); }
@media (max-width: 860px) {
  .visit { grid-template-columns: 1fr; }
  .visit__stack { position: relative; top: 0; margin-inline: calc(-1 * var(--edge)); }
}

/* ------------------------------------------------------ 6b · Newmarket -- */
/* --------------------------------------------- 6b · Newmarket, the plate --
   The page's one full-bleed frame: photograph to all four edges, square
   corners, words in the sky. The furniture is the carousel's — label left,
   locator right, 1px rule under both, at the same 5.3%-of-height position —
   and the type sits in the upper band with the house filling the lower half,
   which is the 17-41% type band the shipped slides hold to. */
.place { display: grid; gap: var(--sc-7); margin-top: var(--sc-10); }
.place__frame { position: relative; height: clamp(30rem, 82vh, 54rem); margin-inline: calc(-1 * var(--edge)); }
/* Crop to the sky, not the parking lot: the quiet zone is up there, so the
   house is pushed low in the frame and the type gets the air above it. */
.place__frame img { object-position: 50% 6%; }
/* The scrim reaches only the band the copy occupies; the house below it stays a
   photograph rather than a darkened one. */
/* The plane has to cover the copy at every frame height, and the frame is
   82vh — so on a short viewport the block sits proportionally lower. The ramp
   holds its density through the whole type band and only lets go below it,
   which keeps the house itself a photograph. */
.place__sky { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, rgb(var(--dusk) / 0.78) 0%, rgb(var(--dusk) / 0.74) 28%, rgb(var(--dusk) / 0.68) 48%, rgb(var(--dusk) / 0.56) 62%, rgb(var(--dusk) / 0.2) 74%, rgb(var(--dusk) / 0) 86%); }
.place__plate {
  position: absolute; inset: 0; display: grid; align-content: start;
  padding-block: clamp(1.75rem, 5vh, 3rem);
  color: var(--cream); --sc-ink: #F8F3EC; --sc-ink-soft: #E9E0CE;
}
.place__plate > .sc-wrap { display: grid; justify-items: start; }
.place__label { display: flex; align-items: baseline; justify-content: space-between; width: 100%; color: var(--cream); padding-bottom: 0.95em; border-bottom: 1px solid rgb(248 243 236 / 0.72); margin: 0 0 clamp(1.5rem, 4.5vh, 3rem); }
.place__label span { font: inherit; letter-spacing: inherit; opacity: 0.68; }
.place__h3 { max-width: 18ch; margin: 0 0 var(--sc-4); }
.place__addr { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.24; margin: 0 0 var(--sc-5); }
.place__plate .link { color: var(--cream); border-bottom-color: var(--cream); }
.place__text { display: grid; gap: var(--sc-6) var(--sc-8); align-items: start; max-width: 62rem; }
.place__text .more { margin-top: var(--sc-4); }
@media (max-width: 860px) {
  .place__frame { height: clamp(28rem, 76vh, 40rem); }
  .place__frame img { object-position: 50% 4%; }
  .place__h3 { max-width: 14ch; }
}

/* -------------------------------------------------------- 8 · Voices -- */
.voices .sc-stage, .voices [data-sc-stage] { display: flex; align-items: center; }
.rail { display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); width: max-content; }
.rail > * { flex: none; }
.rail__lead { width: min(30rem, 80vw); display: grid; align-content: center; gap: var(--sc-5); padding-right: var(--sc-6); }
.rail__how { 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); margin: 0; }
.rail__photo { width: clamp(16rem, 30vw, 28rem); height: min(62svh, 34rem); }
.rail__quote { width: clamp(16rem, 26vw, 24rem); height: min(62svh, 34rem); display: grid; align-content: space-between; padding: var(--sc-6) 0 var(--sc-5); border-top: 1px solid var(--rule-ink); background: transparent; }
.rail__quote p { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.35; margin: 0; text-wrap: pretty; }
.rail__quote cite { font-style: normal; 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); }
.rail__mark { display: none; }
.rail__end { width: min(22rem, 70vw); display: grid; align-content: center; padding-left: var(--sc-4); }
@media (prefers-reduced-motion: no-preference) {
  .rail > :not(:first-child) { opacity: max(0.55, min(1, calc(var(--sc-p, 0) * 9 - var(--i, 0) * 0.9 + 1.2))); transition: opacity 120ms linear; }
}

/* ----------------------------------------------------------- 9 · FAQ -- */
.faq { 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__head { position: sticky; top: 14svh; }
.faq__h2 { max-width: 17ch; }
.faq { margin-bottom: var(--sc-10); }
.faq details { border-top: 1px solid var(--sc-hairline-strong); }
.faq details:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.faq 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; }
.faq summary::-webkit-details-marker { display: none; }
.faq 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 details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--sc-5); max-width: 62ch; color: var(--sc-ink-soft); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } .faq__head { position: static; } }

/* ------------------------------------------------------ 10 · colophon -- */
.colophon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-8) clamp(2rem, 6vw, 7rem); align-items: start; }
.colophon__h2 { max-width: 11ch; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.form label { display: grid; gap: 0.45rem; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.form .full { grid-column: 1 / -1; }
.form input, .form textarea { width: 100%; padding: 0.9em 1em; border-radius: 0; border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); background: color-mix(in oklab, var(--sc-ink) 5%, transparent); color: var(--sc-ink); font-size: var(--sc-t-base); letter-spacing: 0; text-transform: none; font-weight: 500; transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: transparent; }
.form .btn { justify-self: start; margin-top: var(--sc-3); }
.foot { margin-top: var(--sc-10); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline-strong); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sc-6); font-size: var(--sc-t-sm); }
.foot h4 { margin: 0 0 var(--sc-4); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.foot a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }
.foot a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* the wordmark in the ground's own ink: dark on cream/oat, cream on forest/clay */
.foot__mark img { width: 11rem; height: auto; margin-bottom: var(--sc-4); }
.foot__logo-cream { display: none; }
:is(.ground--forest, .ground--clay) .foot__logo-ink { display: none; }
:is(.ground--forest, .ground--clay) .foot__logo-cream { display: block; }
/* a column's groups (Quick Links / For Practitioners, Get in Touch / Office
   Hours / Visit Us) sit a heading's height apart — more air above a head than
   below it (the head keeps --sc-4 to its list) */
.foot__col { display: grid; align-content: start; gap: var(--sc-6); }
.foot__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3); padding-top: var(--sc-6); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
@media (max-width: 860px) { .colophon, .form { grid-template-columns: 1fr; } }
/* Tablet: the mark and its two links become one row across the top, and the
   three link columns share the width under it — no near-empty mark column. */
@media (max-width: 860px) {
  .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sc-5); row-gap: var(--sc-7); }
  .foot__mark { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-4) var(--sc-6); }
  .foot__mark img { margin-bottom: 0; }
  .foot .foot__mark ul { display: flex; gap: var(--sc-6); }
}
/* Phone: Services | Quick Links side by side, then the contact column full
   width with its groups in two columns (Get in Touch | Office Hours, then
   Visit Us across), so the address keeps its two lines. */
@media (max-width: 560px) {
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-5); row-gap: var(--sc-7); }
  .foot__touch { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-5); }
  .foot__touch > :last-child { grid-column: 1 / -1; }
  .foot__legal { padding-top: var(--sc-4); }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7em 1.1em; background: var(--forest); color: var(--cream); font-weight: 600; }
.skip:focus { top: 1rem; }

/* ===================================================== shared fixes, Sept 22 */
/* a phrase that must not break across lines (a postal code, a short term) */
.nw { white-space: nowrap; }
/* phone numbers never break across lines */
a[href^="tel:"] { white-space: nowrap; }
/* footer column labels are <p class="label foot__label">, not headings: as h2 they
   ended every page's outline with six footer entries (SEO.md A13, Oct 2) */
.foot__label { margin: 0 0 var(--sc-4); font-weight: 700; color: var(--sc-ink); }
/* the chapter bar's Book button: the full label on wide screens, "Book" on phones
   so the chapter title beside the counter isn't cut to three letters */
.chbar__book-short { display: none; }
@media (max-width: 520px) { .chbar__book-full { display: none; } .chbar__book-short { display: inline; } }

/* round 2: footer links reach a 44px hit area on phones; the form button never wraps */
@media (max-width: 860px) { .foot li a { display: inline-block; padding-block: 0.6em; } .foot ul { gap: 0; } }
.form .btn { grid-column: 1 / -1; white-space: nowrap; }
/* full-label mode sets a touch tighter so eight or nine labels fit at common desktop widths */
.chbar__list { letter-spacing: 0.11em; gap: clamp(0.35rem, 0.9vw, 0.95rem); }

/* ===================================================== chrome pass, Sept 23 */
/* Browser surfaces on the square system: the engine's focus ring is rounded
   (6px); every box on this site is square, so the ring is too. */
:focus-visible { border-radius: 0; }
/* counters that change in place or align in a column never jitter */
.ch-head__eyebrow span, .chips a::before, .house__count, .place__label span { font-variant-numeric: tabular-nums; }
/* the skip link: a real 44px target with the ring the rest of the chrome uses */
.skip { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.skip:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
/* footer rows on phones: every row, link or not, keeps the same 44px step, so
   "Number" and the hours no longer sit tighter than the links beside them */
@media (max-width: 860px) { .foot li:not(:has(> a)) { padding-block: 0.6em; } }

/* ================================= very tall viewports (SEO.md A5, Oct 2, 2026) ==
   A renderer that does not scroll (Googlebot) grows its viewport to the height of
   the page instead. Heights written in svh then grow with it: a 92svh hero becomes
   thousands of pixels tall and pushes every chapter out of view, no reveal fires,
   and two thirds of the words on an inner page stay at opacity 0. So in a viewport
   that is at least 2000px tall AND taller than it is wide, the svh heights are
   capped at what a large desktop shows and every reveal is shown outright. Keyed on
   the viewport only, never on the user agent. A landscape 4K screen (3840 x 2030)
   does not match and keeps the full design; a portrait monitor gets the same calm
   layout the renderer does. The same condition appears at the end of service.css
   (the inner-page hero and photos; that file loads later and would win), of home.css
   (the house reads as its stacked chapter) and in the homepage script (`tall`). */
@media (min-height: 2000px) and (max-aspect-ratio: 1/1) {
  .hero { height: 56rem; }
  .hero-stacked .hero { min-height: 56rem; }
  .sc-stage { height: 56rem; }
  .hero__beats { bottom: 15rem; }
  .glance { margin-top: 0; min-height: 0; }
  [data-sc-in], [data-sc-stagger] > *, [data-sc-cue] { opacity: 1 !important; transform: none !important; transition: none !important; }
}