/* formats/spa/format.css - Veyne House, the seventh example site. Brand truth: BRAND.md.
   The booking-first structure in a second register: dark charcoal stone, honed cream marble with
   grey veining, warm low light, one warm brass accent. Every selector is prefixed .fmt-spa, so it
   can never reach formats/booking. Layout, tiles, rows, the assistant card and the demo chrome all
   come from shared.css unchanged; this file sets the brand hooks, the display face, the two grounds,
   the hero panel (assistant over the week), the slot grid, the treatments, the marble band and its
   film, the practitioners, the visit facts, the questions and the close.

   CLASS INVENTORY (page order; shared recipes in brackets)
   body.fmt-spa data-format="booking" data-format-name="Booking-first with the assistant up front"
   .f-nav > .container.f-nav-in > a.f-brand (i.f-mark holds the arch) + nav.f-tabs + .f-nav-acts > a.pill.pill-ink.sm Start
   section#book.hero-f.sp-hero > .container > .two-col.sp-grid
       .sp-copy      span.k | h1.h1#hero-h | p.lead | .row (Start, Open) | p.micro
       .tile.sp-tile[data-tile]
           .sp-shot  picture.sp-frame + video.sp-film + span.sp-warm + p.sp-state + button.sp-vpause
           .sp-panel .chat.sp-chat.on-dark[data-chat=static] + .sp-cal (p.tile-k + ul.sp-week#sp-week + p.sp-cal-f)
       p.visually-hidden#sp-live[role=status][aria-live=polite]
   section#treatments.ground-light.sp-treat  .sec-h + .sp-menu[data-copy-exempt] (p.tile-k > span + span.ex Example)
       .grid.g-3.sp-cards > article.sp-card > picture + h3.hcard-t + p.hcard-p + p.sp-meta (b.sp-price + span) + p.sp-card-a
       ul.rows.sp-more > li > b + span ; p.micro.sp-menu-note
   section#marble.sp-band > figure.band.sp-bandfig > picture + video.sp-film2 + button.sp-vpause + figcaption.figcap
   section#practitioners.sp-people  .sec-h + .grid.g-3.sp-people-grid > article.sp-person > picture + h3.hcard-t + p.hcard-p + p.hcard-m
       p.micro.sp-honest (the honesty line, once on the page)
   section#visit.ground-light.sp-visit  .two-col.sp-visit-grid > (.sec-h + ul.rows.sp-facts + p.micro) | .tile.tile-4x5.sp-visit-fig
   section#questions.sp-questions  .two-col.sp-q-grid > (.sec-h + .tile.tile-4x3.sp-q-fig) | .sp-faq > details > summary + .sp-faq-b
   section#confirm.sp-cta.sec-flush  .tile.sp-cta-tile > picture + .sp-cta-scrim + .sp-cta-in
   footer.f-foot > .container.f-foot-in > a.f-brand + p

   No shader, no GSAP, zero WebGL contexts. The only motion is shared.js's reveal, the two muted
   film loops (each with its own pause control) and css transitions. Reduced motion is handled once
   in shared.js, plus the block at the foot of this file. */

/* ---------- face: Newsreader roman, 300 for display sizes, 400 for the small ones.
   The variable file and the fallback metrics are verbatim from assets/fonts/BRANDS.md (story block);
   no other demo loads the roman file, only the italic one. ---------- */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/newsreader-display.woff2') format('woff2')}
@font-face{font-family:'Newsreader Fallback';font-style:normal;src:local('Georgia');size-adjust:101.1%;ascent-override:72.7%;descent-override:26.2%;line-gap-override:0%}

/* ---------- brand hooks. Every pair below was measured against the ground it sits on:
   ink 16.3 / text2 10.1 / text3 8.4 on stone, text3 7.0 on the deepest well, ink on brass 7.8.
   Brass is never text on marble (4.2, short of AA), so on the light ground the accent role is ink. ---------- */
.fmt-spa{--b-ground:#12100F;--b-ground2:#1B1917;--b-ground3:#25221F;--b-ink:#F2EDE5;--b-text2:#C4BCB1;--b-text3:#B4ABA0;
  --b-accent:#C8A063;--b-accent-tint:#2A2118;--b-on-accent:#12100F;--b-line:rgba(242,237,229,.13);--b-line-control:rgba(242,237,229,.34);
  --b-surface:var(--b-ground2);--b-cta:var(--b-accent);--b-on-cta:var(--b-on-accent);--b-focus:var(--b-accent);--b-tab-rule:var(--b-accent);
  --b-glass:rgba(18,16,15,.78);--b-glass-line:rgba(242,237,229,.14);--b-dot:var(--b-accent);
  --b-scrim:rgba(18,16,15,.66);--b-scrim-ink:#F2EDE5;--b-scrim-solid:#12100F;
  --b-scrim-grad:linear-gradient(180deg,rgba(18,16,15,.06) 0%,rgba(18,16,15,.58) 50%,rgba(18,16,15,.88) 100%);
  --b-light:#EFE9DF;--b-light2:#E3DCD0;--b-light-ink:#17140F;--b-light-text2:#57514A;--b-light-text3:#56504A;
  --b-light-accent:#17140F;--b-light-accent-tint:#E0D6C4;
  --b-display:'Newsreader','Newsreader Fallback',Georgia,serif;--b-display-weight:300}
/* the canvas is cut square: a clinic reads in rules and edges, not in soft corners. The demo bar is
   chrome and keeps its own 9 px .rect radius, which is a literal in tokens.css and not a token. */
.fmt-spa .f-nav,.fmt-spa main,.fmt-spa .f-foot{--text-2:var(--b-text2);--text-3:var(--b-text3);--bg-3:var(--b-ground3);
  --line-control:var(--b-line-control);--r-tile:3px;--r-card:2px;--r-pill:2px}
.fmt-spa main ::selection,.fmt-spa .f-nav ::selection{background:var(--b-accent);color:var(--b-on-accent)}
.fmt-spa .ground-light{--b-focus:#17140F;--line-control:rgba(23,20,15,.42);--bg-3:#DCD3C5}
.fmt-spa .ground-light ::selection{background:var(--b-accent);color:var(--b-on-accent)}
/* shared.css dims .ex to .8 on a dark ground, which drops an 11 px line to 4.35:1. Full strength here. */
.fmt-spa .on-dark .ex{opacity:1;color:var(--b-text2);border-color:var(--b-line-control)}

/* ---------- display type: light, wide, one weight change ---------- */
.fmt-spa .f-brand,.fmt-spa main .h1,.fmt-spa main .h2,.fmt-spa main .hcard-t,.fmt-spa main .tile-t,.fmt-spa .figcap b{
  font-family:var(--b-display);font-weight:300}
.fmt-spa .f-brand{font-size:20px;font-weight:400;letter-spacing:.02em;gap:11px;white-space:nowrap}
.fmt-spa .f-brand .f-mark{width:22px;height:22px;color:var(--b-accent)}
@media (max-width:820px){.fmt-spa .f-brand{font-size:18px;gap:9px}.fmt-spa .f-brand .f-mark{width:20px;height:20px}}
/* the h1 has to stay the largest contentful paint on a page that opens with a photograph, so it is
   set to fill its column rather than to a measure, and the hero strip below is kept shallow. */
.fmt-spa main .h1{font-size:clamp(46px,8vw,118px);font-weight:300;letter-spacing:-.014em;line-height:1.02;max-width:none;padding-right:.03em}
@media (max-width:600px){.fmt-spa main .h1{font-size:clamp(46px,16.5vw,72px);line-height:1.03}}
.fmt-spa main .h2{font-size:clamp(32px,3.6vw,54px);font-weight:300;letter-spacing:-.006em;line-height:1.1;max-width:17ch;margin-bottom:16px}
.fmt-spa main .lead{color:var(--text-2);font-weight:400}
/* the eyebrow is the one place the brass speaks in small type */
.fmt-spa main .k{font-size:11px;letter-spacing:.22em;color:var(--b-accent)}
.fmt-spa .ground-light .k{color:#7A5A1E}
.fmt-spa main .tile-k{letter-spacing:.18em;font-size:11px}

/* ---------- chrome on stone ---------- */
.fmt-spa .f-nav{background:color-mix(in srgb,var(--b-ground) 88%,transparent)}
.fmt-spa .f-tabs a{opacity:.72;letter-spacing:.01em}
.fmt-spa .f-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--b-tab-rule);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.fmt-spa .f-tabs a.is-on::after,.fmt-spa .f-tabs a[aria-current]::after,.fmt-spa .f-tabs a:hover::after{transform:scaleX(1);transform-origin:left}
.fmt-spa main .pill-ghost,.fmt-spa .f-nav .pill-ghost{background:transparent;border-color:var(--line-control);color:var(--ink)}
.fmt-spa main .pill-ghost:hover{background:var(--bg-2);border-color:var(--ink)}
.fmt-spa .pill-ink:hover{background:#D8B279}
.fmt-spa main .pill,.fmt-spa .f-nav .pill{letter-spacing:.02em;transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.fmt-spa main .pill:hover,.fmt-spa .f-nav .pill:hover{transform:translateY(-1px)}
.fmt-spa .f-foot{padding-top:40px}
.fmt-spa .f-foot p{color:var(--text-3)}
.fmt-spa .f-foot .f-brand{font-size:18px}

/* ---------- the two grounds ----------
   Stone: a very low warm wash off the top left, so the page is never a flat black.
   Marble: two crossed vein families and a light from the top left, drawn in gradients, no raster. */
.fmt-spa main{background:
  radial-gradient(70% 46% at 12% 0%,rgba(200,160,99,.055),transparent 62%),
  radial-gradient(56% 40% at 96% 12%,rgba(242,237,229,.035),transparent 66%),
  var(--b-ground)}
.fmt-spa .ground-light{position:relative;isolation:isolate}
/* the veining is drawn, not tiled: four long strokes at slightly different angles and two soft
   clouds, so no repeat can set up a lattice across the section the way a tiled pattern does */
.fmt-spa .ground-light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(101deg,transparent 21.4%,rgba(58,52,42,.085) 21.8%,rgba(58,52,42,.03) 22.5%,transparent 23.4%),
    linear-gradient(96deg,transparent 43.2%,rgba(58,52,42,.055) 43.5%,transparent 44.6%),
    linear-gradient(107deg,transparent 62.8%,rgba(58,52,42,.07) 63.1%,rgba(58,52,42,.025) 64%,transparent 65.2%),
    linear-gradient(92deg,transparent 84.1%,rgba(58,52,42,.045) 84.4%,transparent 85.3%),
    radial-gradient(72% 54% at 26% 8%,rgba(255,255,255,.78),transparent 70%),
    radial-gradient(58% 46% at 86% 88%,rgba(120,109,88,.075),transparent 74%)}

/* ---------- hero: copy wide on the left, one bounded tile on the right ----------
   The h1 has to stay the largest paint, so the photograph is a strip at the head of the tile and
   never a cover, and the panel starts below most of it. */
.fmt-spa .sp-hero{padding-top:clamp(44px,6vw,92px);padding-bottom:clamp(44px,6.5vw,96px)}
.fmt-spa .sp-grid{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,clamp(396px,37%,496px));gap:clamp(32px,5vw,88px)}
.fmt-spa .sp-copy{padding-top:clamp(8px,2.4vw,40px)}
.fmt-spa .sp-copy>.k{margin-bottom:clamp(20px,2.4vw,32px)}
.fmt-spa .sp-copy>.h1{margin-bottom:clamp(24px,2.8vw,38px)}
.fmt-spa .sp-copy>.lead{margin-bottom:clamp(26px,3vw,38px);max-width:40ch}
.fmt-spa .sp-copy>.micro{margin-top:clamp(26px,3vw,42px);padding-top:16px;border-top:1px solid var(--b-accent);max-width:30ch;font-size:15px;color:var(--text-2);letter-spacing:.01em}

.fmt-spa .sp-tile.tile{aspect-ratio:auto;min-height:0;display:block;background:var(--b-ground2);
  border:1px solid var(--b-glass-line);box-shadow:0 44px 90px -54px rgba(0,0,0,.9),inset 0 1px 0 rgba(242,237,229,.05);
  padding:0 clamp(16px,2vw,24px) clamp(16px,2vw,24px)}
.fmt-spa .sp-tile>.tile-scrim,.fmt-spa .sp-tile>.tile-wash{display:none}
.fmt-spa .sp-shot{position:absolute;left:0;right:0;top:0;bottom:auto;width:100%;height:auto;aspect-ratio:16/9;z-index:0;overflow:hidden;pointer-events:none}
.fmt-spa .sp-frame{position:absolute;inset:0;display:block}
.fmt-spa .sp-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the film covers the still; .is-off (no play, an error, a phone, reduced motion) drops it back to the
   still underneath, which is the film's own first frame, so nothing jumps */
.fmt-spa .sp-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .8s var(--ease)}
.fmt-spa .sp-film.is-off{opacity:0;visibility:hidden}
/* the room warms when a time is taken: a low brass light from the left, css only, so it holds with no js work */
.fmt-spa .sp-warm{position:absolute;left:-6%;top:12%;width:62%;height:86%;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(48% 42% at 38% 56%,rgba(200,160,99,.46),rgba(200,160,99,0) 74%);transition:opacity 1.2s var(--ease)}
.fmt-spa .sp-tile.is-lit .sp-warm{opacity:1}
.fmt-spa .sp-shot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,15,.12) 0%,rgba(18,16,15,.24) 42%,rgba(27,25,23,.88) 82%,#1B1917 100%)}
.fmt-spa .sp-state{position:absolute;z-index:3;left:clamp(12px,1.8vw,18px);top:clamp(12px,1.8vw,18px);margin:0;
  display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border:1px solid rgba(242,237,229,.18);
  background:rgba(18,16,15,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--b-ink);line-height:1.2}
.fmt-spa .sp-state-d{width:6px;height:6px;border-radius:50%;background:var(--b-text3);flex:none;transition:background .6s var(--ease)}
.fmt-spa .sp-tile.is-lit .sp-state-d{background:var(--b-accent);box-shadow:0 0 0 3px rgba(200,160,99,.26)}
.fmt-spa .sp-panel{position:relative;z-index:2;display:grid;gap:clamp(12px,1.6vw,16px);padding-top:56%}

/* the assistant card: stone glass, in the flow, over the fade */
.fmt-spa .sp-tile .chat{position:relative;left:auto;bottom:auto;width:auto;margin:0}
.fmt-spa .sp-chat,.fmt-spa .sp-chat.on-dark{--ink:var(--b-ink);--text-2:var(--b-text2);--text-3:var(--b-text3);
  --line:rgba(242,237,229,.16);--b-surface:rgba(242,237,229,.07);
  background:var(--b-glass);border-color:var(--b-glass-line);color:var(--ink);border-radius:3px;box-shadow:0 26px 52px -34px rgba(0,0,0,.8)}
.fmt-spa .sp-chat .bub{border-radius:12px}
.fmt-spa .sp-chat .bub.in{background:var(--b-surface);border-color:var(--line);color:var(--ink);border-bottom-left-radius:3px}
.fmt-spa .sp-chat .bub.out{background:var(--b-accent);color:var(--b-on-accent);border-bottom-right-radius:3px}
.fmt-spa .sp-chat .chat-log{min-height:0;gap:8px}
.fmt-spa .sp-chat .chat-head{letter-spacing:.02em}
.fmt-spa .sp-chat .chat-head .dot{background:var(--b-accent);box-shadow:0 0 0 3px rgba(200,160,99,.22)}
.fmt-spa .booked{align-self:flex-start;font-size:16px;line-height:1.2;font-weight:400;letter-spacing:.01em;
  color:var(--b-on-accent);background:var(--b-accent);padding:6px 14px;border-radius:2px;opacity:0;transition:opacity .45s var(--ease)}
.fmt-spa .booked.is-in{opacity:1}

/* ---------- the week ---------- */
.fmt-spa .sp-cal{background:rgba(37,34,31,.94);border:1px solid rgba(242,237,229,.11);padding:clamp(14px,1.8vw,20px)}
.fmt-spa .sp-cal-k{margin-bottom:12px}
.fmt-spa .sp-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:stretch}
.fmt-spa .sp-day{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0}
.fmt-spa .sp-dn{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);text-align:center;margin:0}
.fmt-spa .sp-dn abbr{text-decoration:none;border:0}
.fmt-spa .sp-slots{display:grid;gap:6px;min-width:0;align-content:start}
.fmt-spa .sp-slot{display:flex;align-items:center;justify-content:center;height:36px;padding:0 2px;border:1px solid transparent;
  background:rgba(242,237,229,.05);font:inherit;font-weight:500;font-size:clamp(11px,.95vw,13px);line-height:1;
  color:var(--text-3);text-align:center;white-space:nowrap;overflow:hidden}
.fmt-spa .sp-day.is-shut .sp-slots{align-content:stretch}
.fmt-spa .sp-day.is-shut .sp-slot{height:100%;min-height:36px;background:transparent;border:1px dashed rgba(242,237,229,.18)}
/* the three open hours are the only pressable things on the page: brass rule, brass dot, cream text */
.fmt-spa button.sp-slot{cursor:pointer;color:var(--ink);background:var(--b-accent-tint);border-color:var(--b-accent);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.fmt-spa button.sp-slot::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--b-accent);margin-right:6px;flex:none}
.fmt-spa button.sp-slot:hover{background:var(--b-accent);color:var(--b-on-accent);transform:translateY(-1px)}
.fmt-spa button.sp-slot:hover::before{background:var(--b-on-accent)}
.fmt-spa button.sp-slot:active{transform:scale(.98)}
.fmt-spa button.sp-slot.is-booked{background:var(--b-accent);color:var(--b-on-accent);border-color:var(--b-accent);cursor:default;transform:none}
.fmt-spa button.sp-slot.is-booked::before{display:none}
.fmt-spa .sp-cal-f{margin:14px 0 0;font-size:13px;color:var(--text-2);line-height:1.5;max-width:44ch}

@media (max-width:1100px){
  .fmt-spa .sp-grid{grid-template-columns:1fr}
  .fmt-spa .sp-copy{padding-top:0}
  .fmt-spa .sp-tile.tile{max-width:640px}
  .fmt-spa .sp-shot{aspect-ratio:2/1}
  .fmt-spa .sp-panel{padding-top:52%}
}
/* stacked on a phone the strip takes a shallower crop still, so the headline above it stays the
   largest paint without the room having to shrink on the wide layouts too */
@media (max-width:600px){
  .fmt-spa .sp-shot{aspect-ratio:11/4}
  .fmt-spa .sp-panel{padding-top:38%}
}
@media (max-width:420px){
  .fmt-spa .sp-week{gap:4px}
  .fmt-spa .sp-slot{height:32px}
  .fmt-spa button.sp-slot::before{margin-right:3px;width:4px;height:4px}
}

/* ---------- the pause control both films carry (WCAG 2.2.2: each loop runs past five seconds) ----------
   It is not a .pill or a .rect on purpose: those carry the closed demo label list, and this control has
   to say what it does. format.js hides it whenever nothing is moving. */
.fmt-spa .sp-vpause{position:absolute;z-index:4;right:clamp(10px,1.6vw,16px);bottom:clamp(10px,1.6vw,16px);
  display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 13px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--b-ink);background:rgba(18,16,15,.66);border:1px solid rgba(242,237,229,.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s var(--ease),border-color .2s var(--ease)}
.fmt-spa .sp-vpause:hover{background:rgba(18,16,15,.86);border-color:var(--b-accent)}
.fmt-spa .sp-vpause[hidden]{display:none}
/* two bars while it plays, a triangle once it is held. Borders, so there is nothing to mask. */
.fmt-spa .sp-vpause-i{width:9px;height:10px;flex:none;box-sizing:border-box;border-left:3px solid currentColor;border-right:3px solid currentColor}
.fmt-spa .sp-vpause.is-paused .sp-vpause-i{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ---------- treatments: marble, three cards then two rows ---------- */
.fmt-spa .sp-treat .sec-h{max-width:34ch}
.fmt-spa .sp-menu{margin-top:clamp(28px,3.4vw,44px)}
.fmt-spa .sp-menu>.tile-k{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.fmt-spa .sp-cards{gap:clamp(22px,3vw,44px)}
.fmt-spa .sp-card{display:grid;gap:0;align-content:start}
.fmt-spa .sp-card>picture{display:block;overflow:hidden;background:var(--bg-3);transform:translateZ(0)}
.fmt-spa .sp-card>picture>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease)}
.fmt-spa .sp-card:hover>picture>img{transform:scale(1.03)}
.fmt-spa .sp-card>.hcard-t{padding:20px 0 0;font-size:clamp(25px,2.1vw,31px);line-height:1.12;color:var(--ink)}
.fmt-spa .sp-card>.hcard-p{padding:10px 0 0;font-size:16px;color:var(--text-2);line-height:1.55;max-width:34ch}
.fmt-spa .sp-meta{display:flex;align-items:baseline;gap:14px;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.fmt-spa .sp-price{font-family:var(--b-display);font-weight:400;font-size:21px;letter-spacing:.01em;color:var(--ink)}
.fmt-spa .sp-meta span{font-size:14px;color:var(--text-2)}
.fmt-spa .sp-card-a{margin-top:16px}
.fmt-spa .sp-more{margin-top:clamp(26px,3vw,40px)}
.fmt-spa .sp-more li{gap:20px}
.fmt-spa .sp-more li b{font-weight:400;font-size:16px}
.fmt-spa .sp-more li span{text-align:right;white-space:nowrap}
.fmt-spa .sp-menu-note{margin-top:18px;color:var(--text-2)}

/* ---------- the one full bleed band: marble, with the second film over it ---------- */
.fmt-spa .sp-band{padding:0;background:var(--b-ground)}
.fmt-spa .sp-bandfig{--band-max:min(66vh,740px);background:var(--b-ground3)}
.fmt-spa .sp-film2{position:absolute;left:0;top:0;width:100%;z-index:1;aspect-ratio:21/9;max-height:var(--band-max);
  object-fit:cover;display:block;transition:opacity 1s var(--ease)}
.fmt-spa .sp-film2.is-off{opacity:0;visibility:hidden}
.fmt-spa .sp-bandfig .sp-vpause{bottom:auto;top:clamp(10px,1.6vw,16px)}
/* the hero control is a child of the tile, not of the strip: .sp-panel sits at z-index 2 and its
   transparent top padding lies over the whole photograph, so a button inside the strip (z-index 0)
   was visible and unclickable. As a sibling at z-index 5 it takes its own clicks and nothing in the
   picture moves. It sits at the top beside the state chip, because the foot of the strip is where
   the assistant card begins and a control half under a card is not a control. */
.fmt-spa .sp-tile > .sp-vpause{z-index:5;top:clamp(12px,1.8vw,18px);bottom:auto;right:clamp(12px,1.8vw,18px)}
.fmt-spa .sp-bandfig .figcap{padding-top:14px}
.fmt-spa .sp-bandfig .figcap .k{color:var(--b-accent)}

/* ---------- practitioners ---------- */
.fmt-spa .sp-people-grid{gap:clamp(22px,3vw,44px)}
.fmt-spa .sp-person{display:grid;gap:0;align-content:start}
.fmt-spa .sp-person>picture{display:block;overflow:hidden;background:var(--bg-3);transform:translateZ(0)}
.fmt-spa .sp-person>picture>img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .9s var(--ease)}
.fmt-spa .sp-person:hover>picture>img{transform:scale(1.03)}
.fmt-spa .sp-person>.hcard-t{padding:20px 0 0;font-size:clamp(23px,1.9vw,28px);line-height:1.15;color:var(--ink)}
.fmt-spa .sp-person>.hcard-p{padding:8px 0 0;font-size:15px;color:var(--text-2);line-height:1.5;max-width:30ch}
.fmt-spa .sp-person>.hcard-m{padding:10px 0 0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--b-accent)}
.fmt-spa .sp-honest{margin-top:clamp(30px,3.6vw,52px);padding-top:16px;border-top:1px solid var(--line);max-width:64ch;color:var(--text-2)}

/* ---------- visit: the facts on the left, one resting portrait on the right ---------- */
.fmt-spa .sp-visit-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(28px,4.5vw,72px)}
.fmt-spa .sp-visit .sec-h{margin-bottom:clamp(22px,2.6vw,34px)}
.fmt-spa .sp-facts li{align-items:start;gap:24px;padding:16px 0}
.fmt-spa .sp-facts li b{flex:none;font-weight:400;min-width:9ch}
.fmt-spa .sp-facts li span{text-align:right;max-width:34ch}
.fmt-spa .sp-visit-note{margin-top:18px;color:var(--text-2)}
.fmt-spa .sp-visit-fig{background:var(--bg-3)}
@media (max-width:900px){.fmt-spa .sp-visit-grid{grid-template-columns:1fr}.fmt-spa .sp-visit-fig{max-width:460px}}
/* on a phone the two columns of a fact row leave the value four or five words wide and ragged on
   both edges, so the label sits above it instead and everything reads from one left margin */
@media (max-width:600px){
  .fmt-spa .sp-facts li{display:grid;gap:4px}
  .fmt-spa .sp-facts li b{min-width:0}
  .fmt-spa .sp-facts li span{text-align:left;max-width:none}
}

/* ---------- questions ---------- */
.fmt-spa .sp-questions{border-top:1px solid var(--line)}
.fmt-spa .sp-q-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:clamp(28px,4.5vw,80px)}
.fmt-spa .sp-q-head{margin-bottom:0}
.fmt-spa .sp-q-fig{margin-top:clamp(22px,2.6vw,36px);background:var(--bg-3)}
/* .two-col's own stack rule is one class deep, so a two class override here outranks it inside its
   media query: every grid this file re-proportions has to say again where it collapses */
@media (max-width:900px){.fmt-spa .sp-q-grid{grid-template-columns:1fr}.fmt-spa .sp-q-fig{max-width:460px}}
.fmt-spa .sp-faq{display:grid}
.fmt-spa .sp-faq details{border-top:1px solid var(--line)}
.fmt-spa .sp-faq details:last-child{border-bottom:1px solid var(--line)}
.fmt-spa .sp-faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;font-size:clamp(17px,1.3vw,19px);line-height:1.4;color:var(--ink);cursor:pointer;list-style:none}
.fmt-spa .sp-faq summary::-webkit-details-marker{display:none}
.fmt-spa .sp-faq summary::after{content:"+";flex:none;color:var(--b-accent);font-size:18px;line-height:1}
.fmt-spa .sp-faq details[open] summary::after{content:"\2013"}
.fmt-spa .sp-faq summary:hover{color:var(--b-accent)}
.fmt-spa .sp-faq-b{padding:0 0 20px}
.fmt-spa .sp-faq-b p{margin:0;font-size:16px;line-height:1.6;color:var(--text-2);max-width:58ch}

/* ---------- the close: the doorway under a stone scrim, no shader ---------- */
.fmt-spa .sp-cta{padding-bottom:clamp(64px,7vw,110px)}
.fmt-spa .sp-cta-tile{aspect-ratio:auto;min-height:clamp(360px,42vw,520px);display:flex;align-items:center;
  border:1px solid var(--b-glass-line);background:var(--b-ground2)}
/* the copy keeps a .95 ground under it either way; the far edge is let go so the door is still a
   photograph and not a black rectangle */
.fmt-spa .sp-cta-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(18,16,15,.95) 0 34%,rgba(18,16,15,.7) 62%,rgba(18,16,15,.24) 100%)}
.fmt-spa .sp-cta-in{position:relative;z-index:2;padding:clamp(28px,4.4vw,72px);max-width:34rem}
@media (max-width:900px){
  .fmt-spa .sp-cta-tile{align-items:flex-end;min-height:clamp(440px,92vw,560px)}
  .fmt-spa .sp-cta-scrim{background:linear-gradient(180deg,rgba(18,16,15,.18) 0%,rgba(18,16,15,.7) 44%,rgba(18,16,15,.95) 74%)}
}
.fmt-spa .sp-cta-in .h2{margin-bottom:14px}
.fmt-spa .sp-cta-in .sub{color:var(--text-2)}

/* ---------- reduced motion: nothing loops, nothing scales, nothing drifts ---------- */
@media (prefers-reduced-motion:reduce){
  .fmt-spa .sp-card>picture>img,.fmt-spa .sp-person>picture>img,.fmt-spa .sp-film,.fmt-spa .sp-film2,
  .fmt-spa .sp-warm,.fmt-spa .sp-state-d,.fmt-spa .booked,.fmt-spa .f-tabs a::after{transition:none}
  .fmt-spa .sp-card:hover>picture>img,.fmt-spa .sp-person:hover>picture>img{transform:none}
  .fmt-spa main .pill:hover,.fmt-spa .f-nav .pill:hover,.fmt-spa button.sp-slot:hover{transform:none}
}