/* Spararaa — ivory ground, oxblood bands, gold rules.
   Third pass. The dark version read like a nightclub; the badge's colours are used as accents
   on a warm light page instead of being copied wholesale into the background. Oxblood
   full-bleed bands carry the brand colour so the page has rhythm rather than one flat tone. */

:root {
  /* one maroon, used everywhere a dark surface appears. anything darker or translucent is
     derived from it rather than being its own colour. */
  --oxblood: #4a1014;        /* the badge's deep interior red */
  --oxblood-2: #3a0c10;      /* one step down, hover states only */
  --oxblood-veil: rgba(74, 16, 20, .94);   /* the header once it is past the hero */
  --oxblood-scrim: 58, 12, 16;             /* washes over photographs, as r,g,b */

  /* the light side is a tint of that maroon, never a neutral cream */
  --paper: #f8efea;          /* rose ivory */
  --paper-2: #f1e2db;        /* deeper rose */
  --paper-3: #ecdcd5;        /* deepest surface that still carries gold text (4.7:1) */
  --crimson: #b81419;        /* the badge's red disc, darkened until it works as ink (5.9:1) */
  --gold: #7d5a1e;           /* dark enough to pass on ivory (5.6:1) and champagne (5.0:1) */
  --gold-lit: #e0b263;       /* matched to the new badge gold; 7.8:1 on the maroon band */
  --ink: #2b1c18;            /* warm near-black, never pure black */
  --ink-dim: #6d5b53;
  --rule: rgba(43, 28, 24, .16);
  --rule-gold: rgba(125, 90, 30, .32);
  --rule-light: rgba(216, 178, 106, .28);

  --display: "Cormorant Garamond", Georgia, serif;
  --caps: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --text: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* a light radius scale: enough to take the hard edge off, not enough to look bubbly */
  --r-s: 3px;    /* chips and small controls */
  --r-m: 6px;    /* buttons, cards, panels */
  --r-l: 10px;   /* photographs */

  --wrap: 72rem;
  --col: 45rem;
  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --gap-y: clamp(3.6rem, 7vw, 6.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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


body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-weight: 300; line-height: 1.75;
  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.16; }
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 { padding-block: var(--gap-y); }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

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

/* ---------- type ---------- */

.num {
  font-family: var(--text); font-size: .66rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 1rem;
}
h2 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem); }
h3 { font-size: 1.08rem; }

.tagline {
  margin: 0 0 1.3rem; font-family: var(--caps);
  font-size: clamp(.6rem, .56rem + .18vw, .7rem); letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold);
}
.tagline span { color: var(--crimson); }

.sec-head { max-width: 38rem; margin: 0 auto clamp(2.4rem, 4vw, 3.6rem); text-align: center; }
.sec-note { color: var(--ink-dim); margin: 1rem 0 0; }
/* a small diamond, not a rule: the client does not want dashes drawn on the page */
.sec-head::after {
  content: ""; display: block; width: 6px; height: 6px; margin: 1.6rem auto 0;
  background: var(--crimson); rotate: 45deg;
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.9rem;
  border: 1px solid var(--ink); border-radius: var(--r-m); font-family: var(--caps);
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  transition: background .38s var(--ease), color .38s var(--ease), border-color .38s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }
.btn-light { background: var(--paper); border-color: var(--paper); color: var(--oxblood); }
.btn-ghost { border-color: rgba(248, 239, 234, .6); color: var(--paper); }
.btn-ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--oxblood); }
.btn-light:hover { background: var(--gold-lit); border-color: var(--gold-lit); color: var(--oxblood-2); }

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

.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .75rem var(--pad);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s;
}
/* over the hero photograph it is glass; past it, solid oxblood */
.head.is-stuck {
  background: var(--oxblood-veil); backdrop-filter: blur(14px);
  border-bottom-color: rgba(216, 178, 106, .22);
}
.head .mark-b, .head .nav a, .head .head-call b { color: var(--paper); }
.head .nav a:hover, .head .head-call:hover b { color: var(--gold-lit); }
.head .head-call span { color: rgba(247, 241, 232, .7); }
.head .burger { border-color: rgba(247, 241, 232, .4); }
.head .burger span { background: var(--paper); }

.mark { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
/* the hero already carries the medallion, so the bar shows only the wordmark until it is past it */
.mark-badge {
  width: 0; opacity: 0; overflow: hidden;
  transition: width .45s var(--ease), opacity .45s var(--ease);
}
.head.is-stuck .mark-badge { width: 38px; opacity: 1; }
.mark-badge img { width: 38px; height: 38px; }
.mark-b {
  font-family: var(--caps); font-weight: 500; font-size: 1rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--oxblood);
}
:root { --head-h: 60px; }

.nav { display: none; gap: 1.8rem; }
.nav a { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; transition: color .3s var(--ease); }
.nav a:hover { color: var(--crimson); }

.head-call { display: none; text-align: right; line-height: 1.25; }
.head-call span { display: block; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dim); }
.head-call b { font-family: var(--display); font-weight: 400; font-size: 1rem; font-variant-numeric: lining-nums tabular-nums; }
.head-call:hover b { color: var(--crimson); }

.burger { width: 42px; height: 42px; display: grid; place-content: center; gap: 6px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-s); background: none; }
.burger span { display: block; width: 14px; height: 1px; background: var(--ink); 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(--paper);
  background: var(--oxblood);
  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.6rem; padding: .7rem 0; border-bottom: 1px solid rgba(216, 178, 106, .22); }
.drawer-call { font-family: var(--caps); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lit); }

/* ---------- opening: full-screen photograph, glass card over its lower third ----------
   Third attempt at this opening. A centred stack over a blurred full bleed read as generic; a
   maroon ground with a circle read as plain. Here the photograph gets the whole screen and
   everything that must be read sits on a translucent maroon card, so legibility never depends
   on what happens to be behind the type. */

.open {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: flex; align-items: flex-end;
  padding-bottom: clamp(1rem, 3vw, 2.4rem);
}
.open-bg { position: absolute; inset: 0; z-index: -2; }
.open-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
  /* a light blur so the card reads as the foreground; scale hides the pale edge a blur leaves */
  filter: blur(3px) brightness(.97); transform: scale(1.05);
}
/* a soft floor under the card so it does not sit on a bright patch of photograph */
.open::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 3, 4, .3) 0%, rgba(10, 3, 4, .12) 42%, rgba(10, 3, 4, .62) 100%);
}
.open-hold { width: 100%; }

.open-card {
  max-width: 44rem;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid rgba(224, 178, 99, .28); border-radius: 14px;
  background: rgba(58, 12, 16, .82); backdrop-filter: blur(16px) saturate(1.1);
  color: var(--paper);
}
/* if a browser cannot blur, the card simply goes more opaque */
@supports not (backdrop-filter: blur(4px)) {
  .open-card { background: rgba(58, 12, 16, .95); }
}

.open-card .tagline {
  color: var(--gold-lit); margin-bottom: .9rem;
  font-size: clamp(.72rem, .66rem + .26vw, .82rem); font-weight: 500; letter-spacing: .26em;
}
.open-card .tagline span { color: var(--paper); }
.open h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.08; font-weight: 500; }
.open h1 em { font-style: italic; color: var(--gold-lit); }
.open-lead { margin: .9rem 0 1.2rem; max-width: 34rem; font-weight: 500; color: rgba(248, 239, 234, .95); }
/* the location, highlighted like a marker pen. Two stacked copies of the same words: the base
   in ivory, and a gold-backed maroon copy on top that is clipped from the left and unclipped by
   the animation. Doing it that way means the text turns maroon exactly as the gold reaches it —
   a single element animating its background would leave maroon text on a maroon card ahead of
   the sweep. */
/* inline-grid with both copies in the same cell: absolute positioning made the overlay 2px
   taller than the base, so the highlight did not sit exactly on the words */
.open-lead .loc { display: inline-grid; font-style: italic; }
.open-lead .loc-base, .open-lead .loc-hi { grid-area: 1 / 1; padding: .1em .42em; border-radius: 7px; }
.open-lead .loc-base { color: var(--paper); }
.open-lead .loc-hi {
  color: #3a0c10;
  background: linear-gradient(180deg, var(--gold-lit), #d3a251);
  clip-path: inset(0 100% 0 0);
  animation: loc-sweep 1.05s cubic-bezier(.55, 0, .2, 1) .5s forwards;
}
@keyframes loc-sweep { to { clip-path: inset(0 0 0 0); } }

.open-row { display: grid; gap: 1rem; align-items: center; }

.open-price {
  display: inline-flex; align-items: baseline; gap: .45rem; margin: 0;
  padding: .5rem .9rem; border: 1px solid rgba(224, 178, 99, .4); border-radius: 999px;
}
.open-price span {
  font-family: var(--caps); font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(248, 239, 234, .95);
}
.open-price b {
  font-family: var(--display); font-weight: 500; font-size: 1.34rem; color: var(--gold-lit);
  font-variant-numeric: lining-nums tabular-nums;
}

.open-actions { display: flex; gap: .5rem; }
/* btn-solid is oxblood, which would vanish on this card, so the primary is gold here */
.open-actions .btn-solid {
  background: linear-gradient(180deg, var(--gold-lit), #d3a251);
  border-color: transparent; color: #3a0c10;
}
.open-actions .btn-solid:hover { background: var(--paper); color: var(--oxblood); }
.open-actions .btn-ghost { border-color: rgba(248, 239, 234, .5); color: var(--paper); }
.open-actions .btn-ghost:hover { border-color: var(--paper); background: rgba(248, 239, 234, .08); }
.open-actions .btn { min-height: 48px; padding: 0 1.1rem; font-size: .64rem; letter-spacing: .16em; }

/* the four facts live inside the card, as its last row */

/* ---------- oxblood bands ---------- */

.band { background: var(--oxblood); color: var(--paper); padding-block: var(--gap-y); }
.band .num { color: var(--gold-lit); }
.band .sec-note { color: rgba(248, 239, 234, .78); }
.band .sec-head::after { background: var(--gold-lit); }

.statement { padding-block: clamp(3rem, 6vw, 5rem); text-align: center; }
.band-eyebrow {
  margin: 0 0 1.2rem; font-family: var(--caps); font-size: .62rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--gold-lit);
}
.band-line {
  margin: 0 auto; max-width: 46rem; font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.85rem); line-height: 1.45;
}

.sec-cta { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; }

/* ---------- the tariff ---------- */

.tariff-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: stretch; }
.tariff-photo { position: relative; overflow: hidden; border-radius: var(--r-l); }
.tariff-photo img { width: 100%; height: 100%; object-fit: cover; }
.tariff-body { min-width: 0; }
.dial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1.2rem; }
.chip {
  min-height: 50px; padding: 0 1rem;
  border: 1px solid var(--rule); border-radius: var(--r-s); background: none; cursor: pointer;
  font-family: var(--display); font-size: 1rem; color: var(--ink-dim);
  font-variant-numeric: lining-nums tabular-nums;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.chip span { font-family: var(--text); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; margin-left: .35rem; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }

.rates {
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid var(--rule-gold); border-radius: var(--r-m); background: var(--paper-2);
}
.rates li { border-bottom: 1px solid var(--rule); }

/* the whole row is the control: press it and the booking line for the chosen length opens */
.r-row {
  width: 100%; display: block; padding: .95rem 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: padding-left .35s var(--ease);
}
.r-row:hover, .r-row[aria-expanded="true"] { padding-left: .7rem; }
.r-row[aria-expanded="true"] .r-name { color: var(--crimson); }

.r-book { padding: 0 0 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.r-book[hidden] { display: none; }   /* display:flex would otherwise beat the hidden attribute */
.r-book-line { margin: 0; font-size: .9rem; color: var(--ink-dim); }
.r-book-line b { font-family: var(--display); font-weight: 400; color: var(--oxblood); }
.r-book .btn { min-height: 44px; padding: 0 1.3rem; font-size: .62rem; border-radius: var(--r-s); }

.dial-say {
  margin: 0 0 1.4rem; font-size: .86rem; color: var(--ink-dim);
}
.dial-say b {
  font-family: var(--display); font-weight: 400; color: var(--oxblood);
  font-variant-numeric: lining-nums tabular-nums;
}
.rates li:first-child { padding-top: 0; }
.rates li:last-child { padding-bottom: 0; border-bottom: 0; }
.r-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; }
.r-name { font-family: var(--display); font-size: clamp(1.02rem, .96rem + .35vw, 1.24rem); white-space: nowrap; }
.r-price {
  font-family: var(--display); font-size: clamp(1rem, .95rem + .4vw, 1.24rem);
  color: var(--oxblood); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.r-price.is-ask { font-family: var(--caps); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.r-note { display: block; margin-top: .2rem; font-size: .84rem; color: var(--ink-dim); }

.rates-foot { margin: 1.1rem 0 0; text-align: center; font-size: .86rem; color: var(--ink-dim); }
.rates-foot a { color: var(--crimson); border-bottom: 1px solid var(--rule-gold); }

/* ---------- therapies: one pinned circle, six entries scrolling past it ----------
   Deliberately not a card grid and not a stacked deck (La Bella) or a horizontal rail
   (Levia): the medallion shape from the logo becomes the fixed element, a progress ring
   tracks how far through the six you are, and the photograph behind it crossfades. */

/* flex, not grid, below the split: a grid item's sticky range is only its own row */
.th-grid { display: flex; flex-direction: column; gap: 0; }

.th-stage { position: sticky; top: var(--head-h); z-index: 6; }

.th-readout {
  position: relative; z-index: 2; text-align: center; color: var(--paper);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
.th-count { margin: 0 0 .7rem; display: flex; align-items: baseline; justify-content: center; gap: .5rem; }
.th-count b {
  font-family: var(--display); font-weight: 400; font-size: 2.6rem; color: var(--gold-lit);
  font-variant-numeric: lining-nums tabular-nums;
}
.th-count span { font-family: var(--caps); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(248, 239, 234, .76); }
.th-name { margin: 0 0 .4rem; font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); }
.th-press { margin: 0; font-family: var(--caps); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lit); }
.th-cta { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; text-align: center; }

.th-pager {
  display: flex; gap: .2rem; justify-content: center; margin-top: 1.2rem;
}
.th-pager button {
  width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 0; display: grid; place-items: center;
}
.th-pager button::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(43, 28, 24, .26);
  transition: background .35s var(--ease), scale .35s var(--ease);
}
.th-pager button:hover::after { background: rgba(43, 28, 24, .5); }
.th-pager button.is-on::after { background: var(--crimson); scale: 1.5; }

.th-list { display: grid; gap: .5rem; }

/* each entry is an editorial block, not a card in a grid: a ghost numeral, a tag for what it
   is for, the copy, then a measured line of facts. the one you are on lifts onto a surface. */
.th-list li {
  position: relative; overflow: hidden;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--r-m);
  opacity: .55; transition: opacity .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.th-list li.is-live {
  opacity: 1; background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--crimson);
}

.th-ghost {
  position: absolute; top: -.2rem; right: .4rem; z-index: 0; pointer-events: none;
  font-family: var(--display); font-size: 5.2rem; line-height: 1;
  color: rgba(168, 21, 29, .07); font-variant-numeric: lining-nums;
}
.th-list li > *:not(.th-ghost) { position: relative; z-index: 1; }

.th-tag-row { margin: 0 0 .7rem; }
.th-tag {
  display: inline-block; padding: .3rem .75rem; border: 1px solid var(--rule-gold);
  border-radius: 999px; font-family: var(--caps); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.th-list h3 { margin-bottom: .5rem; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); }
.th-copy { margin: 0 0 1rem; color: var(--ink-dim); }

.th-meta {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  font-size: .82rem; color: var(--ink-dim);
}
/* pressure as three dots, filled to the level, rather than another line of prose */
.th-level { display: inline-flex; gap: 4px; align-items: center; }
.th-level i { width: 6px; height: 6px; border-radius: 50%; background: rgba(43, 28, 24, .22); }
.th-level[data-level="1"] i:nth-child(1),
.th-level[data-level="2"] i:nth-child(-n+2),
.th-level[data-level="3"] i { background: var(--crimson); }
.th-level-label { font-family: var(--caps); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.th-medium { font-size: .8rem; }
.th-from {
  margin-left: auto; font-family: var(--display); font-size: .92rem; color: var(--oxblood);
  border-bottom: 1px solid var(--rule-gold); padding-bottom: .1rem; white-space: nowrap;
}
.th-from:hover { color: var(--crimson); }

/* ---------- rituals band ---------- */

.rituals-grid { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
.rituals-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: end; }
.rituals-photos picture { overflow: hidden; border-radius: var(--r-l); }
.rituals-photos img { width: 100%; height: auto; }
.rp-a img { aspect-ratio: 4 / 5; object-fit: cover; }
.rp-b img { aspect-ratio: 6 / 5; object-fit: cover; }
.also-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-content: center; }
.also-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--rule-light);
}
.also-list dt { font-size: .98rem; }
.also-list dt span { font-family: var(--caps); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lit); margin-left: .5rem; }
.also-list dd { font-family: var(--display); font-size: 1.12rem; color: var(--gold-lit); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.rituals-note { max-width: 34rem; margin: 1.6rem 0 0; color: rgba(248, 239, 234, .76); font-size: .94rem; }

/* ---------- gallery ---------- */

.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 var(--pad); }
.gal img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.gal li { overflow: hidden; border-radius: var(--r-l); }
.gal img { transition: scale 1s var(--ease); }
.gal li:hover img { scale: 1.05; }

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

.flow { background: var(--paper-2); }
.steps { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); counter-reset: step; }
.steps li { padding-top: 1.2rem; border-top: 1px solid var(--rule-gold); }
.s-num { font-family: var(--caps); font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--crimson); margin-bottom: .7rem; }
.steps h3 { margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--ink-dim); font-size: .94rem; }

/* ---------- what to expect ---------- */

.expect { padding-block: clamp(2.6rem, 5vw, 4rem); }
.expect-list { display: grid; gap: 1.6rem; text-align: center; }
.expect-list li { font-size: .92rem; color: var(--ink-dim); }
.expect-list span {
  display: block; margin-bottom: .4rem; font-family: var(--caps);
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oxblood);
}

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

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

/* ---------- find us: the address as type, not another bordered card ---------- */

.find { text-align: center; }
.find-line {
  margin: 0; font-family: var(--display);
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem); line-height: 1.1;
}
.find-line em { font-style: italic; color: var(--crimson); }
.find-sub {
  /* same lesson as the hero strip: letterspaced caps need weight and size, not just contrast */
  margin: .8rem 0 0; font-family: var(--caps); font-weight: 500; font-size: .76rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
}
.find-sub span { color: var(--crimson); }

/* three rows, each one a thing to do rather than a line to read */
.find-acts {
  display: grid; gap: 0; max-width: 46rem; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
  text-align: left; border-top: 1px solid var(--rule);
}
.find-acts li { border-bottom: 1px solid var(--rule); }
.find-acts a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.15rem .2rem; transition: padding-left .35s var(--ease), color .35s var(--ease);
}
.find-acts a:hover { padding-left: .8rem; color: var(--crimson); }
.fa-label {
  font-family: var(--caps); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.fa-value {
  font-family: var(--display); font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
  font-variant-numeric: lining-nums tabular-nums;
}

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

.closing { position: relative; isolation: isolate; overflow: clip; text-align: center; background: var(--oxblood); }
/* no photograph here on purpose: the ending is the mark, the line and the number */
.closing::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(216, 178, 106, .12) 0%, transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(0, 0, 0, .35) 0%, transparent 70%);
}
.closing .tagline { color: var(--gold-lit); }
.closing .tagline span { color: var(--paper); }
.closing h2 { margin-bottom: 1.7rem; }

/* the ending carries the practical facts too: on a wide screen a lone line of type in a tall
   maroon block read as an empty slab */
.closing-grid { display: grid; gap: clamp(2.4rem, 5vw, 4rem); }
.closing-mark { text-align: center; }
/* img is display:block globally, so text-align cannot centre it */
.closing-mark .badge-sm img { margin-inline: auto; }
.closing-info { display: grid; gap: 1.5rem 2.5rem; text-align: left; }
.closing-info > div { display: grid; gap: .35rem; }
.closing-info dt {
  font-family: var(--caps); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-lit);
}
.closing-info dd { font-size: .92rem; line-height: 1.65; color: rgba(248, 239, 234, .86); }

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

.foot { padding-block: clamp(2.2rem, 4vw, 3rem); background: var(--paper); }
.foot-grid { display: grid; gap: .8rem; justify-items: center; text-align: center; }
.foot p { margin: 0; font-size: .82rem; color: var(--ink-dim); }
.foot-mark { font-size: .92rem; color: var(--oxblood); }
.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(--oxblood); color: var(--paper);
  font-family: var(--caps); font-size: .7rem; font-weight: 500; letter-spacing: .2em; 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 ---------- */

.th-frame {
  position: relative; width: min(26rem, 78vw); margin-inline: auto;
  aspect-ratio: 1; display: grid; place-items: center;
}
.th-photos { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; }
.th-photo { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.th-photo.is-on { opacity: 1; }
.th-photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* softened inside the circle, and scaled so the blur leaves no pale rim at the edge */
  filter: blur(4px) brightness(.82); transform: scale(1.08);
}
/* a wash so the readout on top of the photograph always has ground */
.th-photos::after {
  content: ""; position: absolute; inset: 0;
  /* neutral, not maroon: measured against the brightest patch of each blurred frame, .66
     keeps ivory at 8.4:1 and the gold line at 4.9:1 */
  background: radial-gradient(circle at 50% 52%, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, .58) 100%);
}

.th-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.th-ring circle { fill: none; stroke-width: 1.4; }
.th-ring-track { stroke: rgba(43, 28, 24, .16); }
.th-ring-live {
  stroke: var(--crimson); stroke-linecap: round;
  stroke-dasharray: 609.5;                              /* 2*pi*97 */
  stroke-dashoffset: calc(609.5 * (1 - var(--th-progress, 0)));
  transition: stroke-dashoffset .5s var(--ease);
}

/* --- the phone form: a 60px thumbnail, the readout beside it, a hairline of progress --- */
@media (max-width: 959px) {
  /* stage sits above the carousel with comfortable padding, no hard border */
  .th-stage { position: relative; background: var(--paper); padding: .65rem 0 0; margin-bottom: 4.5rem; }
  .th-cta { display: none; }                   /* the fixed call bar already covers this */

  /* compact circle: ring, photograph and readout inside it */
  .th-frame {
    width: min(46vw, 12rem); aspect-ratio: 1; margin: 0 auto;
    display: grid; place-items: center; grid-template-columns: none; grid-template-areas: none;
  }
  .th-ring { display: block; }
  .th-photos { position: absolute; inset: 7%; width: auto; height: auto; }
  .th-readout { text-align: center; color: var(--paper); }
  .th-count { display: flex; justify-content: center; margin: 0 0 .3rem; }
  .th-count b { font-size: 1.7rem; color: var(--gold-lit); }
  .th-count span { font-size: .56rem; letter-spacing: .2em; }
  .th-name { font-size: 1.16rem; margin: 0; }
  .th-press { font-size: .58rem; font-weight: 500; letter-spacing: .2em; color: var(--gold-lit); margin-top: .25rem; }

  /* six dot pager below the circle */
  .th-pager { display: flex; gap: .1rem; justify-content: center; margin-top: .7rem; }
  .th-pager button {
    width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 0;                                   /* the label lives in aria-label */
    display: grid; place-items: center;
  }
  .th-pager button::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(43, 28, 24, .26);
    transition: background .35s var(--ease), scale .35s var(--ease);
  }
  .th-pager button:hover::after { background: rgba(43, 28, 24, .5); }
  .th-pager button.is-on::after { background: var(--crimson); scale: 1.5; }

  /* horizontal swipe carousel — each therapy is a full-width swipeable page */
  .th-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;    /* Firefox */
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .th-list::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

  .th-list li {
    flex: 0 0 100%;            /* each card = full container width = one page */
    scroll-snap-align: start;
    opacity: 1;                /* no dimming in carousel mode */
    border-radius: 1rem;
    border: 0;                 /* no borders — clean swipe feel */
    background: var(--paper);
    box-shadow: none;
    padding: 1.8rem var(--pad) 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .th-list li .th-ghost {
    top: .4rem;
  }
  .th-list li.is-live {
    background: var(--paper-2);
    box-shadow: none;          /* no left accent line in carousel mode */
    opacity: 1;
  }

  /* thin progress bar below the pager — fill div animated over 3.5s */
  .th-progress-bar {
    height: 2px;
    background: var(--rule-gold);
    margin: .8rem var(--pad) 1.2rem;
    border-radius: 999px;
    overflow: hidden;
  }
  .th-progress-fill {
    height: 100%; width: 0;
    background: var(--crimson);
    border-radius: 999px;
    animation: th-tick 3.5s linear forwards;
  }
}

/* progress bar keyframes — outside any media block */
@keyframes th-tick { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .th-progress-bar { display: none; }
}

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

  .gal { grid-template-columns: 1fr 1fr; }
  .gal li:first-child { grid-column: span 2; }        /* one wide frame, then a pair */
  .gal li:first-child img { aspect-ratio: 16 / 10; }
}

@media (min-width: 560px) {
  .expect-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .dial { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(3, 1fr); }
  .rituals-grid { grid-template-columns: .9fr 1.1fr; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .nav { display: flex; }
  .head-call { display: block; margin-left: 1rem; }   /* block, not flex: label above number */
  .burger, .callbar, .drawer, .drawer[hidden] { display: none; }
  .tariff-grid { grid-template-columns: .8fr 1.2fr; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .th-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4.5rem); align-items: center; }
  .th-stage { position: sticky; top: calc(var(--head-h) + 1.5rem); align-self: start; }
  .th-frame { width: min(20rem, 100%); aspect-ratio: 1; }
  .th-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.2rem;
    padding: .5rem 0 1rem;
    margin: 0;
  }
  .th-list::-webkit-scrollbar { display: none; }
  .th-list li {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    border-radius: var(--r-m);
    border: 1px solid var(--rule-light);
    background: var(--paper-2);
    box-shadow: none;
    padding: clamp(1.8rem, 2.5vw, 2.4rem) clamp(1.6rem, 2.2vw, 2.2rem);
    opacity: .55;
    transition: opacity .4s ease, box-shadow .4s ease, border-color .4s ease;
  }
  .th-list li.is-live {
    opacity: 1;
    background: var(--paper-2);
    border-color: rgba(168, 21, 29, .25);
    box-shadow: inset 3px 0 0 var(--crimson), 0 6px 20px rgba(43, 28, 24, .04);
  }
  .expect-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .closing-grid { grid-template-columns: .85fr 1.15fr; align-items: center; }
  .closing-mark { text-align: left; }
  .closing-mark .badge-sm img { margin-inline: 0; }   /* desktop only: block is left aligned */
  .closing-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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; }
}

/* and a short desktop window */
@media (min-width: 960px) and (max-height: 780px) {
    .open h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
  .open-lead { margin: 1rem 0 1.1rem; }
  .open-price { margin-bottom: 1.2rem; padding-top: .9rem; }
}

/* the card widens into two columns of facts and a row for price plus buttons */
@media (min-width: 720px) {
  .open-row { grid-template-columns: auto 1fr; gap: 1.4rem; }
  .open-actions { justify-content: flex-end; }
}
/* on a wide screen a 44rem card left a lot of empty photograph. It widens and lays its
   contents out in two columns, so the lower half of the screen is a composition rather than a
   small box in a large frame. */
@media (min-width: 960px) {
  .open { padding-bottom: clamp(2rem, 4vw, 3.4rem); }
  .open-card {
    max-width: 100%; padding: clamp(2rem, 3vw, 2.8rem) clamp(2rem, 3vw, 3rem);
    display: grid; grid-template-columns: 1.42fr .58fr; gap: 0 clamp(2rem, 4vw, 3.4rem);
    align-items: start;
  }
  .open-card .tagline { grid-column: 1; margin-bottom: 1rem; }
  .open h1 { grid-column: 1; font-size: clamp(2.6rem, 1.6rem + 2.4vw, 3.9rem); }
  .open-lead { grid-column: 1; margin: 1.1rem 0 0; }
  /* price and buttons take the right column, stacked, aligned to the headline */
  .open-row {
    grid-column: 2; grid-row: 1 / span 3; align-self: center;
    grid-template-columns: 1fr; gap: 1rem; justify-items: start;
  }
  .open-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .open-actions .btn { width: 100%; }
}

/* short windows: trim the card, never the photograph */
@media (max-height: 760px) {
  .open-card { padding: clamp(1rem, 2.4vw, 1.6rem); }
  .open h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
  .open-lead { margin: .7rem 0 .9rem; font-size: .94rem; }
  .open-price { padding: .4rem .75rem; }
  .open-price b { font-size: 1.16rem; }
}

@media (prefers-reduced-motion: reduce) {
  .open-lead .loc-hi { clip-path: inset(0 0 0 0); animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
}

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

.ico { flex: 0 0 auto; width: 15px; height: 15px; }
.callbar .ico { width: 14px; height: 14px; margin-right: .55rem; }

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