/* ==========================================================================
   EUROPEAN WELLNESS INSTITUTE — "The Sanctuary"
   Palette drawn from the building itself: travertine, chartreuse velvet,
   champagne-gold chain, deep olive ink, one midnight-blue cold interlude.
   ========================================================================== */

:root {
  --ivory:      #FAF6ED;
  --travertine: #F0E9DA;
  --stone:      #E3D9C3;
  --chartreuse: #B9D21D;   /* exact EWÎ logo lime — the signature highlight */
  --lime-bright:#D9E640;   /* logo gradient top */
  --moss:       #5C9A1C;   /* vivid, bold, colourful green — Sai Maa: dare to use colour */
  --olive:      #5C6A1E;
  --ink:        #2A2E1B;
  --gold:       #C2A368;
  --gold-deep:  #9A7B38;   /* darker gold — passes contrast as text on ivory */
  --champagne:  #E6D6AE;
  --midnight:   #060C22;
  --ice:        #4D66FF;
  --ice-soft:   #9FB0FF;

  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;

  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 5vw, 5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16.5px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.14rem, 1.06rem + 0.42vw, 1.3rem);
  line-height: 1.68;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body[data-state="loading"] { overflow: hidden; }

img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
em, i { font-style: italic; }

::selection { background: var(--chartreuse); color: var(--ink); }

/* ---------- texture: marble-ish wash + grain ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(184, 200, 75, 0.10), transparent 60%),
    radial-gradient(100% 80% at -10% 100%, rgba(194, 163, 104, 0.12), transparent 55%),
    var(--ivory);
}
/* Flower of Life — sacred-geometry watermark, fixed behind all content */
.sacred {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../images/flower-of-life.svg") 0 0 / 150px auto repeat;
  opacity: 0.15;
  /* fade the pattern away from the very top/bottom so it never fights headlines */
  -webkit-mask-image: radial-gradient(150% 135% at 50% 50%, #000 72%, transparent 100%);
          mask-image: radial-gradient(150% 135% at 50% 50%, #000 72%, transparent 100%);
}
.grain {
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 9s steps(6) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

/* ---------- reading progress — a gold thread ---------- */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 8600;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--chartreuse));
  transform: scaleX(0); transform-origin: left;
}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor {
  position: fixed; z-index: 9500; pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease-lux), height 0.35s var(--ease-lux),
              background 0.35s, opacity 0.3s;
  opacity: 0;
  mix-blend-mode: multiply;
}
body.has-cursor .cursor { opacity: 0.9; }
.cursor.is-hover {
  width: 52px; height: 52px;
  background: color-mix(in srgb, var(--chartreuse) 55%, transparent);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
  transition: background 0.6s var(--ease-lux), box-shadow 0.6s, padding 0.6s var(--ease-lux), transform 0.8s var(--ease-lux), color 0.6s;
  transform: translateY(-110%);
  color: var(--ivory);
}
body[data-state="ready"] .nav { transform: translateY(0); transition-delay: 0.2s; }
.nav.is-solid {
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(42, 46, 27, 0.08);
  padding: 0.7rem var(--pad);
  color: var(--ink);
  transition-delay: 0s;
}
.nav__brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.5;
}
.nav__arch { width: 30px; height: 30px; color: var(--gold); flex-shrink: 0; }
.nav__logo { display: block; height: clamp(46px, 5.4vw, 62px); width: auto; flex-shrink: 0; }
.nav__links { display: flex; gap: clamp(1rem, 2.6vw, 2.4rem); }
.nav__links a {
  font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase;
  position: relative; padding: 0.5rem 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease-lux);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  font-size: 0.88rem; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 99px;
  padding: 0.7rem 1.8rem;
  transition: background 0.45s var(--ease-lux), color 0.45s, border-color 0.45s;
}
.nav__cta:hover { background: var(--chartreuse); border-color: var(--chartreuse); color: var(--ink); }

/* burger — mobile only */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 7px;
}
.nav__burger span {
  width: 26px; height: 1.5px; background: currentColor;
  transition: transform 0.45s var(--ease-lux);
}
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }
/* six nav links need real room — hand over to the burger early */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { margin-left: auto; margin-right: 0.5rem; }
}

/* mobile menu overlay */
.mmenu {
  position: fixed; inset: 0; z-index: 7900;
  background: var(--ink); color: var(--ivory);
  display: flex; flex-direction: column; justify-content: center; gap: 2.2rem;
  padding: 6rem var(--pad) 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.55s var(--ease-lux), visibility 0.55s;
}
body.menu-open .mmenu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.mmenu__links { display: flex; flex-direction: column; gap: 0.4rem; }
.mmenu__links a {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.4;
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s var(--ease-lux), transform 0.6s var(--ease-lux), color 0.3s;
}
.mmenu__links a:hover { color: var(--chartreuse); }
body.menu-open .mmenu__links a { opacity: 1; transform: none; }
body.menu-open .mmenu__links a:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .mmenu__links a:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .mmenu__links a:nth-child(3) { transition-delay: 0.2s; }
body.menu-open .mmenu__links a:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .mmenu__links a:nth-child(5) { transition-delay: 0.32s; }
body.menu-open .mmenu__links a:nth-child(6) { transition-delay: 0.38s; }
body.menu-open .mmenu__links a:nth-child(7) { transition-delay: 0.44s; }
body.menu-open .mmenu__links a:nth-child(8) { transition-delay: 0.5s; }
.mmenu__cta {
  align-self: start;
  font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase;
  background: var(--chartreuse); color: var(--ink);
  border-radius: 99px; padding: 1rem 2.2rem;
}
.mmenu__contact { display: flex; flex-direction: column; gap: 0.3rem; }
.mmenu__contact a { font-size: 0.95rem; letter-spacing: 0.12em; color: var(--champagne); }

/* ==========================================================================
   THE ARRIVAL — scroll-driven walkthrough
   The section is tall; the stage is sticky. JS maps scroll progress to
   scene opacity/zoom so scrolling = walking through the building.
   ========================================================================== */
.walk { height: 240vh; position: relative; }
.walk__stage {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  background: var(--ink);
}
.walk__scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
}
/* the entry scene is visible from the first paint, before JS takes over */
.walk__scene--logo { opacity: 1; visibility: visible; }
.walk__scene img, .walk__scene video {
  will-change: transform;
  transform-origin: 50% 55%;
}
.walk__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 18, 8, 0.30) 0%, rgba(15, 18, 8, 0.02) 38%, rgba(15, 18, 8, 0.52) 100%);
}
/* scene 1 — darkness, and the illuminated mark */
.walk__scene--logo {
  background:
    radial-gradient(70% 55% at 50% 44%, rgba(194, 163, 104, 0.10), transparent 65%),
    radial-gradient(120% 100% at 50% 110%, rgba(42, 46, 27, 0.85), transparent 60%),
    #0C0E07;
}
.walk__logo-glow { /* the light source behind the mark, breathing */
  position: absolute; left: 50%; top: 44%;
  width: min(70vmin, 620px); height: min(70vmin, 620px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(230, 214, 174, 0.16), rgba(194, 163, 104, 0.05) 45%, transparent 70%);
  filter: blur(8px);
  animation: glow-breathe 6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes glow-breathe { /* scale only — JS owns opacity for the scroll fade */
  0%, 100% { transform: translate(-50%, -50%) scale(0.94); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
.walk__logo {
  position: absolute; inset: 0;
  display: grid; place-content: center; place-items: center;
  text-align: center;
  color: var(--ivory);
  padding: 0 var(--pad);
  will-change: transform, opacity;
}
.walk__logo-lockup {
  display: block;
  width: clamp(260px, 44vmin, 500px);
  margin-bottom: 2rem;
  filter: drop-shadow(0 0 38px rgba(184, 200, 75, 0.20));
  /* the mark is revealed bottom-up, as if lit — echoes the old self-drawing arch */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(26px);
  transition: clip-path 1.5s var(--ease-lux) 0.3s,
              opacity 1.2s var(--ease-lux) 0.3s,
              transform 1.3s var(--ease-lux) 0.3s;
}
.walk__logo-lockup img { display: block; width: 100%; height: auto; }
body[data-state="ready"] .walk__logo-lockup {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
  transform: none;
}
.walk__logo-tag { overflow: hidden; margin-top: 1.9rem; }
.walk__logo-tag span {
  display: inline-block;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem); letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--champagne); opacity: 1;
  transform: translateY(130%);
  transition: transform 1s var(--ease-lux) 1.1s;
}
body[data-state="ready"] .walk__logo-tag span { transform: none; }

/* Cellular Medicine by Design — bold, bright, unmissable (Sai Maa) */
.walk__logo-headline { overflow: hidden; margin-top: 1.5rem; }
.walk__logo-headline span {
  display: inline-block;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--lime-bright);
  text-shadow: 0 0 30px rgba(217, 230, 64, 0.45);
  transform: translateY(120%);
  transition: transform 1.1s var(--ease-lux) 0.85s;
}
body[data-state="ready"] .walk__logo-headline span { transform: none; }
@media (max-width: 700px) {
  .walk__entry-title { font-size: clamp(2rem, 9.6vw, 3rem); }
  .walk__entry-eyebrow span { font-size: 0.62rem; letter-spacing: 0.32em; }
}
.walk__veil--final {
  background:
    linear-gradient(180deg, rgba(15, 18, 8, 0.38) 0%, rgba(15, 18, 8, 0.05) 38%, rgba(15, 18, 8, 0.66) 100%),
    radial-gradient(75% 55% at 50% 92%, rgba(15, 18, 8, 0.55), transparent 70%);
}

.walk__caption {
  position: absolute; left: var(--pad); bottom: 14vh;
  overflow: hidden;
  max-width: 26ch;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.2;
  color: var(--ivory);
  text-shadow: 0 2px 30px rgba(15, 18, 8, 0.5);
}
.walk__caption span { display: block; will-change: transform; }

/* gold chain curtain — two halves that part as you pass */
.walk__curtain { position: absolute; inset: 0; display: flex; }
.walk__curtain i {
  flex: 1; will-change: transform;
  background:
    repeating-linear-gradient(90deg,
      rgba(194, 163, 104, 0.95) 0 2px,
      rgba(230, 214, 174, 0.85) 2px 3px,
      rgba(166, 134, 78, 0.92) 3px 5px,
      rgba(214, 186, 134, 0.88) 5px 6px),
    linear-gradient(180deg, #C9AC74, #A6864E);
  background-blend-mode: overlay;
  box-shadow: inset 0 0 80px rgba(60, 44, 16, 0.45);
  position: relative;
}
.walk__curtain i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 244, 214, 0.35) 46%, transparent 60%);
  background-size: 220% 100%;
  animation: gold-shimmer 3.6s linear infinite;
}
@keyframes gold-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* final scene — the headline, centered over the pod the camera settles on */
.walk__hero {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad) clamp(4.5rem, 11vh, 7.5rem);
  text-align: center;
  color: var(--ivory);
}
.walk__eyebrow { overflow: hidden; }
.walk__eyebrow span {
  display: inline-block;
  font-size: 0.74rem; letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--champagne);
  padding-bottom: 1.4rem;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-lux);
}
.walk__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6.2vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto;
}
.walk__word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.walk__word i {
  display: inline-block; font-style: normal;
  transform: translateY(115%);
  transition: transform 1.25s var(--ease-lux);
}
.walk__word--accent i { font-style: italic; color: var(--chartreuse); }
.walk__sub {
  margin: 1.6rem auto 0; max-width: 52ch;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  color: color-mix(in srgb, var(--ivory) 88%, transparent);
  opacity: 0; transform: translateY(20px);
  transition: opacity 1.1s var(--ease-lux) 0.55s, transform 1.1s var(--ease-lux) 0.55s;
}
.walk__scene--final.is-on .walk__eyebrow span { transform: none; }
.walk__scene--final.is-on .walk__word:nth-child(1) i { transform: none; transition-delay: 0.1s; }
.walk__scene--final.is-on .walk__word:nth-child(2) i { transform: none; transition-delay: 0.22s; }
.walk__scene--final.is-on .walk__word:nth-child(3) i { transform: none; transition-delay: 0.34s; }
.walk__scene--final.is-on .walk__word:nth-child(4) i { transform: none; transition-delay: 0.46s; }
.walk__scene--final.is-on .walk__sub { opacity: 1; transform: none; }

/* dust motes drifting through the light */
.motes { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.motes span {
  position: absolute; bottom: -4vh;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 214, 174, 0.9), rgba(230, 214, 174, 0));
  filter: blur(0.5px);
  animation: mote-rise linear infinite;
  opacity: 0;
}
.motes span:nth-child(1) { left: 8%;  animation-duration: 13s; animation-delay: 0s;   transform: scale(1.4); }
.motes span:nth-child(2) { left: 22%; animation-duration: 17s; animation-delay: 3s; }
.motes span:nth-child(3) { left: 35%; animation-duration: 11s; animation-delay: 6s;  transform: scale(0.8); }
.motes span:nth-child(4) { left: 48%; animation-duration: 19s; animation-delay: 1.5s; transform: scale(1.7); }
.motes span:nth-child(5) { left: 61%; animation-duration: 14s; animation-delay: 8s; }
.motes span:nth-child(6) { left: 74%; animation-duration: 16s; animation-delay: 4.5s; transform: scale(1.2); }
.motes span:nth-child(7) { left: 86%; animation-duration: 12s; animation-delay: 9.5s; transform: scale(0.7); }
.motes span:nth-child(8) { left: 94%; animation-duration: 18s; animation-delay: 2s;  transform: scale(1.5); }
@keyframes mote-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.85; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-105vh) translateX(4vw); opacity: 0; }
}

/* scroll cue */
.walk__cue {
  position: absolute; left: 50%; bottom: 3.5vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  z-index: 4;
  opacity: 0; transition: opacity 1.2s ease 0.9s;
}
body[data-state="ready"] .walk__cue { opacity: 1; }
.walk__cueline { width: 1px; height: 56px; background: rgba(230, 214, 174, 0.55); overflow: hidden; position: relative; }
.walk__cueline::after {
  content: ""; position: absolute; inset: 0; background: var(--ivory);
  animation: scroll-drip 2.4s var(--ease-lux) infinite;
}
@keyframes scroll-drip {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}
.walk__cuetext {
  font-size: 0.68rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--champagne);
}

/* reduced motion / no-JS fallback: show only the final scene, statically */
@media (prefers-reduced-motion: reduce) {
  .walk { height: 100svh; }
  .walk__scene { display: none; }
  .walk__scene--final { display: block; opacity: 1; visibility: visible; }
  .walk__scene--final .walk__eyebrow span,
  .walk__scene--final .walk__word i { transform: none; }
  .walk__scene--final .walk__sub { opacity: 1; transform: none; }
  .walk__curtain, .motes, .walk__cue { display: none; }
  /* subpage motion off, too */
  .phead::after { animation: none !important; }
  .arch-frame img { animation: none !important; }
}

/* the flower-of-life field breathes behind the dark subpage headers */
@keyframes flower-drift {
  from { background-position: 0 0; }
  to   { background-position: 150px 260px; }
}

/* keyboard focus — visible, on-brand, never on mouse click */
:focus-visible {
  outline: 2px solid var(--chartreuse);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   SHARED — eyebrows, headings, reveals, arch frames
   ========================================================================== */
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--olive);
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: ""; width: 44px; height: 2px; background: var(--chartreuse);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease-lux) 0.2s;
}
.eyebrow.in-view::before, .reveal.in-view + * .eyebrow::before { transform: scaleX(1); }
.eyebrow--light { color: var(--champagne); }

h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  line-height: 1.12; letter-spacing: -0.01em;
}
h2 em, h3 em { color: var(--moss); }

.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 1s var(--ease-lux), transform 1s var(--ease-lux);
}
.reveal.in-view { opacity: 1; transform: none; }

.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block; transform: translateY(110%);
  transition: transform 1.15s var(--ease-lux);
}
.reveal-line.in-view > span { transform: none; }
.reveal-line:nth-child(2) > span { transition-delay: 0.12s; }
.reveal-line:nth-child(3) > span { transition-delay: 0.24s; }

.arch-frame {
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.arch-frame--soft { border-radius: 38% 38% 2rem 2rem / 22% 22% 2rem 2rem; }
.arch-frame::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(194, 163, 104, 0.35);
  pointer-events: none;
}
/* every framed image breathes — a slow ken-burns, but ONLY while on-screen
   (enhance.js toggles .kb-run) so off-screen frames cost the compositor nothing.
   Videos are not scaled — they already carry their own motion. */
.arch-frame img {
  animation: kenburns 16s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.arch-frame.kb-run img { animation-play-state: running; will-change: transform; }
@keyframes kenburns {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.07) translateY(-1.5%); }
}
.philosophy__figure .arch-frame img { animation-duration: 19s; }
.therapies--single .arch-frame img { animation-duration: 22s; }

/* ==========================================================================
   PHILOSOPHY
   ========================================================================== */
.philosophy { padding: clamp(6rem, 14vh, 11rem) var(--pad) clamp(4rem, 9vh, 7rem); }
.philosophy__statement {
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  max-width: 18ch;
  margin-bottom: clamp(3.5rem, 8vh, 6rem);
}
.philosophy__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.philosophy__figure { max-width: 520px; }
.philosophy__figure .arch-frame { aspect-ratio: 4 / 5; }
.philosophy__figure figcaption {
  margin-top: 1rem;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive);
}
.philosophy__text { max-width: 56ch; padding-top: 1rem; }
.philosophy__text p + p { margin-top: 1.4rem; }
.philosophy__text strong { font-weight: 500; }
.philosophy__text blockquote {
  margin: 2.6rem 0;
  padding-left: 1.8rem;
  border-left: 1px solid var(--gold);
}
.philosophy__text blockquote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.4;
  color: var(--olive);
}
.philosophy__text cite {
  display: block; margin-top: 0.9rem;
  font-style: normal; font-size: 0.78rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  opacity: 0.6;
}
.textlink {
  display: inline-block; position: relative;
  font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--olive); padding-bottom: 0.4rem;
}
.textlink__line {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--gold);
  transform-origin: left; transition: transform 0.5s var(--ease-lux);
}
.textlink:hover .textlink__line { transform: scaleX(0.35); }
@media (max-width: 880px) {
  .philosophy__grid { grid-template-columns: 1fr; }
  .philosophy__figure { max-width: 440px; }
}

/* ==========================================================================
   FOUNDER — Her Holiness Sai Maa
   ========================================================================== */
.founder {
  padding: clamp(5rem, 12vh, 9rem) var(--pad) clamp(6rem, 13vh, 10rem);
  background: linear-gradient(180deg, var(--ivory), var(--travertine) 55%, var(--ivory));
}
.founder h2 { margin-bottom: clamp(3rem, 7vh, 5rem); }
.founder__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.founder__lede {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.45;
  color: var(--olive);
  margin-bottom: 1.6rem;
}
.founder__text > p + p { margin-top: 1.2rem; }
.founder__text em { color: var(--olive); }
.founder__milestones {
  position: relative;
  list-style: none;
  margin: 2.6rem 0;
  display: grid; gap: 1.7rem;
}
.founder__milestones::before { /* the timeline draws itself as you arrive */
  content: ""; position: absolute; left: 0; top: 0.5em; bottom: 1em; width: 1px;
  background: linear-gradient(var(--gold), rgba(194, 163, 104, 0.2));
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.5s var(--ease-lux);
}
.founder__milestones.is-drawn::before { transform: scaleY(1); }
.founder__milestones li {
  position: relative;
  padding-left: 1.8rem;
  border-left: 1px solid transparent; /* the drawn line above replaces the static rule */
}
.founder__milestones li::before { /* gold node on the timeline */
  content: ""; position: absolute; left: -4px; top: 0.45em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(194, 163, 104, 0.18);
}
.founder__milestones span {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.founder__milestones p { font-size: 0.97rem; max-width: 52ch; }
.founder__milestones li:nth-child(2) { transition-delay: 0.1s; }
.founder__milestones li:nth-child(3) { transition-delay: 0.2s; }
.founder__milestones li:nth-child(4) { transition-delay: 0.3s; }
.founder__figure { position: sticky; top: 10vh; max-width: 520px; justify-self: end; }
.founder__figure .arch-frame { aspect-ratio: 4 / 5; }
.founder__figure .arch-frame img { object-position: 50% 18%; animation-duration: 24s; }
.founder__figure figcaption {
  margin-top: 1rem;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive); text-align: right;
}
@media (max-width: 880px) {
  .founder__grid { grid-template-columns: 1fr; }
  .founder__figure { position: static; order: -1; max-width: 440px; justify-self: start; }
  .founder__figure figcaption { text-align: left; }
}

/* ==========================================================================
   MARQUEE — gold chain divider
   ========================================================================== */
.marquee {
  overflow: hidden; white-space: nowrap;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(194, 163, 104, 0.4);
  border-bottom: 1px solid rgba(194, 163, 104, 0.4);
  background:
    repeating-linear-gradient(90deg,
      rgba(194, 163, 104, 0.07) 0 1px, transparent 1px 7px);
}
.marquee__track {
  display: inline-flex; align-items: center; gap: 2.8rem;
  animation: marquee 36s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  color: var(--olive);
}
.marquee__track i { color: var(--gold); font-style: normal; font-size: 0.9rem; animation: twinkle 2.8s ease-in-out infinite; }
.marquee__track i:nth-child(4n) { animation-delay: 0.7s; }
.marquee__track i:nth-child(4n+2) { animation-delay: 1.4s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   SANCTUARY — horizontal gallery
   ========================================================================== */
.sanctuary { padding: clamp(6rem, 13vh, 10rem) 0 clamp(5rem, 11vh, 9rem); }
.sanctuary__head {
  padding: 0 var(--pad);
  display: flex; flex-wrap: wrap; align-items: end; gap: 1.5rem 4rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.sanctuary__head .eyebrow { width: 100%; margin-bottom: 0.4rem; }
.sanctuary__hint {
  margin-left: auto;
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold);
}
.gallery {
  display: flex; gap: clamp(1.2rem, 2.5vw, 2.2rem);
  overflow-x: auto;
  padding: 0 var(--pad) 1.5rem;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: var(--pad);
  cursor: grab;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__item {
  flex: 0 0 auto;
  width: min(72vw, 560px);
  scroll-snap-align: start;
  transition: transform 0.8s var(--ease-lux);
}
.gallery__item:hover { transform: translateY(-10px); }
.gallery__item img {
  aspect-ratio: 4 / 3;
  border-radius: 1.2rem;
  user-select: none; -webkit-user-drag: none;
  transition: filter 0.8s var(--ease-lux), box-shadow 0.8s var(--ease-lux);
}
.gallery__item:hover img {
  filter: brightness(1.06) saturate(1.06);
  box-shadow: 0 24px 50px -18px rgba(42, 46, 27, 0.45);
}
.gallery__item figcaption span { transition: color 0.5s; }
.gallery__item:hover figcaption span { color: var(--moss); }
.gallery__item--tall { width: min(58vw, 400px); }
.gallery__item--tall img { aspect-ratio: 3 / 4; }
.gallery__item figcaption {
  display: flex; align-items: baseline; gap: 0.9rem;
  margin-top: 0.9rem;
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.gallery__item figcaption span {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold); letter-spacing: 0.05em;
}

/* ==========================================================================
   THERAPIES
   ========================================================================== */
.therapies { padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.therapies--single { padding-top: clamp(4rem, 9vh, 7rem); }
.therapies > h2 { margin-bottom: clamp(1.4rem, 3vh, 2rem); }
.therapies__lede {
  max-width: 56ch; margin-bottom: clamp(3rem, 7vh, 5rem);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--olive);
}

/* the full therapy menu */
.menu {
  margin-top: clamp(3.5rem, 8vh, 6rem);
  border-top: 1px solid rgba(194, 163, 104, 0.4);
  padding-top: clamp(2rem, 4vh, 3rem);
}
.menu__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--olive); margin-bottom: 1.6rem;
}
.menu__list {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem 3rem;
}
.menu__list li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.95rem 0; border-bottom: 1px solid rgba(194, 163, 104, 0.22);
  font-size: 0.95rem; color: var(--ink);
}
.menu__list li span {
  flex: 0 0 auto; min-width: 11rem;
  font-family: var(--font-display); font-size: 1.12rem; color: var(--moss);
}
.menu__note {
  margin-top: 1.6rem; font-style: italic;
  font-family: var(--font-display); color: var(--olive);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
@media (max-width: 760px) {
  .menu__list { grid-template-columns: 1fr; gap: 0; }
  .menu__list li { flex-direction: column; gap: 0.2rem; }
  .menu__list li span { min-width: 0; }
}
.therapy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vh, 4.5rem) 0;
}
.therapy--flip .therapy__media { order: 2; }
.therapy__media .arch-frame { aspect-ratio: 5 / 4; max-width: 620px; }
.therapy__num {
  display: inline-block;
  font-size: 0.74rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.therapy__num--ice { color: var(--ice-soft); }
.therapy h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15;
  margin-bottom: 1.2rem;
}
.therapy__body p { max-width: 50ch; }
.therapy__expect {
  list-style: none;
  margin-top: 1.6rem;
  display: grid; gap: 0.55rem;
}
.therapy__expect li {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-size: 0.95rem;
  padding-left: 1.1rem; position: relative;
}
.therapy__expect li::before {
  content: "✦"; position: absolute; left: 0; top: 0.1em;
  font-size: 0.55rem; color: var(--gold);
}
.therapy__expect strong {
  font-weight: 500; color: var(--olive); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.therapy__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.therapy__tags span {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid rgba(194, 163, 104, 0.55);
  border-radius: 99px; padding: 0.45rem 1.1rem;
  color: var(--olive);
  transition: background 0.4s var(--ease-lux), color 0.4s, border-color 0.4s;
}
.therapy__tags span:hover { background: var(--chartreuse); border-color: var(--chartreuse); color: var(--ink); }
@media (max-width: 880px) {
  .therapy { grid-template-columns: 1fr; }
  .therapy--flip .therapy__media { order: 0; }
}

/* ==========================================================================
   CRYO — the cold interlude
   ========================================================================== */
.cryo {
  position: relative;
  min-height: 92svh;
  display: grid; align-items: center;
  overflow: hidden;
  color: #EDF0FF;
  background: var(--midnight);
}
.cryo__media { position: absolute; inset: -10% 0; }
.cryo__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 12, 34, 0.92) 0%, rgba(6, 12, 34, 0.55) 50%, rgba(6, 12, 34, 0.25) 100%),
    radial-gradient(70% 90% at 80% 50%, transparent 30%, rgba(6, 12, 34, 0.6) 100%);
}
/* rolling cold vapour */
.cryo__fog { position: absolute; inset: 0; pointer-events: none; }
.cryo__fog i {
  position: absolute;
  width: 65vw; height: 45vh;
  bottom: -12vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(159, 176, 255, 0.16), transparent 65%);
  filter: blur(28px);
  animation: fog-drift ease-in-out infinite alternate;
}
.cryo__fog i:nth-child(1) { left: -10vw; animation-duration: 13s; }
.cryo__fog i:nth-child(2) { left: 30vw; bottom: -18vh; width: 80vw; animation-duration: 17s; animation-delay: -6s; }
.cryo__fog i:nth-child(3) { left: 55vw; bottom: -8vh; width: 50vw; animation-duration: 11s; animation-delay: -3s; }
@keyframes fog-drift {
  from { transform: translateX(-6vw) translateY(1vh) scale(1); opacity: 0.7; }
  to   { transform: translateX(6vw) translateY(-4vh) scale(1.15); opacity: 1; }
}
.cryo__content {
  position: relative;
  padding: clamp(5rem, 12vh, 8rem) var(--pad);
  max-width: 640px;
}
.cryo__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.08;
  margin-bottom: 1.6rem;
}
.cryo__title em { color: var(--ice-soft); }
.cryo__content > p { color: rgba(237, 240, 255, 0.82); max-width: 44ch; }
.cryo__stats {
  display: flex; gap: clamp(1.8rem, 4vw, 3.5rem);
  margin-top: 2.8rem;
}
.cryo__stats span {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(237, 240, 255, 0.55);
}
.cryo__stats strong {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ice-soft); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cryo__note {
  margin-top: 1.6rem;
  font-size: 0.85rem; letter-spacing: 0.06em;
  color: rgba(237, 240, 255, 0.55);
  max-width: 46ch;
}

/* ==========================================================================
   JOURNEY
   ========================================================================== */
.journey {
  padding: clamp(6rem, 14vh, 11rem) var(--pad);
  background:
    linear-gradient(180deg, var(--travertine), var(--ivory));
}
.journey h2 { margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.journey__steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.journey__steps li { padding-top: 1.6rem; position: relative; }
.journey__steps li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s var(--ease-lux) 0.3s;
}
.journey__steps li.in-view::before { transform: scaleX(1); }
.journey__steps li:nth-child(2) { transition-delay: 0.12s; }
.journey__steps li:nth-child(2)::before { transition-delay: 0.42s; }
.journey__steps li:nth-child(3) { transition-delay: 0.24s; }
.journey__steps li:nth-child(3)::before { transition-delay: 0.54s; }
.journey__steps li:nth-child(4) { transition-delay: 0.36s; }
.journey__steps li:nth-child(4)::before { transition-delay: 0.66s; }
.journey__no {
  display: inline-block;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.1rem; color: var(--gold);
  animation: floaty 5.5s ease-in-out infinite;
}
.journey__steps li:nth-child(2) .journey__no { animation-delay: 1.1s; }
.journey__steps li:nth-child(3) .journey__no { animation-delay: 2.2s; }
.journey__steps li:nth-child(4) .journey__no { animation-delay: 3.3s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.journey__steps h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin: 0.7rem 0 0.7rem;
}
.journey__steps p { font-size: 0.97rem; max-width: 30ch; }
@media (max-width: 880px) {
  .journey__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .journey__steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TEAM — the practitioners
   ========================================================================== */
.team { padding: clamp(6rem, 13vh, 10rem) var(--pad); }
.team__intro { max-width: 52ch; margin: 1.4rem 0 clamp(3rem, 7vh, 5rem); }
.team__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
}
.team__card:nth-child(2) { transition-delay: 0.12s; }
.team__card:nth-child(3) { transition-delay: 0.24s; }
.team__portrait {
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(184, 200, 75, 0.22), transparent 60%),
    linear-gradient(180deg, var(--travertine), var(--stone));
  display: grid; place-content: center; place-items: center; gap: 1rem;
  color: var(--gold);
  margin-bottom: 1.4rem;
  position: relative; overflow: hidden;
}
.team__portrait::after { /* light sweep, keeps the empty frame alive */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 252, 240, 0.5) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: cta-shimmer 6s ease-in-out infinite;
}
/* a real photo fills the portrait frame — no shimmer/placeholder */
.team__portrait--photo { background: var(--stone); }
.team__portrait--photo::after { display: none; }
.team__portrait--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.team__portrait svg { width: 64px; height: 64px; }
.team__portrait span {
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  text-align: center; color: var(--olive); opacity: 0.75;
}
.team__card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}
.team__role {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin: 0.45rem 0 0.9rem;
}
.team__bio { font-size: 0.97rem; max-width: 34ch; }
@media (max-width: 880px) {
  .team__grid { grid-template-columns: 1fr; max-width: 440px; }
}

/* ==========================================================================
   VOICES — testimonials
   ========================================================================== */
.voices {
  background: var(--ink); color: var(--ivory);
  padding: clamp(5.5rem, 12vh, 9rem) var(--pad);
}
.voices__track {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.voices__track--single { grid-template-columns: 1fr; max-width: 40ch; }
.voices__track--single blockquote p { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.voices__track blockquote:nth-child(2) { transition-delay: 0.12s; }
.voices__track blockquote:nth-child(3) { transition-delay: 0.24s; }
.voices__track blockquote { position: relative; padding-top: 2.4rem; }
.voices__track blockquote::before {
  content: "“";
  position: absolute; top: -0.4rem; left: -0.4rem;
  font-family: var(--font-display); font-style: italic;
  font-size: 4.5rem; line-height: 1; color: var(--gold); opacity: 0.85;
}
.voices__track p {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45;
  color: var(--champagne);
}
.voices__track cite {
  display: block; margin-top: 1.2rem;
  font-style: normal; font-size: 0.72rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(250, 246, 237, 0.55);
}
.voices__community {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(194, 163, 104, 0.3);
  max-width: 64ch;
  color: rgba(250, 246, 237, 0.8);
}
.voices__community a { color: var(--chartreuse); white-space: nowrap; }
@media (max-width: 880px) {
  .voices__track { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: clamp(6rem, 13vh, 10rem) var(--pad); }
.faq h2 { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.faq__list { max-width: 820px; }
.faq__item {
  border-bottom: 1px solid rgba(194, 163, 104, 0.4);
}
.faq__item:first-of-type { border-top: 1px solid rgba(194, 163, 104, 0.4); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0.2rem;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  transition: color 0.35s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--olive); }
.faq__item summary i { /* plus → minus */
  position: relative; flex: 0 0 18px; height: 18px;
  font-style: normal;
}
.faq__item summary i::before, .faq__item summary i::after {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 1.5px; background: var(--gold);
  transition: transform 0.45s var(--ease-lux);
}
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__answer { overflow: hidden; }
.faq__answer p {
  padding: 0 0.2rem 1.7rem;
  max-width: 62ch;
  animation: faq-in 0.55s var(--ease-lux);
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.faq__answer a { color: var(--olive); border-bottom: 1px solid var(--gold); }

/* ==========================================================================
   VISIT
   ========================================================================== */
.visit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 90svh;
}
.visit__media { overflow: hidden; }
.visit__media img { height: 100%; }
.visit__panel {
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(4rem, 9vh, 7rem) var(--pad);
  display: flex; flex-direction: column; justify-content: center;
}
.visit__panel h2 em { color: var(--chartreuse); }
.visit__contact {
  list-style: none;
  margin: 2.2rem 0 2.8rem;
  display: grid; gap: 0.85rem;
}
.visit__contact li {
  display: flex; align-items: baseline; gap: 1.2rem;
  font-size: 0.92rem; letter-spacing: 0.1em;
  color: var(--champagne);
}
.visit__contact li > span {
  flex: 0 0 3.4rem;
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(250, 246, 237, 0.5);
}
.visit__contact address { font-style: normal; display: inline; }
.visit__contact a {
  border-bottom: 1px solid rgba(230, 214, 174, 0.4);
  transition: color 0.35s, border-color 0.35s;
}
.visit__contact a:hover { color: var(--chartreuse); border-color: var(--chartreuse); }
.visit__form { display: grid; gap: 1.5rem; max-width: 460px; }
.visit__form label { display: grid; gap: 0.5rem; }
.visit__form label span {
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(250, 246, 237, 0.55);
}
.visit__form input, .visit__form select {
  background: transparent;
  border: none; border-bottom: 1px solid rgba(230, 214, 174, 0.45);
  border-radius: 0;
  padding: 0.6rem 0;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 300;
  color: var(--ivory);
  transition: border-color 0.4s;
}
.visit__form select option { color: var(--ink); }
.visit__form input:focus, .visit__form select:focus {
  outline: none; border-bottom-color: var(--chartreuse);
}
.visit__book {
  display: inline-block; align-self: start;
  margin: 0.5rem 0 1.5rem;
  font-size: 0.8rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink); background: var(--chartreuse);
  border: 1px solid var(--chartreuse); border-radius: 99px;
  padding: 1rem 2.4rem;
  transition: transform 0.45s var(--ease-lux), box-shadow 0.45s, background 0.4s, color 0.4s;
}
.visit__book:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -12px rgba(184, 200, 75, 0.6);
}
.visit__or {
  font-size: 0.8rem; letter-spacing: 0.04em;
  color: rgba(250, 246, 237, 0.55); margin-bottom: 1.4rem;
}
.visit__submit {
  justify-self: start;
  margin-top: 1rem;
  position: relative; overflow: hidden;
  font-family: var(--font-body); font-size: 0.8rem;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink);
  background: var(--chartreuse);
  border: 1px solid var(--chartreuse);
  border-radius: 99px;
  padding: 1rem 2.4rem;
  cursor: pointer;
  transition: background 0.45s var(--ease-lux), color 0.45s, transform 0.45s var(--ease-lux), box-shadow 0.45s;
}
.visit__submit::after { /* light sweeps across, slow idle shimmer */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 240, 0.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: cta-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cta-shimmer {
  0%, 55% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
.visit__submit:hover {
  background: var(--ivory); border-color: var(--ivory);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -12px rgba(184, 200, 75, 0.55);
}
.visit__confirm {
  display: none;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.15rem; color: var(--chartreuse);
}
.visit__form.is-sent .visit__confirm { display: block; }
.visit__form.is-sent label, .visit__form.is-sent .visit__submit { display: none; }
@media (max-width: 880px) {
  .visit { grid-template-columns: 1fr; }
  .visit__media { min-height: 46vh; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--ink); color: var(--ivory);
  text-align: center;
  padding: clamp(4rem, 9vh, 6.5rem) var(--pad) 2.5rem;
  border-top: 1px solid rgba(194, 163, 104, 0.3);
}
/* clear the fixed concierge badge on phones so footer text isn't covered */
@media (max-width: 760px) {
  .footer { padding-bottom: 7rem; }
  .footer__contact { padding: 0 3.5rem; }
}
.footer__logo { width: clamp(160px, 22vw, 220px); height: auto; margin: 0 auto 1.6rem; display: block; }
.footer__line {
  font-size: 0.78rem; letter-spacing: 0.42em; text-transform: uppercase;
}
.footer__tag {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: var(--champagne);
  margin: 0.8rem 0 2.4rem;
}
.footer__links {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.4rem 2.6rem; margin-bottom: 2.8rem;
}
.footer__links a {
  font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase;
  opacity: 0.75; transition: opacity 0.35s, color 0.35s;
}
.footer__links a:hover { opacity: 1; color: var(--chartreuse); }
.footer__contact { margin-bottom: 1.2rem; font-size: 0.82rem; letter-spacing: 0.1em; opacity: 0.7; }
.footer__contact a { transition: color 0.35s; }
.footer__contact a:hover { color: var(--chartreuse); }
.footer__legal { font-size: 0.72rem; letter-spacing: 0.08em; opacity: 0.4; }

/* ==========================================================================
   CHAPTER RAIL — desktop wayfinding
   ========================================================================== */
.rail {
  position: fixed; left: 1.4rem; top: 50%; transform: translateY(-50%);
  z-index: 7500;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.rail a {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.rail a i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(194, 163, 104, 0.45);
  transition: background 0.4s, transform 0.4s var(--ease-lux), box-shadow 0.4s;
  flex-shrink: 0;
}
.rail a span {
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--olive);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.35s, transform 0.35s var(--ease-lux);
  white-space: nowrap;
}
.rail a:hover span, .rail a.is-active span { opacity: 1; transform: none; }
.rail a.is-active i {
  background: var(--gold);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(194, 163, 104, 0.2);
}
@media (max-width: 1180px) { .rail { display: none; } }
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   PROTOCOL COMPOSER
   ========================================================================== */
.composer {
  padding: clamp(6rem, 13vh, 10rem) var(--pad);
  background: linear-gradient(180deg, var(--ivory), var(--travertine) 60%, var(--ivory));
}
.composer__intro { max-width: 54ch; margin: 1.4rem 0 clamp(2.5rem, 6vh, 4rem); }
.composer__card {
  max-width: 720px;
  background: var(--ivory);
  border: 1px solid rgba(194, 163, 104, 0.5);
  border-radius: 50% 50% 1.6rem 1.6rem / 12% 12% 1.6rem 1.6rem;
  padding: clamp(2.2rem, 5vw, 3.5rem);
  box-shadow: 0 30px 60px -30px rgba(42, 46, 27, 0.25);
  opacity: 0; transform: translateY(14px);
}
.composer__card.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-lux), transform 0.6s var(--ease-lux);
}
.composer__progress { display: flex; gap: 0.5rem; margin-bottom: 1.8rem; }
.composer__progress i {
  width: 28px; height: 2px; background: rgba(194, 163, 104, 0.35);
  transition: background 0.4s;
}
.composer__progress i.now { background: var(--gold); }
.composer__progress i.done { background: var(--moss); }
.composer__q {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 1.6rem;
}
.composer__options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.composer__options button {
  text-align: left;
  font-family: var(--font-body);
  background: transparent;
  border: 1px solid rgba(194, 163, 104, 0.5);
  border-radius: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.35s, background 0.35s, transform 0.35s var(--ease-lux);
}
.composer__options button:hover {
  background: color-mix(in srgb, var(--chartreuse) 18%, transparent);
  border-color: var(--moss);
  transform: translateY(-2px);
}
.composer__options strong {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.15rem; color: var(--ink);
}
.composer__options span { font-size: 0.85rem; color: var(--olive); }
@media (max-width: 560px) { .composer__options { grid-template-columns: 1fr; } }

.composer__eyebrow {
  font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.6rem;
}
.composer__title {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--olive);
  margin-bottom: 1.6rem;
}
.composer__steps { list-style: none; display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
.composer__steps li {
  display: flex; gap: 1rem; align-items: baseline;
  opacity: 0; transform: translateY(10px);
}
.composer__card.is-in .composer__steps li {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease-lux), transform 0.7s var(--ease-lux);
}
.composer__steps span {
  font-family: var(--font-display); font-style: italic;
  color: var(--gold); flex-shrink: 0;
}
.composer__steps strong { font-weight: 500; }
.composer__steps p { font-size: 0.92rem; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.composer__note { font-size: 0.95rem; max-width: 52ch; }
.composer__fineprint {
  margin-top: 0.8rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(42, 46, 27, 0.45);
}
.composer__actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.composer__cta {
  font-family: var(--font-body); font-size: 0.78rem;
  letter-spacing: 0.26em; text-transform: uppercase;
  background: var(--ink); color: var(--ivory);
  border: 1px solid var(--ink); border-radius: 99px;
  padding: 0.95rem 2.1rem; cursor: pointer;
  transition: background 0.4s, color 0.4s, transform 0.4s var(--ease-lux);
}
.composer__cta:hover { background: var(--chartreuse); border-color: var(--chartreuse); color: var(--ink); transform: translateY(-2px); }
.composer__restart {
  font-family: var(--font-body); font-size: 0.74rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
  color: var(--olive);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.2rem;
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 9300;
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-lux), visibility 0.45s;
}
body.lightbox-open .lightbox { opacity: 1; visibility: visible; }
body.lightbox-open { overflow: hidden; }
.lightbox figure {
  max-width: min(86vw, 1200px); max-height: 84svh;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.lightbox img {
  width: auto; height: auto;
  max-width: 100%; max-height: 76svh;
  object-fit: contain;
  border-radius: 0.8rem;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  transform: scale(0.97);
  transition: transform 0.5s var(--ease-lux);
}
body.lightbox-open .lightbox img { transform: none; }
.lightbox figcaption {
  text-align: center;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champagne);
}
.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.6rem;
  background: none; border: none; cursor: pointer;
  color: var(--champagne); font-size: 2.2rem; line-height: 1;
  transition: color 0.3s, transform 0.3s;
}
.lightbox__close:hover { color: var(--chartreuse); transform: rotate(90deg); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid rgba(230, 214, 174, 0.4);
  border-radius: 50%; width: 52px; height: 52px;
  color: var(--champagne); font-size: 1.2rem; cursor: pointer;
  transition: background 0.35s, border-color 0.35s, color 0.35s;
}
.lightbox__nav:hover { background: var(--chartreuse); border-color: var(--chartreuse); color: var(--ink); }
.lightbox__nav--prev { left: clamp(0.8rem, 3vw, 2.5rem); }
.lightbox__nav--next { right: clamp(0.8rem, 3vw, 2.5rem); }
@media (max-width: 640px) { .lightbox__nav { display: none; } }

/* ==========================================================================
   AMBIENT SOUND TOGGLE
   ========================================================================== */
.soundtoggle {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + 76px);
  z-index: 8790;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(194, 163, 104, 0.55);
  background: color-mix(in srgb, var(--ivory) 85%, transparent);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; gap: 2.5px;
  padding-bottom: 15px;
  transition: border-color 0.4s, transform 0.4s var(--ease-lux);
}
.soundtoggle:hover { transform: translateY(-2px); border-color: var(--gold); }
.soundtoggle i {
  width: 2.5px; border-radius: 2px;
  background: var(--olive);
  height: 5px;
  transition: background 0.4s;
}
body.sound-on .soundtoggle i { background: var(--moss); animation: sound-bar 1.4s ease-in-out infinite; }
body.sound-on .soundtoggle i:nth-child(1) { animation-delay: 0s; }
body.sound-on .soundtoggle i:nth-child(2) { animation-delay: 0.25s; }
body.sound-on .soundtoggle i:nth-child(3) { animation-delay: 0.5s; }
body.sound-on .soundtoggle i:nth-child(4) { animation-delay: 0.12s; }
@keyframes sound-bar {
  0%, 100% { height: 5px; }
  50% { height: 14px; }
}

/* ==========================================================================
   THE CONCIERGE — chat widget
   ========================================================================== */
.concierge { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 8800; }
/* trim the floating launchers on phones so they sit lighter over content */
@media (max-width: 760px) {
  .concierge .concierge__launcher { width: 54px; height: 54px; }
  .concierge .concierge__launcher svg { width: 22px; height: 22px; }
  .soundtoggle.soundtoggle { width: 40px; height: 40px; bottom: calc(clamp(1rem, 3vw, 2rem) + 62px); }
}

.concierge__launcher {
  position: relative;
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--ink);
  color: var(--champagne);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 14px 36px -10px rgba(42, 46, 27, 0.55);
  transition: transform 0.45s var(--ease-lux), background 0.45s;
}
.concierge__launcher svg { width: 26px; height: 26px; }
.concierge__launcher:hover { transform: translateY(-3px); background: #3a3f26; }
body.concierge-open .concierge__launcher { transform: scale(0.92); }
.concierge__pulse {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--gold);
  animation: concierge-pulse 3s ease-out infinite;
  pointer-events: none;
}
body.concierge-open .concierge__pulse { display: none; }
@keyframes concierge-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

.concierge__panel {
  position: absolute; right: 0; bottom: 78px;
  width: min(380px, calc(100vw - 2rem));
  height: min(560px, calc(100svh - 8rem));
  display: flex; flex-direction: column;
  background: var(--ivory);
  border: 1px solid rgba(194, 163, 104, 0.45);
  border-radius: 1.4rem 1.4rem 0.4rem 1.4rem;
  box-shadow: 0 30px 70px -20px rgba(42, 46, 27, 0.5);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(16px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.4s var(--ease-lux), transform 0.4s var(--ease-lux), visibility 0.4s;
}
body.concierge-open .concierge__panel { opacity: 1; visibility: visible; transform: none; }

.concierge__head {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.2rem;
  background: var(--ink); color: var(--ivory);
}
.concierge__head svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
.concierge__head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.concierge__head p { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--champagne); opacity: 0.8; }
.concierge__close {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: var(--champagne); font-size: 1.5rem; line-height: 1;
  padding: 0.2rem 0.4rem;
  transition: color 0.3s, transform 0.3s;
}
.concierge__close:hover { color: var(--chartreuse); transform: rotate(90deg); }

.concierge__messages {
  flex: 1; overflow-y: auto;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  scrollbar-width: thin;
}
.concierge__msg {
  max-width: 85%;
  padding: 0.7rem 1rem;
  font-size: 0.93rem; line-height: 1.5;
  animation: msg-in 0.45s var(--ease-lux);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.concierge__msg--bot {
  align-self: flex-start;
  background: var(--travertine);
  border-radius: 1rem 1rem 1rem 0.25rem;
}
.concierge__msg--user {
  align-self: flex-end;
  background: var(--chartreuse); color: var(--ink);
  border-radius: 1rem 1rem 0.25rem 1rem;
}
.concierge__typing { display: flex; gap: 5px; padding: 0.9rem 1rem; }
.concierge__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--olive);
  animation: typing-dot 1.2s ease-in-out infinite;
}
.concierge__typing i:nth-child(2) { animation-delay: 0.18s; }
.concierge__typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-dot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.concierge__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.3rem; }
.concierge__chips button {
  font-family: var(--font-body); font-size: 0.78rem;
  border: 1px solid rgba(194, 163, 104, 0.6); border-radius: 99px;
  background: transparent; color: var(--olive);
  padding: 0.45rem 0.95rem; cursor: pointer;
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.concierge__chips button:hover { background: var(--chartreuse); border-color: var(--chartreuse); color: var(--ink); }

.concierge__inputrow {
  display: flex; gap: 0.5rem;
  padding: 0.8rem 1rem 0.4rem;
  border-top: 1px solid rgba(194, 163, 104, 0.35);
}
.concierge__inputrow input {
  flex: 1;
  border: none; background: transparent;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 300;
  color: var(--ink);
  padding: 0.5rem 0.2rem;
}
.concierge__inputrow input:focus { outline: none; }
.concierge__inputrow button {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--ink); color: var(--champagne);
  display: grid; place-items: center;
  transition: background 0.35s, transform 0.35s var(--ease-lux);
}
.concierge__inputrow button svg { width: 16px; height: 16px; }
.concierge__inputrow button:hover { background: var(--olive); transform: scale(1.07); }

.concierge__disclaimer {
  padding: 0 1.2rem 0.8rem;
  font-size: 0.66rem; letter-spacing: 0.06em;
  color: rgba(42, 46, 27, 0.45);
  text-align: center;
}

@media (max-width: 520px) {
  .concierge__panel {
    position: fixed; inset: auto 0 0 0;
    width: 100%; height: min(82svh, 640px);
    border-radius: 1.4rem 1.4rem 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
}
/* iOS zooms the page when a focused input is under 16px — keep inputs at 16px on touch */
@media (max-width: 760px) {
  .concierge__inputrow input,
  .visit__form input, .visit__form select { font-size: 16px; }
}

/* utility */
.br-d { display: none; }
@media (min-width: 700px) { .br-d { display: inline; } }

/* ==========================================================================
   FOUNDER REVISIONS — bigger, greener, more legible (Jun 2026)
   ========================================================================== */

/* de-neon: deep green for accent lines, soft green selection (bright lime kept for CTAs) */
.eyebrow::before,
.eyebrow.in-view::before,
.reveal.in-view + * .eyebrow::before { background: var(--moss); }
::selection { background: #DCE7C8; color: var(--ink); }

/* drop cap — illuminated green initial on a section's opening paragraph */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display); font-weight: 400;
  font-size: 3.5em; line-height: 0.68;
  margin: 0.04em 0.14em 0 0;
  color: var(--moss);
}
.dropcap { text-indent: 0; }

/* more green — shift signature accents from gold toward the brand green */
.therapy__num { color: var(--moss); }
.therapy__num--ice { color: var(--ice-soft); }   /* keep the cold interlude blue */
.journey__no { color: var(--moss); }
.textlink__line { background: var(--moss); }
.menu__list li span { color: var(--olive); }
.composer__progress i.now { background: var(--moss); }

/* legibility: deep gold for any gold text sitting on the ivory base */
.founder__milestones span,
.team__role,
.cryo__stats strong + *,
.faq__answer a { color: var(--gold-deep); }
.faq__answer a { border-bottom-color: var(--gold-deep); }

/* roomier, easier-to-read body copy for a 30–60 audience */
.philosophy__text p,
.founder__text p,
.therapy__body p,
.journey__steps p,
.faq__answer p { font-size: 1.14rem; line-height: 1.7; }

/* the Sanctuary gallery — captions removed (kept in DOM for the lightbox) */
.gallery__item figcaption { display: none; }

/* supporting text — a touch up from original, no more */
.eyebrow { font-size: 0.82rem; }
.nav__links a { font-size: 0.9rem; }
.therapy__tags span { font-size: 0.82rem; }
.menu__list li { font-size: 1.05rem; }
.menu__list li span { font-size: 0.86rem; }
.team__bio { font-size: 1.06rem; }
.team__role { font-size: 0.9rem; }
.faq__item summary { font-size: 1.14rem; }
.founder__milestones span { font-size: 0.82rem; }
.founder__milestones p { font-size: 1.06rem; }
.footer__links a { font-size: 0.9rem; }
.footer__contact, .footer__legal { font-size: 0.88rem; }
figcaption { font-size: 0.9rem; }
.pcta__fine, .visit__or { font-size: 0.9rem; }
.composer__intro, .sanctuary__head p, .therapies__lede, .team__intro { font-size: 1.05rem; }

/* ==========================================================================
   SAI MAA — no faint / invisible text. Everything must be readable & seen.
   ========================================================================== */
/* intro + hero (dark scenes): brighten pale champagne to full ivory */
.walk__logo-tag span { color: var(--ivory); opacity: 1; }
.walk__eyebrow span  { color: var(--ivory); opacity: 1; }
.walk__sub           { color: var(--ivory); }
.walk__cuetext       { color: var(--ivory); opacity: 0.92; }
.walk__caption       { color: var(--ivory); }

/* footer: kill the dim opacities */
.footer__contact { opacity: 1; }
.footer__links a { opacity: 1; }
.footer__legal   { opacity: 0.9; color: var(--olive); }

/* small labels / cites that were faded out */
.team__portrait span { opacity: 1; color: var(--olive); }
.team__role { opacity: 1; }
blockquote cite, figcaption, .menu__note, .voices__community { opacity: 1; }
.philosophy__text blockquote cite { opacity: 1 !important; color: var(--gold-deep); }

/* membership / dark sections: champagne → ivory for body, brighter eyebrow */
.voices blockquote p { color: var(--ivory); }
.eyebrow--light { color: var(--champagne); opacity: 1; }
.visit__panel .eyebrow--light { color: var(--champagne); }

/* ==========================================================================
   SAI MAA — headers BIG & LOUD across the whole site
   ========================================================================== */
h1, h2, h3 { font-weight: 500; }
h2 { font-size: clamp(2.6rem, 5.8vw, 4.8rem); line-height: 1.06; }
.walk__title { font-weight: 500; font-size: clamp(2.9rem, 7.2vw, 6.2rem); }
.walk__logo-headline span { font-weight: 600; }
.philosophy__statement { font-size: clamp(2.7rem, 6.6vw, 5.2rem); font-weight: 500; }
.cryo__title { font-weight: 500; font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.panel-head, .pcta h2, .voices blockquote p { font-weight: 500; }
.therapy__body h3, .team__card h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; }
.journey__steps h4 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; }
.faq__item summary { font-weight: 500; }
/* eyebrows: BIG, bold, vivid green — visible to a 68-yr-old (Sai Maa) */
.eyebrow { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; color: var(--moss); }
.eyebrow::before, .eyebrow.in-view::before,
.reveal.in-view + * .eyebrow::before { width: 42px; height: 3px; background: var(--moss); }
.eyebrow--light { color: var(--lime-bright); }
.phead .eyebrow { color: var(--lime-bright); }

/* ==========================================================================
   ONYX THEME — whole site in the dark "Brochure #2" style + purple
   (Sai Maa's direct feedback). Dark green-charcoal, lime + gold + purple.
   ========================================================================== */
:root{
  --ink:#181D0E;              /* deep green-charcoal surface */
  --olive:#B3C285;            /* light sage — readable secondary text on dark */
  --moss:#C7DD2E;             /* bright lime accent */
  --champagne:#E8DAB4;
  --purple:#D30CD9;           /* purple accent */
}
body{ background:#13170B; color:var(--ivory); }
body::before{
  background:
    radial-gradient(120% 90% at 85% -8%, rgba(199,221,46,0.12), transparent 58%),
    radial-gradient(100% 80% at -10% 100%, rgba(211,12,217,0.12), transparent 55%),
    linear-gradient(180deg,#171C0D,#0F1209) !important;
}
/* flower-of-life: lime, more present on dark */
.sacred{ opacity:0.17; filter:brightness(2.2) sepia(1) hue-rotate(42deg) saturate(3); }

/* ---- light sections → dark ---- */
/* transparent so the fixed flower-of-life watermark (.sacred) shows through every section */
.pcta{ background:transparent !important; border-top-color:rgba(199,221,46,0.25) !important; }
.marquee{ background:transparent !important; }
.gallery, .sanctuary{ background:transparent !important; }
.founder{ background:transparent !important; }
.composer{ background:transparent !important; }
.team__portrait--photo{ background:#222a14 !important; }
.composer__card{ background:#1B210F !important; border:1px solid rgba(199,221,46,0.18) !important; }
.philosophy__figure figcaption, figcaption{ color:var(--olive); }

/* ---- nav ---- */
.nav{ color:var(--ivory); }
.nav.is-solid{ background:color-mix(in srgb,#13170B 90%,transparent) !important; color:var(--ivory) !important;
  box-shadow:0 1px 0 rgba(199,221,46,0.14) !important; }

/* ---- text that was dark on light → light on dark ---- */
.therapy__tags span{ color:var(--ivory); border-color:rgba(232,218,180,0.4); }
.menu__list li{ color:var(--ivory); }
.faq__item summary{ color:var(--ivory); }
.faq__answer p{ color:var(--olive); }
.faq__item{ border-color:rgba(232,218,180,0.18); }
.composer__intro, .therapies__lede, .team__intro, .sanctuary__head p, .philosophy__text p,
.founder__text p, .therapy__body p, .journey__steps p, .cryo__content p, .visit__panel p{ color:#E9E4D2; }
.team__bio, .founder__milestones p, .practice__uses, .practice__science li{ color:var(--olive); }
.practice__science li b, .practice__uses b{ color:var(--ivory); }
blockquote p{ color:var(--ivory); }

/* ---- accents: lime headings, PURPLE eyebrow bars + drop caps + key italics ---- */
h2 em, h3 em, .walk__word--accent i, .pcta h2 em{ color:var(--moss); }
.philosophy__statement em, .founder h2 em, .cryo__title em{ color:var(--purple); }
.eyebrow{ color:var(--moss); }
.eyebrow::before, .eyebrow.in-view::before,
.reveal.in-view + * .eyebrow::before{ background:var(--purple); width:46px; height:3px; }
.dropcap::first-letter{ color:var(--purple); }
.therapy__num{ color:var(--moss); }
.textlink{ color:var(--ivory); } .textlink__line{ background:var(--moss); }

/* ---- forms (visit) on dark ---- */
.visit__form label span{ color:var(--olive); }
.visit__form input, .visit__form select, .visit__form textarea{
  background:rgba(255,255,255,0.04) !important; color:var(--ivory) !important;
  border-color:rgba(232,218,180,0.3) !important; }

/* ---- concierge chat panel → dark ---- */
.concierge__panel{ background:#161B0D !important; }
.concierge__messages{ background:#161B0D !important; }
.concierge__msg--bot{ background:rgba(199,221,46,0.08) !important; color:var(--ivory) !important; }
.concierge__inputrow input{ color:var(--ivory) !important; }

/* arch-frame hairline + section rules → warmer on dark */
.arch-frame::after{ box-shadow:inset 0 0 0 1px rgba(232,218,180,0.4); }

/* ---- kill remaining light elements → Onyx ---- */
/* empty portrait placeholder arches (Dr. Ankit / Office Manager) */
.team__portrait{ background:
    radial-gradient(120% 100% at 50% 0%, rgba(199,221,46,0.14), transparent 60%),
    linear-gradient(180deg,#1B210F,#13170B) !important;
  color:var(--moss) !important; }
.team__portrait::after{ background:linear-gradient(110deg, transparent 35%, rgba(199,221,46,0.10) 50%, transparent 65%) !important; }
.team__portrait span{ color:var(--olive) !important; }
/* floating sound toggle → dark glass */
.soundtoggle{ background:color-mix(in srgb,#161B0D 88%,transparent) !important; border-color:rgba(199,221,46,0.4) !important; }
/* visit submit: on-theme hover + softer sheen (no bright cream) */
.visit__submit:hover{ background:var(--moss) !important; border-color:var(--moss) !important; color:#13170B !important; }
.visit__submit::after{ background:linear-gradient(110deg, transparent 30%, rgba(199,221,46,0.18) 50%, transparent 70%) !important; }
/* journey ("a year, designed around you") section was a light cream gradient — now transparent so the flower shows */
.journey{ background:transparent !important; }

/* ---- soft fading hairline divider between sections (uses background-image so existing
       section background-colors like .cryo navy / .voices dark are preserved) ---- */
.philosophy, .therapies, .journey, .founder, .sanctuary, .visit, .faq, .composer,
.voices, .cryo, .marquee, .pcta, .gallery,
.team-page .team, .pintro, .field-math, .pcare{
  background-image:linear-gradient(90deg,
    transparent,
    rgba(199,221,46,0.55) 24%,
    rgba(211,12,217,0.65) 50%,
    rgba(199,221,46,0.55) 76%,
    transparent) !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:min(620px, 72%) 2px !important;
  padding-top:clamp(5rem, 11vh, 8rem) !important;
}

/* ==========================================================================
   READABILITY PASS — bigger small text, no faint text, more neon green
   ========================================================================== */
/* the genuinely broken one: chat disclaimer was dark text at 45% on a dark panel */
.concierge__disclaimer{ color:var(--olive) !important; font-size:0.8rem !important; }
/* small uppercase labels were ~10–12px — bump for readability and push to neon green */
.walk__cuetext{ font-size:0.84rem !important; color:var(--moss) !important; opacity:1 !important; }
.menu__eyebrow{ font-size:0.82rem !important; color:var(--moss) !important; }
.therapy__num{ font-size:1rem !important; color:var(--moss) !important; }
.journey__no{ color:var(--moss) !important; }
.rail a span{ font-size:0.78rem !important; color:var(--olive) !important; }
figcaption{ font-size:0.95rem !important; }
.gallery__item figcaption span, .gallery figcaption span{ color:var(--moss) !important; }
/* cites / fine print were dropping to ~55% — lift to clearly legible */
blockquote cite, .pcta__fine, .pcta cite, .footer__legal{ opacity:0.9 !important; }
.pcta__fine{ color:var(--moss) !important; font-size:0.82rem !important; }
/* a touch more neon green on accent words and key labels */
.therapies__lede strong, .composer__intro strong, .philosophy__text strong,
.founder__lede strong, .visit__intro strong{ color:var(--moss); }
.menu__list li b, .menu__price{ color:var(--moss); }

/* ---- form fields (text boxes): bigger text, readable green labels, visible placeholders ---- */
.visit__form label span{ font-size:0.86rem !important; letter-spacing:0.22em !important; color:var(--moss) !important; }
.visit__form input, .visit__form select, .visit__form textarea{ font-size:1.06rem !important; }
.visit__form input::placeholder, .visit__form textarea::placeholder,
.composer__card input::placeholder, .composer__card textarea::placeholder{ color:rgba(244,241,230,0.6) !important; }
.concierge__inputrow input{ font-size:1rem !important; }
.concierge__inputrow input::placeholder{ color:rgba(244,241,230,0.55) !important; }
/* the composer ("Tell us what your body is asking for") fields too */
.composer__card input, .composer__card select, .composer__card textarea{ font-size:1.06rem !important; }
.composer__card label span, .composer__field label{ font-size:0.86rem !important; color:var(--moss) !important; }

/* ---- Title Case: capitalize the first letter of every word in headings ---- */
h1, h2, h3, .walk__title, .walk__logo-headline, .phead h1, .pcta h2,
.pcare__title, .maa-aside__quote, .philosophy__statement, .panel-head{
  text-transform:capitalize;
}

/* ---- Cormorant runs thin at mid sizes — more weight on smaller headings for clinic authority ---- */
h3, .therapy__title, .therapies__item h3, .team__card h3, .faq__item summary,
.menu__heading, .practice h3, .cryo__title, .visit__title{ font-weight:600 !important; }

/* ---- tone the site flower watermark so it sits behind dense copy, not competes ---- */
.sacred{ opacity:0.11 !important; }

/* ---- nav brand wordmark: EWÎ (lime) + European Wellness Institute (bigger, purple) ---- */
.nav__brand{ display:flex !important; align-items:baseline; gap:0.55rem; text-decoration:none; }
.nav__mark{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; line-height:1; color:var(--moss); letter-spacing:0.01em; }
.nav__word{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; line-height:1; color:var(--purple); letter-spacing:0.005em; white-space:nowrap; }
.nav.is-solid .nav__word{ color:var(--purple); }
@media (max-width: 760px){ .nav__word{ display:none; } }

/* ---- chapter rail no longer overlaps copy: labels appear only on hover, rail hidden on narrower screens ---- */
.rail a span{ opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; pointer-events:none; }
.rail:hover a span{ opacity:1; transform:none; }
@media (max-width: 1300px){ .rail{ display:none !important; } }

/* ---- triple-tagline hero ---- */
.walk__title--triple .walk__word{ display:block; }

/* ---- FAQ closing note: "Concierge Meets High Performance" (from the brochure) ---- */
.faq__close{ max-width:62ch; margin:clamp(3.5rem,8vh,6rem) auto 0; text-align:center;
  border-top:1px solid rgba(199,221,46,0.22); padding-top:clamp(2.5rem,6vh,4rem); }
.faq__close .eyebrow{ justify-content:center; color:var(--moss); }
.faq__close h3{ font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.8rem,4vw,2.9rem); color:var(--ivory); margin:0.5rem 0 0.9rem; }
.faq__close p{ color:#E9E4D2; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.6; }

/* ---- unify ALL section + page head titles to one size ---- */
h2,
.philosophy__statement,
.cryo__title,
.phead h1,
.pcta h2{
  font-size:clamp(2.15rem, 4.6vw, 3.84rem) !important;
  line-height:1.08 !important;
}
/* keep the chat-widget heading small */
.concierge__head h2{ font-size:1.15rem !important; line-height:1.2 !important; }

/* ==========================================================================
   BIGGER BODY COPY + WIDER MEASURES — fill the page, readable for all ages
   ========================================================================== */
/* base body bump */
body{ font-size:clamp(1.09rem, 0.95rem + 0.56vw, 1.34rem) !important; }

/* widen the narrow text columns so copy fills the space */
.philosophy__text, .therapies__lede, .composer__intro, .team__intro,
.founder__text, .founder__lede, .team__lead, .pintro p{ max-width:72ch !important; }
.therapy__body p{ max-width:64ch !important; }
.faq__close{ max-width:70ch !important; }
.faq__answer p{ max-width:none !important; }

/* lift the actual paragraph sizes everywhere */
.philosophy__text p, .founder__text p, .founder__lede,
.therapy__body p, .therapies__lede, .journey__steps p,
.cryo__content p, .visit__panel p, .composer__intro,
.faq__answer p, .voices blockquote p, .team__bio, .team__lead,
.pintro p, .pcare__grid p, .practice__uses{
  font-size:clamp(1.04rem, 0.98rem + 0.35vw, 1.2rem) !important;
  line-height:1.62 !important;
}
/* technology page: Ankit's prose + lists a touch larger */
.practices .therapy__body p{ font-size:clamp(1.06rem, 0.98rem + 0.38vw, 1.24rem) !important; }
.menu__list li, .practice__science li{ font-size:1.06rem !important; }
.faq__close p{ font-size:clamp(1.08rem, 1.2vw, 1.24rem) !important; }
.phead__lede{ font-size:clamp(1.02rem, 0.98rem + 0.35vw, 1.22rem) !important; max-width:64ch !important; }

/* ---- composer card ("What is your body asking for?"): all text legible (was dark-on-dark) ---- */
.composer__options strong{ color:var(--ivory) !important; font-size:1.08rem !important; }
.composer__options span{ color:#D8D2BE !important; font-size:0.95rem !important; }
.composer__q, .composer__title{ color:var(--ivory) !important; }
.composer__steps p, .composer__steps h4, .composer__steps li,
.composer__note, .composer__eyebrow{ color:#E9E4D2 !important; }
.composer__steps b, .composer__title em{ color:var(--moss) !important; }
.composer__options button{ border-color:rgba(199,221,46,0.4) !important; }

/* ==========================================================================
   ANKIT NOTES (round 2) — global
   ========================================================================== */
/* remove the left chapter rail (it overlapped text) */
.rail{ display:none !important; }
main{ /* it no longer reserves rail space */ }

/* italics are hard to read — set everything upright */
em, i, cite, blockquote, blockquote p,
h1 em, h2 em, h3 em, .walk__word i, .walk__word--accent i,
.philosophy__statement em, .founder h2 em, .cryo__title em, .phead h1 em, .pcta h2 em,
.composer__intro, .maa-aside__quote, .voices blockquote p,
[class*="lede"], [class*="__field"], .pcare__title{ font-style:normal !important; }

/* fill the columns — larger body copy, tighter empty space */
p{ font-size:clamp(1rem, 0.95rem + 0.28vw, 1.15rem) !important; line-height:1.6 !important; }
.therapy__body p, .panel-body p, .founder__text p, .visit__panel p{ font-size:clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem) !important; }
.therapy__body, .founder__text{ max-width:none !important; }

/* AI chatbot paused (Ankit) — hide the concierge widget + launcher */
.concierge, #concierge, .concierge__launcher, .concierge__panel{ display:none !important; }

/* ---- equal nine-technology grid (home): all equal weight, no ranking ---- */
.tech-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(0.9rem,1.6vw,1.5rem); margin:clamp(2.5rem,6vh,4rem) 0 0; }
.tech-tile{ position:relative; display:block; overflow:hidden; border-radius:1in 1in 0.22in 0.22in; text-decoration:none; color:var(--ivory); box-shadow:inset 0 0 0 1px rgba(199,221,46,0.12); }
.tech-tile__media{ aspect-ratio:4/5; overflow:hidden; background:#13170B; }
.tech-tile__media img, .tech-tile__media video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-lux); }
.tech-tile:hover .tech-tile__media img, .tech-tile:hover .tech-tile__media video{ transform:scale(1.06); }
.tech-tile__name{ position:absolute; left:0; right:0; bottom:0; padding:2.4rem 1.1rem 1.05rem; font-family:var(--font-display); font-weight:500; font-size:clamp(1.05rem,1.35vw,1.35rem); line-height:1.15;
  background:linear-gradient(to top, rgba(10,12,7,0.92), rgba(10,12,7,0.5) 48%, transparent); }
@media (max-width:880px){ .tech-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .tech-grid{ grid-template-columns:1fr; } }