/* ==========================================================================
   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: none et non inset(0) : a 0 %, le clip decoupe quand meme
     l'ombre portee et dessine un rectangle visible autour du logo. */
  clip-path: none;
  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; }
/* meme raison : une fois le texte monte, l'overflow n'a plus d'utilite et
   il tranche net dans le halo du texte. */
body[data-state="ready"] .walk__logo-tag { overflow: visible; }

/* 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; }
body[data-state="ready"] .walk__logo-headline { overflow: visible; }
@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:linear-gradient(135deg,#171c0c 0%,#232c12 50%,#171c0c 100%); background-size:200% 200%; animation:tileShimmer 2.4s ease-in-out infinite; }
.tech-tile__media img, .tech-tile__media video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease-lux); }
@keyframes tileShimmer{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.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; } }
/* GUARANTEE: on phones the tech grid is always visible, independent of JS / scroll-reveal */
@media (max-width:880px){ .tech-grid.reveal{ opacity:1 !important; transform:none !important; } }

/* ==========================================================================
   PERF — smooth the scrolling treatment marquee for every device
   ========================================================================== */
/* GPU-composite the scrolling track so it never stutters on scroll */
.marquee__track{ will-change:transform; transform:translateZ(0); backface-visibility:hidden; }
/* the per-star ✦ twinkle repaints constantly — drop it (keeps the stars, static) */
.marquee__track i{ animation:none !important; }

/* perf: pre-tinted flower watermark — no per-frame CSS filter on the fixed layer */
.sacred{ background-image:url("../images/flower-lime.svg") !important; filter:none !important; }

/* ==========================================================================
   ANKIT (B11) — Founder bio: unify to one font at the larger (display) size
   ========================================================================== */
.founder__text p, .founder__lede{
  font-family: var(--font-display) !important;
  font-size: clamp(1.2rem, 1.06rem + 0.55vw, 1.55rem) !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   "A New Standard of Personalized Care" — benefits list
   ========================================================================== */
.journey .journey__lede{ margin-bottom: 1.6rem; color: #E9E4D2 !important; font-family: var(--font-display) !important; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem) !important; line-height: 1.35 !important; }
.care-list{
  list-style: none; display: grid; gap: 0.85rem;
  margin: 0 0 2.4rem; max-width: 60ch;
}
.care-list li{
  position: relative; padding-left: 1.7rem;
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem); line-height: 1.45;
  color: #E9E4D2;
}
.care-list li::before{
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--chartreuse);
}
.care-list li:nth-child(2){ transition-delay: 0.06s; }
.care-list li:nth-child(3){ transition-delay: 0.12s; }
.care-list li:nth-child(4){ transition-delay: 0.18s; }
.care-list li:nth-child(5){ transition-delay: 0.24s; }
.journey__close{ max-width: 62ch; color: #E9E4D2 !important; }
.journey__close strong{ color: var(--chartreuse); }

/* ==========================================================================
   Legal disclaimer — small print at the foot of every page
   ========================================================================== */
.footer__disclaimer{
  max-width: 78ch; margin: 1.1rem auto 0; padding: 0 var(--pad);
  font-size: 0.66rem !important; line-height: 1.55 !important; letter-spacing: 0.01em;
  color: rgba(233,228,210,0.42) !important; text-align: center;
}
.footer__credit{
  margin: 1rem auto 0; text-align: center;
  font-size: 0.72rem !important; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(233,228,210,0.5) !important;
}
.footer__credit a{ color: var(--moss); text-decoration: none; transition: color .3s var(--ease-lux); }
.footer__credit a:hover{ color: var(--chartreuse); }


/* ==========================================================================
   CORRECTIFS — retours client
   ========================================================================== */

/* Le bandeau defilant heritait du padding-top des grandes sections
   (clamp(5rem, 11vh, 8rem) !important), soit 89 px en haut contre 25 px en bas.
   Le texte n'etait donc pas centre entre les deux filets, et l'ecart avec le
   cadre au-dessus etait enorme. Ce n'est pas une section, c'est une bande. */
.marquee{
  padding-top: 1.15rem !important;
  padding-bottom: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  background-position: center top !important;
}
.marquee__track{
  align-items: center;
  line-height: 1;
}
.marquee__track span{ line-height: 1; }
.marquee__track i{ line-height: 1; position: relative; top: -0.04em; }

/* Espace entre le bouton "Book a consultation" et la ligne de tarification :
   les deux se touchaient presque. */
.pcta__book{ margin-bottom: 2.1rem; }
.pcta__fine{ margin-top: 0; }

/* Liens legaux en pied de page : exiges par l'operateur telephonique,
   c'est le premier endroit ou le verificateur A2P les cherche. */
.footer__legal-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.6rem;
  margin-top:0.6rem;
}
.footer__legal-links a{
  font-size:0.86rem; letter-spacing:0.02em; opacity:0.85;
  border-bottom:1px solid transparent;
}
.footer__legal-links a:hover{ opacity:1; border-bottom-color:currentColor; }