/* /about: the few things the shared components can't do yet. Loaded after
   /css/service.css on this page only. (The Plate fix and the tel: nowrap rule
   that used to open this file are now in service.css / bwell.css.) */

/* 1 · Hero. The H1 stacks as "A Space for / Whole-Person / Healing": at 7.6em the
   line can't hold "A Space for Whole-" (8.6em) but holds "Whole-Person" (6.4em),
   so the compound never splits at its hyphen, at any width. Greedy wrap, not the
   display face's balance (balance picks "A Space / for Whole- / Person Healing").
   The opening sentence
   is the setup chapter 1 answers, so it is set in the display face, not as a caption. */
#hero .svc-hero__h1 { max-width: 7.6em; }
#hero .svc-hero__h1, #hero .svc-hero__h1 .hero__line, #hero .svc-hero__h1 .hero__line > span { text-wrap: wrap; }
/* Sept 23: the CTA pair ("Book a Free Consultation" + "See all services", 504px)
   didn't fit the hero's second column (464px, the intro grid capped at 62rem), so
   on this page alone the link dropped under the button while every other hero
   keeps the pair on one centre line. The display-set intro only needs 24ch
   (~430px), so its column is capped at 28rem and the pair gets its width back. */
@media (min-width: 861px) { #hero .hero__intro { grid-template-columns: minmax(0, 28rem) minmax(0, auto); max-width: none; } }
#hero .svc-hero__intro p { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.25; color: var(--sc-ink); max-width: 24ch; text-wrap: balance; }

/* 2 · One roof. The "fragmented care" column is the foil: its long opening sentence
   sits a size below the one-roof column's title, so the side set apart still leads.
   The three hand-offs are whole sentences, so the tile title steps down; the consent
   sentence is the block's foot, ruled, at the same weight and right under the tiles,
   so the condition is always in view with the three sharing claims. */
.ab-roof .compare__col:not(.compare__col--us) .compare__t { font-size: var(--sc-t-lg); line-height: 1.34; text-wrap: pretty; }
.ab-links .tile__t { font-size: var(--sc-t-lg); line-height: 1.34; text-wrap: pretty; }
.ab-consent { margin-top: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--rule-ink); max-width: none; }
.ab-consent p { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.34; max-width: 58ch; text-wrap: pretty; }
/* Sept 23: between 641 and 960px the shared three-tile rule sets 2 + 1 with the
   odd tile spanning the row, so the third hand-off read as a different, wider
   thing than its two peers. The three now stack as equals in service.css; the
   title keeps its measure here. */
@media (min-width: 641px) and (max-width: 960px) {
  .ab-links .tile__t { max-width: 44ch; }
}
@media (min-width: 961px) {
  .ab-links { column-gap: var(--sc-6); }
  .ab-links .tile__t, .ab-consent p { font-size: calc(var(--sc-t-lg) * 0.88); }
}

/* 3 · The room, then "The space itself matters too.": the Plate is the pause
   between the hand-offs and the passage about the space, so chapter 1 ends on
   words ("…part of the healing.") and chapter 2's photo never follows a photo.
   The line and its paragraph sit side by side under the room; stacked on phones.
   The Plate's right edge carries a steel pedal bin and a chair arm: the image is
   drawn 14% wider than the frame (left-anchored), so the frame ends before them.
   Same photo, cropped, not altered. */
.ab-roof .plate { margin-top: var(--sc-8); }
.ab-roof .plate__frame img { width: 114%; max-width: none; }
.ab-space { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-4) clamp(2rem, 6vw, 7rem); align-items: start; margin-top: var(--sc-8); }
.ab-space__big { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.18; letter-spacing: 0; max-width: 16ch; text-wrap: balance; }
.ab-space__x { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.55; max-width: 46ch; text-wrap: pretty; }

/* 4 · Your care. The chapter headline stays the one headline: the opening line is a
   step below it (t-xl, not the Standout's display default), and the source's single
   paragraph reads as one: "Whether you're dealing with…" continues at the same size
   and colour as the "We ask…" sentences above it. The three combinations are a
   ruled index in the display face (options the reader picks between). */
/* Photo 39 has a wastebasket and a bathroom scale in its left fifth (x 15–20%).
   The frame is portrait on desktop, square-ish on phones and wide on tablets, so
   no single object-position clears them everywhere. The image is drawn 28% wider
   than the frame and pulled left by that 28%, so the frame always starts past
   ~22% of the photo; pos 28% then keeps both chairs whole at every width
   (checked 360–2560). Cropped, not altered. */
#care .split__photo img { width: 128%; max-width: none; margin-left: -28%; }
#care .standout__t { max-width: 26ch; font-size: var(--sc-t-xl); line-height: 1.24; }
#care .standout__x { max-width: 44ch; }
.ab-care__plan { margin-top: var(--sc-4); }
.ab-care__plan p { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 44ch; }
.ab-paths .checklist__list li,
.ab-values .checklist__list li { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.34; padding: var(--sc-4) 0 var(--sc-4) 1.6em; border-top: 1px solid var(--rule-ink); }
.ab-paths .checklist__list li::before,
.ab-values .checklist__list li::before { top: calc(var(--sc-4) + 0.68em); width: 0.7em; }
.ab-paths .checklist__list,
.ab-values .checklist__list { gap: 0; }
.ab-care__close { margin-top: var(--sc-6); }

/* 5 · Our standards: "These aren't just credentials…" is body text right under the
   Facts it closes (in the source it ends that paragraph). Not a Payoff: the page
   doesn't turn "safe and effective" into a display line. "But credentials alone…"
   is the next paragraph. */
.ab-team__acct { margin-top: var(--sc-6); }
.ab-team__close { margin-top: var(--sc-5); }

/* 6 · Values & vision: the vision's label sits on the Payoff. */
.ab-vision { margin-top: var(--sc-9); }
.ab-vision > .label { display: block; margin: 0; color: var(--sc-ink-soft); }
.ab-vision .payoff { margin-top: var(--sc-3); }

/* 7 · Voices: the quotes (three since Oct 2) as ruled quote tiles (Tiles can't carry a
   blockquote + attribution). The quote in the display face at t-lg and 40ch (at
   t-xl / 34ch they ran 3–7 lines and read as four headlines, not four voices),
   the name 24px under its own quote (not pushed to the row's floor), the row
   hairlines still aligned. */
.ab-quotes { margin-top: var(--sc-8); }
.ab-quote { margin: 0; gap: var(--sc-5); align-content: start; padding-bottom: var(--sc-2); }
.ab-quote__q { margin: 0; }
.ab-quote__q p { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.36; letter-spacing: 0; max-width: 40ch; text-wrap: pretty; }
.ab-quote__who { margin: 0; color: var(--sc-ink-soft); }
/* the quote marks are type, not copy: drawn here, with the opening mark hung in the margin */
.ab-quote__q p::before { content: "\201C"; margin-left: -0.42em; }
.ab-quote__q p::after { content: "\201D"; }
#voices .close__body { align-self: end; }
/* stopgap until LastChapter's head carries data-sc-stagger like Chapter's: the
   eyebrow rule draws when the head arrives (else "06 / 06" floats with no rule).
   Harmless once the shared fix lands (same end state). */
#voices .ch-head.sc-in .ch-head__eyebrow::after { transform: scaleX(1); }

/* 8 · Phones: chapter 1 is the longest scroll before chapter 2, so its gaps and
   the Plate come down a step (copy untouched). Once the tiles stack, the consent
   sentence would read as a fourth hand-off (same face, size and rule), so it
   drops to body text under a lighter rule: the foot of the list, not an item. */
@media (max-width: 860px) {
  .ab-roof .payoff, .ab-roof .block { margin-top: var(--sc-7); }
  .ab-links { row-gap: var(--sc-5); }
  .ab-consent { margin-top: var(--sc-7); border-top-color: var(--sc-hairline-strong); }
  .ab-consent p { font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.6; }
  .ab-space { grid-template-columns: minmax(0, 1fr); margin-top: var(--sc-6); }
  .ab-space__x { font-size: var(--sc-t-base); line-height: 1.6; }
  .ab-roof .plate { margin-top: var(--sc-6); }
  .ab-roof .plate__frame { --h: clamp(14rem, 60vw, 20rem); }
  /* the shorter phone frame shows more of the floor, where a grey chair and its
     wooden arm sit at the right edge: crop to 78% (the gap between the shelf's
     two bays) */
  .ab-roof .plate__frame img { width: 128%; }
}