/* Splendora Wellness Spa — a gallery spread.
   Fourth structure in this set, and deliberately none of the previous three: no carousel
   (La Bella), no pinned horizontal rail (Levia), no tariff dial or pinned medallion
   (Spararaa). The devices here are a split opening, a running head that stays with you down
   the left of each spread, therapies grouped by intent behind tabs, and a room band you
   swipe. Palette and photography both come off the new emblem: cool stone, charcoal slate,
   and a gold tritone over every photograph. */

:root {
  /* sampled from the emblem: slate #191613, gold average #ca9860 */
  --slate: #191613;
  --slate-2: #221d19;
  --stone: #f2efe9;          /* cool off-white, not a warm cream */
  --stone-2: #e7e2d9;
  --gold: #7f5b1c;           /* gold dark enough as ink on stone (5.4:1) */
  --gold-lit: #ca9860;       /* the emblem's own gold, for use on slate (7.0:1) */
  --ink: #241f1b;
  --ink-dim: #665d54;
  --rule: rgba(36, 31, 27, .16);
  --rule-gold: rgba(127, 91, 28, .3);
  --rule-lit: rgba(202, 152, 96, .28);

  --display: "Playfair Display", Georgia, serif;
  --text: "Inter", "Helvetica Neue", Arial, sans-serif;

  --wrap: 76rem;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --gap-y: clamp(3.6rem, 7vw, 7rem);
  --r-s: 3px;
  --r-m: 6px;
  --r-l: 10px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --head-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }


body {
  margin: 0; background: var(--stone); color: var(--ink);
  font-family: var(--text); font-weight: 300; line-height: 1.72;
  font-size: clamp(1rem, .97rem + .18vw, 1.05rem);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
picture { display: block; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.14; }
p { margin: 0 0 1.1em; }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
section[id] { scroll-margin-top: 4.5rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip { position: fixed; top: .5rem; left: .5rem; z-index: 200; padding: .6rem 1rem; background: var(--slate); color: var(--stone); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- header ---------- */

.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .7rem var(--pad);
  /* the opening is split light/dark, so a transparent bar loses its type over the photograph
     half. The wash used to fade to .32 by 70%, which is exactly where the type sits: over the
     brightest hero frame that left the gold at 3.3:1. It now holds .84+ across the bar and
     only softens at the very bottom edge. */
  background: linear-gradient(180deg, rgba(21, 18, 16, .92) 0%, rgba(21, 18, 16, .84) 66%, rgba(21, 18, 16, .42) 100%);
  border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.head.is-stuck {
  background: rgba(25, 22, 19, .95); backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-lit);
}
.mark { display: flex; align-items: center; gap: .65rem; margin-right: auto; }
/* the hero already carries the full lockup, so the bar shows only the typed name until it is
   past it. on a phone the stacked split put the two marks directly above one another. */
.mark-badge { width: 0; opacity: 0; overflow: hidden; transition: width .45s var(--ease), opacity .45s var(--ease); }
.head.is-stuck .mark-badge { width: 42px; opacity: 1; }
.mark-badge img { width: 42px; height: auto; }
.mark-type { display: grid; line-height: 1.05; color: var(--stone); }
.mark-type b { font-family: var(--display); font-weight: 500; font-size: 1.12rem; letter-spacing: .02em; }
.mark-type i {
  font-style: normal; font-size: .54rem; letter-spacing: .32em; text-transform: uppercase;
  /* gold only reaches 3.4:1 over the pale end of the photograph, so it waits for the solid bar */
  color: rgba(242, 239, 233, .92); margin-top: .18rem;
}
.head.is-stuck .mark-type i { color: var(--gold-lit); }

.nav { display: none; gap: 1.9rem; }
.nav a { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 233, .9); transition: color .3s var(--ease); }
/* over the photograph half the gold only reaches 3.4:1, so it waits until the bar is solid */
.nav a:hover { color: #fff; }
.head.is-stuck .nav a:hover { color: var(--gold-lit); }

.head-call { display: none; text-align: right; line-height: 1.25; }
.head-call span { display: block; font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(242, 239, 233, .82); }
.head-call b { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--stone); font-variant-numeric: lining-nums tabular-nums; }
.head-call:hover b { color: #fff; }
.head.is-stuck .head-call:hover b { color: var(--gold-lit); }

.burger { width: 42px; height: 42px; display: grid; place-content: center; gap: 6px; padding: 0; border: 1px solid rgba(242, 239, 233, .38); border-radius: var(--r-s); background: none; }
.burger span { display: block; width: 14px; height: 1px; background: var(--stone); transition: transform .35s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
  padding: 5rem var(--pad); text-align: center; color: var(--stone); background: var(--slate);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.drawer[hidden] { display: flex; }
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer nav { display: grid; width: min(100%, 20rem); }
.drawer nav a { font-family: var(--display); font-size: 1.7rem; padding: .75rem 0; border-bottom: 1px solid var(--rule-lit); }
.drawer-call { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lit); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.9rem; border: 1px solid transparent; border-radius: var(--r-m);
  font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  transition: background .38s var(--ease), color .38s var(--ease), border-color .38s var(--ease);
}
.btn-gold { background: var(--gold-lit); color: var(--slate); }
.btn-gold:hover { background: var(--stone); }
.btn-quiet { border-color: rgba(242, 239, 233, .42); color: var(--stone); }
.btn-quiet:hover { border-color: var(--gold-lit); color: var(--gold-lit); }

/* ---------- the split opening ---------- */

.open { display: grid; background: var(--slate); color: var(--stone); }
.open-panel {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(var(--head-h) + clamp(2.6rem, 6vw, 4.5rem)) var(--pad) clamp(2.6rem, 6vw, 4rem);
}
/* the new artwork is gold on transparent, so the hero carries the whole lockup and the bar
   and closing band carry the monogram on its own */
.lockup { margin-bottom: 1.8rem; }
.lockup img { width: min(62vw, 22rem); height: auto; }
.mark-lg { margin-bottom: 1.4rem; }
.mark-lg img { width: 104px; height: auto; }

.eyebrow {
  margin: 0 0 1.2rem; font-size: .58rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold-lit);
}
.eyebrow span { opacity: .6; }

.open h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); letter-spacing: -.01em; }
.open h1 em { font-style: italic; color: var(--gold-lit); }
.open-lead { margin: 1.3rem 0 2rem; max-width: 30rem; color: rgba(242, 239, 233, .78); }
.open-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.open-facts {
  display: grid; gap: 1.1rem; margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--rule-lit); width: 100%;
}
.open-facts dt { font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-lit); margin-bottom: .3rem; }
.open-facts dd { font-size: .95rem; color: rgba(242, 239, 233, .86); }

.open-photo { position: relative; overflow: hidden; height: 42svh; min-height: 14rem; }
.open-photo .frame {
  position: absolute; inset: 0;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.5s cubic-bezier(.6, 0, .2, 1);
}
/* every frame is absolute. The first used to sit in flow so the container had a height, but it
   then sized to its own 1.4 aspect (278px) while the absolute frames filled the container
   (354px) — and the 76px difference showed the tail of the next photograph below the first. */
.open-photo .frame.is-on { clip-path: circle(78% at 50% 50%); z-index: 1; }
.open-photo .frame.was-on { clip-path: circle(78% at 50% 50%); }
.open-photo img { width: 100%; height: 100%; object-fit: cover; }
.open-photo .frame.is-on img { animation: drift 8s ease-out forwards; }
@keyframes drift { from { scale: 1.06; } to { scale: 1; } }

/* ---------- the spread: a running head that stays, content that scrolls ---------- */

.spread { padding-block: var(--gap-y); }
.spread-alt { background: var(--stone-2); }
.spread-grid { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); }

.runner { position: relative; }
.runner-num {
  margin: 0 0 .5rem; font-family: var(--display); font-size: .8rem; letter-spacing: .1em;
  color: var(--gold); font-variant-numeric: lining-nums;
}
.runner-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); }
.runner-note { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-dim); max-width: 22rem; }
/* the lotus from the logo is the section ornament. the runner used to end in a 2rem gold
   rule, which is exactly the drawn dash the client does not want. */
.ornament { margin-top: 1.1rem; }
.ornament img { width: 30px; height: auto; }
.rooms .ornament img, .band-dark .ornament img { width: 32px; }

.lede { font-family: var(--display); font-size: clamp(1.12rem, 1.02rem + .55vw, 1.42rem); line-height: 1.5; margin-bottom: 1.3rem; }
.spread-body p { color: var(--ink-dim); max-width: 42rem; }
.spread-body .lede { color: var(--ink); }

.ticks { display: grid; gap: .75rem; margin-top: 1.8rem; }
.ticks li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  background: var(--gold); rotate: 45deg;
}

/* ---------- tabs ---------- */

/* ---------- therapies ----------
   The tabs say what each group is for, not just its name, and the panel is a spread: the
   photograph runs to the panel's edge rather than sitting inset in a box. */

.tabs { display: grid; gap: .5rem; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.tabs button {
  display: grid; gap: .25rem; padding: .95rem 1.15rem; cursor: pointer; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--r-s); background: none;
  font-family: var(--text); color: var(--ink-dim);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tabs button b {
  font-family: var(--display); font-weight: 400; font-size: 1.06rem; letter-spacing: .01em;
  color: var(--ink);
}
.tabs button i {
  font-style: normal; font-size: .72rem; line-height: 1.35;
}
.tabs button:hover { border-color: var(--gold); }
.tabs button.is-on {
  background: var(--slate); border-color: var(--slate); color: rgba(242, 239, 233, .76);
}
.tabs button.is-on b { color: var(--gold-lit); }

.panel {
  display: grid; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--stone);
}
.spread-alt .panel { background: rgba(242, 239, 233, .62); }
.panel[hidden] { display: none; }
.panel-photo { min-height: 13rem; }
.panel-photo img { width: 100%; height: 100%; object-fit: cover; }
.panel-body { display: grid; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem); }

.panel article { position: relative; padding-left: 2.6rem; }
.panel article + article { margin-top: clamp(1.4rem, 3vw, 2rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--rule); }
.a-num {
  position: absolute; left: 0; top: .25rem; margin: 0;
  font-family: var(--display); font-size: .82rem; color: var(--gold);
  font-variant-numeric: lining-nums;
}
.panel article + article .a-num { top: calc(clamp(1.4rem, 3vw, 2rem) + .25rem); }
.panel h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.46rem); margin-bottom: .45rem; }
.panel p { margin: 0 0 .9rem; font-size: .94rem; color: var(--ink-dim); }

/* the facts sit on one line: pressure scale, then what it is done with */
.a-facts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem; margin: 0;
  padding-top: .7rem; border-top: 1px solid rgba(36, 31, 27, .08);
}
.scale {
  display: inline-flex; flex-wrap: wrap; gap: .1rem .8rem;
  font-family: var(--text); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
}
.scale span { color: var(--ink-dim); transition: color .3s var(--ease); }
.scale[data-level="1"] span:nth-child(1),
.scale[data-level="2"] span:nth-child(2),
.scale[data-level="3"] span:nth-child(3) {
  color: var(--gold); font-weight: 600; letter-spacing: .22em;
}
.scale[data-level="0"] { display: none; }        /* the jacuzzi has no pressure to show */
.panel .tag {
  margin: 0 0 0 auto; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}

.panel-foot { margin: 1.3rem 0 0; font-size: .92rem; }
.panel-foot a { color: var(--gold); border-bottom: 1px solid var(--rule-gold); }

/* ---------- the room band: swipe, not scroll hijack ---------- */

.rooms { padding-block: var(--gap-y); background: var(--slate); color: var(--stone); }
.runner-flat { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.rooms .runner-num { color: var(--gold-lit); }

.band {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 30rem); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--pad); padding-bottom: .5rem;
}
.band::-webkit-scrollbar { display: none; }
.band li { scroll-snap-align: center; }
.band picture { border-radius: var(--r-l); overflow: hidden; }
/* height: auto matters — the img carries width/height attributes, and Chrome maps those to
   CSS width/height, which makes the box definite and aspect-ratio inert */
.band img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; }
.band p { margin: 1rem 0 0; font-size: .92rem; color: rgba(242, 239, 233, .74); }
.band p b {
  display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem;
  color: var(--stone); margin-bottom: .3rem;
}

/* ---------- visit ---------- */

.plate {
  display: grid; gap: 1.3rem; padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--rule-gold); border-radius: var(--r-m); background: var(--stone-2);
  margin-bottom: 1.6rem;
}
.spread-alt .plate { background: var(--stone); }
.plate > div { display: grid; gap: .35rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--rule); }
.plate > div:last-child { padding-bottom: 0; border-bottom: 0; }
.plate dt { font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.plate dd { font-size: 1rem; line-height: 1.6; }
.plate dd a { color: var(--slate); border-bottom: 1px solid var(--rule-gold); }

/* ---------- closing ---------- */

.closing {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(4rem, 9vw, 7rem); background: var(--slate); color: var(--stone);
}
.closing-bg { position: absolute; inset: 0; z-index: -2; }
.closing-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(.8); transform: scale(1.06); }
.closing::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(21, 18, 16, .82), rgba(21, 18, 16, .9));
}
.closing-in { display: grid; justify-items: center; text-align: center; }
.closing h2 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); margin-bottom: 1.6rem; }
.closing-note { margin: 1.4rem 0 0; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(242, 239, 233, .66); }

/* ---------- footer ---------- */

.foot { padding-block: clamp(2.2rem, 4vw, 3rem); }
.foot-grid { display: grid; gap: .8rem; justify-items: center; text-align: center; }
.foot p { margin: 0; font-size: .84rem; color: var(--ink-dim); }
.foot-mark { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.foot-mark i { font-style: normal; font-family: var(--text); font-size: .54rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-left: .4rem; }
.foot small { font-size: .72rem; color: var(--ink-dim); }

/* ---------- mobile call bar ---------- */

.callbar {
  /* pinned to the dynamic viewport, not to bottom: 0. Chrome's URL bar changes the visible
     height as you scroll, and a bottom-anchored fixed element does not follow it — which left a
     strip of page below the bar when the bar reappeared. 100dvh tracks that change. */
  position: fixed; left: 0; right: 0; top: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding-bottom: min(env(safe-area-inset-bottom, 0px), 8px);
  background: var(--slate); color: var(--stone);
  font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transform: translateY(100dvh);
  transition: transform .45s var(--ease);
}
.callbar.is-on { transform: translateY(calc(100dvh - 100%)); }


/* ---------- reveal ---------- */

.rise { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }

/* ---------- breakpoints ---------- */

@media (max-width: 899px) {
  body { padding-bottom: 52px; }

  /* photograph first, then the dark panel — but faded into it rather than butted against it.
     A hard seam across the middle read as two unrelated blocks. */
  .open { display: flex; flex-direction: column; min-height: 100svh; }
  .open-photo {
    order: -1; height: 54svh; min-height: 17rem;
    -webkit-mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, .45) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, .45) 82%, transparent 100%);
  }
  .open-photo img { height: 100%; }
  /* the mark rises into the faded foot of the photograph, so the two are one composition */
  .open-panel { margin-top: -4.5rem; padding-top: 0; position: relative; z-index: 1; }
  .lockup img { width: min(48vw, 13rem); }
  .open h1 { font-size: clamp(2.1rem, 1.5rem + 3.2vw, 3rem); }
  .open-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .open-facts dd { font-size: .8rem; line-height: 1.45; }
  .open-facts dt { font-size: .5rem; letter-spacing: .2em; }
}

/* --- the phone: tabs and what they switch must be on one screen ---
   Stacked tabs with their promise lines took 238px and the photograph 446px, so the first
   therapy began at 799px on an 844px screen: you tapped a tab, then scrolled to see what
   changed, then scrolled back to change it again. Names only, three across, pinned. */
@media (max-width: 599px) {
  .tabs {
    position: sticky; top: var(--head-h); z-index: 6;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem;
    margin-bottom: .9rem; padding: .55rem 0;
    background: var(--stone-2);
  }
  .tabs button { padding: .6rem .4rem; text-align: center; justify-items: center; }
  .tabs button b { font-size: .92rem; }
  .tabs button i { display: none; }              /* the runner note already explains the grouping */
  .panel-photo { min-height: 0; height: 12rem; }
  .panel-body { padding: 1.1rem; }
  .panel article { padding-left: 2.2rem; }
  .panel p { margin-bottom: .7rem; }
}

@media (min-width: 600px) {
  .open-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel { grid-template-columns: 38% 1fr; align-items: stretch; }
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
}

@media (min-width: 900px) {
  .open { grid-template-columns: 48fr 52fr; align-items: stretch; min-height: 100svh; }
  .open-panel { justify-content: center; padding-inline: clamp(2rem, 5vw, 5rem); }
  .open-photo { height: 100%; }
  .spread-grid { grid-template-columns: 15rem 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .runner { position: sticky; top: calc(var(--head-h) + 2rem); align-self: start; }
  .band { grid-auto-columns: min(40vw, 27rem); padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); }
  .nav { display: flex; }
  .head-call { display: block; margin-left: 1rem; }   /* block, not flex: label above number */
  .burger, .callbar, .drawer, .drawer[hidden] { display: none; }
  .foot-grid { grid-template-columns: auto 1fr auto; align-items: baseline; text-align: left; justify-items: start; }
  .foot-grid p:nth-child(2) { text-align: center; }
  .foot-grid small { justify-self: end; }
}

/* --- short windows: make the opening actually fit one screen ---
   min-height: 100svh is a floor, not a ceiling. On a 707px-tall window the panel's contents
   came to 1052px, so the buttons and the facts sat below the fold on the one screen that is
   supposed to sell the place. These rules scale the opening to the height available. */

@media (min-width: 900px) and (max-height: 1000px) {
  .lockup { margin-bottom: 1rem; }
  .lockup img { width: min(46vw, 15rem); }
  .open-panel { padding-block: calc(var(--head-h) + 1rem) 1.4rem; }
  .open h1 { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 2.9rem); }
  .open-lead { margin: .9rem 0 1.3rem; }
  .open-facts { margin-top: 1.3rem; padding-top: 1rem; gap: .7rem; }
  .open-facts dd { font-size: .86rem; }
}
@media (min-width: 900px) and (max-height: 780px) {
  .lockup { margin-bottom: .8rem; }
  .lockup img { width: min(34vw, 11rem); }
  .open-panel { padding-block: calc(var(--head-h) + .7rem) 1.1rem; }
  .open h1 { font-size: clamp(1.6rem, 1rem + 1.7vw, 2.2rem); }
  .open-lead { font-size: 1rem; margin: .7rem 0 1rem; max-width: 26rem; }
  .open-facts { margin-top: .9rem; padding-top: .75rem; gap: .55rem; }
  .open-facts dd { font-size: .8rem; }
  .open-facts dt { margin-bottom: .15rem; }
  .btn { min-height: 44px; padding: 0 1.5rem; }
}

@media (max-width: 899px) {
  .open-photo { height: 42svh; min-height: 14rem; }
  .open-panel { margin-top: -3.2rem; padding-bottom: 1.4rem; }
  .lockup img { width: min(38vw, 10.5rem); }
  .open h1 { font-size: clamp(1.9rem, 1.4rem + 2.6vw, 2.6rem); }
  .open-lead { margin: .9rem 0 1.2rem; }
  .open-facts { margin-top: 1.1rem; padding-top: .9rem; gap: .7rem; }
  .open-facts dd { font-size: .78rem; }
}

/* a short phone as well: 360x640 still ran 100px over */
@media (max-width: 899px) and (max-height: 720px) {
  .open-photo { height: 32svh; min-height: 10rem; }
  .open-panel { margin-top: -2.6rem; padding-bottom: 1.1rem; }
  .lockup { margin-bottom: .7rem; }
  .lockup img { width: min(32vw, 8.5rem); }
  .open h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); }
  .open-lead { font-size: .9rem; margin: .7rem 0 1rem; }
  .open-facts { margin-top: .85rem; padding-top: .7rem; gap: .5rem; }
  .open-facts dd { font-size: .74rem; }
  .btn { min-height: 44px; }
}

/* a phone shows one card with the next just peeking, so it reads as scrollable */
@media (max-width: 599px) {
  .band { grid-auto-columns: 78vw; gap: .7rem; }
  .band p { margin-top: .8rem; font-size: .88rem; }
  .band p b { font-size: 1rem; }
  .band-dots { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
  .band { scroll-snap-type: none; }
}

/* ---------- the call icon ---------- */

.ico { flex: 0 0 auto; width: 15px; height: 15px; }
.callbar .ico { width: 14px; height: 14px; margin-right: .5rem; }
.drawer-call { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- gold, used as material ----------
   The palette is the strongest thing this page has, so the display type on the dark grounds is
   filled with a metallic gradient rather than a flat colour, and the monogram sits behind the
   closing band as a watermark. Both are decoration only: every gradient stop is lighter than
   the gold token that was contrast-checked on slate, so nothing gets less readable. */

.open h1, .closing h2 {
  background: linear-gradient(168deg, #f6e3bb 0%, var(--gold-lit) 34%, #b1793a 68%, #f0d6a4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.open h1 em, .closing h2 em { color: transparent; }        /* the gradient carries the italic too */

.closing-watermark {
  position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%;
  width: min(34rem, 78vw); opacity: .07; pointer-events: none;
}
.closing-watermark img { width: 100%; height: auto; }

/* the room band's frames lift on hover, with a gold hairline */
.band picture {
  border: 1px solid transparent;
  transition: border-color .45s var(--ease), transform .6s var(--ease);
}
.band li:hover picture { border-color: var(--rule-lit); transform: translateY(-4px); }

/* the tabs get a gold underline that slides, rather than only a filled pill */
.tabs button { position: relative; }
.tabs button::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 1px;
  background: var(--gold); transition: left .4s var(--ease), right .4s var(--ease);
}
.tabs button.is-on::after { left: 22%; right: 22%; background: var(--gold-lit); }

@media (prefers-reduced-motion: reduce) {
  .band li:hover picture { transform: none; }
  .tabs button::after { transition: none; }
}

/* ---------- the hour, marked in minutes ----------
   Spararaa states its visit as four equal steps. This is a timeline against a gold spine with
   real minute marks, so the two pages do not describe the same thing the same way. */

.clock { background: var(--stone-2); }
.clock-list { position: relative; display: grid; gap: 0; }
.clock-list::before {
  content: ""; position: absolute; left: 3.4rem; top: .6rem; bottom: 1.4rem; width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(127, 91, 28, .12));
}
.clock-list li {
  position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 1.6rem;
  padding: 0 0 clamp(1.6rem, 3vw, 2.2rem);
}
.clock-list li:last-child { padding-bottom: 0; }
.ct {
  position: relative; z-index: 1; display: grid; justify-items: center;
  font-family: var(--display); font-size: 1.06rem; line-height: 1;
}
.ct::after {
  content: ""; width: 7px; height: 7px; margin-top: .55rem; background: var(--stone-2);
  border: 1px solid var(--gold); rotate: 45deg;
}
.ct i {
  font-style: normal; font-family: var(--text); font-size: .5rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-top: .28rem;
}
.cb { display: grid; }
.cb b {
  font-family: var(--display); font-weight: 400; font-size: 1.14rem; margin-bottom: .35rem;
}
.cb { font-size: .94rem; color: var(--ink-dim); }

/* ---------- which one: a decision list, and the pressure key ---------- */

.choose { background: var(--stone-2); }
.picks { display: grid; gap: 0; border-top: 1px solid var(--rule-gold); }
.picks > div {
  display: grid; gap: .3rem; padding: clamp(.9rem, 2vw, 1.15rem) 0;
  border-bottom: 1px solid var(--rule);
}
.picks dt {
  font-family: var(--text); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.picks dd { margin: 0; font-size: .98rem; color: var(--ink-dim); }
.picks dd b { font-family: var(--display); font-weight: 400; font-size: 1.08rem; color: var(--ink); }

.press-key {
  margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--rule-gold); border-radius: var(--r-m); background: var(--stone);
}
.press-key-title {
  margin: 0 0 .8rem; font-family: var(--caps); font-size: .58rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
}
.press-key ul { display: grid; gap: .6rem; }
.press-key li { font-size: .92rem; color: var(--ink-dim); }
.press-key li b {
  display: inline-block; min-width: 4.2rem; font-family: var(--text); font-weight: 500;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}

/* ---------- questions ---------- */

.faq .qs { border-top: 1px solid var(--rule-gold); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.04rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 9px; height: 9px; margin-right: .2rem;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  rotate: 45deg; translate: 0 -2px; transition: rotate .3s var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 2px; }
.faq details p { margin: 0 0 1.2rem; max-width: 42rem; font-size: .95rem; color: var(--ink-dim); }

/* ---------- the room band advances on its own ---------- */

.band { scroll-behavior: smooth; }
.band-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.band-dots button {
  width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; font-size: 0;
}
.band-dots button::after {
  content: ""; width: 6px; height: 6px; rotate: 45deg;
  background: rgba(242, 239, 233, .55); transition: background .35s var(--ease), scale .35s var(--ease);
}
.band-dots button.is-on::after { background: var(--gold-lit); scale: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .band { scroll-behavior: auto; }
}

/* browsers without dvh keep the old anchor */
@supports not (height: 100dvh) {
  .callbar { top: auto; bottom: 0; transform: translateY(110%); }
  .callbar.is-on { transform: none; }
}

/* ==================================================================
   2026 update — local-search + calls layer
   A gold ribbon that always shows the number, a location block under
   the hero, CTA bands between sections, per-therapy call buttons, a
   "why choose" grid, an enquiry form, and a call/WhatsApp dock.
   ================================================================== */

:root {
  --ribbon-h: 0px;
  --wa: #1fa855;
  --wa-dark: #128c42;
  --bar-h: 64px;
  --shadow-soft: 0 18px 40px -22px rgba(25, 22, 19, .45);
  --shadow-lift: 0 26px 60px -28px rgba(25, 22, 19, .6);
}

/* ---------- the gold ribbon ---------- */

.ribbon {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: linear-gradient(90deg, #6d4d16, #a97a33 42%, #ca9860 70%, #8a6322);
  color: #fffaf0;
}
.ribbon-in {
  display: flex; align-items: center; gap: .9rem;
  max-width: var(--wrap); margin-inline: auto; padding: 0 var(--pad);
  height: 36px; font-size: .7rem; letter-spacing: .05em;
}
.ribbon-place b { font-weight: 600; letter-spacing: .06em; }
.ribbon-sep { flex: 1 1 auto; height: 1px; background: rgba(255, 250, 240, .3); }
.ribbon-hrs { color: rgba(255, 250, 240, .9); letter-spacing: .12em; text-transform: uppercase; font-size: .62rem; }
.ribbon-call {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .8rem; border-radius: 999px;
  background: rgba(25, 22, 19, .9); color: #fff;
  font-weight: 600; letter-spacing: .08em; font-variant-numeric: lining-nums tabular-nums;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.ribbon-call:hover { background: var(--slate); transform: translateY(-1px); }
.ribbon-call .ico { width: 13px; height: 13px; }

@media (min-width: 900px) {
  :root { --ribbon-h: 36px; }
  .ribbon { display: block; }
  .head { top: var(--ribbon-h); }
}

/* the hero panel has to clear both bars */
.open-panel { padding-top: calc(var(--head-h) + var(--ribbon-h) + clamp(2.6rem, 6vw, 4.5rem)); }
@media (min-width: 900px) and (max-height: 1000px) {
  .open-panel { padding-top: calc(var(--head-h) + var(--ribbon-h) + 1rem); }
}
@media (min-width: 900px) and (max-height: 780px) {
  .open-panel { padding-top: calc(var(--head-h) + var(--ribbon-h) + .7rem); }
}
section[id] { scroll-margin-top: calc(var(--head-h) + var(--ribbon-h) + .8rem); }

/* ---------- hero: the hours line ---------- */

.open-hours {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.6rem;
  padding: .42rem 1rem; border: 1px solid var(--rule-lit); border-radius: 999px;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-lit); background: rgba(202, 152, 96, .08);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 0 0 rgba(95, 208, 138, .7); animation: pulse 2.4s infinite; }
@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(95, 208, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 208, 138, 0); }
}

/* ---------- buttons, extended ---------- */

.btn-gold { box-shadow: 0 10px 26px -14px rgba(202, 152, 96, .9); }
.btn-gold:hover { background: #f6e3bb; transform: translateY(-1px); }
.btn-gold-ink { background: var(--gold); color: #fff; }
.btn-gold-ink:hover { background: var(--slate); color: var(--stone); }
.btn-ink { background: var(--slate); color: var(--stone); }
.btn-ink:hover { background: var(--gold); color: #fff; }
.btn-quiet-ink { border-color: var(--rule-gold); color: var(--ink); }
.btn-quiet-ink:hover { border-color: var(--gold); color: var(--gold); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); transform: translateY(-1px); }
.btn-sm { min-height: 42px; padding: 0 1.25rem; font-size: .62rem; letter-spacing: .16em; }
.btn { transition: background .38s var(--ease), color .38s var(--ease), border-color .38s var(--ease), transform .3s var(--ease); }

/* ---------- location, straight under the hero ---------- */

.locale { padding-block: clamp(2.6rem, 5vw, 4rem); background: var(--stone-2); border-bottom: 1px solid var(--rule); }
.locale-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.locale-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: .6rem; }
.locale-head p { margin: 0; color: var(--ink-dim); font-size: 1rem; }
.locale-cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.locale-cards li {
  padding: 1.2rem 1.25rem; background: var(--stone); border: 1px solid var(--rule);
  border-radius: var(--r-m); border-top: 2px solid var(--gold);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.locale-cards li:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.lc-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .7rem; border-radius: 50%; background: rgba(127, 91, 28, .1); color: var(--gold); }
.locale-cards b { display: block; font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.locale-cards p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-dim); }
.locale-cards a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--rule-gold); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- the CTA band between sections ---------- */

.cta { background: var(--gold); color: #fff; }
.cta-dark { background: var(--slate); color: var(--stone); }
.cta-in {
  display: grid; gap: 1.2rem; align-items: center;
  padding-block: clamp(1.7rem, 3.4vw, 2.6rem);
}
.cta-kick { margin: 0 0 .25rem; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; opacity: .85; }
.cta-line { margin: 0; font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.95rem); line-height: 1.2; }
.cta-dark .cta-line { color: var(--gold-lit); }
.cta-acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.cta .btn-gold { background: #fff; color: var(--gold); box-shadow: none; }
.cta .btn-gold:hover { background: var(--slate); color: #fff; }
.cta-dark .btn-gold { background: var(--gold-lit); color: var(--slate); }
.cta-dark .btn-gold:hover { background: #f6e3bb; }

@media (min-width: 760px) {
  .cta-in { grid-template-columns: 1fr auto; gap: 2rem; }
  .cta-acts { justify-content: flex-end; }
}

/* ---------- why choose ---------- */

.why-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.why-grid li {
  position: relative; padding: 1.15rem 1.2rem 1.2rem 3.1rem;
  background: var(--stone); border: 1px solid var(--rule); border-radius: var(--r-m);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.why-grid li:hover { border-color: var(--rule-gold); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.why-n {
  position: absolute; left: 1.15rem; top: 1.15rem;
  font-family: var(--display); font-size: .82rem; color: var(--gold);
  font-variant-numeric: lining-nums;
}
.why-grid b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.08rem; margin-bottom: .3rem; }
.why-grid i { font-style: normal; font-size: .88rem; line-height: 1.6; color: var(--ink-dim); }

.why-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: clamp(1.4rem, 3vw, 2rem); padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--rule-gold); border-radius: var(--r-m);
  background: linear-gradient(120deg, rgba(202, 152, 96, .16), rgba(202, 152, 96, .04));
}
.why-cta p { margin: 0; font-size: 1.05rem; color: var(--ink) !important; font-variant-numeric: lining-nums tabular-nums; }
.why-cta p b { font-family: var(--display); font-weight: 400; }

/* ---------- per-therapy call line and button ---------- */

.a-call {
  margin: .9rem 0 .8rem !important; padding: .7rem .85rem;
  border-left: 2px solid var(--gold); border-radius: 0 var(--r-s) var(--r-s) 0;
  background: rgba(127, 91, 28, .07);
  font-size: .89rem !important; color: var(--ink) !important;
}
.a-call a { color: var(--gold); font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--rule-gold); }

/* ---------- the enquiry form ---------- */

.form { display: grid; gap: 1rem; max-width: 44rem; }
.f-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .f-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field > span { font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; font-family: var(--text); font-size: .98rem; color: var(--ink);
  background: var(--stone); border: 1px solid var(--rule); border-radius: var(--r-s);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.field input::placeholder, .field textarea::placeholder { color: #a79c8f; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(202, 152, 96, .18);
}
.field.is-bad input, .field.is-bad select { border-color: #b3401f; }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-foot { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .3rem; }
.f-note { margin: 0; font-size: .92rem; min-height: 1.2em; }
.f-note.ok { color: #1f6b3d; }
.f-note.bad { color: #b3401f; }
.form button[disabled] { opacity: .6; pointer-events: none; }

/* ---------- visit / closing action rows ---------- */

.visit-acts, .closing-acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.closing-acts { justify-content: center; }

/* ---------- footer CTA strip ---------- */

.foot-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
.foot-cta p { margin: 0; font-size: .84rem; color: var(--ink-dim); max-width: 34rem; }

/* ---------- desktop dock: call + whatsapp, bottom right ---------- */

.dock { display: none; }
@media (min-width: 900px) {
  .dock {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 65;
    display: grid; gap: .6rem; justify-items: end;
  }
  .dock-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    height: 50px; padding: 0 1.15rem; border-radius: 999px; color: #fff;
    font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    box-shadow: var(--shadow-lift);
    transition: transform .35s var(--ease), filter .35s var(--ease);
  }
  .dock-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
  .dock-wa { background: var(--wa); }
  .dock-call { background: var(--gold); }
  .dock-btn b { font-weight: 600; }
}

/* ---------- mobile sticky bar: big call button + whatsapp ---------- */

.callbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 75;
  display: flex; align-items: stretch; gap: 0;
  min-height: var(--bar-h);
  padding-bottom: min(env(safe-area-inset-bottom, 0px), 10px);
  background: var(--slate);
  box-shadow: 0 -14px 34px -20px rgba(0, 0, 0, .8);
  transform: translateY(100dvh);
  transition: transform .45s var(--ease);
}
.callbar.is-on { transform: translateY(calc(100dvh - 100%)); }
.callbar-call {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(90deg, #a97a33, var(--gold-lit) 60%, #dcaf74);
  color: #1a1512; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.callbar-call b { font-weight: 700; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.callbar-call .ico { width: 18px; height: 18px; margin: 0; }
.callbar-wa {
  flex: 0 0 68px; display: grid; place-items: center;
  background: var(--wa); color: #fff;
}

@media (max-width: 899px) {
  body { padding-bottom: var(--bar-h); }
}
@media (min-width: 900px) {
  .callbar { display: none; }
}
@supports not (height: 100dvh) {
  .callbar { top: auto; bottom: 0; transform: translateY(110%); }
  .callbar.is-on { transform: none; }
}

/* ---------- tidy ups ---------- */

.head-call b { letter-spacing: .02em; }
.head-call span { color: var(--gold-lit); font-weight: 600; }
.mark-type i { font-size: .5rem; letter-spacing: .2em; }
.runner-title { text-wrap: balance; }
.faq summary { font-size: 1.02rem; }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .btn:hover, .locale-cards li:hover, .why-grid li:hover, .dock-btn:hover { transform: none; }
}

/* the footer CTA must not sit under the floating dock */
@media (min-width: 900px) {
  .foot { padding-bottom: 5.5rem; }
  .foot-cta { padding-right: 13rem; }
}