/* /contact: the few things the shared components can't do. Loaded after
   /css/service.css on this page only. The place plate itself (.place, .place__*)
   is the homepage's, from bwell.css, unchanged. */

/* 0 · an address never splits inside its street or its city line */
.nw { white-space: nowrap; }

/* 0b · the first visit. On phones the shared split puts the Trio (~450px) above
   the chapter head, so /contact#visit (linked from the homepage) landed on photos
   with no step in view. Here the head and the steps come first and the three
   photographs follow the CTA. Desktop keeps the sticky photo column. */
@media (max-width: 860px) { .ct-visit .split__media { order: 2; } }
/* photo 08: its red EXIT sign sat clipped along the tile's top edge. Scaled from
   the floor up, the frame (.photo clips) loses the sign and keeps the door and mat. */
.ct-visit .trio .p2 img { transform: scale(1.12); transform-origin: 50% 100%; }

/* 1 · Where we are opens on the plate: the photograph meets the chapter above
   edge to edge (the homepage set it a section-gap below the first-visit block). */
.ct-where { padding-top: 0; }
.ct-where .place { margin-top: 0; gap: var(--sc-8); }
/* the plate's label line doubles as the chapter's slide header (eyebrow + nn / NN);
   .place__label (bwell.css) already draws its rule, so the eyebrow's own is off */
.place__label.ch-head__eyebrow::after { display: none; }
.ct-place__addr { max-width: 22ch; text-wrap: balance; }
/* the homepage's plate irised open part-way down its chapter; here it opens the
   chapter, so an iris would show an empty band on entry. It is a still.
   The address is two unbreakable halves (street, city) on every width, so it reads
   "75 Dawson Manor Blvd, / Newmarket, ON L3X 2H5", never "…Manor / Blvd,
   Newmarket, / ON…". On phones the size is capped so the longer half (the city
   line, 11.1em in lining figures since Sept 23) always fits the wrap with room
   to spare (15px at 390). */
@media (max-width: 860px) { .ct-place__addr { font-size: min(var(--sc-t-2xl), calc((100vw - 2 * var(--edge)) / 11.6)); line-height: 1.14; } }
/* On a portrait frame, cover shows photo 01's full height, so its bottom third
   (empty lot) filled the plate's lower half and the house sat under the densest
   scrim. Scaled past the frame and anchored at the top, the clipped bottom loses
   empty asphalt, and the house grows and moves down out of the type band. The
   lot still shows under the ramp. */
@media (max-width: 860px) { .ct-place .place__frame img { height: 122%; object-position: 50% 0; } }

/* 2 · under the plate: the facts a visitor came for (left, wider), and who we
   serve beside them. Stacks, facts first, on phones. The facts are set in the
   display face so an address, a number or an hour reads as the answer, not as
   body copy. */
.ct-where__text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--sc-7) clamp(2rem, 6vw, 7rem); align-items: start; }
.ct-where__text .details dd { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: 0; }
/* Sept 23: Playfair's default old-style figures made the answers bounce
   ("416-667-1552", "10 AM – 4 PM", "L3X 2H5" with the 3, 5 and 9 dropping below
   the line). A number a visitor dials or copies is set in lining figures, as
   the rooms-for-rent facts already are; the plate's address headline too. */
.ct-where__text .details dd, .ct-place__addr { font-variant-numeric: lining-nums; }
/* three of the five facts are links (maps, tel:, mailto:): a quiet underline says
   so, and on phones a hit slop takes each to a 44px tap (as the shared .link has) */
.ct-where__text .details dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
@media (hover: hover) and (pointer: fine) { .ct-where__text .details dd a:hover { text-decoration-color: currentColor; } }
.ct-serve { display: grid; gap: var(--sc-4); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.ct-serve .label { margin: 0; color: var(--sc-ink-soft); }
.ct-serve p:not(.label) { margin: 0; color: var(--sc-ink); max-width: 52ch; text-wrap: pretty; }
/* stacked (phone, tablet and up to 1160px, where the facts' column is too
   narrow for "Newmarket, ON L3X 2H5" on one line): "Who we serve" continues the
   facts list as its last row (the facts' closing hairline is its top rule),
   instead of a second rule 3rem under the first */
@media (max-width: 1160px) { .ct-where__text { grid-template-columns: 1fr; row-gap: 0; } .ct-serve { border-top: 0; } }

/* 3 · the form. Its button sat in column 1 of the two-column grid (~250px) and
   "BOOK AN APPOINTMENT" needs ~259px, so it broke onto two lines at every desktop
   width but 1280-1440. It takes the full row and keeps its natural width. */
.ct-form .form .btn { grid-column: 1 / -1; white-space: nowrap; }
/* Sept 23: the "Contact Us" label kept a paragraph's default top margin, so it
   sat 12px under the form's first field label beside it; the two tops now share
   one line. */
.ct-form > div:first-child > .label { margin: 0; }
/* Sept 23: on phones every primary on the site goes full width (the .cta-row
   collapse); the submit button was the one left at its natural width. */
@media (max-width: 520px) { .ct-form .form .btn { justify-self: stretch; } }
/* the phone and email line under it, then the emergency sentence */
.ct-form__alt { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); }
.ct-form__alt a { white-space: nowrap; color: var(--sc-ink); }
.close__body > p.ct-form__note { margin: 0; max-width: 52ch; color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .ct-where__text .details dd a, .ct-form__alt a { position: relative; }
  .ct-where__text .details dd a::after, .ct-form__alt a::after { content: ""; position: absolute; inset: -13px -4px; }
}

/* 4 · the FAQ head: "Common Questions About BWell Lounge" is twice the length of
   the other pages' "Frequently Asked Questions", and at display--lg in the sticky
   column it stacked one word per line (5 lines). One step down it holds 3. */
#faq .faq-split > .ch-head h2 { font-size: var(--sc-t-2xl); line-height: 1.14; max-width: 14ch; }
/* stopgap (as about.css): LastChapter's head has no data-sc-stagger, so its eyebrow
   never gets .sc-in and the rule under "Questions & contact … 03 / 03" never draws.
   Delete when the shared fix (stagger on LastChapter's .ch-head) lands. */
#faq .ch-head.sc-in .ch-head__eyebrow::after { transform: scaleX(1); }