/* ==========================================================================
   Ninebark Aesthetics
   Thesis: a med spa is a clinic pretending to be a spa. Everyone resolves
   that tension toward the spa. We resolve it toward the clinic -- precision
   is the luxury signal, and the Unit Map is where that argument is made.
   ========================================================================== */

/* --------------------------------------------------------------- fonts -- */
/* Fetched at build time by scripts/fetch_fonts.py. Nothing loads remotely. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'PlexFigures';
  src: url('../fonts/plexmono-figures.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}


/* Metric-matched fallbacks. Measured in-browser: Georgia sets 15.9% wider
   than Fraunces, so an unstyled 115px headline reflows hard when the real
   face swaps in. size-adjust makes the fallback occupy the same width, which
   removes the layout shift without preloading a single byte. Line boxes are
   unaffected because every line-height here is unitless. */
@font-face{font-family:'Fraunces Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:86.28%;line-gap-override:0%}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Segoe UI'),local('Helvetica');size-adjust:98.91%;line-gap-override:0%}
@font-face{font-family:'Plex Fallback';src:local('Consolas'),local('Menlo');size-adjust:108.71%;line-gap-override:0%}

/* --------------------------------------------------------------- tokens -- */

:root {
  /* Palette. Deliberately not the category default (cream + gold): the
     metallic here is pewter, and clay is the single warm note. */
  --ink:        #1C1B19;   /* warm graphite, never pure black */
  --ink-soft:   #35332F;
  --bone:       #E8E5DE;   /* greyed paper, deliberately not #F4F1EA cream */
  --paper:      #FAF9F6;
  --pewter:     #9A9A93;
  --pewter-ln:  #C4C2B8;
  --clay:       #A8887E;   /* accent only -- 2.6:1 on bone, never body text */
  --clay-deep:  #7D5F56;   /* the accessible clay, for text that must read */

  --measure: 68ch;
  --rail: 4.5rem;          /* left spine width on desktop */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 78rem;

  /* Type scale. Display leans on size, not weight -- the lesson taken from
     cienegaspa's 128px / weight 400 h1. */
  --t-hero:  clamp(2.75rem, 9vw, 7.5rem);
  --t-h2:    clamp(1.9rem, 4.6vw, 3.6rem);
  --t-h3:    clamp(1.25rem, 2vw, 1.75rem);
  --t-body:  clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-small: 0.875rem;
  --t-micro: 0.6875rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 400ms;

  --sans: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --mono: 'PlexFigures', 'Plex Fallback', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* ----------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  line-height: 1.6;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  /* Fraunces dialled off its friendly defaults: no softness, no wonk. */
  font-variation-settings: 'opsz' 120, 'wght' 400;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }

/* Figures only. This is where the precision thesis becomes typographic. */
.fig {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.02em;
}

:focus-visible {
  outline: 2px solid var(--clay-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bone);
  padding: 0.75rem 1.25rem; text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(4rem, 11vw, 9rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Lower sections were originally skipped during first paint with
   `content-visibility: auto`. It has been removed deliberately.
   Measured: the deferred sections are 1524/948/848/848/848px tall, so any
   single `contain-intrinsic-size` estimate is wrong by hundreds of pixels and
   each section jumps to its real height as it renders. That measured 0.20 CLS
   against a 0.05 budget. Total Blocking Time is already 0 ms, so skipping
   that render work was buying nothing -- the bottleneck here is network, not
   rasterisation. Kept as a hook for section spacing only. */
.defer { contain-intrinsic-size: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  max-width: 46ch;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- spine -- */
/* Wayfinding for a 13-section page, doubling as scroll progress. It encodes
   position -- it is not a decorative hairline rule. */

.spine {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  display: none;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: difference;
}
.spine__track {
  position: absolute; left: 50%; top: 12vh; bottom: 12vh;
  width: 1px; background: rgba(196, 194, 184, 0.32);
}
.spine__fill {
  position: absolute; left: 0; top: 0; width: 100%;
  height: var(--progress, 0%);
  background: var(--bone);
  transform-origin: top;
}
.spine__label {
  position: absolute;
  left: 50%; bottom: 12vh;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  transition: opacity 240ms var(--ease);
}
.spine__idx {
  position: absolute; left: 50%; top: 12vh;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--bone);
}

@media (min-width: 1080px) {
  .spine { display: block; }
  body { padding-left: var(--rail); }
}

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

.hdr {
  position: sticky; top: 0; z-index: 70;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.hdr--stuck { border-bottom-color: rgba(196, 194, 184, 0.6); }

.hdr__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}
.hdr__mark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.hdr__mark svg { width: 26px; height: 26px; flex: none; }
.hdr__word {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'wght' 500;
  font-size: 1.15rem; letter-spacing: 0.02em;
}

.nav { display: none; gap: 1.75rem; }
.nav a {
  text-decoration: none;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  padding-block: 0.35rem;
  position: relative;
}
/* Underline draw, not a colour swap. */
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform 200ms var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hdr__tel {
  display: none;
  font-family: var(--mono); font-size: var(--t-small);
  text-decoration: none; letter-spacing: 0.04em;
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .hdr__tel { display: inline-block; }
}

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  border-radius: 1px;
  transition: transform 200ms var(--ease), background 200ms var(--ease),
              color 200ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bone); }
.btn--light { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--outline-light { background: transparent; border-color: rgba(232,229,222,0.55); color: var(--bone); }
.btn--outline-light:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--sm { padding: 0.6rem 1rem; font-size: var(--t-micro); }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  /* vh first as the fallback, then svh where supported, so the CTA is never
     hidden behind a mobile toolbar. Tested: svh is not a CLS source here. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero__media picture { display: contents; }
/* Poster and video must be stacked in the same box. Without position:absolute
   the video lays out BELOW the poster inside .hero__media, doubling that
   container's height and getting clipped by .hero{overflow:hidden} -- the
   video then never appears at all, and the reflow when it loads registers
   as layout shift. */
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 50%;
}
.hero__video { opacity: 0; transition: opacity 700ms var(--ease); }
.hero__video.is-ready { opacity: 1; }

/* The scrim. This is what pulls the source's sage ground down to a muted
   near-charcoal, and it is why no colour grade was baked into the video. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(28,27,25,0.86) 0%, rgba(28,27,25,0.64) 42%, rgba(28,27,25,0.30) 100%),
    linear-gradient(to top, rgba(28,27,25,0.72) 0%, rgba(28,27,25,0) 55%);
}

.hero__in {
  position: relative;
  padding-block: clamp(3rem, 10vh, 7rem);
  color: var(--bone);
}
.hero__eyebrow { color: var(--pewter-ln); }

.hero h1 {
  font-size: var(--t-hero);
  font-variation-settings: 'opsz' 144, 'wght' 380;
  max-width: 14ch;
  margin-bottom: 1.25rem;
}
.hero__sub {
  max-width: 44ch;
  color: rgba(232, 229, 222, 0.86);
  margin-bottom: 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__scroll {
  position: absolute; right: var(--gut); bottom: 2rem;
  display: none; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232,229,222,0.6);
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }

/* ----------------------------------------------------------------- trust -- */

.trust { border-block: 1px solid var(--pewter-ln); background: var(--paper); }
.trust__grid {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: center;
}
.trust__item { display: flex; flex-direction: column; gap: 0.25rem; }
.trust__n {
  font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0;
}
.trust__k {
  font-size: var(--t-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
}
.stars { display: inline-flex; gap: 2px; color: var(--clay-deep); }
.stars svg { width: 13px; height: 13px; }

.press { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.press span {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 30, 'wght' 400;
  font-size: 0.95rem; letter-spacing: 0.06em;
  color: var(--pewter); opacity: 0.9;
}

/* ------------------------------------------------------------ categories -- */

.cats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  background: var(--pewter-ln);
  border: 1px solid var(--pewter-ln);
}
.cat {
  position: relative; overflow: hidden;
  background: var(--paper);
  min-height: 19rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem;
  text-decoration: none;
  isolation: isolate;
}
.cat__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity var(--dur) var(--ease), transform 600ms var(--ease);
}
.cat::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(28,27,25,0.78), rgba(28,27,25,0.12));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.cat:hover .cat__img, .cat:focus-visible .cat__img { opacity: 1; transform: scale(1); }
.cat:hover::after, .cat:focus-visible::after { opacity: 1; }
.cat:hover, .cat:focus-visible { color: var(--bone); }
.cat__n {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.2em; margin-bottom: auto; color: var(--pewter);
}
.cat:hover .cat__n, .cat:focus-visible .cat__n { color: var(--pewter-ln); }
.cat h3 { font-size: var(--t-h3); margin-bottom: 0.35rem; }
.cat p { font-size: var(--t-small); margin: 0; opacity: 0.85; }

/* ------------------------------------------------------------- unit map -- */
/* The signature. Everything else on the page stays quiet so this can talk. */

.map { background: var(--ink); color: var(--bone); overflow: hidden; }

/* The one ambient effect on the page. Self-generated fractal-noise grain,
   drifting very slowly. It sits only here, on the signature section, because
   the brief is right that one is atmosphere and five is noise. Pure transform,
   no image request, no JS. */
.map::after {
  content: '';
  position: absolute; inset: -50%;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 32s linear infinite;
  will-change: transform;
}
@keyframes grain-drift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, 1.5%, 0); }
  50%  { transform: translate3d(1.5%, -1%, 0); }
  75%  { transform: translate3d(-1%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
/* Keep the grain behind the diagram, never over the text. */
.map > .wrap { position: relative; z-index: 1; }
.map .eyebrow { color: var(--clay); }
.map__head { max-width: 44ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.map__head p { color: rgba(232,229,222,0.72); }

.map__fig { width: 100%; }
.map__svg { width: 100%; height: auto; overflow: visible; }

.map__svg .face { fill: none; stroke: rgba(232,229,222,0.55); stroke-width: 1.1; }
.map__svg .feat { fill: none; stroke: rgba(232,229,222,0.4); stroke-width: 1; }
.map__svg .lead { fill: none; stroke: rgba(196,194,184,0.42); stroke-width: 0.75; }
.map__svg .dot  { fill: var(--clay); }

.map__svg .zname {
  font-family: var(--sans); font-size: 13px;
  font-variation-settings: 'wght' 500;
  fill: var(--bone); letter-spacing: 0.04em;
}
.map__svg .zfig {
  font-family: var(--mono); font-size: 12px;
  fill: var(--pewter-ln); letter-spacing: 0.04em;
}

.zone { cursor: pointer; }
.zone .hit { fill: transparent; }
.zone:hover .dot, .zone:focus-visible .dot { r: 5; }
.zone:hover .lead, .zone:focus-visible .lead { stroke: var(--clay); stroke-width: 1.1; }
.zone:hover .zname, .zone:focus-visible .zname { fill: #fff; }
.zone:hover .zfig, .zone:focus-visible .zfig { fill: var(--clay); }
.zone .dot { transition: r 200ms var(--ease); }
.zone .lead { transition: stroke 200ms var(--ease), stroke-width 200ms var(--ease); }

/* Draw-in. Handled by dashoffset so it stays on a paint-only property. */
.map__svg .draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.map__svg.is-drawn .draw {
  transition: stroke-dashoffset 1400ms var(--ease);
  stroke-dashoffset: 0;
}
.map__svg .fade { opacity: 0; transition: opacity 500ms var(--ease); }
.map__svg.is-drawn .fade { opacity: 1; }

.map__note {
  margin-top: 2rem; font-size: var(--t-small);
  color: rgba(232,229,222,0.55); max-width: 52ch;
}

/* ----------------------------------------------------------- before/after -- */

.ba { background: var(--paper); }
.ba__stage {
  position: relative; width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 78vh;
  overflow: hidden;
  background: var(--bone);
  touch-action: pan-y;
  user-select: none;
}
.ba__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ba__after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px; background: var(--bone);
  transform: translateX(-1px);
  cursor: ew-resize;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--pewter-ln);
  display: grid; place-items: center;
  box-shadow: 0 2px 14px rgba(28,27,25,0.22);
}
.ba__grip svg { width: 18px; height: 18px; }
.ba__tag {
  position: absolute; bottom: 1rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(28,27,25,0.72); color: var(--bone);
  padding: 0.35rem 0.65rem;
}
.ba__tag--l { left: 1rem; }
.ba__tag--r { right: 1rem; }
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}

/* -------------------------------------------------------------- provider -- */

.prov__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .prov__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}
.prov__shot { position: relative; }
.prov__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prov__cred {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--clay-deep); margin-bottom: 0.75rem;
}
.prov__sig {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--pewter-ln);
  display: flex; flex-wrap: wrap; gap: 2rem;
}
.prov__stat .fig { font-size: 1.35rem; display: block; }
.prov__stat span:last-child {
  font-size: var(--t-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ------------------------------------------------------------ treatments -- */

.treat { display: grid; gap: 1px; background: var(--pewter-ln); border-block: 1px solid var(--pewter-ln); }
@media (min-width: 820px) { .treat { grid-template-columns: repeat(3, 1fr); } }
.treat__item {
  background: var(--bone); padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column;
}
.treat__item h3 { font-size: var(--t-h3); margin-bottom: 0.75rem; }
.treat__item p { font-size: var(--t-small); color: var(--ink-soft); }
.treat__meta {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; border-top: 1px solid var(--pewter-ln);
}
.treat__price { font-family: var(--mono); font-size: 1.15rem; }
.treat__from {
  font-size: var(--t-micro); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.treat__ico { width: 34px; height: 34px; margin-bottom: 1.25rem; }
.treat__ico path, .treat__ico circle {
  fill: none; stroke: var(--clay-deep); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Icons draw themselves once, when the block scrolls in. dasharray is set
   generously above the longest path so every stroke completes; animating
   dashoffset keeps this a paint-only property. */
/* Fail-safe direction: the resting state is DRAWN (dashoffset 0), and the
   animation runs from undrawn to drawn only once .is-in arrives. If the
   JavaScript never runs, the icons are simply visible rather than invisible.
   `both` holds the from-state through the stagger delay. */
@keyframes ico-draw { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
.treat__ico path, .treat__ico circle { stroke-dasharray: 240; stroke-dashoffset: 0; }
.treat.is-in .treat__ico path,
.treat.is-in .treat__ico circle {
  animation: ico-draw 900ms var(--ease) both;
}
/* Stagger across the three cards, then across strokes within each icon. */
.treat.is-in .treat__item:nth-child(1) .treat__ico :is(path, circle) { animation-delay: 120ms; }
.treat.is-in .treat__item:nth-child(2) .treat__ico :is(path, circle) { animation-delay: 220ms; }
.treat.is-in .treat__item:nth-child(3) .treat__ico :is(path, circle) { animation-delay: 320ms; }
.treat.is-in .treat__ico :is(path, circle):nth-child(2) { animation-delay: 260ms; }
.treat.is-in .treat__ico :is(path, circle):nth-child(3) { animation-delay: 340ms; }

/* ------------------------------------------------------------- memberships -- */

.mem { background: var(--paper); }
.mem__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.mem__card {
  border: 1px solid var(--pewter-ln);
  background: var(--bone);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column;
  position: relative;
}
.mem__card--feat { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.mem__card--feat .mem__unit, .mem__card--feat li { color: rgba(232,229,222,0.78); }
.mem__flag {
  position: absolute; top: -1px; right: -1px;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--clay); color: var(--ink);
  padding: 0.3rem 0.6rem;
}
.mem__name { font-family: var(--serif); font-size: var(--t-h3); font-variation-settings: 'SOFT' 0,'WONK' 0,'opsz' 40,'wght' 450; margin-bottom: 0.5rem; }
.mem__price { font-family: var(--mono); font-size: 2.1rem; line-height: 1; }
.mem__unit { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.mem__card ul { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--t-small); }
.mem__card li { display: flex; gap: 0.6rem; align-items: flex-start; }
.mem__card li::before { content: '—'; color: var(--clay); flex: none; }
.mem__card .btn { margin-top: auto; }

/* ---------------------------------------------------------------- booking -- */

.book { background: var(--ink); color: var(--bone); }
.book .eyebrow { color: var(--clay); }
.book__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .book__grid { grid-template-columns: 1fr 1fr; } }

.panel {
  background: var(--paper); color: var(--ink);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.panel__hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.panel__mo { font-family: var(--sans); font-variation-settings: 'wght' 500; font-size: 1rem; }
.panel__nav { display: flex; gap: 0.35rem; }
.icobtn {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 1px solid var(--pewter-ln); background: transparent;
  cursor: pointer; border-radius: 1px;
}
.icobtn:hover { background: var(--bone); }
.icobtn svg { width: 12px; height: 12px; }
.icobtn[disabled] { opacity: 0.35; cursor: not-allowed; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow {
  text-align: center; font-family: var(--mono);
  font-size: var(--t-micro); color: var(--ink-soft);
  padding-bottom: 0.4rem;
}
.cal__d {
  aspect-ratio: 1; border: 1px solid transparent; background: transparent;
  font-family: var(--mono); font-size: var(--t-small);
  cursor: pointer; border-radius: 1px; color: var(--ink);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.cal__d:hover:not([disabled]) { background: var(--bone); }
.cal__d[disabled] { color: var(--pewter); cursor: not-allowed; opacity: 0.45; }
.cal__d[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.cal__d--empty { visibility: hidden; }

.slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.slot {
  font-family: var(--mono); font-size: var(--t-small);
  padding: 0.5rem 0.75rem; border: 1px solid var(--pewter-ln);
  background: transparent; cursor: pointer; border-radius: 1px;
}
.slot:hover { background: var(--bone); }
.slot[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,229,222,0.7); }
.field input, .field select {
  font-family: var(--sans); font-size: var(--t-body);
  padding: 0.8rem 0.9rem;
  background: transparent; color: var(--bone);
  border: 1px solid rgba(232,229,222,0.28); border-radius: 1px;
}
.field input:focus, .field select:focus { border-color: var(--clay); outline: none; }
.field select option { background: var(--ink); color: var(--bone); }

.book__summary {
  font-family: var(--mono); font-size: var(--t-small);
  border: 1px dashed rgba(232,229,222,0.3);
  padding: 0.9rem; margin-bottom: 1.25rem;
  color: rgba(232,229,222,0.85);
}
.book__ok {
  display: none; gap: 0.6rem; align-items: flex-start;
  border: 1px solid var(--clay); padding: 1rem; margin-top: 1rem;
  font-size: var(--t-small);
}
.book__ok.is-on { display: flex; }
.book__priv { font-size: var(--t-micro); color: rgba(232,229,222,0.55); margin-top: 1rem; }

/* --------------------------------------------------------------- reviews -- */

.revs {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(min(85%, 22rem), 22rem);
  gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.rev {
  background: var(--paper); border: 1px solid var(--pewter-ln);
  padding: 1.5rem; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.rev p { font-size: var(--t-small); margin: 0; }
.rev__ft { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rev__who { font-variation-settings: 'wght' 500; font-size: var(--t-small); }
.rev__when { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-soft); }

/* ------------------------------------------------------------------- faq -- */

.faq { max-width: 52rem; }
.faq__i { border-bottom: 1px solid var(--pewter-ln); }
.faq__i:first-child { border-top: 1px solid var(--pewter-ln); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-variation-settings: 'SOFT' 0,'WONK' 0,'opsz' 40,'wght' 400;
  color: var(--ink); padding: 1.35rem 2.5rem 1.35rem 0;
  cursor: pointer; position: relative;
}
.faq__q::after {
  content: ''; position: absolute; right: 0.5rem; top: 50%;
  width: 10px; height: 1px; background: var(--ink);
  box-shadow: 0 0 0 0 transparent;
}
.faq__q::before {
  content: ''; position: absolute; right: 0.5rem; top: 50%;
  width: 10px; height: 1px; background: var(--ink);
  transform: rotate(90deg);
  transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.faq__q[aria-expanded="true"]::before { transform: rotate(0deg); opacity: 0; }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__i.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { font-size: var(--t-small); color: var(--ink-soft); padding-bottom: 1.35rem; max-width: 60ch; margin: 0; }

/* -------------------------------------------------------------- location -- */

.loc__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 860px) { .loc__grid { grid-template-columns: 1fr 1.15fr; } }
.loc dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; font-size: var(--t-small); }
.loc dt { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.loc dd { margin: 0; }
.loc__map { border: 1px solid var(--pewter-ln); background: var(--paper); position: relative; aspect-ratio: 4/3; }
.loc__map svg { width: 100%; height: 100%; }

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

.ft { background: var(--ink); color: var(--bone); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.ft__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.ft h3 { font-family: var(--sans); font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--pewter); margin-bottom: 1rem; font-variation-settings: 'wght' 500; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ft a { color: rgba(232,229,222,0.82); text-decoration: none; font-size: var(--t-small); }
.ft a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.ft__base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(232,229,222,0.15);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-micro); color: rgba(232,229,222,0.55);
}
.ft__soc { display: flex; gap: 0.75rem; }
.ft__soc a { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(232,229,222,0.25); }
.ft__soc svg { width: 15px; height: 15px; fill: currentColor; }

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

.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform 300ms var(--ease);
}
.mbar.is-on { transform: translateY(0); }
.mbar a {
  padding: 1rem; text-align: center; text-decoration: none;
  color: var(--bone); font-size: var(--t-micro);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.mbar a + a { background: var(--clay); color: var(--ink); }
@media (min-width: 900px) { .mbar { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 3.25rem; } }

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

.rv { opacity: 0; transform: translateY(24px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0ms);
}

/* Page-load sequence. Header, then headline, then subline, then CTAs.
   Retimed to finish inside the 1.2s budget: the last element starts at 540ms
   and runs 520ms, so the whole sequence lands at 1060ms. Then it stops. */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.seq { opacity: 0; animation: rise 520ms var(--ease) forwards; }
.seq--1 { animation-delay: 80ms; }
.seq--2 { animation-delay: 240ms; }
.seq--3 { animation-delay: 400ms; }
.seq--4 { animation-delay: 540ms; }

/* ------------------------------------------------- view transitions -- */
/* Cross-document, CSS-only. Browsers without support simply navigate as
   normal -- that is the fallback, and it needs no JavaScript. */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease);
}
/* The header is shared across pages, so hold it still while the body
   cross-fades underneath it. */
.hdr { view-transition-name: sitehead; }
::view-transition-group(sitehead) { animation-duration: 320ms; }

/* --------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .seq { opacity: 1; animation: none; }
  .map__svg .draw { stroke-dashoffset: 0; }
  .map__svg .fade { opacity: 1; }
  .hero__video { opacity: 1; }

  /* Icons appear drawn rather than drawing. */
  .treat__ico path, .treat__ico circle { stroke-dashoffset: 0; animation: none !important; }

  /* The grain stays as flat texture -- no drift. */
  .map::after { animation: none !important; }

  /* The universal selector above cannot reach view-transition pseudo-elements,
     so they are switched off explicitly. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --------------------------------------------------- no-js fallback -- */

.no-js .rv { opacity: 1; transform: none; }
.no-js .seq { opacity: 1; animation: none; }
.no-js .map__svg .draw { stroke-dashoffset: 0; }
.no-js .map__svg .fade { opacity: 1; }
.no-js .faq__a { grid-template-rows: 1fr; }
.no-js .mbar { transform: none; }
/* Without JS nothing ever adds .is-in, so the icons would sit permanently
   undrawn and invisible. Show them finished instead. */
.no-js .treat__ico path, .no-js .treat__ico circle { stroke-dashoffset: 0; }