/* ════════════════════════════════════════════════════════════════
   TONICITY v2 · "Gentle, by nature" — organic botanical luxury
   Recia (display) + Ranade (body)
   cream #F5F0E5 · green ink #24301F · eucalyptus #3F5240
   clay #C4795A · honey #C99A4B
   ════════════════════════════════════════════════════════════════ */

:root {
  /* color */
  --cream: #F5F0E5;
  --cream-deep: #EDE5D4;
  --ink: #24301F;
  --ink-soft: #49523F;
  --green: #22382A;
  --green-deep: #152820;
  --green-whisper: #E4E8DA;
  --clay: #C4795A;
  --clay-soft: #EBD9C8;
  --honey: #C99A4B;
  --line: rgba(36, 48, 31, 0.16);
  --line-soft: rgba(36, 48, 31, 0.08);
  --cream-on-green: #F2EEDF;

  /* motion */
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-enter: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);

  /* type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Ranade', 'Helvetica Neue', sans-serif;
  --display-soft: "SOFT" 92, "WONK" 0;

  /* rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-pad: clamp(6rem, 13vh, 10rem);
  --radius: 4px;
}

/* ── reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; }

::selection { background: var(--green); color: var(--cream); }

/* ── shared type ───────────────────────────────────── */
.micro-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-label { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.section-heading {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 340;
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
}

.statement {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 330;
  font-size: clamp(2.7rem, 6.2vw, 5.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.body-copy {
  max-width: 34em;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
}

/* every display-face element gets Fraunces' soft axis */
#hero-title, .treatment-card-name, .membership-card-name, .voices-quote-text,
#final-heading, #garden-note, #preloader-mark, #preloader-note, #header-wordmark,
.standard-proof-num, .statement-img ~ em {
  font-variation-settings: var(--display-soft);
}

#treatments-sub {
  margin: 0;
  color: rgba(242, 238, 223, 0.9);
}

#final-sub {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: #FDFAF2;
  margin-top: -0.8rem;
}

/* ── buttons ───────────────────────────────────────── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 2em;
  border: 1px solid var(--ink);
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition:
    background-color 0.45s var(--ease-productive),
    color 0.45s var(--ease-productive),
    border-color 0.45s var(--ease-productive),
    transform 0.45s var(--ease-productive);
}
.btn-pill:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.btn-pill-solid { background: var(--clay); border-color: var(--clay); color: #FBF7EC; }
.btn-pill-solid:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--cream); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid rgba(36, 48, 31, 0.4);
  padding-bottom: 0.35em;
  transition: color 0.35s var(--ease-productive), border-color 0.35s var(--ease-productive);
}
.btn-text:hover { color: var(--ink); border-color: var(--ink); }
.btn-text-arrow { font-size: 0.9em; transition: transform 0.35s var(--ease-productive); }
.btn-text:hover .btn-text-arrow { transform: translateY(2px); }
.btn-text-light { color: rgba(245, 240, 229, 0.85); border-color: rgba(245, 240, 229, 0.4); }
.btn-text-light:hover { color: #fdfaf2; border-color: #fdfaf2; }

/* ── the SWAP FRAME: picture-over-picture hover ────── */
.swap-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.swap-frame img,
.swap-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-expressive), opacity 0.85s var(--ease-expressive);
}
.swap-frame .swap-base { position: relative; }
.swap-frame .swap-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.07);
}
@media (hover: hover) {
  .swap-frame:hover .swap-alt, a:hover .swap-frame .swap-alt, figure:hover .swap-frame .swap-alt { opacity: 1; transform: scale(1); }
  .swap-frame:hover .swap-base, a:hover .swap-frame .swap-base, figure:hover .swap-frame .swap-base { transform: scale(1.05); }
}

/* ════════════════════════════════════════════════════
   PRELOADER — a green breath
   ════════════════════════════════════════════════════ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: transparent;
  pointer-events: none;
}
#preloader-veil { position: absolute; inset: 0; background: var(--green-deep); }
#preloader-mark {
  position: relative;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: 0.01em;
  color: var(--cream-on-green);
  display: flex;
  transform-origin: left top;
  will-change: transform;
}
#preloader-line, #preloader-note { position: relative; }
.preloader-letter { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(0.2em); }
#preloader-line {
  width: min(220px, 40vw);
  height: 1px;
  background: rgba(242, 238, 223, 0.25);
  overflow: hidden;
}
#preloader-line-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: left center;
}
#preloader-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: rgba(242, 238, 223, 0.85);
  opacity: 0;
}

/* ════════════════════════════════════════════════════
   THE LONG WALL — one tall plaster wall, panned by scroll
   ════════════════════════════════════════════════════ */
#site-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--cream); }

#backdrop-wall {
  position: absolute;
  left: -2%;
  top: 0;
  width: 104%;
  height: 165%;
  object-fit: cover;
  opacity: 0.6;
  will-change: transform;
}

/* the sun that travels as you scroll */
#backdrop-light {
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    ellipse 60% 48% at 78% 18%,
    rgba(255, 246, 224, 0.9),
    rgba(255, 246, 224, 0.28) 42%,
    rgba(245, 240, 229, 0) 70%
  );
  mix-blend-mode: soft-light;
  will-change: transform;
}

/* drifting gauze shadow — alive even without scroll */
#backdrop-gauze {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 42% 30% at 30% 40%, rgba(36, 48, 31, 0.10), transparent 65%),
    radial-gradient(ellipse 36% 26% at 68% 66%, rgba(36, 48, 31, 0.07), transparent 60%);
  filter: blur(30px);
  animation: gauze-drift 26s var(--ease-productive) infinite alternate;
  will-change: transform;
}
@keyframes gauze-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.2deg) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) rotate(1.4deg) scale(1.06); }
}

#backdrop-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--gutter);
  transition: transform 0.6s var(--ease-productive), background-color 0.6s var(--ease-productive);
  color: var(--ink);
}
#site-header.is-scrolled {
  background: rgba(245, 240, 229, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
#site-header.is-hidden { transform: translateY(-105%); }

#header-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

#header-nav { display: flex; gap: 2.2rem; }
.header-nav-link {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-productive);
}
.header-nav-link:hover { opacity: 1; }

#header-book { padding: 0.7em 1.5em; border-color: transparent; }
.book-label-short { display: none; }
@media (max-width: 480px) {
  .book-label-full { display: none; }
  .book-label-short { display: inline; }
}

/* ── MOBILE NAV ────────────────────────────────────── */
#header-right { display: flex; align-items: center; gap: 0.6rem; }
#nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
#nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease-expressive), top 0.4s var(--ease-expressive);
}
#nav-toggle span:first-child { top: 19px; }
#nav-toggle span:last-child { top: 25px; }

#mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem var(--gutter) max(2.5rem, env(safe-area-inset-bottom));
  background: var(--green-deep);
  color: var(--cream-on-green);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-productive);
}
body.nav-open #mobile-nav { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

#mobile-nav-top { display: flex; align-items: center; justify-content: space-between; }
#mobile-nav-brand {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 400;
  font-size: 1.6rem;
}
#mobile-nav-close {
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
}
#mobile-nav-links { display: flex; flex-direction: column; gap: 0.4rem; }
.mobile-nav-link {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 330;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-enter), transform 0.5s var(--ease-enter);
}
body.nav-open .mobile-nav-link:nth-child(1) { transition-delay: 0.08s; }
body.nav-open .mobile-nav-link:nth-child(2) { transition-delay: 0.14s; }
body.nav-open .mobile-nav-link:nth-child(3) { transition-delay: 0.2s; }
body.nav-open .mobile-nav-link:nth-child(4) { transition-delay: 0.26s; }
body.nav-open .mobile-nav-link { opacity: 1; transform: translateY(0); }
#mobile-nav-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }

@media (max-width: 1024px) {
  #nav-toggle { display: block; }
}

/* ════════════════════════════════════════════════════
   SECTION SCAFFOLD
   ════════════════════════════════════════════════════ */
#site-content { position: relative; z-index: 1; }
.section { position: relative; padding: var(--section-pad) var(--gutter); }

.section-green { background: var(--green); color: var(--cream-on-green); }
.section-green .micro-label { color: rgba(242, 238, 223, 0.85); }
.section-green .section-heading { color: var(--cream-on-green); }

.section-clay { background: var(--clay-soft); }
.section-cream { background: var(--cream); }

/* ════════════════════════════════════════════════════
   HERO — full-bleed canopy
   ════════════════════════════════════════════════════ */
#home-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(14rem, calc(19vh + 6rem), 19rem);
  padding-top: 7rem;
  color: var(--ink);
}

#hero-media { position: absolute; inset: 0; overflow: hidden; }
#hero-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  transform: scale(1.08);
  will-change: transform;
}
#hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(78deg, rgba(245, 240, 229, 0.82) 0%, rgba(245, 240, 229, 0.5) 36%, rgba(245, 240, 229, 0.12) 58%, rgba(245, 240, 229, 0) 74%),
    linear-gradient(180deg, rgba(245, 240, 229, 0.45), rgba(245, 240, 229, 0.1) 14%, transparent 34%, transparent 72%, rgba(245, 240, 229, 0.3));
}

#hero-inner { position: relative; max-width: 1500px; margin: 0 auto; width: 100%; }

#hero-label { margin-bottom: clamp(1.2rem, 2.5vh, 2rem); color: var(--ink); }

#hero-title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 330;
  font-size: clamp(3.6rem, 9.4vw, 8.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-left: -0.03em;
}
.hero-title-line { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.hero-title-word { display: inline-block; }

#hero-sub {
  margin-top: clamp(1.2rem, 2.6vh, 2rem);
  color: #2C3423;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  text-shadow: 0 1px 22px rgba(245, 240, 229, 0.9);
}

#hero-cta-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  flex-wrap: wrap;
}

#hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  right: var(--gutter);
  color: var(--ink-soft);
}
#hero-scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.6rem;
  margin: 0.6rem auto 0;
  background: linear-gradient(var(--ink-soft), transparent);
  animation: hint-fall 2.2s var(--ease-expressive) infinite;
}
@keyframes hint-fall {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ════════════════════════════════════════════════════
   INTRO — statement with pictures inside the sentence
   ════════════════════════════════════════════════════ */
#home-intro { padding-top: clamp(7rem, 16vh, 12rem); padding-bottom: clamp(6rem, 13vh, 10rem); }
#intro-inner { max-width: 1500px; margin: 0 auto; }
#intro-statement .statement-line { display: block; }
#intro-statement .statement-line:nth-child(2) { padding-left: clamp(2rem, 8vw, 9rem); }
#intro-statement .statement-line:nth-child(3) { padding-left: clamp(0.5rem, 3vw, 3rem); }

#intro-copy { margin-top: clamp(2.2rem, 5vh, 3.6rem); margin-left: auto; max-width: 30em; }

/* ════════════════════════════════════════════════════
   THE GARDEN — pictures on pictures
   ════════════════════════════════════════════════════ */
#home-garden { padding-top: 1rem; padding-bottom: clamp(8rem, 16vh, 13rem); }
#garden-inner {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.garden-item { position: relative; }
.garden-item .swap-frame { box-shadow: 0 30px 80px rgba(36, 48, 31, 0.18); }
.garden-item figcaption { margin-top: 0.9rem; }

.garden-item-main { grid-column: 2 / span 7; grid-row: 1; z-index: 1; }
.garden-item-main .swap-frame { aspect-ratio: 3 / 4; max-height: 88vh; }

.garden-item-citrus { grid-column: 1 / span 3; grid-row: 1; z-index: 2; align-self: end; margin-bottom: -8vh; }
.garden-item-citrus .swap-frame { aspect-ratio: 3 / 4; }

.garden-item-honey { grid-column: 8 / span 4; grid-row: 1; z-index: 2; align-self: start; margin-top: 14vh; margin-left: -3vw; }
.garden-item-honey .swap-frame { aspect-ratio: 3 / 4; }

#garden-note {
  grid-column: 8 / span 5;
  grid-row: 1;
  align-self: end;
  margin-bottom: -4vh;
  padding-left: clamp(1rem, 3vw, 3rem);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.35;
  color: var(--ink);
}

/* ════════════════════════════════════════════════════
   TREATMENTS — the green room, big mosaic cards
   ════════════════════════════════════════════════════ */
#treatments-inner { max-width: 1500px; margin: 0 auto; }
#treatments-heading { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }

#treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
}

.treatment-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}
.treatment-card .swap-frame { height: 100%; border-radius: var(--radius); }
.treatment-card .swap-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(30, 40, 28, 0) 36%, rgba(30, 40, 28, 0.82) 92%);
  transition: opacity 0.6s var(--ease-productive);
}
.treatment-card .swap-frame img { min-height: 100%; }
.treatment-card { aspect-ratio: 3 / 3.6; }
.treatment-card-tall { grid-row: span 2; aspect-ratio: auto; }
.treatment-card-tall .swap-frame img { object-position: 50% 72%; }

.treatment-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  color: #FBF7EC;
  z-index: 2;
}
.treatment-card-num {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  opacity: 0.9;
  display: block;
  margin-bottom: 0.5rem;
}
.treatment-card-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.treatment-card-note {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(251, 247, 236, 0.95);
  max-width: 26em;
}
.treatment-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-enter), transform 0.5s var(--ease-enter);
}
.treatment-card-arrow { transition: transform 0.35s var(--ease-productive); }
.treatment-card:hover .treatment-card-cta { opacity: 1; transform: translateY(0); }
.treatment-card:hover .treatment-card-arrow { transform: translateX(4px); }

/* ── SIX DOORS: arched doorways, six ways in ───────── */
#treatments-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
#treatments-head .section-heading { margin-bottom: 0; }
#treatments-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
  padding-bottom: 0.4rem;
}

#doors-row {
  display: flex;
  gap: clamp(0.5rem, 1vw, 1rem);
  height: clamp(26rem, 72vh, 40rem);
}
.door {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  flex: 1 1 0%;
  min-width: 0;
  display: block;
  transition: flex-grow 1s var(--ease-expressive);
}
.door-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  filter: saturate(0.96);
  transition: transform 1.3s var(--ease-expressive), filter 1.3s var(--ease-expressive);
}
.door-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(21, 40, 32, 0.08) 42%, rgba(21, 40, 32, 0.7) 96%);
}
.door-veil {
  position: absolute;
  inset: 0;
  background: rgba(34, 56, 42, 0.22);
  transition: opacity 0.9s var(--ease-expressive);
}
.door-closed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(2.4rem, 5vh, 3.6rem) 0 clamp(1.3rem, 2.6vh, 2rem);
  color: #FBF7EC;
  opacity: 1;
  transition: opacity 0.45s var(--ease-productive) 0.2s;
}
.door-vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 340;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.door-num {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  opacity: 0.85;
}
.door-open {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: clamp(20rem, 34vw, 32rem);
  padding: clamp(1.3rem, 2.2vw, 2.2rem);
  color: #FBF7EC;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-enter), transform 0.55s var(--ease-enter);
}
.door-name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 330;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.door-note {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(251, 247, 236, 0.95);
  max-width: 26em;
}
.door-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.door:hover, .door:focus-visible, .door.is-open { flex-grow: 3.4; }
.door:hover .door-img, .door:focus-visible .door-img, .door.is-open .door-img { transform: scale(1); filter: saturate(1); }
.door:hover .door-veil, .door:focus-visible .door-veil, .door.is-open .door-veil { opacity: 0; }
.door:hover .door-closed, .door:focus-visible .door-closed, .door.is-open .door-closed { opacity: 0; transition-delay: 0s; }
.door:hover .door-open, .door:focus-visible .door-open, .door.is-open .door-open {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.door:hover .treatment-card-arrow, .door.is-open .treatment-card-arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
  #treatments-head { grid-template-columns: 1fr; align-items: start; gap: 1.6rem; }
  #doors-row { flex-direction: column; height: auto; gap: 0.6rem; }
  .door {
    flex: none;
    height: clamp(6.8rem, 17vw, 9.5rem);
    border-radius: var(--radius);
    transition: height 0.9s var(--ease-expressive);
  }
  .door.is-active { height: clamp(20rem, 56vw, 27rem); }
  .door-closed { display: none; }
  .door-img { transform: scale(1.04); }
  .door.is-active .door-img { transform: scale(1); filter: saturate(1); }
  .door.is-active .door-veil { opacity: 0; }
  .door-open { opacity: 1; transform: none; width: 100%; max-width: 34rem; padding: 1.1rem 1.3rem 1.3rem; }
  .door-note, .door-cta {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(10px);
    overflow: hidden;
    transition: max-height 0.7s var(--ease-expressive), opacity 0.5s var(--ease-enter) 0.15s, transform 0.5s var(--ease-enter) 0.15s, margin-top 0.7s var(--ease-expressive);
  }
  .door.is-active .door-note { max-height: 6em; margin-top: 0.55rem; opacity: 1; transform: translateY(0); }
  .door.is-active .door-cta { max-height: 2.2em; margin-top: 0.7rem; opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════
   THE STANDARD — clay room, overlapping figures
   ════════════════════════════════════════════════════ */
#standard-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
#standard-heading { margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem); }

#standard-proof {
  display: flex;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(2.2rem, 5vh, 3.4rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.6rem, 3.5vh, 2.4rem);
}
.standard-proof-item { display: flex; flex-direction: column; gap: 0.5rem; }
.standard-proof-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--clay);
}
.standard-proof-text { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); max-width: 11em; }

#standard-figure { position: relative; padding-bottom: 4rem; }
.standard-figure-frame {
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 80px rgba(36, 48, 31, 0.16);
}
.standard-figure-frame img { width: 100%; height: 106%; object-fit: cover; }
#standard-overlap {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: clamp(150px, 34%, 300px);
  aspect-ratio: 3 / 4;
  border: 6px solid var(--clay-soft);
  box-shadow: 0 24px 60px rgba(36, 48, 31, 0.22);
  z-index: 2;
}
#standard-figure figcaption { margin-top: 1rem; }

/* ════════════════════════════════════════════════════
   MEMBERSHIP — over the water
   ════════════════════════════════════════════════════ */
#membership-inner { max-width: 1500px; margin: 0 auto; }
#membership-sub { margin-top: 1.2rem; }
#membership-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 7vh, 5rem);
}
.membership-card {
  position: relative;
  padding: clamp(2rem, 4vw, 3.2rem);
  border-radius: var(--radius);
  transition: transform 0.6s var(--ease-productive), box-shadow 0.6s var(--ease-productive);
}
.membership-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(36, 48, 31, 0.16); }

#membership-card-harbor { background: var(--green-deep); color: var(--cream-on-green); }
#membership-card-harbor .micro-label { color: rgba(242, 238, 223, 0.85); }
#membership-card-harbor .membership-card-perks { color: rgba(242, 238, 223, 0.94); }
#membership-card-harbor .btn-pill { border-color: rgba(242, 238, 223, 0.55); color: var(--cream-on-green); }
#membership-card-harbor .btn-pill:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

#membership-card-skin { background: rgba(245, 240, 229, 0.92); border: 1px solid var(--line-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.membership-card-label { margin-bottom: 1.6rem; }
.membership-card-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.05;
}
.membership-card-perks { margin: 1.8rem 0 2.4rem; display: grid; gap: 0.7rem; color: var(--ink-soft); font-size: 0.96875rem; }
.membership-card-perks li { padding-left: 1.4em; position: relative; }
.membership-card-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════
   VOICES
   ════════════════════════════════════════════════════ */
#voices-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: clamp(3.5rem, 8vh, 6rem); }
.voices-quote-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 3.1rem);
  line-height: 1.26;
}
.voices-quote:nth-child(2) { padding-right: clamp(0rem, 10vw, 10rem); }
.voices-quote:nth-child(3) { padding-left: clamp(0rem, 10vw, 10rem); text-align: right; }
.voices-quote:nth-child(4) { padding-right: clamp(0rem, 14vw, 14rem); }
.voices-quote-cite { display: block; margin-top: 1.2rem; font-style: normal; }

/* ════════════════════════════════════════════════════
   VISIT
   ════════════════════════════════════════════════════ */
#visit-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
#visit-figure .swap-frame { aspect-ratio: 3 / 4; max-width: 30rem; box-shadow: 0 30px 80px rgba(36, 48, 31, 0.14); }
#visit-figure figcaption { margin-top: 0.9rem; }

#visit-heading { margin-bottom: clamp(1.5rem, 3vh, 2.2rem); }
#visit-address { font-style: normal; }
.visit-link { border-bottom: 1px solid var(--line); transition: border-color 0.3s var(--ease-productive), color 0.3s var(--ease-productive); }
.visit-link:hover { color: var(--clay); border-color: var(--clay); }

#visit-hours { margin-top: clamp(1.8rem, 4vh, 2.6rem); max-width: 30rem; }
.visit-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem;
}
.visit-hours-row dt { color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; padding-top: 0.2em; }

#visit-cta-row { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: clamp(2rem, 4.5vh, 3rem); }

/* ════════════════════════════════════════════════════
   FINAL — under the leaves
   ════════════════════════════════════════════════════ */
#home-final {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#final-media { position: absolute; inset: 0; }
#final-media img { width: 100%; height: 100%; object-fit: cover; }
#final-scrim { position: absolute; inset: 0; background: rgba(40, 53, 41, 0.48); }

#final-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2.2rem, 5vh, 3.4rem);
  color: #FBF7EC;
}
#final-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 40px rgba(30, 40, 28, 0.3);
}
.final-line { display: inline-block; }
.final-line-italic { padding-left: 0.14em; }

/* ════════════════════════════════════════════════════
   FOOTER — the green floor
   ════════════════════════════════════════════════════ */
#site-footer-block {
  position: relative;
  z-index: 1;
  background: var(--green-deep);
  color: var(--cream-on-green);
  padding: clamp(3rem, 7vh, 5rem) var(--gutter) 2rem;
}
#footer-cols {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.footer-col-title { margin-bottom: 0.6rem; color: rgba(242, 238, 223, 0.75); }
.footer-col-text { font-size: 0.9375rem; color: rgba(242, 238, 223, 0.92); }
.footer-link {
  font-size: 0.9375rem;
  color: rgba(242, 238, 223, 0.92);
  transition: color 0.3s var(--ease-productive);
}
.footer-link:hover { color: #fdfaf2; }
#footer-legal {
  max-width: 1500px;
  margin: clamp(1.2rem, 2.5vh, 2rem) auto 0;
  text-align: left;
  color: rgba(242, 238, 223, 0.65);
}

/* the finale: the name, at scale */
#footer-hours {
  text-align: center;
  margin-top: clamp(3rem, 7vh, 5rem);
  color: rgba(242, 238, 223, 0.6);
}
#footer-finale {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 330;
  font-size: clamp(4.2rem, 16.5vw, 16.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-align: center;
  color: rgba(242, 238, 223, 0.13);
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
  padding-bottom: 0.04em;
  user-select: none;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #header-nav { display: none; }
  #standard-inner, #visit-inner { grid-template-columns: 1fr; }
  #standard-figure { order: -1; }
  #treatments-grid { grid-template-columns: 1fr 1fr; }
  .treatment-card-tall { grid-row: auto; aspect-ratio: 3 / 3.6; }
  #footer-cols { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
}

@media (max-width: 680px) {
  :root { --section-pad: clamp(4.5rem, 12vh, 7rem); }
  #site-header { padding: 0.9rem var(--gutter); gap: 0.75rem; }
  #header-book { padding: 0.6em 1em; font-size: 0.625rem; letter-spacing: 0.08em; white-space: nowrap; }
  #header-wordmark { font-size: 1.3rem; }
  #hero-label { font-size: 0.5625rem; letter-spacing: 0.16em; }
  #hero-sub br { display: none; }
  #hero-media-img { object-position: 72% 50%; }
  #hero-scrim {
    background:
      linear-gradient(180deg, rgba(245, 240, 229, 0.35), rgba(245, 240, 229, 0.12) 30%, rgba(245, 240, 229, 0.55) 62%, rgba(245, 240, 229, 0.85));
  }
  #hero-cta-row { gap: 1.2rem; flex-direction: column; align-items: flex-start; }
  #hero-scroll-hint { display: none; }

  #garden-inner { display: flex; flex-direction: column; gap: 2.5rem; }
  .garden-item-citrus { margin: -4rem 0 0 auto; width: 60%; }
  .garden-item-honey { margin: -3rem 0 0 0; width: 70%; }
  #garden-note { margin: 1rem 0 0; padding: 0; }

  #treatments-grid { grid-template-columns: 1fr; }
  #membership-cards { grid-template-columns: 1fr; }
  #standard-overlap { right: 0; width: 44%; }
  #footer-cols { grid-template-columns: 1fr 1fr; }
  .voices-quote:nth-child(2), .voices-quote:nth-child(3) { padding: 0; text-align: left; }
}

/* ════════════════════════════════════════════════════
   SUBPAGES — page hero, bands, faq, team, hub index
   ════════════════════════════════════════════════════ */
body.subpage { opacity: 0; transition: opacity 0.7s var(--ease-enter); }
body.subpage.is-ready, html.static body.subpage { opacity: 1; }
/* capture mode: every state renders settled, no mid-transition frames */
html.static *, html.static *::before, html.static *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
body.subpage #site-header.is-scrolled { position: fixed; }

.breadcrumb { display: flex; gap: 0.7em; align-items: center; margin-bottom: clamp(1.2rem, 2.5vh, 1.8rem); flex-wrap: wrap; }
.breadcrumb a { transition: color 0.3s var(--ease-productive); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { opacity: 0.45; }
.breadcrumb span[aria-current] { color: var(--ink); }

#page-hero { padding-top: clamp(8rem, 16vh, 11rem); }
#page-hero-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.page-hero-solo { grid-template-columns: 1fr; }
#page-hero-title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 330;
  font-size: clamp(2.9rem, 6.4vw, 5.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
#page-hero-intro { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
#page-hero-cta { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: clamp(1.8rem, 4vh, 2.6rem); }
#page-hero-figure .swap-frame { aspect-ratio: 3 / 4; max-width: 30rem; margin-left: auto; box-shadow: 0 30px 80px rgba(36, 48, 31, 0.16); }

.band-inner { max-width: 1500px; margin: 0 auto; }
.band-narrow { max-width: 980px; }

/* benefits */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 5vh, 3rem); }
.benefit-card { border-top: 1px solid rgba(242, 238, 223, 0.28); padding-top: 1.4rem; }
.benefit-num { font-size: 0.6875rem; letter-spacing: 0.2em; color: rgba(242, 238, 223, 0.8); }
.benefit-title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 340;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin: 0.7rem 0 0.6rem;
}
.benefit-text { font-size: 0.9689rem; color: rgba(242, 238, 223, 0.92); line-height: 1.6; }

/* expect steps */
#expect-heading { margin-bottom: clamp(2rem, 5vh, 3rem); }
.expect-list { list-style: none; display: grid; gap: 0; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.expect-item {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1.4rem;
  align-items: baseline;
  padding: clamp(1.2rem, 2.5vh, 1.8rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
.expect-item:first-child { border-top: 1px solid var(--line-soft); }
.expect-num {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 330;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  color: var(--clay);
}
.expect-item p { color: var(--ink-soft); max-width: 44em; }

/* faq accordion */
.faq-list { margin-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  cursor: pointer;
  list-style: none;
  padding: clamp(1.1rem, 2.4vh, 1.6rem) 0.25rem;
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  transition: color 0.3s var(--ease-productive);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--clay); }
.faq-mark { font-family: var(--font-body); font-weight: 300; font-size: 1.2em; transition: transform 0.45s var(--ease-expressive); }
details[open] .faq-mark { transform: rotate(45deg); }
.faq-a { padding: 0 0.25rem clamp(1.2rem, 2.5vh, 1.7rem); color: var(--ink-soft); max-width: 52em; }

/* related grid reuses .treatment-card */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: clamp(2rem, 5vh, 3rem); }
.related-grid .treatment-card { aspect-ratio: 3 / 2.4; }
.treatment-card-name-sm { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.category-grid .treatment-card { aspect-ratio: 3 / 3.2; }

/* team */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 6vh, 4rem); }
.team-card { border-top: 1px solid rgba(242, 238, 223, 0.28); padding-top: 1.4rem; }
.team-card-role { color: rgba(242, 238, 223, 0.8); }
.team-card-name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 340;
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
  margin: 0.8rem 0 0.6rem;
}
.team-card-bio { font-size: 0.9375rem; color: rgba(242, 238, 223, 0.92); line-height: 1.65; }

/* ── THE MENU INDEX: hover-preview treatment list ──── */
#menu-index { padding-top: clamp(1rem, 4vh, 3rem); }
#menu-index-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.menu-group { padding-top: clamp(2.4rem, 5.5vh, 3.8rem); }
.menu-group:first-child { padding-top: 0; }
.menu-group-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
}
.menu-group-label .micro-label { transition: color 0.3s var(--ease-productive); }
.menu-group-label:hover .micro-label { color: var(--clay); }
.menu-group-explore { opacity: 0.55; transition: opacity 0.3s var(--ease-productive); }
.menu-group-label:hover .menu-group-explore { opacity: 1; }

.menu-item {
  display: flex;
  align-items: baseline;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(0.55rem, 1.2vh, 0.85rem) 0;
  border-bottom: 1px solid var(--line-soft);
  transition: opacity 0.45s var(--ease-productive);
}
.menu-item-name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 340;
  font-size: clamp(1.55rem, 2.7vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  transition: transform 0.55s var(--ease-expressive), color 0.45s var(--ease-productive);
}
.menu-item-tag {
  margin-left: auto;
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-style: italic;
  font-size: clamp(0.92rem, 1.25vw, 1.12rem);
  color: var(--ink-soft);
  text-align: right;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.5s var(--ease-enter), transform 0.5s var(--ease-enter);
}
.menu-item-arrow {
  color: var(--clay);
  font-size: 1.25rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.45s var(--ease-enter), transform 0.45s var(--ease-enter);
}
@media (hover: hover) {
  #menu-index-list:hover .menu-item { opacity: 0.35; }
  #menu-index-list .menu-item:hover { opacity: 1; }
  .menu-item:hover .menu-item-name { transform: translateX(10px); }
  .menu-item:hover .menu-item-tag, .menu-item:hover .menu-item-arrow { opacity: 1; transform: translateX(0); }
}

#menu-index-preview { position: sticky; top: clamp(5.5rem, 11vh, 8rem); }
#menu-preview-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 4;
  max-height: min(78vh, 44rem);
  box-shadow: 0 30px 80px rgba(36, 48, 31, 0.16);
}
#menu-preview-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#menu-preview-b { opacity: 0; }
#menu-preview-caption { margin-top: 0.9rem; }

.menu-item-thumb { display: none; }
@media (max-width: 1024px) {
  #menu-index-inner { grid-template-columns: 1fr; }
  #menu-index-preview { display: none; }
  .menu-item { align-items: center; }
  .menu-item-thumb {
    display: block;
    width: clamp(3.2rem, 9vw, 4.2rem);
    height: clamp(3.2rem, 9vw, 4.2rem);
    object-fit: cover;
    border-radius: var(--radius);
    flex: none;
  }
  .menu-item-tag { display: none; }
}
@media (hover: none) {
  .menu-item-arrow { opacity: 0.75; transform: none; }
}

/* visit details band */
#visit-details-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
#visit-details .micro-label { color: rgba(242, 238, 223, 0.82); }
#visit-details .visit-hours-row { border-color: rgba(242, 238, 223, 0.18); }
#visit-details .visit-hours-row dt { color: rgba(242, 238, 223, 0.82); }
.visit-detail-text { color: rgba(242, 238, 223, 0.95); line-height: 2; }
#visit-details .visit-link { border-color: rgba(242, 238, 223, 0.35); }
#visit-details .visit-link:hover { color: #fdfaf2; border-color: #fdfaf2; }

/* consult form */
#consult-form { margin-top: clamp(2.2rem, 5vh, 3.2rem); display: grid; gap: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-field { display: flex; flex-direction: column; gap: 0.6rem; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  transition: border-color 0.3s var(--ease-productive), background-color 0.3s var(--ease-productive);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.65);
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2349523F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.6em;
  cursor: pointer;
}
.form-field textarea { resize: vertical; min-height: 7.5em; }
.form-gotcha { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 0.4rem; }
button.btn-pill { cursor: pointer; -webkit-appearance: none; appearance: none; }
.form-note a { text-transform: none; letter-spacing: 0.04em; }
#form-status { color: var(--ink-soft); }
@media (max-width: 680px) {
  .form-row { grid-template-columns: 1fr; }
}

/* cta band */
#cta-band { text-align: center; padding-top: clamp(6rem, 14vh, 10rem); padding-bottom: clamp(6rem, 14vh, 10rem); }
#cta-band-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
#cta-band-heading {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-weight: 300;
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
}
#cta-band-sub {
  font-family: var(--font-display);
  font-variation-settings: var(--display-soft);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--ink-soft);
}

@media (max-width: 1024px) {
  #page-hero-inner { grid-template-columns: 1fr; }
  #page-hero-figure .swap-frame { margin-left: 0; max-width: 26rem; }
  .benefit-grid, .team-grid, .related-grid, #hub-index-cols { grid-template-columns: 1fr 1fr; }
  #visit-details-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .benefit-grid, .team-grid, .related-grid, #hub-index-cols, #visit-details-grid { grid-template-columns: 1fr; }
  .category-grid .treatment-card, .related-grid .treatment-card { aspect-ratio: 3 / 2.6; }
}

/* ── reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #hero-scroll-hint::after { animation: none; }
  #hero-media-img { transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}