/* BWell Lounge: the homepage funnel (Sept 22, 2026). Loads after bwell.css,
   which still carries the hero walk-in and the house. Only what the three-beat
   page adds lives here. */

/* The house rises over the hero like a curtain (the job the At a Glance screen
   used to do): same -24svh overlap the hero's address beat was built to clear. */
.home-roof { position: relative; z-index: 3; margin-top: -24svh; }
.hero-stacked + .home-roof { margin-top: 0; }
/* The hero is a pinned act: the engine gives it span x 100vh of height when it mounts
   (scrollcraft.js layout(): 2.6 x 100vh). Until then it was one screen tall, so the house
   section sat inside the first screen and jumped 1.6 screens down when the script ran: a
   layout shift of 0.24 on most desktop loads (0.1 is the limit for "good"). Reserving the
   same height here means nothing moves. Not under reduced motion, where the page
   script turns the hero into a still, one-screen chapter; the very-tall-viewport
   block at the end of this file and the <noscript> style in Head.astro undo it too.
   (SEO.md A14; keep 260vh equal to data-sc-span="2.6" in index.astro) */
@media (prefers-reduced-motion: no-preference) {
  #hero[data-sc-act="pin"] { min-height: 260vh; }
}
.home-roof .roof-lead { padding-top: clamp(4.5rem, 10vh, 8rem); }

/* Every card now routes: the "Explore" link leads, booking follows. */
.svc__links { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-5); }
.svc__go { font-weight: 600; }

/* 2 · start here */
.home-begin { padding-block: var(--sc-section) var(--sc-7); }
.home-begin__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sc-7) clamp(2rem, 6vw, 7rem); align-items: end; }
.home-begin .ch-head .lede { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.3; max-width: 26ch; }
.home-begin__cta { margin: var(--sc-3) 0 0; }
.home-begin__aside { display: grid; gap: var(--sc-7); }
.home-begin__stats { 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); }
.home-begin__more a { font-size: var(--sc-t-lg); }
@media (max-width: 960px) { .home-begin__grid { grid-template-columns: 1fr; } }

/* the two proof numbers, set like the carousels set a figure: serif numeral,
   tracked-caps caption */
.stat { display: grid; gap: var(--sc-2); }
.stat__n { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: 0; font-variant-numeric: lining-nums; }
.stat__t { 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); max-width: 22ch; }

/* ------------------------------------------ Sept 23 design pass (home) --
   Placement fixes only: no copy, colour, type family or route changed. Every
   selector is scoped to the homepage's own sections so /about and /contact,
   which reuse some of these classes, are untouched. */

/* 0 · hero. The CTA sat in a second grid column, bottom-aligned to the
   paragraph and aligned to nothing above it (x=744 at 1440, jammed against
   the right gutter at 1024). It now follows the paragraph in reading order,
   on the headline's left edge: headline -> paragraph -> button, as the
   phone already read it. */
.title-page .hero__intro { grid-template-columns: minmax(0, 34rem); gap: var(--sc-5); }
@media (min-width: 521px) { .title-page .hero__intro > .btn { justify-self: start; } }
/* With the button under the paragraph the copy block stands 73px taller, so
   the headline rose onto the bright clapboard (its background dropped from
   ~5.4:1 to ~3.2:1 against the cream type at the 90th percentile). The warm
   plane keeps its job, covering the band the copy occupies: the same stops,
   lifted 8% so the headline sits on the same density it had before. Desktop
   only; phones keep their own scrim and layout. */
@media (min-width: 861px) {
  .title-page .walk__scrim { background:
    linear-gradient(to top, rgb(var(--dusk) / 0.94) 0%, rgb(var(--dusk) / 0.86) 34%, rgb(var(--dusk) / 0.66) 54%, rgb(var(--dusk) / 0.24) 74%, rgb(var(--dusk) / 0) 88%),
    linear-gradient(to bottom, rgb(var(--dusk) / 0.5) 0%, rgb(var(--dusk) / 0) 20%); }
}
/* tablet (521-860): the paragraph ran 105 characters a line and the button
   stretched ~700px. The 34rem column above keeps a reading measure; the
   button is sized to its label. Phones (<=520) keep the full-width button at
   the thumb. */
@media (min-width: 521px) and (max-width: 860px) {
  .title-page .hero__intro > .btn { padding-inline: 2em; letter-spacing: var(--label-track); }
}

/* 1 · the house. Chapter labels balance instead of stranding one word
   ("ROOF" alone at 390). */
.home-begin__eyebrow { text-wrap: balance; }   /* .ch-head__eyebrow balances in bwell.css */
/* The services list keeps each separator on its word and each service whole,
   so no line starts with a stray "·"; balanced, it sets as three even lines
   in the house column. */
.roof__list { text-wrap: balance; }
.roof__list > span { white-space: nowrap; }

/* Pinned house, 861-1200: the two-column ticks broke into 2-line fragments
   ("Registered / psychotherapists") in a ~440px column. One column reads. */
@media (min-width: 861px) and (max-width: 1200px) {
  .home-roof .svc .ticks { grid-template-columns: 1fr; }
  /* the two coming-soon cards stack: side by side, "Physiotherapy" ran 22px
     past the right gutter at 1024 */
  .home-roof .roof__soon { grid-template-columns: 1fr; gap: var(--sc-5); }
}
/* Side by side (wide screens, and the stacked reading at desktop widths),
   the two coming-soon cards share rows: title, line and "Details" start on
   the same line whichever title wraps. */
@media (min-width: 1201px) {
  .home-roof .roof__soon { grid-template-rows: auto auto auto; row-gap: 0; }
  .home-roof .roof__soon > article { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}

/* The card links: on phones a .link grows an 18px tap pad upward, so wrapped
   links need more than 18px between rows or their hit areas overlap. */
@media (max-width: 860px) { .home-roof .svc__links { row-gap: var(--sc-5); } }

/* Stacked reading (phones, and reduced motion at any width). The sticky
   house band was a flat block cut into the lit ground (a hard seam, lit
   #5E6456 against #2F3A2B at 390), and its bottom 16% faded to transparent
   right where "7 of 7" sits, so text scrolling under showed through the
   count. The band is now solid to its edge, eased in and out by two short
   fades outside it. */
.home-roof .roof-stacked .roof__house { background: var(--sc-canvas); }
.home-roof .roof-stacked .roof__house::before,
.home-roof .roof-stacked .roof__house::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.home-roof .roof-stacked .roof__house::before { bottom: 100%; height: var(--sc-7); background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 0%, transparent), var(--sc-canvas)); }
.home-roof .roof-stacked .roof__house::after { top: 100%; height: var(--sc-6); background: linear-gradient(to bottom, var(--sc-canvas), color-mix(in oklab, var(--sc-canvas) 0%, transparent)); }
@media (max-width: 860px) { .home-roof .roof-lead { padding-bottom: var(--sc-8); } }
/* Reduced motion: the band never sticks, so it needs no ground of its own
   (at 1440 it read as a darker panel boxed into the section). */
@media (prefers-reduced-motion: reduce) {
  .home-roof .roof-stacked .roof__house { background: none; }
  .home-roof .roof-stacked .roof__house::before,
  .home-roof .roof-stacked .roof__house::after { content: none; }
}
/* Stacked at desktop widths (reduced motion): the two tick columns spread
   across 64rem with a 400px hole between them. Keep them on a measure. */
.home-roof .roof-stacked .svc .ticks { max-width: 46rem; }

/* 2 · start here. The label now spans both columns; the close and the proof
   hang from its rule, tops aligned. The aside's own top rule only returns
   when the columns stack and it needs a separator. */
.home-begin__grid { row-gap: 0; align-items: start; }
.home-begin__eyebrow { grid-column: 1 / -1; }
.home-begin__stats { padding-top: 0; border-top: 0; }
@media (max-width: 960px) {
  .home-begin__aside { margin-top: var(--sc-7); }
  .home-begin__stats { padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
}
/* The two proof numbers stand on one baseline and their captions start on
   one line, whichever caption runs longer (they sat 55px apart at 1440). */
.home-begin__stats { grid-template-rows: auto auto; row-gap: 0; }
.home-begin .stat { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sc-2); }
.home-begin .stat__n { align-self: end; }
/* the count-up no longer changes width as it runs */
.home-begin .stat__n [data-sc-count] { font-variant-numeric: lining-nums tabular-nums; }
/* The proof supports the question, it does not outshout it: at 5rem the
   figures matched the 5.1rem headline, and "4.9 Rated" broke into a stranded
   "4.9" over "Rated". One step down the display scale, each figure holds one
   line (and at 1024 "500+" no longer runs 13px past the gutter). */
.home-begin .stat__n { font-size: var(--sc-t-2xl); white-space: nowrap; }

/* Very tall viewports (see the note at the end of bwell.css). The homepage's two pinned
   acts make no sense for a renderer that does not scroll: the hero would be 2.6 viewports
   of nothing and the service cards would never appear. Here the hero stands one screen
   tall and the house reads as its stacked chapter, every card in the flow. In CSS, not
   only in the page script: Google loads at a normal height and then grows the viewport,
   after the script has already run. */
@media (min-height: 2000px) and (max-aspect-ratio: 1/1) {
  #hero, #roof-act { height: auto !important; min-height: 0 !important; }
  #roof-act .sc-stage, #roof-act [data-sc-stage] { position: static; height: auto; overflow: visible; }
  .home-roof { margin-top: 0 !important; }
  #roof-act .roof { display: block; height: auto; }
  #roof-act .roof__copy { display: grid; gap: var(--sc-8); max-width: 64rem; }
  #roof-act .roof__copy > * { grid-area: auto; opacity: 1 !important; transform: none !important; }
  #roof-act .roof__house svg { max-height: 16rem; width: auto; margin-inline: auto; display: block; }
}